Fusions

Appearance

Modal 模态框 ​

iPhone

此组件模态框一般用于弹出提示信息，让用户确认下一步的操作或者提示用户操作结果。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

默认情况下，模态框只有一个 确认 按钮:

  • 需至少要设置弹出的内容属性 content
  • 通过 ref 来控制模态框是否显示
html
<template>
    <fu-button @click="handleModal">打开模态框</fu-button>

    <fu-modal ref="modalRef" :content="content"></fu-modal>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const modalRef = ref();
    const content = ref('fusions-ui的目标是成为uni-app生态最主流的UI框架');

    // methods方法
    const handleModal = () => {
        modalRef.value.open();
    };
</script>

传入富文本内容 ​

有时候我们需要给模态框的内容，不一定是纯文本的字符串，可能会需要换行，嵌入其他元素等，这时候我们可以使用 slot 插槽功能，再结合 uni-app 的 rich-text 组件，就能传入富文本内容了，示例：

html
<template>
    <fu-button @click="handleModal">打开模态框</fu-button>

    <fu-modal ref="modalRef" :content="content"></fu-modal>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const modalRef = ref();
    const content = ref(`秋水入海\n江海之鲸`);

    // methods方法
    const handleModal = () => {
        modalRef.value.open();
    };
</script>

实现异步关闭 ​

异步关闭只对 确定 按钮起作用，需要 asyncClose 属性为 true，当点击确定按钮的时候，按钮的文字变成一个loading动画，此动画的颜色为 confirmColor 属性的颜色，同时 modal 不会自动关闭，需要手动调用 close 方法来关闭模态框。

html
<template>
    <fu-button @click="handleModal">打开模态框</fu-button>

    <fu-modal ref="modalRef" asyncClose @confirm="handleConfirm"></fu-modal>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const modalRef = ref();

    // methods方法
    const handleModal = () => {
        modalRef.value.open();
    };

    const handleConfirm = () => {
        // 异步关闭模态框
        setTimeout(() => {
            // 2秒后自动关闭
            modalRef.value.close();
        }, 200);
    };
</script>

点击遮罩关闭 ​

在某种场景我们不需要显示 关闭 按钮的时候，需要点击遮罩也可以关闭 modal，这时可以通过 isMaskClick 属性为 true 来实现。

注：关闭事件需要自行处理，只会在开启 isMaskClick 后点击遮罩执行close回调。

html
<fu-modal ref="modalRef" isMaskClick></fu-modal>

设置模态框的宽度 ​

通过 width 属性可以设置模态框的宽度，不支持百分比，可以数值，px，rpx单位。

html
<fu-modal ref="modalRef" width="500px"></fu-modal>

API ​

属性名说明类型默认值可选值
title标题内容String--
content模态框内容，如传入slot内容，则此参数无效String--
confirmText确定按钮文字String确定-
cancelText取消按钮文字String取消-
confirmColor确定按钮颜色String#3c76ff-
cancelColor取消按钮颜色String#999999-
showConfirmButton是否显示确定按钮Booleantruefalse
showCancelButton是否显示取消按钮Booleanfalsetrue
asyncClose是否异步关闭Booleanfalsetrue
isMaskClick是否点击遮罩关闭Booleantruefalse
buttonReverse对调确认和取消的位置Booleanfalsetrue
negativeTop往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况String｜Number0-
width模态框宽度String｜Number650rpx-
align内容对齐方式Stringcenterleft/center/right
textStyle文本扩展样式String｜Object--
事件名说明回调参数
confirm点击确定按钮触发() => void
cancel点击取消按钮触发() => void
close点击遮罩关闭触发() => void
名称说明
default自定义模态框内容
confirmButton自定义按钮