需求

类似一个后台管理的web端项目，点击删除的时候，删除按钮会变成确定，如下图。但是在点其他地方的时候需要去除确定功能，恢复成删除功能。

image.png

该项目是用render函数来创建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网址：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
            }  //通过判断点击目标的内容来判断
            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 
        },