首页 > 其他分享 >vue3 directive自定义指令

vue3 directive自定义指令

时间:2023-04-01 23:44:49浏览次数:54  
标签:el 自定义 directive permission app directives vue3 store

import store from '../store'
// 新建js
export default {
install(app) {
// 权限控制, 没有相关的权限, 则删除模块
app.directive('permission', {
mounted(el, val) {
if(el && !store.state.rule.includes(val.value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
})
}
}


main.js
import directives from './directives'
app.use(directives)


组件里使用
<section v-permission="'1234'">
permission--permission
</section>

标签:el,自定义,directive,permission,app,directives,vue3,store
From: https://www.cnblogs.com/anans/p/17279709.html

相关文章

  • Vue3学习笔记(7.0)
    Vue3计算属性计算属性关键词:computed计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符的例子:<!--*@Author:[email protected]*@Date:2023-03-3008:30:35*@LastEditors:Mei*@LastEditTime:2023-03-3008:33:36*@FilePath:\vscode\vue_co......
  • Vue3学习笔记(4.0)
    vue.js为两个最为常用的指令提供了特别的缩写://全称<av-bind:href="url"></a>//缩写<a:href="url"></a>v-on缩写//全称<av-on:click="doSomething"></a>//缩写<a@click="doSonthing"></a>条件判断条件判断使......
  • vue3面包屑导航栏
    import{useRoute,useRouter}from"vue-router";import{computed,ref,watch,watchEffect,nextTick}from"vue";constrouter=useRouter()constroute=useRoute()constbreadcrumb=ref([])/***@Date:2023-03-2817:55:20*@descript......
  • vue3+elementPlus 深色主题切换
    首先安装需要的两个依赖npmi@vueuse/corenpminstallelement-plus--save在main.js中引入css文件,自定义深色背景颜色可以看ElementPlus官方网站//引入elementUIimportElementPlusfrom'element-plus'importzhCnfrom'element-plus/dist/locale/zh-cn.mjs'//引入......
  • Qt学习笔记9——P30-33. 自定义控件封装,鼠标事件,定时器
    P30.自定义控件封装P31.Qt中的鼠标事件P32.定时器1P33.定时器2P30.自定义控件封装(创建了新项目) 添加新的界面和类:右键项目的文件夹(顶层的文件)->Qt——Qt设计师界面类->“选择界面模板”选"Widget"->在"Classname"中取个类名(此案例中改成了SmallWidget)->别的没......
  • defineExporse vue3中一个由子组件导出数据,让父组件调用的方法。
    子组件<scriptsetup>import{ref,reactive}from'vue'constisFlag=ref(false)constdata=reactive({name:'tom',age:18})//把数据导出defineExpose({data,isFlag})&......
  • [vue3]npm创建环境
    1.npm安装vuecli[root@Python20230401VUE3]#npminstall-g@vue/cli2.查看vue版本[root@Python20230401VUE3]#vue--version@vue/cli5.0.83.创建项目[root@Python20230401VUE3]#vuecreatehello-world4.执行项目$cdhello-world$npmrunserve......
  • 添加自定义监控第2篇--------------------------------------------------
      netstat-antp|grep':80'|grep-c'ESTABLISHED'换一个测试项:netstat-antp|grep":22"|grep-c"ESTABLISHED"    出现了不是正整数的情况,怎么消掉前面的错误提示??        chmod +s/bin/netstat    或者  chmodu+s /......
  • 发一下好看的博客园自定义主题代码
    发一下好看的博客园自定义主题代码要开通js权限,皮肤用simplememory,最好禁用模板侧边栏:<!DOCTYPEhtml><html><style>/*最外层容器样式*/.wrap{top:0;right:0;bottom:0;left:0;width:200px;height:200px;margin:auto;/......
  • 如何使用自定义通达信指标(附带3技术指标3选股指标)
    通达信类型的交易软件都支持通达信指标公式,电脑端推荐使用东方财富,同花顺,通达信自己也有电脑端,但是做得不好。手机端可以下载通达信APP,最好是安卓版,IOS的通达信有bug,不知道修复了没。点击日线再点更多选更多指标点新建就可以进入公式编辑界面,或者可以选择已有的公式进行修改点条件......