LimePopup 弹出层

• 弹出层容器，用于展示弹窗、信息提示等内容,兼容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 属性设置弹窗的弹出位置，默认为居中弹出，可以设置为 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/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	-

打赏

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

源代码

组件源码