更新记录

0.1.9(2025-05-30) 下载此版本

  • fix: 修复演示demo问题

0.1.8(2025-05-14) 下载此版本

  • feat: 关闭icon 单位由rpx改成px

0.1.7(2025-05-07) 下载此版本

  • feat: 增加radius圆角属性
查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - -

uni-app x

Chrome Safari Android iOS 鸿蒙 微信小程序
5.0 12 -

lime-popup 弹出层

  • 弹出层容器,用于展示弹窗、信息提示等内容,兼容uniapp/uniappx
  • 插件依赖lime-style,lime-shared,lime-overlay,lime-transition,lime-icon,lime-svg 为收费,若不需要svg,可以在代码里注释掉即可

安装

插件市场导入即可,首次导入可能需要重新编译

注意

  • 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件,如果购买(收费为5元)则需要自定义基座,才能使用!uniapp可忽略。
  • 🔔 如果不需要lime-svg在lime-icon代码中注释掉即可
// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

代码演示

基础用法

通过 v-model 控制弹出层是否展示。

<button @click="show = true">展示弹出层</button>
<l-popup v-model="show">
    <view style="padding: 100px;"></view>
</l-popup>
 const show = ref(false);

弹出位置

通过 position 属性设置弹窗的弹出位置,默认为居中弹出,可以设置为 topbottomleftrightcenter

  • 当弹窗从顶部或底部弹出时,默认宽度与屏幕宽度保持一致,弹窗高度取决于内容的高度。
  • 当弹窗从左侧或右侧弹出时,默认不设置宽度和高度,弹窗的宽高取决于内容的宽高。
<!-- 顶部弹出 -->
<l-popup v-model"showTop" position="top">
    <view style="padding: 100px;"></view>
</l-popup>
<!-- 左边弹出 -->
<l-popup v-model"showTop" position="left">
    <view style="padding: 100px;"></view>
</l-popup>
<!-- 底部弹出 -->
<l-popup v-model"showTop" position="bottom">
    <view style="padding: 100px;"></view>
</l-popup>
<!-- 右边弹出 -->
<l-popup v-model"showTop" position="right">
    <view style="padding: 100px;"></view>
</l-popup>

关闭图标

设置 closeable 属性后,会在弹出层的右上角显示关闭图标,并且可以通过 close-icon 属性自定义图标。

<l-popup v-model"showTop" :closeable="true">
    <view style="padding: 100px;"></view>
</l-popup>

监听点击事件

Popup 支持以下点击事件:

  • click-overlay: 点击遮罩层时触发。
  • click-close: 点击关闭图标时触发。
<button @click="show = true">展示弹出层</button>
<l-popup
  v-model"show"
  position="bottom"
  :closeable="true"
  @click-overlay="onClickOverlay"
  @click-close="onClickClose"
/>
const onClickOverlay = () => {
    console.log('click-overlay');
};
const onClickClose = () => {
    console.log('click-close');
};

监听显示事件

当 Popup 被打开或关闭时,会触发以下事件:

  • open: 打开弹出层时立即触发。
  • opened: 打开弹出层且动画结束后触发。
  • close: 关闭弹出层时立即触发。
  • closed: 关闭弹出层且动画结束后触发。
<button @click="show = true">展示弹出层</button>
<l-popup
  v-model="show"
  position="bottom"
  @open="handlePopupOpen"
  @opened="handlePopupOpened("
  @close="handlePopupClose"
  @closed="handlePopupClosed"
/>
const show = ref(false);
 const handlePopupOpen = () => {
    // 处理弹出框打开前的逻辑
}
 const handlePopupOpened = () => {
    // 处理弹出框打开后的逻辑
}
 const handlePopupClose = () => {
    // 处理弹出框关闭前的逻辑
}
const  handlePopupClosed = () => {
    // 处理弹出框关闭后的逻辑
}

查看示例

  • 导入后直接使用这个标签查看演示效果
<!-- // 代码位于 uni_modules/lime-popup/compoents/lime-popup -->
<lime-popup />

插件标签

  • 默认 l-popup 为 component
  • 默认 lime-popup 为 demo

关于vue2的使用方式

  • 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
  • 关键代码是: 在main.js中 在vue2部分加上这一段即可
    // vue2
    import Vue from 'vue'
    import VueCompositionAPI from '@vue/composition-api'
    Vue.use(VueCompositionAPI)

API

Props

参数 说明 类型 默认值
v-model 是否显示弹出层 boolean false
overlay 是否显示遮罩层 boolean true
position 弹出位置,可选值为 top bottom right left string center
duration 动画时长,单位毫秒,设置为 0 可以禁用动画 number 300
z-index 将弹窗的 z-index 层级设置为一个固定值 number 999
preventScrollThrough 是否锁定背景滚动 boolean true
closeOnClickOverlay 是否在点击遮罩层后关闭 boolean true
destroyOnClose 关闭后是否销毁 boolean false
closeable 是否显示关闭图标 boolean false
closeIcon 关闭图标名称或图片链接,等同于 Icon 组件的 name 属性 string cross
bgColor 背景色 string -
iconColor 图标色 string -
lStyle 自定义样式 string|object -
radius 圆角,可以是字符,数值,数组 string|number|Array\<string|number> -

Events

事件名 说明 回调参数
click-overlay 点击遮罩层时触发 -
click-close 点击关闭图标时触发 -
open 打开弹出层时立即触发 -
close 关闭弹出层时立即触发 -
opened 打开弹出层且动画结束后触发 -
closed 关闭弹出层且动画结束后触发 -

Slots

名称 说明
default 弹窗内容
close-btn 关闭按钮

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,uvue app无效。

名称 默认值 描述
--l-popup-bg-color #fff -
--l-popup-close-icon-color rgba(0,0,0,0.6) -
--l-popup-border-radius $border-radius -

打赏

如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问