基于element dialog二次封装弹窗组件

本文档展示了如何封装一个基本的对话框组件,包括设置标题、宽度、可见性以及确认和取消按钮。组件使用了Element UI库,并通过props接收外部传入的属性。在组件内部,定义了`handleConfirm`和`handleCancel`方法来处理用户操作,并通过`$emit`将事件传递给父组件。示例中展示了如何在父组件中使用这个自定义对话框,包括设置内容和触发操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现效果

在这里插入图片描述

组件封装

<template>
  <el-dialog
    :title="title"
    :width="width"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    v-if="dialogVisible"
    v-bind="$attrs"
  >
    <slot></slot>
    <div slot="footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">
        {{ confirmText }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: String,
    width: {
      type: String,
      default: '900px'
    },
    visible: {
      type: Boolean,
      default: false
    },
    confirmText: {
      type: String,
      default: '确定'
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit('update:visible', value);
      }
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm');
      this.$emit('update:visible', false);
    },
    handleCancel() {
      this.$emit('cancel');
      this.$emit('update:visible', false);
    }
  }
};
</script>

组件使用

<basic-dialog :visible.sync="showGroupVersionDialog" title="绑定分组版本">
  <div>这是内容内容</div>
</basic-dialog>
### 如何实现 Element UI `el-dialog` 组件二次封装 #### 使用 `useDialog` Hook 实现更灵活的弹窗组件 为了使 `el-dialog` 更加灵活和易于使用,可以利用 Vue 的组合式 API 创建一个名为 `useDialog` 的 Hook 来简化逻辑处理。这种方式不仅提高了代码复用率还增强了组件间的解耦合度。 ```javascript import { ref, reactive } from 'vue'; function useDialog(defaultProps = {}) { const visible = ref(false); const props = reactive({ ...defaultProps, visible: false }); function open(options) { Object.assign(props, options || {}); visible.value = true; } function close() { visible.value = false; } return { visible, props, open, close }; } ``` 当需要展示对话框时调用 `open()` 方法传入配置项;关闭则调用 `close()`[^1]。 #### 替换特定类名与挂载对象以适应不同场景 对于不同的业务需求可能涉及到修改默认样式或是行为上的调整,在这种情况下只需要更改 JavaScript 中获取到的相关 class 名字以及对应的 DOM 节点即可完成定制化操作而无需改动原有结构[^2]。 #### 自定义指令支持拖拽功能 为了让 `el-dialog` 支持拖拽效果可以在模板里加入自定义属性 `v-draggable` 并配合 CSS 设置防止意外选中文本内容: ```html <template> <div> <el-dialog v-model="dialogVisible" title="可拖拽对话框" width="50%" :close-on-click-modal="false" v-draggable > <p>拖拽标题栏移动对话框!</p> </el-dialog> <el-button @click="dialogVisible = true">打开对话框</el-button> </div> </template> <script setup> import {ref} from "vue"; const dialogVisible = ref(false); // 定义 draggable 指令... </script> <style scoped> /* 防止选中标题文字 */ .el-dialog__header { user-select: none; } </style> ``` 这里的关键在于实现了简单的拖动交互体验的同时保持了良好的用户体验设计原则[^3]。 #### 解决样式差异问题 考虑到实际开发过程中可能会遇到的需求变化或者视觉风格的要求不一致等问题,通过对 element-ui 原生组件做一层薄薄的包装能够很好地满足这些特殊场合下的应用诉求。具体做法就是基于官方提供的基础版本之上再做一些个性化的修饰工作,最后借助于 Vue 提供的强大工具链——如插件机制、全局注册等方式将其融入整个项目体系之中[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胡萝卜大王驾到

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值