bacchusgift / infinite-notice-bar Goto Github PK

  <template>
    <div>
      // 建议放在任意位置使用绝对定位将通知栏定位 
      // 若是非H5应用(没有做rem和px的转换) 大小需要自行调整
      <NoticeBar
          class="notice-bar"
          has-icon
          bar-color="rgba(255,255,255,0.5)" // 通知栏组件的颜色,建议使用rgba,可以设置透明度,最后一位0.5即是透明度
          :notice-list="noticeList" // 可以传入一个复杂的list,不可以和simple-list共存
          :simple-list="simpleList" // 可以传入一个简单的list,不可以和notice-list共存
          time-str // 默认有时间戳文字 ( 3s前 ,1s前 这样) 
         >//直接写action文字可以直接替换(action看说明文档)</NoticeBar>
    </div>	
  </template>
  <script>
    import NoticeBar from './infinite-notice-bar/infinite-notice-bar'
    export default {
    name: 'NoticeBar',
    data () {
      return {
        number: 0,
        simpleList: [
          "你在说什么?",
          "你要给我一个赞吗?"
        ],
        noticesList: [
          {
            name: '哈哈哈',
            icon: 'http://youlehe-pic.yiyayouxi.com/icon/900001.jpg',
            content: 'vivo X27Pro',
            timeStr: '3秒前'
          },
          {
            name: '啦啦啦',
            icon: 'http://youlehe-pic.yiyayouxi.com/icon/900001.jpg',
            content: 'vivo X27Pro',
            timeStr: '3秒前'
          }
        ]
      }
    }
  }
  </script>
  <style scoped>
  </style>

<NoticeBar
 class="notice-bar"
 :notice-list="noticeList"
  timeStr
 >
  领取了
</NoticeBar>