vue自定义指令的使用

2022/8/23 23:22:47

编程Tag： vue 按钮自定义 button value 指令 el hasHelp

本文主要是介绍vue自定义指令的使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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(组件标签)>

这篇关于vue自定义指令的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

vue自定义指令的使用

相关编程文章