marquee 走马灯
1: 支持 上下左右四个方向移动
2: 支持在任何屏幕、任何宽度文字情况下,保持匀速
3: 在移动过程中,动态增长了文字内容,可调用控件的 refresh 刷新一下
备注: 使用控件前请确认是否满足业务需求,如有合理的个性化需求,控件会考虑后期整理迭代
git 地址:
https://git.corpautohome.com/gp_rd_fe_dealer/Dealer_Components/tree/marquee
cdn 地址:
<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/vue/vue.min.js"></script>
<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/marquee/marquee.min.0.0.2.js"></script>
demo 页
http://10.168.66.123:9090/out/dealerUI/demo/components/marquee/index.html#/marquee
node 环境引入
1:安装
npm install dlrmarquee (如指定版本号:npm install dlrmarquee@0.0.2)
2:引入并注册
import Vue from 'vue'
import dlrMarquee from 'dlrmarquee'
Vue.use(dlrMarquee)
Demo :
<template>
<section>
<div>
<dlr-marquee ref="ahMq1"
:style="{width:'300px',height:'50px',border:'solid 1px #c5c5c5'}">
<dlr-marquee-item slot='dlr-marquee-item'>
<div>
<div>1:这是一个测试A,这是一个测试B,这是一个测试C,这是一个测试D,这是一个测试E,这是一个测试F,这是一个测试G,这是一个测试H
</div>
<div>2:这是一个测试A,这是一个测试B,这是一个测试C,这是一个测试D,这是一个测试E,这是一个测试F,这是一个测试G,这是一个测试H
</div>
<div>3:这是一个测试A,这是一个测试B,这是一个测试C,这是一个测试D,这是一个测试E,这是一个测试F,这是一个测试G,这是一个测试H
</div>
</div>
</dlr-marquee-item>
</dlr-marquee>
</div>
</section>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
this.$nextTick(() => {
this.start()
})
},
methods: {
start () {
this.$refs.ahMq1.start()
}
}
}
</script>
API
props
参数 | 说明 | 类型 | 默认值 |
---|
direction | up、down、left、right | String | left |
speed-rate | 速度倍率,大于1 变慢,小于1 变快 | Number | 1 |
slot | 改值必须是:'dlr-marquee-item' | String | |
方法
name | 描述 | 参数 |
---|
start | 启动 | |
refresh | 刷新,用于在移动过程中 动态改变了文字长度 | |