vue-notice-bar

vue-notice-bar

a notice-bar component for Vue2.0

Install

use npm:

  npm i -S vue-notice-bar

Usage

Like most of the Vue-Plugin:

  import Vue from 'vue'
  import NoticeBar from './lib'
  Vue.use(NoticeBar)

Then, use in your component:

  <notice-bar
    :text="msg"
    icon="http://o8sux93eg.bkt.clouddn.com/notice.png"
    :speed="30"
    :callback="handleAnimationEnd">
  </notice-bar>

  export default {
    name: 'app',
    components: {
      NoticeBar
    },
    data () {
      return {
        list: [
          '世界杯就要开始啦！',
          '德国、葡萄牙、阿根廷、西班牙相继出局',
          '巴西2:0淘汰墨西哥，日本竟然破了两次比利时的球门，虽败犹荣。',
          '这次到底谁才能成功捧起大力神杯呢？'
        ],
        msg: ''
      }
    },
    created () {
      this.index = 0
      this.msg = this.list[0]
    },
    methods: {
      handleAnimationEnd () {
        // update autoscroll content at the right time
        this.msg = this.list[++this.index]
        if (this.index === this.list.length - 1) {
          this.index = -1
        }
      }
    }
  }

API

propName	Type	Required	Default
color	String	false	#FFF
backgroundColor	String	false	#F60
icon	String	false	''
text	String	true	--
speed	Number	false	40
delay	Number	false	1 (s)
callback	Function	false	--

Development

  # for dev
  npm run dev