Element Plus Resizable Dialog (可调整大小对话框)

基于 Vue 3 和 Element Plus 的 el-dialog 二次封装组件，支持 8 个方向调整大小。

功能特性

• ↔️ 支持 8 个方向拖拽调整 (上, 下, 左, 右, 左上, 右上, 左下, 右下)。
• 📦 完美封装 el-dialog，支持所有原生属性、方法和插槽。
• 🔧 支持自定义最小宽度和最小高度。

安装

npm install e-plus-dialog-vue3

使用方法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import EPlusResizeDialog from 'e-plus-dialog-vue3'
import 'e-plus-dialog-vue3/dist/style.css' // 引入样式

const app = createApp(App)
app.use(ElementPlus)
app.use(EPlusResizeDialog)
app.mount('#app')

局部注册

<script setup>
import { EPlusResizeDialog } from 'e-plus-dialog-vue3'
import 'e-plus-dialog-vue3/dist/style.css'
</script>

模板中使用

<template>
  <EPlusResizeDialog
    v-model="visible"
    title="可调整大小对话框"
    :resizable="true"
    :min-width="300"
    :min-height="200"
  >
    <span>这里是内容...</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="visible = false">确定</el-button>
      </span>
    </template>
  </EPlusResizeDialog>
</template>

属性 (Props)

| 属性名 | 类型 | 默认值 | 说明 | |------|------|---------|-------------| | resizable | boolean | true | 是否开启调整大小功能 | | min-width | number | 200 | 最小宽度 (像素) | | min-height | number | 150 | 最小高度 (像素) | | ... | ... | ... | 支持所有 el-dialog 的原生属性 |

插槽 (Slots)

支持所有 el-dialog 的原生插槽（如 header, footer, title 等）。

方法 (Methods)

通过 ref 可以访问到组件实例。由于封装了 el-dialog，你可以通过暴露的 dialogRef 访问内部 el-dialog 实例。

const dialogRef = ref()
// 访问内部 el-dialog
// dialogRef.value.dialogRef