最近有个项目需要用指令来实现按钮权限,故利用vue的自定义指令来完成此功能。
在使用指令的时候遇到个问题需要把指令里面的值传递到外层组件,查阅官方文档发现推荐使用dataset来进行数据传递,故利用下面方法实现数据传递。
- 在对应元素上自定义属性
<Row
class-name="add-group"
:gutter="24"
type="flex"
justify="start"
data-test="true"
v-permission="['添加分组']"
>
<Col span="17">
<Input
maxlength="20"
placeholder="请输入分组名称"
v-model="groupName"
></Input>
</Col>
<Col span="7" class="add_btn">
<Button
type="primary"
:loading="loadingBtn"
@click="addGroup"
>添加分组</Button
>
</Col>
</Row>
2.在自定义指令中改变dataset所自定义属性的值
if (widgets) {
var sWidget = widgets.filter((w) => {
return (w.name === binging) && (w.authorised);
});
if (sWidget.length === 0) {
el.parentNode && el.parentNode.removeChild(el);
el.dataset.test = false;
} else {
el.dataset.test = true;
}
}
3.在父集页面中使用更新后的值
e.contextmenu = $('.add-group').data('test');
通过以上3步就可以实现执行完自定义指令中的相关逻辑后更新值来触发父集页面的相关操作。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。