lx-data-run v1.0.22

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

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

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

组件 Prop:

组件 slot:

组件 自定义事件:

例子：

<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>