NoticeBar 通知栏

使用指南

在导航栏下方，一般用作系统提醒、活动提醒等通知。

规则

• 需要引起用户关注时使用，重要级别低于 Modal ，高于 Toast。

代码演示

查看代码

<template>
  <div class="list">
    <p>最多显示2行</p>
    <h3-notice-bar type="default" action="close">
      type is default type is default type is default type is default type is default type is default
    </h3-notice-bar>
    <br />
    <h3-notice-bar type="primary" action="close">
      type is primary type is primary type is primary type is primary type is primary type is primary
    </h3-notice-bar>
    <br />
    <h3-notice-bar type="warning" action="close">
      type is warning type is warning type is warning type is warning type is warning type is warning
    </h3-notice-bar>
    <br />
    <h3-notice-bar type="error" action="close">
      type is error type is error type is error type is error type is error type is error type is error
    </h3-notice-bar>
    <br />
    <h3-notice-bar type="success" action="close">
      type is success type is success type is success type is success type is success type is success
    </h3-notice-bar>
    <br />
    <p>走马灯效果</p>
    <h3-notice-bar
      :leading="5000"
      type="default"
      action="close"
      marquee
      loop
    >
      type is default type is default type is default type is default type is default type is default
    </h3-notice-bar>
    <br />
    <h3-notice-bar
      :trailing="5000"
      type="primary"
      action="close"
      marquee
      loop
    >
      type is primary type is primary type is primary type is primary type is primary type is primary
    </h3-notice-bar>
    <br />
    <h3-notice-bar
      type="warning"
      action="close"
      marquee
      loop
    >
      type is warning type is warning type is warning type is warning type is warning type is warning
    </h3-notice-bar>
    <br />
    <h3-notice-bar
      type="error"
      action="close"
      marquee
      loop
    >
      type is error type is error type is error type is error type is error type is error type is error
    </h3-notice-bar>
    <br />
    <h3-notice-bar
      type="success"
      action="close"
      marquee
      loop
    >
      type is success type is success type is success type is success type is success type is success
    </h3-notice-bar>
    <br />
    <h3-notice-bar final="forwards" marquee>
      Notice: final="forwards" final="forwards" final="forwards" final="forwards" final="forwards"
      滚动完毕后显示后面文本
    </h3-notice-bar>
    <br />
    <h3-notice-bar final="backwards" marquee>
      Notice: 滚动完毕后显示前面文本 final="backwards" final="backwards" final="backwards" final="backwards"
      final="backwards"
    </h3-notice-bar>
    <br />
    <p>功能按钮</p>
    <h3-notice-bar action="link" @click="onClick">
      Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
    </h3-notice-bar>
    <br />
    <h3-notice-bar action="close">
      Remove the default icon.
    </h3-notice-bar>
    <br />
    <h3-notice-bar action="close">
      <h3-icon slot="icon" type="check-circle-o" />
      Customized icon.
    </h3-notice-bar>
    <br />
    <h3-notice-bar action="close">
      <span slot="action" style="color: #a1a1a1;">不再提示</span>
      close demo for `actionText`.
    </h3-notice-bar>
    <br />
    <h3-notice-bar action="link">
      <span slot="action">去看看</span>
      Link demo for `actionText`.
    </h3-notice-bar>
    <br />
    <h3-notice-bar @click="onClick">
      <span>{{ text }}</span>
    </h3-notice-bar>
  </div>
</template>
<script>
import H3NoticeBar from '@/components/h3-notice-bar';
import H3Icon from '@/components/h3-icon/';

export default {
  components: {
    H3NoticeBar,
    H3Icon,
  },
  data () {
    return {
      text: 'click change text',
      clickbBool: false,
    };
  },
  methods: {
    onClick () {
      // if (this.clickbBool) {
      //   this.text = '你好吗 你好吗 你好吗 你好吗 你好吗 你好吗 你好吗 你好吗 你好吗 你好吗 你好吗';
      // } else {
      //   this.text = '我挺好 我挺好 我挺好 我挺好 我挺好 我挺好 我挺好 我挺好 我挺好 我挺好 我挺好';
      // }
      // this.clickbBool = !this.clickbBool;
      this.text = 'click change text '.repeat(Math.random() * 10 + 1);
    },
  },
};
</script>
<style lang="less" scoded>
.list {
  background: #fff;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

将跑马灯组件抽离成基础组件，新增4种状态

若要做迁移请参考

1. 弃用的props：onClick marqueeProps
2. 替换的props：
   • mode => action
3. 新增的props：text loop leading trailing fps type gpuAcceleration final

API

Prop

属性	说明	类型	默认值
visible	是否呈现，v-model绑定值，默认呈现	boolean	true
action	提示类型，可选close,link，若slot:action被使用则不显示默认图标，值为close点击将隐藏并触发事件event:toggle, 值为 link 点击触发事件event:link	string	''
icon	在开始位置设置图标，若slot:icon被使用则不显示默认图标	string	''
type	通知栏类型 可选default primary warning error success	string	default
text	通知栏文本，若slot:default被使用则不显示	string	''
marquee	是否启用走马灯效果显示	boolean	false
loop	marquee: true时生效，是否循环滚动	boolean	false
leading	marquee: true时生效，首次及循环时首部文本停留时间，单位ms，最少1000ms	number	1000
trailing	marquee: true时生效，循环时尾部文本停留时间，单位ms，最少1000ms	number	1000
final	marquee: true时生效，结束滚动时文本显示首部backwards还是尾部forwards，prop:loop=true时不生效	string	forwards
gpuAcceleration	marquee: true时生效，是否启用gpu加速	boolean	true
fps	marquee: true时生效，每秒帧数	number	60

Slot

属性	说明	参数
icon	导航栏首部插槽	-
default	默认插槽，导航栏内容	-
action	导航栏尾部插槽	-

Event

事件名称	说明	回调参数
toggle	v-model绑定事件	(visible：boolean)
show	显示时回调	-
hide	关闭时回调	-
click	点击事件	(evt: event)
link	点击prop:action="link" 触发事件	-
finish	滚动到尾部且过了尾部文本停留时间时触发完成一次滚动事件	-

Function

• 实例方法

方法名	说明	参数
run	启动跑马灯，存在内容不同但长度一致时会出现不滚动情况时可以手动调用启动滚动	-