Skip to content

chakan/vue-marquee-tips

 
 

Repository files navigation

npm npm

vue-marquee-tips

A Vue component to marquee

Demo


online demo >>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Usage

NPM

npm install vue-marquee-tips --save-dev
import MarqueeTips from 'vue-marquee-tips'
export default {
  components: {
    MarqueeTips
  }
}
<MarqueeTips content="我是一个短短的提示!"></MarqueeTips>
<MarqueeTips content="我是一个比较长的提示!拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧~~~~" style="color: red" :speed="3"></MarqueeTips>
<MarqueeTips content="加大字体提示:BigBigBigBig" style="font-size: 30px" font="30px sans-serif"></MarqueeTips>
             
<div style="width: 200px;margin: 0 auto;background-color: orange;">
  <MarqueeTips content="容器内提示:22222222222222222" :speed="3"></MarqueeTips>
  <MarqueeTips content="容器内提示:1111"></MarqueeTips>
</div>

Options

Name Type Default Description
content String undefined tooltips's content
font String 16px sans-serif tooltips's font
speed Number 5 animation-duration

License

MIT

About

基于Vue的横向跑马灯提示

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 80.9%
  • Vue 17.5%
  • HTML 1.6%