elementui使用vue-element-dialog

229 阅读1分钟

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>