Modal | z-base-ui

简陋的模态对话框。版本要求 >= 1.0.21

代码演示

基本用法

<template>
  <z-button type="primary" @click="showModal">Open Modal</z-button>

  <z-modal v-model:open="open" title="Basic Modal">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </z-modal>
</template>

<script setup lang="ts">
import {ref} from "vue";

const open = ref<boolean>(false);
const showModal = () => {
  open.value = true;
};
</script>

<style lang="less" scoped>
.box {
  margin-left: 124px;
}
</style>

自定义页脚或头部

使用 header 或 footer 可自定义头部或底部，当你不需要它们时可传入null。

<template>
  <z-button type="primary" @click="showModal">Open Modal</z-button>

  <z-modal v-model:open="open" title="Basic Modal">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>

    <template #header>
      <div>🌎️ 头部</div>
    </template>

    <template #footer>
      <div class="footer">
        <z-button @click="closeModal">自定义页脚</z-button>
      </div>
    </template>
  </z-modal>
</template>

<script setup lang="ts">
import {ref} from "vue";

const open = ref<boolean>(false);
const showModal = () => {
  open.value = true;
};

const closeModal = () => {
  open.value = false;
}
</script>

<style lang="less" scoped>

</style>

取消内边距

当你想自定义padding时，可设置 isPadding 为true，取消自带的内边距。

<template>
  <z-button type="primary" @click="showModal">Open Modal</z-button>

  <z-modal v-model:open="open" :header="null" :footer="null" title="Basic Modal" is-padding>
    <div class="box">
      <div class="box-content">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>

      <div class="btnGroup">
        <z-button type="danger" @click="closeModal">关闭</z-button>
      </div>
    </div>
  </z-modal>
</template>

<script setup lang="ts">
import {ref} from "vue";

const open = ref<boolean>(false);
const showModal = () => {
  open.value = true;
};

const closeModal = () => {
  open.value = false;
}
</script>

<style lang="less" scoped>
.box {
  padding: 12px;
  .btnGroup {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>

异步关闭

点击确定后，异步关闭对话框。

<template>
  <z-button type="primary" @click="showModal">Open Modal</z-button>

  <z-modal v-model:open="open" :loading="loading" title="Basic Modal" @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </z-modal>
</template>

<script setup lang="ts">
import {ref} from "vue";

const open = ref<boolean>(false);
const loading = ref<boolean>(false);

const showModal = () => {
  open.value = true;
};

const handleOk = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 4000);
}
</script>

<style lang="less" scoped>

</style>

信息提示

简介的提示框，使用 info 只提供一个按钮用于关闭。

<template>
  <z-button type="primary" @click="showModal">Open Modal</z-button>
</template>

<script setup lang="ts">
import { h } from "vue";
import { Modals } from "@d7ee/z-base-ui";

const showModal = () => {
  Modals.info({
    title: "标题",
    content: h('div', {}, [
      h('p', {style: {color: 'red'}},'some messages...some messages...'),
      h('p', 'some messages...some messages...'),
    ]),
    onOk: () => {
      console.log("ok")
    }
  })
};
</script>

<style lang="less" scoped>
.box {
  margin-left: 124px;
}
</style>

确认对话框

确认对话框，使用 confirm 创建一个对话框。

<template>
  <z-button type="primary" @click="showModal">Open Modal</z-button>
</template>

<script setup lang="ts">
import { h } from "vue";
import { Modals } from "@d7ee/z-base-ui";

const showModal = () => {
  Modals.confirm({
    title: "标题",
    content: h('div', {}, [
      h('p', {style: {color: 'red'}},'some messages...some messages...'),
      h('p', 'some messages...some messages...'),
    ]),
    onOk: () => {
      console.log("ok")
    }
  })
};
</script>

<style lang="less" scoped>
.box {
  margin-left: 124px;
}
</style>

Api

属性名	说明	类型	默认值
open	控制显示隐藏(v-model)	`boolean`	—
width	宽度	`string`	—
title	标题	`string`	—
loading	异步关闭	`boolean`	—
header	隐藏顶部	`boolean`	—
footer	隐藏底部	`boolean`	—
okText	确认按钮文字	`string`	确认
cancelText	取消按钮文字	`string`	确认
closeIcon	显示关闭图标	`boolean`	true
okType	确认按钮类型	ButtonType	—
cancelType	取消按钮类型	ButtonType	—
isOk	显示确认按钮	`boolean`	true
isCancel	显示取消按钮	`boolean`	true
top	对话框位置	`string`	—
wrapClassName	设置最外层的类名	`string`	—
isPadding	取消所有内边距	`boolean`	false
border	取消内容层对header和footer的边框	`boolean`	false
zIndex	设置z-index的层级	`number`	1000
mask	显示遮罩层	`boolean`	true
maskClosable	点击遮罩层能关闭对话框	`boolean`	true
bodyStyle	设置内容层的样式	`Record<string, any>`	—
maskStyle	设置遮罩层样式	`Record<string, any>`	—

Event

事件说明

事件名称	说明	回调参数
ok	点击确定回调	(e) => void
cancel	点击取消或遮罩层时回调	(e) => void

Info or Confirm

Modals.info
Modals.confirm

以上均为一个 函数，参数为Object，具体属性为如下属性。

属性名	说明	类型	默认值
width	宽度	`string`	—
content	内容	`string` \| `VNode`	—
title	标题	`string` \| `VNode`	—
onOk	点击确认回调	`function`	—
onCancel	点击取消回调	`function`	—

Modal 对话框 ​

代码演示 ​

自定义页脚或头部 ​

取消内边距 ​

异步关闭 ​

信息提示 ​

确认对话框 ​

Api ​

Event ​

Info or Confirm ​

Modal 对话框