大家好，欢迎来到IT知识分享网。
场景：订单类型等于12或13的时候隐藏按钮
创建文件 directive.type.js
export default {
inserted: async (el, {value}) => {
if (value == '12' || value == '13' ) {
el.remove()
return;
}
},
updated: async (el, {value}) =>{ //当VNode的时候，会执行updated函数，可能出发多次
if (value == '12' || value == '13') {
el.remove()
return;
}
},
componentUpdated: async (el, {value}) =>{ //指令所在组件的 VNode 及其子 VNode 全部更新后调用。如果赋值时变量的时候一定要有此函数方法
if (value == '12' || value == '13' ) {
el.remove()
return;
}
},
}
在main.js全局注册自定义指令
import OrderType from './components/directive.type.js';
Vue.directive('orderType', OrderType)
在某个页面使用：
如果该指令用在列表循环渲染的地方，记得key值唯一，不要用索引index当作key值.
使用情况1（赋值常量）时，上面的inserted和updated可以控制按钮显示与否。
<el-button @click="clickA" v-orderType="'12'">操作A</el-button>
使用情况2（赋值变量）时，上面的inserted和updated无法满足要求，需要componentUpdated才可控制更改按钮显示与否。
<el-button @click="clickA" v-orderType='orderType'>操作A</el-button>免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/12987.html
