需求
類似一個后臺管理的web端項目昭齐，點擊刪除的時候，刪除按鈕會變成確定券腔，如下圖。但是在點其他地方的時候需要去除確定功能拘泞，恢復(fù)成刪除功能纷纫。
image.png
該項目是用render函數(shù)來創(chuàng)建html的，代碼如下：
tableAction: {
title: '操作',
key: 'action',
fixed: 'right',
minWidth: 130,
render: (h, params) => {
return h('div', {
'class': 'm-my-1 m-ta-c',
}, [
h('Button', {
props: {
type: 'info',
size: 'small',
ghost: true,
},
'class': 'm-mr-2',
on: {
click: () => {
this.kg_tag_edit(params.index)
}
}
}, '修改'),
h('Button', {
props: {
type: 'error',
size: 'small',
ghost: this.tag.delete_item === params.index ? false : true,
},
directives: [{
// name:'clickaway',
// value:this.away,
name:'clickoutside',
value:this.handleClose,
expression: '1 + 1',
}],
on: {
click: () => {
if (this.tag.delete_item !== params.index) {
this.tag.delete_item = params.index
} else {
this.kg_tag_del(this.tag.query.items[this.tag.delete_item].id)
}
},
}
}, this.tag.delete_item === params.index? '確定' : '刪除'),
]);
}
},
方法一：vue-clickaway
API網(wǎng)址：https://www.npmjs.com/package/vue-clickaway
安裝：npm install vue-clickaway --save
1.在main.js里面全局引入：
import { directive as clickaway } from 'vue-clickaway';
Vue.directive('clickaway', clickaway)
2.在需求模塊的js中定義:
directives: [{
name:'clickaway', //名稱
value:this.away,}] // 方法
3.在methods里面定義away的方法：
away(e){
if (e.target.innerHTML == '刪除') {
return
} //通過判斷點擊目標的內(nèi)容來判斷
this.tag.delete_item = -1
},
覺得只是判斷innerHTML不太嚴謹陪腌，所以給這個button加了個id辱魁，但是由于這個刪除是button下面的span，所以有了以下又丑又長的獲取id的代碼（如果有好的方法偷厦，麻煩告知一下商叹，感謝）：
1.在render - h下面加：
attrs:{
id:'delete_btn'
},
if(e.target.innerHTML=='刪除'||$(e.target).parents()[0].id=='delete_btn'){
return
}
this.tag.delete_item=-1
方法二：自定義指令：clickoutside
1.在main.js里面定義以下：
Vue.directive('clickoutside',{
bind(el,binding,vnode){
function documentHandler(e){
if(el.contains(e.target)){
return false
}
if(binding.expression){
binding.value(e)
}
}
el._vueClickOutside_=documentHandler
document.addEventListener('click',documentHandler)
},
unbind(el,binding){
document.removeEventListener('click',el._vueClickOutside_);
delete el._vueClickOutside_;
}
})
2.在需求模塊的js中定義:
directives: [{
name:'clickoutside',
value:this.handleClose, //方法
expression: '1 + 1', //隨便寫的
}],
3.定義方法如下：
handleClose(e){
if(e.target.innerHTML=='刪除'||$(e.target).parents()[0].id=='delete_btn'){
return
}
this.tag.delete_item=-1
},
