vue给同一元素绑定单击click和双击事件dblclick,执行不同逻辑
原博:https://www.cnblogs.com/feng-xl/p/9375992.html 在做项目过程中,需求是点击孔位单击弹出对话框查看产品总数,双击弹出对话框查看详情。一开始直接click和dblclick写在标签里面,但是不管怎么样,总是执行单击事件解决办法:利用计时器,在大概时间模拟双击事件html部分代码:<div class="grid-con...
·
原博:https://www.cnblogs.com/feng-xl/p/9375992.html
在做项目过程中,需求是点击孔位单击弹出对话框查看产品总数,双击弹出对话框查看详情。一开始直接click和dblclick写在标签里面,但是不管怎么样,总是执行单击事件
解决办法:利用计时器,在大概时间模拟双击事件
html部分代码:
<div class="grid-content">
<el-button
v-for="(item,index) in items" :key="index"
@click="storageCount(item.id)"
@dblclick.native="storageDetail(item.id)"
class="inline-cell"
:class="colors[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>
<div class="dialog-select-app">
<el-dialog title="应用列表" :visible.sync="dialogSelectVisible">
<div>
<div class="content-tool">
<div class="content-row content-row--tool content-row--tool-first">
<div class="content-tool--nav" style="width: 70%;">
<div class="content-tool--title fl" style="float: left;">应用名称</div>
<el-input
placeholder="请输入应用名称搜索"
icon="search"
@keyup.13.native="searchList"
v-model.trim="search"
:on-icon-click="getDataPage"
class="content-tool--input fl">
</el-input>
</div>
<div class="content-tool--nav" style="width: 30%; float: right;">
<div class="content-tool--operate fl">
<el-button type="primary" class="content-tool--qry el-button-reset fl" @click="searchList">查询</el-button>
<el-button class="content-tool--reset el-button-reset fl" @click="rest">重置</el-button>
</div>
</div>
</div>
</div>
<div class="table">
<el-table :data="appListData" v-loading="appListLoading" highlight-current-row @current-change="handleCurrentChange" @cell-dblclick ="confirmApp">
<el-table-column property="appName" label="应用名称"></el-table-column>
<el-table-column property="appKind" label="应用类型" width="200">
<template slot-scope="scope">
<el-tag v-show="scope.row.appKind === 0">Android|iOS</el-tag>
<el-tag v-show="scope.row.appKind === 1" type="success">HTML5</el-tag>
<el-tag v-show="scope.row.appKind === 3" type="primary">ExMobi</el-tag>
</template>
</el-table-column>
</el-table>
</div>
<div class="block">
<el-pagination
@current-change="getAdminCurrentPageList"
:current-page.sync="pageNum"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="allDataTotal">
</el-pagination>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogSelectVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmApp">确 定</el-button>
</div>
</el-dialog>
</div>
//这个方法是用来选中该条数据,手动再去点击确认按钮
handleCurrentChange(obj) {
this.selectAppObj = obj;
},
//确认按钮方法
confirmApp() {
if (!this.selectAppObj.appId) {
this.$message({
message: '请选择应用!',
type: 'error',
});
return;
}
apiCase.calculateNumByAppId({
params: {
params: {
appId: this.selectAppObj.appId,
},
},
}).then((data) => {
if (data.state === 0) {
const number = data.data;
if (number >= 4) {
this.$message({
message: '同一个应用案例最多为4个',
type: 'error',
});
} else {
this.form.appId = this.selectAppObj.appId;
this.form.appZone = this.selectAppObj.appZone;
this.form.appKind = this.selectAppObj.appKind;
this.form.appName = this.selectAppObj.appName;
this.$refs.appNameForm.clearValidate();
this.dialogSelectVisible = false;
}
}
}).catch((err) => {
this.$message({
message: err.response.message,
type: 'error',
});
});
},
双击确认事件@cell-dblclick 也可以写成@row-dblclick
更多推荐
已为社区贡献2条内容
所有评论(0)