更新记录

0.0.5(2024-11-14) 下载此版本

  • fix: css transition-duration问题

0.0.4(2024-11-13) 下载此版本

  • chore: 更新文档

0.0.3(2024-11-03) 下载此版本

  • feat: z-index降到887
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.28 app-vue app-uvue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

lime-overlay 遮罩层

  • 通过遮罩层,可以强调部分内容
  • 插件依赖lime-style,lime-shared,lime-transition,不喜勿下

安装

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

代码演示

基础用法

<button @click="onClick">显示</button>
<l-overlay :visible="show" @click="onClick"></l-overlay>
const show = ref(false);
const onClick = () => {
    show.value = !show.value
}

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

<button @click="onClick">显示</button>
<l-overlay :visible="show" @click="onClick">
    <view class="wrapper">
        <view class="block" />
    </view>
</l-overlay>
const show = ref(false);
const onClick = () => {
    show.value = !show.value
}

查看示例

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

插件标签

  • 默认 l-overlay 为 component
  • 默认 lime-overlay 为 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

参数 说明 类型 默认值
visible 是否展示遮罩层 boolean false
z-index z-index 层级 number 1000
duration 动画时长,单位ms,设置为 0 可以禁用动画 number 300
lStyle 样式 string ``

Events

事件名 说明 回调参数
click 点击时触发 -

Slots

名称 说明
default 默认插槽,用于在遮罩层上方嵌入内容

主题定制

样式变量

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

名称 默认值 描述
--l-overlay-z-index 1000 -
--l-overlay-background rgba(0, 0, 0, 0.6) -

打赏

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

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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