【ADD】button新增防抖节流模式+附带案例

This commit is contained in:
zhengliming
2023-12-10 12:46:45 +08:00
parent 0564dcd88a
commit 733e71862a
3 changed files with 376 additions and 293 deletions

View File

@@ -14,7 +14,7 @@
<demo-title title="大小">
<view>
<tn-button size="sm" margin="10rpx 10rpx">按钮</tn-button>
<tn-button size="sm" margin="10rpx 10rpx" >按钮</tn-button>
<tn-button margin="10rpx 10rpx">按钮</tn-button>
<tn-button size="lg" margin="10rpx 10rpx">按钮</tn-button>
<tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
@@ -77,6 +77,11 @@
<demo-title title="禁止点击">
<tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
</demo-title>
<demo-title title="防抖节流(默认间隔200ms,这里用1s)">
<tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了防抖')" :blockTime="1000" scene="debounce">防抖模式</tn-button>
<tn-button width="100%" height="100rpx" margin="10rpx 0" @click="say('点击了节流')" :blockTime="1000" scene="throttle">节流模式</tn-button>
</demo-title>
<view class="tn-padding-bottom-lg"></view>
@@ -97,6 +102,10 @@
}
},
methods: {
say(msg){
this.$tn.message.toast(msg)
},
}
}
</script>