Question

我是Vue.js和ElementUI的新手，从下拉菜单中打开对话框时遇到问题。

我正在使用Vue 2.5.2和ElementUI：2.3.4

我试图遵循解决方案 Vue.js - Element UI - Nested dialog won't open - v-if v-show但没有运气。

问题：

单击下拉菜单项后，对话框不显示。

谢谢！

＆＃13;

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: {

  }
});

＆＃13;

<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>

＆＃13;

Answer 1

从de element.io docs，el-dropdown-item没有@click事件，你必须在下拉列表中使用命令事件：http://element.eleme.io/#/en-US/component/dropdown#command-event

<div id="app">
  <el-dropdown @command="onCommandDropdown">
    <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 command="show-popup">
        Show Component PopUp
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  <popup :show-dialog.sync="showDialog"></popup>
</div>

<script type="x-template" id="popup">
  <el-dialog title="Modal Title" :visible="showDialog" @close="onClose">
    <span>{{ data }}</span>
  </el-dialog>
</script>

js部分：

Vue.component('popup', {
  template: '#popup',
  props: ['showDialog'],
  data() {
    return {
      show: this.showDialog,
      data: "Hello modal!"
    }
  },
  watch: {
    showDialog(newValue) {
      this.show = newValue;
    }
  },
  methods: {
    onClose() {
      this.show = false;
      this.$emit('update:showDialog', false);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    showDialog: false
  },
  methods: {
    onCommandDropdown(command) {
      if (command === 'show-popup') {
        this.showDialog = true;
      }
    }
  }
});

见工作小提琴：https://jsfiddle.net/rafaph/pefwgL7y/2/

Vue.js - 元素UI - 嵌套对话框无法从下拉菜单中打开

1 个答案: