搜索 K

深色模式

对话框 Modal ​

对话框组件。

兼容性 ​

  • 兼容：✅
  • 不兼容：❌
  • 未知：❔
H5安卓苹果微信支付宝百度抖音QQ快手飞书京东
✅✅✅✅✅✅✅✅✅✅✅
小红书鸿蒙360华为快应用快应用联盟
✅❔❔❔❔

插件市场地址 ​

DCloud 插件市场地址

基础使用 ​

  • 通过 show 属性设置显示状态。
  • 通过 showCancel 设置是否显示取消按钮。
  • 通过 showConfirm 设置是否显示确认按钮。
  • 通过 @cancel 监听取消事件。
  • 通过 @confirm 监听确认事件。
  • 通过默认 slot 嵌入内容。
vue
<template>
    <pure-modal :show="show" @cancel="handleCancel" @confirm="handleConfirm" showCancel showConfirm>
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-modal>
</template>

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

// 显示状态
const show = ref(false);

// 内容
const content = ref(`
    <p>君不见，黄河之水天上来，奔流到海不复回。</p>
    <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
    <p>人生得意须尽欢，莫使金樽空对月。</p>
    <p>天生我材必有用，千金散尽还复来。</p>
    <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
    <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
    <p>与君歌一曲，请君为我倾耳听。</p>
    <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
    <p>古来圣贤皆寂寞，惟有饮者留其名。</p>
    <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
    <p>主人何为言少钱，径须沽取对君酌。</p>
    <p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
`);
</script>

显示Header ​

  • 通过 header 属性设置是否显示 Header。
  • 通过 title 属性设置 Header 标题。
vue
<template>
    <pure-modal :show="show" header title="《将进酒》" @cancel="handleCancel" @confirm="handleConfirm" showCancel showConfirm>
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-modal>
</template>

自定义按钮类名 ​

  • 通过 cancelClass 自定义取消按钮类名。
  • 通过 confirmClass 自定义确认按钮类名。
vue
<template>
    <pure-modal
        :show="show"
        header
        title="《将进酒》"
        @cancel="handleCancel"
        @confirm="handleConfirm"
        showCancel
        showConfirm
        cancelClass="pure-button-warning"
        confirmClass="pure-button-primary"
    >
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-modal>
</template>

禁止点击遮罩关闭 ​

  • 通过 stopCloseOnClickOverlay 属性阻止点击遮罩触发关闭事件。
vue
<template>
    <pure-modal
        :show="show"
        header
        title="《将进酒》"
        @cancel="handleCancel"
        @confirm="handleConfirm"
        showCancel
        showConfirm
        cancelClass="pure-button-warning"
        confirmClass="pure-button-primary"
        stopCloseOnClickOverlay
    >
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-modal>
</template>

锁定背景滚动 ​

  • 直接给组件添加 @touchmove.stop.prevent="" 和 @wheel.stop.prevent="" 事件，即可锁定背景滚动。
  • 注意:在某些小程序端,添加对应事件后可能会导致内容也无法滚动。
vue
<template>
    <pure-modal
        :show="show"
        header
        title="《将进酒》"
        @cancel="handleCancel"
        @confirm="handleConfirm"
        showCancel
        showConfirm
        cancelClass="pure-button-warning"
        confirmClass="pure-button-primary"
        stopCloseOnClickOverlay
        @touchmove.stop.prevent=""
        @wheel.stop.prevent=""
    >
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-modal>
</template>

自定义过渡动画 ​

  • 通过覆写样式变量实现自定义过渡动画,具体查看下方示例.
vue
<template>
    <pure-popup :show="show" class="custom-modal-animation"></pure-popup>
</template>

<style lang="scss" scoped>
// 自定义过渡动画写法示例
.custom-modal-animation {
    // 过渡动画函数
    --pure-modal-transition-timing-function: ease-in-out;
    // 显示前的初始状态
    --pure-modal-content-before-show-transform: translate(-50%, -50%) scale(0) rotate(0deg);
    // 显示中的过渡状态
    --pure-modal-content-to-show-transform: translate(-50%, -50%) scale(1.25) rotate(360deg);
    // 最终显示状态
    --pure-modal-content-show-transform: translate(-50%, -50%) scale(1) rotate(0deg);
    // 隐藏前的初始状态
    --pure-modal-content-before-hide-transform: translate(-50%, -50%) scale(1) rotate(0deg);
    // 隐藏中的过渡状态
    --pure-modal-content-to-hide-transform: translate(-50%, -50%) scale(1.25) rotate(360deg);
    // 最终隐藏状态
    --pure-modal-content-hide-transform: translate(-50%, -50%) scale(0) rotate(0deg);
}
</style>

Props ​

属性名说明类型默认值可选值版本
show显示状态Booleanfalsetrue+1.0.0
header是否显示HeaderBooleanfalsetrue+1.0.0
overlay是否显示遮罩Booleanfalsetrue+1.0.0
title标题String-true+1.0.0
scrollX是否可横向滚动Booleanfalsetrue+1.0.0
scrollY是否可纵向滚动Booleantruefalse+1.0.0
stopCloseOnClickOverlay是否阻止点击遮罩触发关闭事件Booleanfalsetrue+1.0.0
showConfirm是否显示确认按钮Booleanfalsetrue+1.0.0
showCancel是否显示取消按钮Booleanfalsetrue+1.0.0
confirmText确认按钮文字String确认-+1.0.0
cancelText取消按钮文字String取消-+1.0.0
cancelCalss取消按钮自定义类名String--+1.0.0
confirmClass确认按钮自定义类名String--+1.0.0
cancelOpts取消按钮的配置,参考Objectnull-+1.0.0
confirmOpts确认按钮的配置,参考Objectnull-+1.0.0
hideLine隐藏底部边框,在自定义按钮样式时很有用Booleanfalsetrue+1.0.0
showScrollbar是否显示滚动条Booleanfalse-+1.0.0
upperThreshold距顶部/左边多远时（单位px），触发 scrolltoupper 事件,实测快手小程序 scroll-view 无法触发此事件,可能时快手的BUG[Number, String]50-+1.0.0
lowerThreshold距底部/右边多远时（单位px），触发 scrolltolower 事件,实测快手小程序 scroll-view 无法触发此事件,不是组件问题,但时用代码模拟实现了该事件[Number, String]50-+1.0.0
refresherEnabled开启自定义下拉刷新Booleanfalse-+1.0.0
refresherThreshold设置自定义下拉刷新阈值Number45-+1.0.0
refresherDefaultStyle设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式Stringblack-+1.0.0
refresherBackground设置自定义下拉刷新区域背景颜色String#FFF-+1.0.0
refresherTriggered设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发Booleanfalse-+1.0.0

Event ​

事件名说明回调参数版本
confirm确认按钮点击事件-+1.0.0
cancel取消按钮点击事件-+1.0.0
scrollUpper下拉触顶事件-+1.0.0
scrollLower上拉触底事件-+1.0.0
refresherPulling自定义下拉刷新控件被下拉-+1.0.0
refresherRefresh自定义下拉刷新被触发-+1.0.0
refresherRestore自定义下拉刷新被复位-+1.0.0
refresherAbort自定义下拉刷新被中止-+1.0.0
<button> 组件的原生事件参考,注意,带参数的事件,除了第一个参数原样传递之外,还有第二个参数 form: 'cancel 或 confirm', 表示是取消按钮触发的还是确认按钮触发的-+1.0.0

Slots ​

名称说明参数版本
#headerHeader-+1.0.0
#footerFooter-+1.0.0
#default默认内容-+1.0.0
#confirm确认按钮-+1.0.0
#cancel取消按钮-+1.0.0

基于 MIT 许可发布

版权所有 © 2024-2029 济南晨霜信息技术有限公司