2024-07-12 18:30:09 +08:00
|
|
|
|
<template>
|
2024-07-13 18:47:45 +08:00
|
|
|
|
<div class="dc-page">
|
|
|
|
|
|
<div class="my-page">
|
|
|
|
|
|
<div class="title">自定义节流指令,连续点击按钮,每间隔1s执行一次</div>
|
|
|
|
|
|
<div class="button-box">
|
|
|
|
|
|
<a-button type="primary" style="width: 100px" v-throttle="onClick">1s节流</a-button>
|
|
|
|
|
|
</div>
|
2024-07-12 18:30:09 +08:00
|
|
|
|
</div>
|
2024-07-13 18:47:45 +08:00
|
|
|
|
</div>
|
2024-07-12 18:30:09 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
2024-07-13 18:47:45 +08:00
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { Message } from "@arco-design/web-vue";
|
|
|
|
|
|
const onClick = () => {
|
2024-07-14 19:29:43 +08:00
|
|
|
|
Message.success("节流执行了");
|
2024-07-13 18:47:45 +08:00
|
|
|
|
};
|
|
|
|
|
|
</script>
|
2024-07-12 18:30:09 +08:00
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2024-07-13 18:47:45 +08:00
|
|
|
|
.title {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
color: $color-text-1;
|
|
|
|
|
|
font-size: $font-size-title-1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.button-box {
|
|
|
|
|
|
height: 100px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
2024-07-12 18:30:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
</style>
|