优化操作

# 防抖

v-as-debounce表示防抖指令。参数如下

参数	类型	必填	说明
fn	function	是	传一个回调方法,在回调方法中写想执行的如何操作
event	string	是	事件类型，如click,input等事件
time	number	否	延迟时间,如在该时间段内又执行了相应操作,则重新等待300ms，直到过了300ms才执行某操作。默认值为300,单位ms

代码如下:

<template>
  <div class="t-debounce-area">
    <button v-as-debounce="{fn: debounceClick, event: 'click', time: 200}">防抖</button>
  </div>
</template>

<script>
export default {
  name: "t-debounce",
  data () {
    return {
    }
  },
  methods: {
    debounceClick() {
      console.log('点击');
    }
  }
}
</script>

<style>
.t-debounce-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t-debounce-area>button{
  background-color: dodgerblue;
  border-radius: 3px;
  width: 100px;
  height: 40px;
  outline: none;
  border: none;
  color: #ffffff;
}
</style>

Copy

# 节流

v-as-throttle表示节流指令。参数如下:

参数	类型	必填	说明
fn	function	是	传一个回调方法
time	number	否	延迟时间,确保每300ms时间段内,只执行一次某个具体的操作。默认值为300,单位ms

代码如下:

<template>
  <div class="t-throttle-area">
    <button v-as-throttle="{fn: throttleClick,time:1000}">节流</button>
  </div>
</template>

<script>
export default {
  name: "t-throttle",
  data () {
    return {
    }
  },
  methods: {
    throttleClick() {
      console.log('点击');
    }
  }
}
</script>

<style>
.t-throttle-area{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.t-throttle-area>button{
  background-color: dodgerblue;
  border-radius: 3px;
  width: 100px;
  height: 40px;
  outline: none;
  border: none;
  color: #ffffff;
}
</style>

Copy