export default {
    bind (el, binding, vnode) {
        function documentHandler (e) {
        // el 包含其觸發(fā)的元素 那當(dāng)然不能觸發(fā)啦
            if (el.contains(e.target)) {
                return false;
            }
            // 滿足上面條件， 并且expression 的值不為空 觸發(fā)（希望value是個(gè)函數(shù)）
            if (binding.expression) {
            	//	調(diào)用自定義指令傳來的函數(shù)，e是事件原對(duì)象 作為參數(shù)（為什么傳e 因?yàn)橛行┣闆r需要把這個(gè)對(duì)象拋出方便用戶的操作）
                binding.value(e);
            }
        }
        // 嗯？？？ 這么寫有什么作用嗎？ 當(dāng)然有了，如果你想取消事件的監(jiān)聽，那么是不是需要這個(gè)函數(shù)。
        el.__vueClickOutside__ = documentHandler;
        // 在document上監(jiān)聽事件
        document.addEventListener('click', documentHandler);
    },
    update () {
    },
    unbind (el, binding) {
    // 取消事件監(jiān)聽（el.__vueClickOutside 派上用場(chǎng)了吧）
        document.removeEventListener('click', el.__vueClickOutside__);
        // 既然都取消了 那么這個(gè)屬性就沒必要存在了
        delete el.__vueClickOutside__;
    }
};

<template>
? <div class="testPage">
? ? ? ?<div class="block" @click="onShow" v-click-outside="closeDialog">111</div>
? ? ? ?<div class="show" v-if="flag">QQQQQQQQQQ</div>
? ? ? ?<!-- <input v-focus> -->
? ? ? ?<!-- <el-input v-focus type="text" /> -->
? ? ? ?<!-- <div v-click-outside="closeDialog">222</div> -->
? </div>
</template>

<script>
// import global from '../common/global';
?
export default {
? data() {
? ? return {
? ? ? flag:false,
? ? ? list:[{id:'1',name:'張三',seen:false},{id:'2',name:'李四',seen:false}],
? ? ? /* input11: '',
? ? ? numberValidateForm: {
? ? ? ? ? age: 0,
? ? ? ? ? height: '175'
? ? ? ? },
? ? ? ? rules_V: {
? ? ? ? ? height: [{ validator: validateHeight, trigger: 'blur' }]
? ? ? ? } */
? ? };
? },
?
? components: {},
? created() {},
? methods: {
? ? onShow(){
? ? ? this.flag=true;
? ? },
? ? closeDialog(){
? ? ? ?this.flag=! this.flag;
? ? },
? ? ?handleIconClick(ev) {
? ? ? ?window.open('https://www.baidu.com/','_self');
? ? },
? ? onClick(item,index){
? ? ? console.log(item,index)
? ? ? // console.log(this.list)
? ? ? item.seen=true;
? ? ? this.$set(this.list,index,item);
? ? ? console.log(this.list)
? ? }
? }
? ,
? directives: {
? clickOutside : {
? bind(el, binding, vnode) {
? ? function clickHandler(e) {
? ? ? if (el.contains(e.target)) {
? ? ? ? return false;
? ? ? }
? ? ? if (binding.expression) {
? ? ? ? binding.value(e);
? ? ? }
? ? }
? ? el.__vueClickOutside__ = clickHandler;
? ? document.addEventListener('click', clickHandler);
? },
? update() {},
? unbind(el, binding) {
? ? document.removeEventListener('click', el.__vueClickOutside__);
? ? delete el.__vueClickOutside__;
? },
? }
}
};
</script>

<style lang="less" scoped>
.testPage {
? width: 100%;
? height: 100%;
? .el-input--width{
? ? border-radius: 20px;
? ? width: 100px;
? }
? .block{
? ? width: 100px;
? ? height: 100px;
? ? background-color: #f90;
? }?
}
</style>