ssPlus基础组件文档

Appearance

Return to top
On this page

按钮组件(内置防抖功能)

基础用法

输入防抖时间：
继承el-button所有属性
新增time属性（多少时间内点击；默认 1 秒）
<template>
  <t-layout-page class="t_button_demo">
    <t-layout-page-item>
      <div style="display:flex;align-items: center;">
        <div style="width:140px;font-weight:700;">输入防抖时间：</div>
        <el-input-number
          style="width:240px;"
          v-model="time"
          placeholder="请输入防抖时间（毫秒）"
          :min="1000"
          :max="10000"
          :controls="false"
          @change="handleChange"
        />
      </div>
      <t-button
        style="margin-top:15px;"
        color="#626aef"
        :time="time"
        @click="exportExcel"
        >导出</t-button
      >
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const time = ref(1000)
const handleChange = (val) => {
  console.log('输入框的值：', val)
}
const exportExcel = () => {
  console.log('点击事件')
}
</script>

<template>
  <t-layout-page class="t_button_demo">
    <t-layout-page-item>
      <div style="display:flex;align-items: center;">
        <div style="width:140px;font-weight:700;">输入防抖时间：</div>
        <el-input-number
          style="width:240px;"
          v-model="time"
          placeholder="请输入防抖时间（毫秒）"
          :min="1000"
          :max="10000"
          :controls="false"
          @change="handleChange"
        />
      </div>
      <t-button
        style="margin-top:15px;"
        color="#626aef"
        :time="time"
        @click="exportExcel"
        >导出</t-button
      >
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const time = ref(1000)
const handleChange = (val) => {
  console.log('输入框的值：', val)
}
const exportExcel = () => {
  console.log('点击事件')
}
</script>