欢迎使用 lx-data-run 数据轮播表组件

相信大家在做大数据大屏展示的时候都用过 vue Data V,这是一个很不错的大屏数据展示组件库，但是这个组件库的轮播表组件就有很大的局限性。例如：自定义 dome 比较繁琐。

lx-data-run 解决的就是自定义 dome 滚动列表功能。支持动态增删数据。

组件 Prop:

| Prop 名称 | 数据类型 | 默认值 | 说明 | | -------------- | -------- | ------ | -------------------------------- | | itemShowLength | Number | 3 | 展示的数据条数 | | hoverStop | Boolean | false | 是否开启鼠标移入暂停滚动 | | cycle | Number | 2000 | 滚动一次需要的时间（单位：毫秒） | | data | Array | [] | 数据源 |

组件 slot:

| 插槽名称： | 插槽 Prop | | --------------- | -------------------- | | 匿名（default） | val (当前展示的数据) | | 匿名（default） | ind (当前展示的数据index) |

组件 自定义事件:

| 事件名称： | 返回值 | | ----------- | -------------- | | getShowList | 当前展示的数据 |

例子：

<template>
  <div>
    <lx-data-run
      :data="list"
      :item-show-length="2"
      :cycle="1000"
      @getShowList="getShowListFun"
      :hoverStop="true"
      #default="{val}"
    >
      <div class="page-box">
        <img :src="val" alt width="1000" height="375" />
      </div>
    </lx-data-run>
    <button @click="add">动态添加</button>
  </div>
</template>

<script>
import LxDataRun from "./components/LxDataRun";
export default {
  components: {
    LxDataRun,
  },
  data() {
    return {
      list: [
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db18a7bce84b7ee7c8411da8613cf051.jpg?w=2452&h=920",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ebff5f5c1f52f2dbdd611897adbefd4.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84cec825f1cd04ea6554fece8ecbc236.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
      ],
      showList: [],
    };
  },
  methods: {
    getShowListFun(data) {
      this.showList = data[0];
    },
    add() {
      this.list = [
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/db18a7bce84b7ee7c8411da8613cf051.jpg?w=2452&h=920",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ebff5f5c1f52f2dbdd611897adbefd4.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84cec825f1cd04ea6554fece8ecbc236.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/da777ad36da9d71f470464e5a20174d8.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
      ];
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.page-box {
  width: 1000px;
  height: 375px;
  background-color: #999;
  border: 1px solid #fff;
  text-align: center;
  line-height: 375px;
  color: #fff;
  font-size: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
</style>