<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="title"
    :width="width"
    :before-close="beforeClose"
  >
    <slot></slot>
  </el-dialog>
  <el-button type="primary" @click="dialogVisible = true">打开弹出层</el-button>
</template>
<script>
export default {
  name: "MyDialog",
  props: {
    width: {
      type: Number,
      default: 600
    },
    title: {
      type: String,
      default: "弹出层标题"
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    beforeClose(done) {
      this.$confirm("确定关闭弹出层?")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>
使用vuejs和elementui生成一个弹出层组件组件包含width宽度属性类型为数字;title属性类型为字符串。该组件包含一个默认插槽并通过点击按钮触发该组件的显示

原文地址: http://www.cveoy.top/t/topic/reR 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录