更新记录

0.0.2（2024-10-09） 下载此版本

• fix: 修复vue2 icon为true的情况

0.0.1（2024-10-09） 下载此版本

• init

平台兼容性

lime-notice-bar 通知栏

• 公告栏通知栏 用于循环播放展示一组消息通知。兼容uniapp/uniappx(h5,ios,安卓)
• 插件依赖lime-shared、lime-style、lime-icon，不喜勿下

安装

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

代码演示

基础使用

通过 text 属性设置通知栏的内容，可以是文本数组。。

<l-notice-bar text="这是一条普通的通知信息"/>

纯文字

通过 left-icon 属性设置左侧图标，默认是info-circle-filled,设置为空即可去掉图标。

<l-notice-bar text="这是一条普通的通知信息" left-icon=''/>

右侧图标

通过 right-icon 属性设置右侧图标，当点击右侧图标会触是click事件。

<l-notice-bar text="这是一条普通的通知信息" right-icon="close" @click="handleClick" />
<l-notice-bar text="这是一条普通的通知信息" right-icon="arrow-right" @click="handleClick" />

多行展示

字较长时，可以通过设置 wrapable 属性来开启多行展示

<l-notice-bar :wrapable="true" text="这是一条普通的通知信息这是一条普通的通知信息"/>

滚动播放

通过 marquee 属性设置为true自动开启滚动播放。

<l-notice-bar :marquee="true" text="这是一条普通的通知信息这是一条普通的通知信息"/>

垂直播放

通过 marquee 属性设置为true，通过vertical属性设置为true可开启垂直播放，此时文本最好是数组。

<l-notice-bar :marquee="true" :vertical="true" :text="['这是一条普通的通知信息这是一条普通的通知信息','这是一条普通的通知信息这是一条普通的通知信息']"/>

类型

类型有普通（info）、警示（warning）、成功（success）、错误（danger）

<l-notice-bar type="info" text="这是一条普通的通知信息这是一条普通的通知信息"/>
<l-notice-bar type="success" text="这是一条普通的通知信息这是一条普通的通知信息"/>
<l-notice-bar type="danger" text="这是一条普通的通知信息这是一条普通的通知信息"/>
<l-notice-bar type="warning" text="这是一条普通的通知信息这是一条普通的通知信息"/>

自定义样式

通过bg-color设置是背景色，color设置文本颜色，left-icon-color设置左侧图标颜色

<l-notice-bar bg-color="#3283ff" color="white" left-icon-color="white" text="这是一条普通的通知信息这是一条普通的通知信息"/>

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-notice-bar/compoents/lime-notice-bar -->
<lime-notice-bar />

插件标签

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

主题定制

样式变量

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

打赏

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