vue-loop-marquee
v0.4.1
Published
## Project setup ``` npm install vue-loop-marquee ```
Downloads
15
Readme
vue-loop-marquee
这是一个跑马灯轮播组件,支持修改跑马灯字体样式、是否循环、跑马灯停顿时间、滚动一圈时间、跑马灯显示位置等配置。
安装
npm安装
npm install vue-loop-marquee
yarn安装
yarn add vue-loop-marquee
使用
全局
import vueLoopMarquee from 'vue-loop-marquee'
Vue.use(vueLoopMarquee);
局部
import vueLoopMarquee from 'vue-loop-marquee'
components{vueLoopMarquee};
组件位置
<vue-loop-marquee :options="{}" />
配置
{
/**
* @description marquee background color
* @type {String}
* @default bgColor = 'transparent'
*/
bgColor: 'transparent',
/**
* @description Up and down position
* @type {String}
* @default alignItems = 'center'
* @example alignItems = 'top' | 'center' | 'bottom'
*/
alignItems: 'center',
/**
* @description text content
* @type {String}
* @default content = '这是一个跑马灯组件'
*/
content: '这是一个跑马灯组件',
/**
* @description font size
* @type {Number<String>}
* @default fontSize = 16
*/
fontSize: 16,
/**
* @description font family
* @type {String}
* @default fontFamily = 'Microsoft YaHei'
*/
fontFamily: 'Microsoft YaHei',
/**
* @description letter spacing
* @type {Number<String>}
* @default fontFamily = 0
*/
letterSpacing: 0,
/**
* @description font weight
* @type {Number<String>}
* @default fontWeight = 'normal'
* @example alignItems = 'normal' | 'bold' | 100
*/
fontWeight: 'normal',
/**
* @description text color
* @type {String}
* @default fontWeight = '#000'
*/
color: '#000',
/**
* @description animation execution time
* @type {Number}
* @default animationTimer = 5000
*/
animationTimer: 5000,
/**
* @description pause time
* @type {Number}
* @default stopTimer = 1000
*/
stopTimer: 1000,
/**
* @description loop
* @type {Boolean}
* @default loop = true
*/
loop: true,
}