vue自定义指令的使用

2022-08-23 16:03:16 阅读：185 来源： 互联网

标签：el vue 自定义 button Vue value 指令按钮 hasHelp

1、背景：想通过自定义指令v-hasHelp控制页面右上角是否出现帮助按钮，点击按钮可以跳转外部链接。用自定义指令的目的是方便。

2、先在自己的项目中注册使用hasHelp

index.js

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

main.js

import permission from './directive/permission'

Vue.use(permission)

3、写好的hasHelp

hasHelp.js

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) ]"`)
        }
    }
}

4、使用自定义指令

所在页面代码

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

标签：el,vue,自定义,button,Vue,value,指令,按钮,hasHelp
来源： https://www.cnblogs.com/loveniko/p/16616553.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue自定义指令的使用