需求：
连续点击宽高时，只执行鼠标最后一次放开时点击方法。
<template>
<div class="layer-box">
<el-form-item
label="图表容器大小"
>
宽:
<el-input
type="number"
v-model="container.width"
:disabled="container.disabled"
:min="0"
:max="500"
>
</el-input>
高:
<el-input
type="number"
v-model="container.height"
:disabled="container.disabled"
:min="0"
:max="500"
>
</el-input>
</el-form-item>
</div>
</template>
<script>
export default {
data() {
return {
container: {
width: 100,
height: 100,
disabled: false
},
watch: {
"container.width": {
deep: true,
handler(newVal, oldVal) {
if(newVal!==oldVal){
this.debounce(this.changecontainer, 1000);
}
}
},
"container.height": {
deep: true,
handler(newVal, oldVal) {
if(newVal!==oldVal){
this.debounce(this.changecontainer, 1000);
}
}
}
},
methods: {
// 改变图表容器 这种形式的函数 防抖才生效
changecontainer: function() {
this.container={
width:Number(this.container.width),
height:Number(this.container.height)
}
//this.changTX() 要执行的方法
},
debounce: function(fn, wait) {
if (this.fun !== null) {
clearTimeout(this.fun);
}
this.fun = setTimeout(fn, wait);
},
}
}
</script>
