vue.js - Vue 从指令中访问“on”和“class”指令
问题描述
我想将多个指令组合在一个自定义指令中,如下所示model
:
const model = Vue.directive('model')
Vue.directive('custom', {
bind(el, binding, vnode, oldVnode) {
// do custom directive stuff
// modify binding for model
if (model.bind)
model.bind(el, binding, vnode, oldVnode)
},
inserted(el, binding, vnode, oldVnode) {
if (model.inserted)
model.inserted(el, binding, vnode, oldVnode)
},
update(el, binding, vnode, oldVnode) {
if (model.update)
model.update(el, binding, vnode, oldVnode)
},
componentUpdated(el, binding, vnode, oldVnode) {
if (model.componentUpdated)
model.componentUpdated(el, binding, vnode, oldVnode)
},
unbind(el, binding, vnode, oldVnode) {
if (model.unbind)
model.unbind(el, binding, vnode, oldVnode)
}
})
但不幸的是,只有model
andshow
可以通过Vue.directive
and not on
or获得class
。据我所知,其他指令正在以某种方式被修补并且我无法访问。
我在 webpack 环境中,想知道是否有办法访问其他指令。即使它是hacky。
谢谢
解决方案
您可以使用访问和修改class
元素的
el.className += ' myClass'
如果您只需要查看上面的类,请使用
el.classList
要简单地查看元素上可用的所有选项console.log({el})
,您还将获得on
...
注意 myClass 之前的空格是必需的。至于为什么,自己做英文。。
推荐阅读
- xml - NiFi: get all elements of the same tag in XML using EvaluateXpath processor
- adafruit - 将小数转换为图片
- java - 总前台时间问题的 UsageStats 方法
- mqtt - MQTT 订阅者错过的消息
- spring - 传递 Webflux Http 错误
- angular - Template Variable Causing Template Parse Error: There is no directive with "exportAs" set to "#start_date"
- javascript - 气泡组件 Angular
- r - mutate_impl(.data, dots) 中的错误:评估错误:参数 2 必须是类型字符
- dart - Flutter - 是否可以在不使用 FutureBuilder 的情况下从 Future 中提取数据?
- java - 尽管已添加到视图中,但片段未显示