Easyfe Admin Component

Appearance

On this page

对话框 ​

基于arco-design封装的对话框组件，做了一些统一配置：

  • 点击蒙层禁止关闭
  • 取消垂直居中，放置弹窗高度变化的时候位置移动
  • 对话框标题左侧
  • 对话框距离顶部10vh
  • okText 文本为确认
  • 宽度为700px
  • content 最高高度为60vh

以上设置都可以传入arco-modal组件原 props 进行覆盖。

基础用法 ​

<template>
    <div>
        <a-button @click="visible = true">点击显示</a-button>
        <arco-modal v-model:visible="visible" title="测试弹窗" :ok="onBeforeOk">
            <p>这是弹窗主体</p>
            <br />
            <p>点击确定测试一下异步关闭吧</p>
        </arco-modal>
    </div>
</template>
<script setup lang="ts">
import { Message } from "@arco-design/web-vue";
import { ArcoModal } from "@easyfe/admin-component";
const visible = ref(false);

function sleep(t: number) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, t);
    });
}

async function onBeforeOk() {
    await sleep(2 * 1000);
    Message.success("提交成功");
}
</script>
<template>
    <div>
        <a-button @click="visible = true">点击显示</a-button>
        <arco-modal v-model:visible="visible" title="测试弹窗" :ok="onBeforeOk">
            <p>这是弹窗主体</p>
            <br />
            <p>点击确定测试一下异步关闭吧</p>
        </arco-modal>
    </div>
</template>
<script setup lang="ts">
import { Message } from "@arco-design/web-vue";
import { ArcoModal } from "@easyfe/admin-component";
const visible = ref(false);

function sleep(t: number) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, t);
    });
}

async function onBeforeOk() {
    await sleep(2 * 1000);
    Message.success("提交成功");
}
</script>

属性 ​

继承了原组件的全部 Props，点击查看。

新增一个 prop：

参数说明类型默认值是否必填
ok异步确认回调() => Promise<void>|voidundefined否

当传入该 prop 的时候，将不会触发 event 的 ok 事件。

事件 ​

继承了原组件的全部 Events，点击查看。