Element: Dynamic Dialog Componet

by Theara Yuom

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script id="dialogA" type="x-template">
  <div>
    <el-dialog title="A" :visible="true" size="tiny" :before-close="handleClose">
      <span>Dialog A</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">Cancel</el-button>
  </span>
    </el-dialog>
  </div>
</script>
<script id="dialogB" type="x-template">
  <div>
    <el-dialog title="B" :visible="true" size="tiny" :before-close="handleClose">
      <span>Dialog B</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">Cancel</el-button>
  </span>
    </el-dialog>
  </div>
</script>

<div id="parent">
  <el-button type="primary" @click="dialogShow('A')">Dialog A</el-button>
	<el-button type="primary" @click="dialogShow('B')">Dialog B</el-button>
  <component :is="dialogView" :dialog-visible="dialogVisible" @handle-close="handleClose"></component>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");
.el-input {
  width: 300px;
  margin-bottom: 20px;
}

Babel + JSX

var DialogA = {
  template: '#dialogA',
	methods:{
		handleClose(){
			this.$emit('handle-close');
		}
	}
};

var DialogB = {
  template: '#dialogB',
	methods:{
		handleClose(){
			this.$emit('handle-close');
		}
	}
}

new Vue({
  el: '#parent',
  data () {
    return {
			dialogView: null,
    }
  },
	components: {
    DialogA, DialogB
  },
	methods:{
		dialogShow(val){
			if(val === 'A'){
				this.dialogView = DialogA;
			}else{
				this.dialogView = DialogB;
			}
		},
		handleClose(){
			this.dialogView = null;
		}
	}
})