[Feature Request] 希望 useDialog 的实现

[Not-have]

Existing Component

No

Component Name

el-dialog

Description

推荐实现 https://element-plus.org/zh-CN/component/dialog.html 的 useDialog 的实现，使用 useDialog 方法来调用弹出框，而不是一直都是

<el-dialog v-model="dialogTableVisible" title="Shipping address" width="800">
    <el-table :data="gridData">
      <el-table-column property="date" label="Date" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
  </el-dialog>

直接写 DOM，隔壁 Ant Design Vue 已经实现，我也实现了一版 https://github.com/Not-have/micro-tools/tree/main/packages-vue/vue-components-el-extra

[zhixiaotong]

如果是简单的内容，可以使用ElMessageBox实现类似的效果，只是一个demo

import { h } from 'vue';
import { ElMessageBox, ElDivider, ElTable } from 'element-plus';

const attrs = {};
const columns = [];

const message = () =>
  h('div', { style: 'display: flex;flex-direction: column;' }, [
    h(ElDivider, { style: { marginBottom: '5px' } }),
    h(
      ElTable,
      {
        ...attrs,
        columns
      },
      slots
    )
]);

ElMessageBox({
  message
});

[Not-have]

但是稍微复杂一下，就比较麻烦了，而且这样写起来工作量和维护性有些差了在 2024年7月29日，18:23，知晓同丶 @.***> 写道： 如果是简单的内容，可以使用ElMessageBox实现类似的效果，只是一个demo import { h } from 'vue'; import { ElMessageBox, ElDivider, ElTable } from 'element-plus';

const attrs = {}; const columns = [];

const message = () => h('div', { style: 'display: flex;flex-direction: column;' }, [ h(ElDivider, { style: { marginBottom: '5px' } }), h( ElTable, { ...attrs, columns }, slots ) ]);

ElMessageBox({ message });

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>