dlrmarquee

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>
        <!-- start dlr-marquee -->
        <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>
        <!-- end 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	刷新，用于在移动过程中 动态改变了文字长度