01 vue中自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
02 标准浏览器自定义事件触发方法
document.createEvent()
event.initEvent()
element.dispatchEvent()
03 vue中实现自定义事件
结合上面两种方法,可以下面写:
<script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>
<div id="app">
<div id="box" v-proxyclick @proxyclick="test(12)">点击</div>
</div>
<script type="text/javascript">
Vue.directive('proxyclick', {
bind: function (el, binding, vnode) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("proxyclick", false, false);
el.addEventListener('click', function(e) {
e.target.dispatchEvent(evt);
}, false);
}
});
new Vue({
el: '#app',
methods: {
test: function(num) {
alert(num);
}
}
});
</script>