Vue.js

Question

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

我正在使用 Vue 2.5.2 和 ElementUI：2.3.4

我试着按照解决方案但运气不好。

问题：

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

谢谢！

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>

Answer 1

根据 de element.io 文档，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;
      }
    }
  }
});

查看工作 fiddle：https://jsfiddle.net/rafaph/pefwgL7y/2/

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

Vue.js - Element UI - Nested dialog won't open from dropdown menu

javascript

element-ui