vue3-mgt-template/src/views/demo/resizeElementDialog/index.vue

<template>
    <div class="p-5 space-y-5 !bg-gray-100">
        <el-card header="动态调整element-plus弹窗dialog的大小示例">
            <el-button
                type="primary"
                @click="showDialog = true"
            >
                点击弹出dialog
            </el-button>

            <!-- resize局部自定义指令用法 -->
            <!-- 这里必须使用v-show，否则无法触发自定义指令里面的updated -->
            <div
                v-show="showDialog"
                v-resize
            >
                <!-- destroy-on-close必须，不然下次打开无法还原为初始化大小 -->
                <el-dialog
                    v-model="showDialog"
                    :width="800"
                    title="dialog弹窗标题"
                    :draggable="true"
                    destroy-on-close
                >
                    <p>这是一个dialog弹窗</p>
                    <p>可以通过拖拽改变弹窗大小</p>
                    <p>可以通过点击右上角关闭弹窗</p>
                    <p>这是一个dialog弹窗</p>
                    <p>可以通过拖拽改变弹窗大小</p>
                    <p>可以通过点击右上角关闭弹窗</p>
                    <p>这是一个dialog弹窗</p>
                    <p>可以通过拖拽改变弹窗大小</p>
                    <p>可以通过点击右上角关闭弹窗</p>
                </el-dialog>
            </div>
        </el-card>
        <el-card header="directives/resize代码详解文档">
            <div
                class="markdown-body"
                v-html="htmlStr"
            />
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { marked } from 'marked';
import { getMarkdownContent } from '@/utils/tools';
// directives/resize局部自定义指令注入，必须使用vXXXX这种格式，例如vFoucs,vResize等
import resize from './directives/resize';
const vResize = resize;

const showDialog = ref(false);

// markdown文档
const htmlStr = ref('');
getMarkdownContent('./md/resizeElementDialog.md').then((res) => {
    htmlStr.value = marked(res);
});
</script>