vue跑马灯

vue跑马灯

使用elementui的布局组件实现列宽度

vue 复制代码
<template>
  <div class="lamp-container">
    <div class="lamp-header">
      <el-row :gutter="10">
        <el-col v-for="col in column" :key="col.prop" :span="col.span || 6">
          <slot :name="col.headSlot" :col="col">{{ col.label }}</slot>
        </el-col>
      </el-row>
    </div>
    <div
      class="lamp-wrapper"
      :style="{ height: height + 'px' }"
      ref="wrapper"
      @mouseover="stopCount"
      @mouseout="count"
    >
      <div class="lamp-list" ref="list">
        <div class="lamp-slide" v-for="item in data">
          <el-row :gutter="10">
            <el-col v-for="col in column" :key="col.prop" :span="col.span || 6">
              <slot :name="col.slot" :row="item">{{ item[col.prop] }}</slot>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="lamp-list" v-if="showClone">
        <div class="lamp-slide" v-for="item in data">
          <el-row :gutter="10">
            <el-col v-for="col in column" :key="col.prop" :span="col.span || 6">
              <slot :name="col.slot" :row="item">{{ item[col.prop] }}</slot>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @file 跑马灯组件 my-lamp
 * @author 孔
 * @date 2023-12-25
 * @param column {() => ({
 *  label: '名称',  列标题
 *  prop: 'name',   data 中的属性
 *  span: 6, 列宽度
 *  slot: 'name', 数据插槽
 *  headSlot:'name', 表头插槽}[])} 列配置
 * @param data {Array} 数据
 * @param height {Number} 高度
 * @param speed {Number}    速度
 * @slot headSlot {String} 表头插槽
 * @slot slot {String} 数据插槽
 *
 * column item配置   {
 * }
 */
export default {
  name: "MyLamp",
  props: {
    column: Array,
    data: Array,
    height: {
      type: [Number, String],
      default: 200,
    },
    speed: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      showClone: false,
      timer: null,
    };
  },
  watch: {
    data: {
      handler() {
        this.init();
      },
      deep: true,
      immediate: true,
    },
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
  },
  methods: {
    init() {
      this.$nextTick(() => {
        if (this.$refs.list.offsetHeight > this.height) {
          this.showClone = true;
          this.count();
        } else {
          this.showClone = false;
          this.stopCount();
        }
      });
    },
    stopCount() {
      if (this.timer) clearInterval(this.timer);
    },
    count() {
      if (!this.showClone) return;
      if (this.timer) clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.Marquee();
      }, 50);
    },
    Marquee() {
      if (this.$refs.wrapper.scrollTop >= this.$refs.list.offsetHeight) {
        this.$refs.wrapper.scrollTop = 0;
      } else {
        this.$refs.wrapper.scrollTop += Number(this.speed);
      }
    },
  },
};
</script>

<style scoped>
.lamp-header {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
.lamp-wrapper {
  overflow: hidden;
  position: relative;
}
.lamp-wrapper .lamp-slide {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.lamp-wrapper .lamp-slide:nth-child(even) {
  background: #08247e;
}
</style>

组件props

属性 类型 说明 默认值
column colOption[] 列配置 -
data Array 显示得数据 -
height Number|String 滚动区域高度 200
speed Number 滚动速度 1

colOption

属性 类型 说明 默认值
label String 列名称 -
prop String data中得属性 -
span Number 列宽度 6
headSlot String 列头插槽名称 -
slot String 列插槽名称 -
相关推荐
前端小趴菜052 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情5 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz5 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258595 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
ohMyGod_1237 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js