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 [email protected])

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