vue中单独封装elementui中的Dialog弹框组件

一。在components文件中新建 弹框组件

<template>

  <div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="handleClose">

      <span>这是一段信息</span>

      <span slot="footer" class="dialog-footer">

        <el-button @click="dialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>

      </span>

    </el-dialog>

  </div>

</template>

<script>

export default {

  props:{

    DialogFlag: {

      default: false

    }

  },

  data(){

    return{

      dialogVisible: false

    }

  },

  watch:{

    DialogFlag(){

      this.dialogVisible = this.DialogFlag

    }

  },

  methods:{

    handleClose() {

       this.$emit('update:DialogFlag',false)

    }

  },

}

</script>

二。在需要用到的组件中引入子组件

<account-inform-add :DialogFlag.sync="DialogFlag"></account-inform-add>

methods: {
    addAccountInform(){
      this.DialogFlag = true
    }
  }

vue中单独封装elementui中的Dialog弹框组件的相关教程结束。