关于网站建设的建议征集,网站制作排行榜,省住房与城乡建设厅网站,购物网站 app在做项目过程中#xff0c;需求是点击孔位单击弹出对话框查看产品总数#xff0c;双击弹出对话框查看详情。一开始直接click和dblclick写在标签里面#xff0c;但是不管怎么样#xff0c;总是执行单击事件 解决办法#xff1a;利用计时器#xff0c;在大概时间模拟双击事…在做项目过程中需求是点击孔位单击弹出对话框查看产品总数双击弹出对话框查看详情。一开始直接click和dblclick写在标签里面但是不管怎么样总是执行单击事件 解决办法利用计时器在大概时间模拟双击事件 html部分代码 div classgrid-contentel-button v-for(item,index) in items :keyindex clickstorageCount(item.id) dblclick.nativestorageDetail(item.id) classinline-cell :classcolors[item.status]{{item.id}}/el-button/div .native主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。 官方对.native修饰符的解释为有时候你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native js部分代码 script
import desDialog from ./dialog;
import detailDialog from ./detailDialog;var time null; // 在这里定义time 为null
export default {name: storeTable,components: {desDialog,detailDialog},props: [providerid],data() {return {colors: [space, isBuy],showDialog: false,showDialogT: false};},methods: { // 单击事件函数storageCount(id) { clearTimeout(time); //首先清除计时器time setTimeout(() {this.showDialog !this.showDialog; const obj {};obj.cutname id;obj.providerid this.providerid;this.$store.dispatch(GetStorageCount, obj); }, 300); //大概时间300ms}, // 双击事件函数清除计时器直接处理逻辑storageDetail(id) { clearTimeout(time); //清除this.showDialogT !this.showDialogT;const obj {};obj.cutname id;obj.providerid this.providerid;this.$store.dispatch(GetStorageDetail, obj);},close() {this.showDialog false;},closeT() {this.showDialogT false;}}
};
/script 转载于:https://www.cnblogs.com/feng-xl/p/9375992.html
