搜索Ctrl K

深色模式

弹出层 Popup ​

弹出层组件。

兼容性 ​

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

插件市场地址 ​

DCloud 插件市场地址

基础使用 ​

  • 通过 show 属性设置显示状态。
  • 通过 @close 事件监听关闭事件,需手动更新显示状态,组件不自动处理。
  • 通过默认 slot 嵌入内容。
vue
<template>
    <pure-popup :show="show" @close="show = false">
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-popup>
</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-popup :show="show" @close="show = false" header title="《将进酒》">
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-popup>
</template>

显示Footer ​

  • 通过 footer 属性设置是否显示 Footer。
  • 通过 #footer 插槽设置 Footer 内容。

重要提示 重要提示 重要提示

popup 的内容定义 class 的时候不要定义成 popup-{xxx} 这样的类名,在快手小程序中会出现莫名奇妙的坑,样式完全乱掉了,不要问我为什么知道的,说多了都是泪~~~

vue
<template>
    <pure-popup :show="show" @close="show = false" header title="《将进酒》" footer>
        <!-- `class` 不要定义成 `popup-content` | `class` 不要定义成 `popup-content` | `class` 不要定义成 `popup-content` -->
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
        <template #footer>
            <text class="modal-footer"> 作者: 唐·李白 </text>
        </template>
    </pure-popup>
</template>

显示关闭按钮 ​

  • 通过 close 属性设置是否显示关闭按钮。
  • 通过 closeIcon 属性自定义关闭按钮图标。
  • 通过 #close 插槽自定义关闭按钮内容。
  • 通过添加对应辅助类设置关闭按钮位置:
    • pure-popup-close-left: 关闭按钮在左边;
    • pure-popup-close-right: 关闭按钮在右边,默认;
    • pure-popup-close-bottom: 关闭按钮在下方;
    • pure-popup-close-top: 关闭按钮在上方;

提示

辅助类使用规则

vue
<template>
    <pure-popup :show="show" @close="show = false" close class="pure-popup-close-bottom">
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-popup>
</template>

禁止点击遮罩关闭 ​

  • 通过 stopCloseOnClickOverlay 属性阻止点击遮罩触发关闭事件。
vue
<template>
    <pure-popup :show="show" @close="show = false" stopCloseOnClickOverlay>
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-popup>
</template>

锁定背景滚动 ​

  • 直接给组件添加 @touchmove.stop.prevent="" 和 @wheel.stop.prevent="" 事件，即可锁定背景滚动。
  • 注意:在某些小程序端,添加对应事件后可能会导致内容也无法滚动。
vue
<template>
    <pure-popup :show="show" @close="show = false" @touchmove.stop.prevent="" @wheel.stop.prevent="">
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-popup>
</template>

内容位置 ​

  • 通过添加对应辅助类实现:
    • pure-popup-left: 内容左侧弹出;
    • pure-popup-right: 内容右侧弹出;
    • pure-popup-top: 内容顶部弹出;
    • pure-popup-bottom: 内容底部弹出;
    • pure-popup-center: 内容居中弹出,注意,此居中弹出和默认的效果有点不一样,默认没有弹动效果,此 class 右弹动效果;

提示

辅助类使用规则

vue
<template>
    <pure-popup :show="show" @close="show = false" close class="pure-popup-center">
        <view class="modal-content">
            <rich-text :nodes="content"></rich-text>
        </view>
    </pure-popup>
</template>

自定义过渡动画 ​

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

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

Props ​

属性名说明类型默认值可选值版本
hoverClass关闭按钮的 hover-class,同 view 的 hover-classString"pure-hover"-+1.0.0
show显示状态Booleanfalsetrue+1.0.0
header是否显示HeaderBooleanfalsetrue+1.0.0
footer是否显示FooterBooleanfalsetrue+1.0.0
close是否显示关闭按钮Booleanfalsetrue+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
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 ​

事件名说明回调参数版本
close关闭事件-+1.0.0
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

Slots ​

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

基于 MIT 许可发布

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