我有以下指令：
import Vue from 'vue'
const Dialog = Vue.extend({
template: `
<div v-if="show" class="modal">
<div class="modal-body">
<div class="modal-header"><h3>Aktion bestätigen</h3></div>
<div class="modal-content">
<div class="uk-flex">
<div class="uk-margin-small-right">
<span uk-icon="icon: question; ratio: 3"></span>
</div>
<div>
Are You sure?
</div>
</div>
<hr>
<div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-danger uk-margin-small-right" @click="confirmed">Yes</button>
<button class="uk-button uk-button-default" @click="show = false">Cancel</button>
</div>
</div>
</div>
</div>
`
});
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({data: data}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
这工作正常。当我单击“取消”时，模态关闭。当我点击“是”时，Vue模板中定义的方法
<button v-confirm="delete">delete</button>
被执行。
但是没有出现模态。如何在方法执行后告诉模态关闭，并在出现错误时显示错误消息？
您可以传递methods给 Dialog：
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({
data: data,
methods: {
confirmedInternal() {
this.show = false
this.confirmed()
}
}
}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
然后confirmedInternal在yes单击按钮时调用
<button class="uk-button uk-button-danger uk-margin-small-right" @click="confirmedInternal">Yes</button>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句