我是 Vue.js 和 ElementUI 的新手,从下拉菜单打开对话框时遇到问题。
我正在使用 Vue 2.5.2 和 ElementUI:2.3.4
我尝试遵循 Vue.js 中的解决方案 - 元素 UI - 嵌套对话框无法打开 - v-if v-show但没有运气。
问题:
单击下拉菜单项后未显示对话框。
谢谢!
console.clear()
let popupData;
Vue.component('popup', {
name: "popup",
template: '#popup',
props : ['showDialog'],
data(){
return {
show: this.showDialog,
data: "Hello"
}
},
watch: {
showDialog: function(n,o){
this.show = this.showDialog;
}
},
methods: {
updateShowDialog(isVisible) {
if (isVisible) return false;
this.$emit('update:showDialog', false )
}
},
created:function (){
},
});
var vm = new Vue({
el: '#app',
data: {
showDialog: false,
},
methods: {
}
});
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<div id="app">
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="showDialog = true">Show Component PopUp
<popup :show-dialog.sync="showDialog"></popup>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<template id="popup">
<el-dialog :visible.sync="show" @visible-change="updateShowDialog" >{{data}}</el-dialog>
</template>