一个公司做两个网站建设目标网站

一个公司做两个网站,建设目标网站,网站建设改版目的,容桂佛山做app网站1-自定义指令 1-1.概念 Vue2 允许开发者通过自定义指令来操作 DOM 元素。自定义指令分为两种#xff1a; 全局指令#xff1a;在整个应用中都可以使用局部指令#xff1a;仅在特定组件中生效 1-2.自定义指令的生命周期钩子 bind#xff1a;指令第一次绑定到元素时调用…1-自定义指令1-1.概念Vue2 允许开发者通过自定义指令来操作 DOM 元素。自定义指令分为两种全局指令在整个应用中都可以使用局部指令仅在特定组件中生效1-2.自定义指令的生命周期钩子bind指令第一次绑定到元素时调用只触发一次inserted被绑定元素插入父节点时调用update所在组件的 VNode 更新时调用componentUpdated所在组件的 VNode 及其子 VNode 全部更新后调用unbind指令与元素解绑时调用1-3.示例// 定义全局自定义指令 v-show-ifVue.directive(show-if,{bind(el,binding){// binding.value 是指令传入的值el.style.displaybinding.value?:none;},update(el,binding){// 数据更新时重新判断el.style.displaybinding.value?:none;}});// 使用方式templatediv v-show-ifisVisibleHello World/div/templatescriptexportdefault{data(){return{isVisible:true// 控制显示/隐藏};}};/script2-文件调整新增frontend-vue2\src\directives\permission.js作用提供了两个自定义指令v-permission 和 v-role用于根据用户的权限或角色动态控制 DOM 元素的显示与隐藏生命周期钩子bind首次绑定到元素时执行一次权限检查、update当模板重新解析数据更新时再次执行权限检查通过 setupPermissionDirective(Vue) 方法将两个指令注册为全局指令importstorefrom/store;// 自定义权限指令定义bind和update生命周期钩子exportconstpermission{// bind只调用一次指令第一次绑定到元素时调用。在这里进行一次权限检查// 参数一el:令所绑定的DOM元素// 参数二binding:指令对象对象中包含指令的相关信息bind(el,binding){checkPermission(el,binding);},// update指令所在的模版被重新解析时调用(数据更新)update(el,binding){checkPermission(el,binding);},};// 自定义权限指令定义bind和update生命周期钩子exportconstrole{bind(el,binding){checkRole(el,binding);},update(el,binding){checkRole(el,binding);},};// 权限检查函数functioncheckPermission(el,binding){const{value}binding;console.log(权限检查value);if(value){consthasPermissionstore.getters[user/hasPermission](value);console.log(权限检查结果hasPermission);if(!hasPermission){// 使用 display 控制隐藏指令修饰elel.style.displayhasPermission?:none;// 从 DOM 中直接移除// el.parentNode el.parentNode.removeChild(el);}}}// 角色检查函数functioncheckRole(el,binding){const{value}binding;if(value){consthasRolestore.getters[user/hasRole](value);// el.style.display hasRole ? : none;if(!hasRole){// 使用 display 控制隐藏指令修饰elel.style.displayhasRole?:none;// 从 DOM 中直接移除// el.parentNode el.parentNode.removeChild(el);}}}// 传入vue然后注册自定义指令Vue2exportdefaultfunctionsetupPermissionDirective(Vue){// 添加全局指令v-permission细粒度控制权限,功能级别控制Vue.directive(permission,permission);// 添加全局指令v-roleVue.directive(role,role);}修改frontend-vue2\src\main.jsimportVuefromvue;importAppfrom./App.vue;// 路由组件importrouterfrom./router;// Vueximportstorefrom./store;// 引入 Element UIimportElementUIfromelement-ui;// 引入 Element UI 的样式importelement-ui/lib/theme-chalk/index.css;// Element UI 的样式之后可以再次引入自定义样式对默认的Element UI 的样式覆盖//import xxxx.css// 引入自定义权限指令importsetupPermissionDirectivefrom/directives/permission;// 使用 Element UIVue.use(ElementUI);// 将指令注册到 Vue 实例上setupPermissionDirective(Vue);Vue.config.productionTipfalse;newVue({router,store,// 把 store 注入全局render:(h)h(App),}).$mount(#app);后续使用!-- 权限控制 --el-buttonv-permissionuser:create创建用户/el-button!-- 角色控制 --el-buttonv-roleADMIN管理员功能/el-button