如果你想要在Vue项目中封装Element UI的弹出框el-dialog,可以按照以下步骤进行操作:

  1. 创建一个新的Vue组件,用于封装el-dialog组件:

xmlCopy

<template>
  <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" :before-close="beforeClose">
    <slot></slot>
    <span slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    beforeClose(done) {
      this.$confirm('确定关闭该窗口吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        done();
      }).catch(() => {});
    },
    confirm() {
      this.$emit('confirm');
    }
  }
};
</script>

在这个组件中,我们使用了slot插槽来实现弹出框的内容自定义。同时,我们通过props接收了titlevisible两个参数,用于设置弹出框的标题和显示状态。在弹出框的底部,我们添加了取消和确定按钮,并通过$emit方法向父组件派发confirm事件。

  1. 在父组件中使用封装好的Dialog组件:

xmlCopy

<template>
  <div>
    <el-button type="primary" @click="showDialog">显示弹出框</el-button>
    <Dialog :title="title" :visible.sync="dialogVisible" @confirm="handleConfirm">
      <p>这是弹出框的内容</p>
    </Dialog>
  </div>
</template>

<script>
import Dialog from './Dialog';

export default {
  name: 'MyComponent',
  components: {
    Dialog
  },
  data() {
    return {
      title: '弹出框标题',
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleConfirm() {
      // 处理确定按钮的逻辑
      this.dialogVisible = false;
    }
  }
};
</script>

在这个父组件中,我们引入了封装好的Dialog组件,并传递了titledialogVisible两个参数。当点击“显示弹出框”按钮时,dialogVisible会变为true,从而显示弹出框。在弹出框中,我们自定义了一段文本,并通过@confirm监听到用户点击了确定按钮的事件,从而执行相应的逻辑。

通过以上步骤,我们就可以封装Element UI的弹出框el-dialog,并在Vue项目中进行使用了。

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注