更新记录

0.2.1（2025-07-18） 下载此版本

• fix: 修复因隐藏还存在页面导致无法点击问题

0.1.9（2025-05-30） 下载此版本

• fix: 修复演示demo问题

0.1.8（2025-05-14） 下载此版本

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

平台兼容性

uni-app(4.62)

uni-app x(4.75)

lime-popup 弹出层

弹出层容器，用于展示弹窗、信息提示等内容，支持多种弹出位置和动画效果，兼容uniapp/uniappx。

插件依赖：lime-style、lime-shared、lime-overlay、lime-transition、lime-icon。 注意：lime-svg为收费插件，若不需要svg功能可删除依赖。

文档链接

📚 组件详细文档请访问以下站点：

• 弹出层文档 - 站点1
• 弹出层文档 - 站点2
• 弹出层文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-popup
2. 导入后可能需要重新编译项目
3. 在页面中使用l-popup组件（组件）或lime-popup（演示） ::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础用法

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

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

 const show = ref(false);

弹出位置

通过 position 属性设置弹窗的弹出位置，默认为居中弹出，可以设置为 top、bottom、left、right、center。

• 当弹窗从顶部或底部弹出时，默认宽度与屏幕宽度保持一致，弹窗高度取决于内容的高度。
• 当弹窗从左侧或右侧弹出时，默认不设置宽度和高度，弹窗的宽高取决于内容的宽高。

<!-- 顶部弹出 -->
<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/components/lime-popup -->
<lime-popup />

插件标签说明

• l-popup: 组件标签，用于实际开发中
• lime-popup: 演示标签，用于查看示例效果

Vue2使用说明

本插件使用了composition-api，如需在Vue2项目中使用，请按照官方教程配置。

关键配置代码（在main.js中添加）：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props

Events

Slots

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：	支付宝赞助	微信赞助