Vue.directive('mymodel', {
        //只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
        bind(el, binding, vnode, oldVnode) {
        },
        //被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被 插入文檔中),需要父節(jié)點(diǎn)dom時(shí)使用這個(gè)鉤子
        inserted(el, binding, vnode, oldVnode) {
        },
        //所在組件的 VNode 更新時(shí)調(diào)用，**但是可能發(fā)生在其子 VNode 更新之前**。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。
        update(el, binding, vnode, oldVnode) {
        },
        //指令所在組件的 VNode **及其子 VNode** 全部更新后調(diào)用。
        componentUpdated(el, binding, vnode, oldVnode) {
        },
        只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
        unbind(el, binding, vnode, oldVnode) {
        },
})

Vue.directive('mymodel', {
        //只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
        bind(el, binding, vnode, oldVnode) { 
        }
})

//第一步，添加inout事件監(jiān)聽(tīng)
el.addEventListener('input', (e) => {
   //context是input所在的父組件，這一步是同步數(shù)據(jù)
   vnode.context[binding.expression] = e.target.value;
})
//監(jiān)聽(tīng)綁定的變量
vnode.context.$watch(binding.expression, (v) => {
     el.value = v;
})

<input v-mymodel='message'/>

//監(jiān)聽(tīng)綁定的變量
vnode.context.$watch(binding.expression, (v) => {
     el.value = v;
})

Vue.directive('mymodel', {
        //只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
        bind(el, binding, vnode, oldVnode) {
           //原生input組件的處理
           if(vnode.tag==='input'){
                //第一步，添加inout事件監(jiān)聽(tīng)
                el.addEventListener('input', (e) => {
                   //context是input所在的父組件，這一步是同步數(shù)據(jù)
                   vnode.context[binding.expression] = e.target.value;
                })
                //監(jiān)聽(tīng)綁定的變量
                vnode.context.$watch(binding.expression, (v) => {
                     el.value = v;
                })
           }else{//組件

???????           }
        }
})

//vnode的結(jié)構(gòu)可以參見(jiàn)文檔。不過(guò)我覺(jué)得最直觀的方法就是直接在控制臺(tái)打印處理
let {
    componentInstance,
    componentOptions,
    context
} = vnode;
const {
   _props
} = componentInstance;
//處理model選項(xiàng)
if (!componentOptions.Ctor.extendOptions.model) {
  componentOptions.Ctor.extendOptions.model = {
        value: 'value',
        event: 'input'
  }
}
let modelValue = componentOptions.Ctor.extendOptions.model.value;
let modelEvent = componentOptions.Ctor.extendOptions.model.event;
//屬性綁定，這里直接修改了屬性，沒(méi)有想到更好的辦法，友好的意見(jiàn)希望可以提出
_props[modelValue] = binding.value;
context.$watch(binding.expression, (v) => {
     _props[modelValue] = v;
})
//添加事件處理函數(shù),做數(shù)據(jù)同步
componentInstance.$on(modelEvent, (v) => {
     context[binding.expression] = v;
})

//定義權(quán)限類(lèi)型
const permissionType = {
    ROLE: 'role',
    CURRENTUSER:'currentUser',
    BUSSINESSSTATUS: 'bussinessStatus',
    MIX_EVERY: 'every',
    MIX_SOME: 'some'
}
export default {
    //只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用
    bind: function () {
    },
    //當(dāng)前vdom插入到真實(shí)dom時(shí)，因?yàn)槭菍?duì)dom的樣式操作，在這里操作
    inserted: function (el, binding) {
        let show = false;
        show=processingType(binding.arg,binding.value); 
        el.style.display = `${show ? 'inline-block' : 'none'}`
    },
    //所在組件的VNode更新時(shí)調(diào)用，狀態(tài)更新后需要更新顯示狀態(tài)
    update: function (el, binding) {
        //避免無(wú)效的模板更新
        if(binding.value===binding.oldValue) return;
        let show = false;
        show=processingType(binding.arg,binding.value); 
        el.style.display = `${show ? 'inline-block' : 'none'}`
    },
    //指令所在組件的 VNode 及其子 VNode 全部更新后
    componentUpdated: function (el, binding) {
    },
    unbind: function () {
    },
}
//處理不同類(lèi)型的權(quán)限控制
function processingType(type,value){
    let values=[];
    switch (type) {
        case permissionType.ROLE:
            return permissionByRole(value);
        case permissionType.CURRENTUSER:
            return permissionCreater(value);
        case permissionType.BUSSINESSSTATUS:
            return permissionBusinessStatus(value);
        case permissionType.MIX_EVERY:
            for(let type in value){
                values.push(processingType(type,value[type]))
            }
            return values.every(v=>{
                return v;
            })
        case permissionType.MIX_SOME:
            for(let type in value){
                values.push(processingType(type,value[type]))
            }
            return values.some(v=>{
                return v;
            })
        default:
            return false;
    }
}
//業(yè)務(wù)狀態(tài)判斷
function permissionBusinessStatus(bindingValue){
   return bindingValue.status==bindingValue.value;
}
//當(dāng)前用戶(hù)？
function permissionCreater(bindingValue){
    const userInfo = JSON.parse(sessionStorage.CDTPcookie);
    // console.log(userInfo.userInfo.id,bindingValue)
    if(bindingValue instanceof Array){
        return bindingValue.some(v=>{
            return userInfo.userInfo.id==v;
        })
    }
    return userInfo.userInfo.id==bindingValue;
}
//角色控制
export function permissionByRole(bindingValue) {
    //這里也可以是store里的用戶(hù)信息
    const userInfo = JSON.parse(sessionStorage.userInfo);  
    let roles = []
    if (userInfo) {
        roles = userInfo.roleList
    }
    let show = false;
    if (bindingValue instanceof Array) {
        return roles.some(role => {//多角色處理
            return bindingValue.some(item => {
                return role.roleCode === item
            })
        })
    } else if (typeof bindingValue == 'string') {
        show = roles.some(role => {
            return role.roleCode === bindingValue;
        })
    }
    return show;
}

//角色權(quán)限
<component v-permission:role='leader'></component>
//判斷當(dāng)前登錄人
<component v-permission:currentUser='orderInfo.createUser'></component>
//判斷業(yè)務(wù)狀態(tài)
<component v-permission:bussinessStatus='{status:orderStatus.RUNNING,value:orderInfo.status}'></component>
//角色是leader或者是當(dāng)前訂單的創(chuàng)建者,有權(quán)限
<component v-permission:some="{role:'leader',currentUser:'orderInfo.createUser'}"></component>
//角色是leader并且是當(dāng)前訂單的創(chuàng)建者,有權(quán)限
<component v-permission:every="{role:'leader',currentUser:'orderInfo.createUser'}"></component>

export default {
    inserted: function (el, binding, vnode) {
        el.addEventListener('input', function (e) {
            if (binding.arg == 'toFixed') {
                //限制輸入n位小數(shù)點(diǎn)
                toFiexd(e.target, vnode, binding.value)
            } else {
                //限制數(shù)字輸入
                Integer(e.target, vnode)
            }
        })
    },
}
function toFiexd(target, vnode, v) {
    console.log(v);
    let ln = 2;
    if (v) {
        ln = v;
    }
    var regStrs = [
        ['^0(\\d+)$', '$1'], //禁止錄入整數(shù)部分兩位以上，但首位為0
        ['[^\\d\\.]+$', ''], //禁止錄入任何非數(shù)字和點(diǎn)
        ['\\.(\\d?)\\.+', '.$1'], //禁止錄入兩個(gè)以上的點(diǎn)
        ['^(\\d+\\.\\d{' + ln + '}).+', '$1'] //禁止錄入小數(shù)點(diǎn)后兩位以上
    ];
    for (var i = 0; i < regStrs.length; i++) {
        var reg = new RegExp(regStrs[i][0]);
        target.value = target.value.replace(reg, regStrs[i][1]);
    }
    //對(duì)于封裝的像el-input組件，因?yàn)槠湫枰ㄟ^(guò)input事件同步狀態(tài)
    if(vnode.componentInstance){
      vnode.componentInstance.$listeners.input(target.value)
    }
}
function Integer(target, vnode) {
    let valueStr = target.value
    if (valueStr.length == 1) {
        //第一個(gè)數(shù)字不為0
        valueStr = valueStr.replace(/[^0-9]/g, "");
    } else {
        //只能輸入正整數(shù)
        valueStr = valueStr.replace(/\D/g, "");
    }
    target.value = valueStr;
    if(vnode.componentInstance){
      vnode.componentInstance.$listeners.input(target.value)
    }
}

vnode.componentInstance.$listeners.input(target.value)

<!-- 限制輸入兩位小數(shù)數(shù)字 -->
<input v-input:toFixed="2"/>
<!-- 限制輸入正整數(shù) -->
<el-input v-input:integer/>

export default {
    bind:function(){
    },
    inserted:function(el,binding){
        dealContent(el,binding)
    },
    update:function(el,binding){
        dealContent(el,binding)
    },
    componentUpdated:function(){
    },
    unbind:function(){
    },
}
function dealContent(el,binding){
   const {arg}=binding;
   if(arg=='empty'){
       if(!el.textContent){//空值顯示
            el.textContent=binding.value||'暫無(wú)數(shù)據(jù)';
        }
   }else if(arg=='money'){//金額千分位逗號(hào)分割，如10000000顯示為100,000,00
        if (binding.value) {
            el.textContent = dealMoney(binding.value);
        }else {
            el.textContent = dealMoney(el.textContent);
        }
   }
}

//金額處理
export function dealMoney(money, places = 2) {
    const zero = `0.00`;
    if (isNaN(money) || money === '') return zero;
    if (money && money != null) {
        money = `${money}`;
        let left = money.split('.')[0]; // 小數(shù)點(diǎn)左邊部分
        let right = money.split('.')[1]; // 小數(shù)點(diǎn)右邊
        // 保留places位小數(shù)點(diǎn)，當(dāng)長(zhǎng)度沒(méi)有到places時(shí)，用0補(bǔ)足。
        right = right ? (right.length >= places ? '.' + right.substr(0, places) : '.' + right + '0'.repeat(places - right.length)) : ('.' + '0'.repeat(places));
        var temp = left.split('').reverse().join('').match(/(\d{1,3})/g); // 分割反向轉(zhuǎn)為字符串然后最多3個(gè)，最少1個(gè)，將匹配的值放進(jìn)數(shù)組返回
        return (Number(money) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right; // 補(bǔ)齊正負(fù)號(hào)和貨幣符號(hào)，數(shù)組轉(zhuǎn)為字符串，通過(guò)逗號(hào)分隔，再分割（包含逗號(hào)也分割）反向轉(zhuǎn)為字符串變回原來(lái)的順序
    } else if (money === 0) {
        return zero;
    } else {
        return zero;
    }
}

<span v-content:empty="'無(wú)'">{{message}}</span>
<!-- 金額千分位逗號(hào)分割 -->
<span v-content:money>100000</span>

import {isOffic,isPdf,isImage} from '@/utils/base'
import {previewWithOffice} from '@/utils/fileUtils.js'
export default {
    inserted:function(el,binding){
        el.onclick=function(e){
            let params = binding.value
            if(isOffic(params.name)){
                e.preventDefault()
                e.stopPropagation()
                previewWithOffice(params.url)//使用office在線(xiàn)預(yù)覽打開(kāi)
            }else if(isPdf(params.name) || isImage(params.name)){
                e.preventDefault()
                e.stopPropagation()
                if(params.url){//直接打開(kāi)url
                    previewFile(params)
                }
            }
        }
    },
    //指令所在組件的 VNode 及其子 VNode 全部更新后
    componentUpdated: function (el, binding) {
        el.onclick=function(e){
            let params = binding.value
            if(isOffic(params.name)){
                //使用插件預(yù)覽Office文件
                e.preventDefault()
                e.stopPropagation()
                previewWithOffice(params.url)
            }else if(isPdf(params.name) || isImage(params.name)){
               //預(yù)覽圖片和pdf等能直接打開(kāi)的文件
                e.preventDefault()
                e.stopPropagation()
                previewFile(params)
            }
        }
    },
    unbind(el){
       el.onclick=null;
    }
}
//預(yù)覽圖片和pdf等能直接打開(kāi)的文件
function previewFile(params) {
    let a = document.createElement("a");
    a.download = params.name
    a.href = params.url;
    a.target = "_blank";
    a.click();
    a = null;
}

<!-- 預(yù)覽圖片 -->
<image :src='url' v-preview="{name:file.name,url:file.url}"></image>
<!-- 預(yù)覽文件 -->
<span v-preview="{name:file.name,url:file.url}">{{file.name}}</span>