vue跑马灯

- - 组件props
  - colOption

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

<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><divclass="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>