vue-element-dialog npm地址:www.npmjs.com/package/vue…
- 先安装
npm i vue-element-dialog
- main.js引入
import VueElementDialog from 'vue-element-dialog';
Vue.use(VueElementDialog, { center: true });//global dialog
- 页面
index.vue
this.$dialog({
title: '新增产品',
width: width,
content: ModelForm
}).then((res) => {
console.log(res);
})['catch'](err => {
console.log(err);
});
ModelForm.vue
<template>
<div class="my-component">
<p>{{ msg }}</p>
<div>
<el-button type="primary" @click="onCancel">Cancel</el-button>
<el-button type="primary" @click="onConfirm">Confirm</el-button>
</div>
</div>
<template>
<script>
export default {
name: 'MyComponent',
props: {
msg: String
},
methods: {
onCancel() {
this.$emit('cancel', 'NO')
},
onConfirm() {
this.$emit('confirm', 'OK')
}
}
}
</script>