vue自定义指令的使用

import hasHelp from './hasHelp'  //导入写好的hasHelp函数

const install = function (Vue) {
  Vue.directive('hasHelp', hasHelp)  //设置指定名称，并且和函数相互绑定
}

if (window.Vue) {
  window['hasHelp'] = hasHelp
  Vue.use(install); 
}

export default install

import permission from './directive/permission'

Vue.use(permission)

export default {
    inserted(el, binding, vnode) {
        const { value } = binding; //指令传进来的值
        let button = document.createElement('button'); //创建按钮
        let text = document.createTextNode("帮助文档"); //一会给按钮加上名称
        let right = value[1] ? value[1] : 80 //按钮出现的水平位置
        let top = value[2] ? value[1] : 15 //按钮出现的垂直位置
        if (value && value instanceof Array && value.length > 0) {
            button.setAttribute("class", 'el-button el-button--warning el-button--mini') //给按钮加上elementUI样式
            button.setAttribute("style", `position: fixed; right: ${right}px; top: ${top}px; z-index: 999`) //给按钮加上其他样式
            button.onclick = function () { //给按钮加上点击事件
                window.open(value[0])
            }
            button.appendChild(text)
            if (value[0] !== 'false') {
                el.appendChild(button)
            }
        } else {
            throw new Error(`请按以下格式传值： v-hasHelp="[ 跳转网址, right(默认80), top(默认15) ]"`)
        }
    }
}

  <xxx(组件标签)
    v-hasHelp="'www.baidu.com'"
  ></xxx(组件标签)>