在某些特定的业务场景,既需要通过点击文本弹出详情,又要可以选中文本进行复制,但是单纯添加点击事件,在选中文本时也会触发点击事件
如下例 在table中 点击流水号 弹出订单详情 ,但是还要可以复制流水号
<el-table-column
prop="serialNumber"
show-overflow-tooltip
label="流水号"
min-width="170">
<template slot-scope="scope">
<el-link type="primary" @click="orderInfo(scope.row)">{
{scope.row.serialNumber}}</el-link>
</template>
</el-table-column>
解决方案:
只需要在点击事件中判断当前是否有选中文本, 如果未选中文本就执行弹出弹窗,选中则不做任何操作
orderInfo(row){
if (window.getSelection().toString() === '') {
this.orderInfo = row;
this.dialogOrderInfo = true;
}
},