前言

公司展示大屏需要寫滾動表格，通過滾動播放資料，自己隨便摸了一個基于影片的自動滾動表格

原理

根據每行的大小和設定的每行滾動時間設定滾動位置，動態添加影片，并把陣列第一項移動到最后一項，并訂閱該影片結束的事件，在結束時回圈執行該操作，

其他功能

• 可自定義單元格或行
• 可設定中文映射和取消顯示
• 單元格默認基于網格的回應式大小
• 滑鼠進入時可設定暫停

代碼

<template>
      <div  v-if="!props.noTitle">
        <div
          v-for="item in props.displayTitles ?? Object.keys(props. List[0])"
          :key="item"
        >
          {{ props.titleMapping?.get(item) ?? item }}
        </div>
      </div>
    <div >
      <div
        ref="container"
        
        v-on:mouseenter="() => {if(props.pauseWhenMouseEnter) animation?.pause()}"
        v-on:mouseleave="() => {if(props.pauseWhenMouseEnter) animation?.play()}"
      >
        <!-- 行插槽，作用于每個單元格，設定每個單元格的格式，設定 item-container 型別可繼承組件定義的樣式 -->
        <slot
          name="row"
          v-for="(item, index) in innerList"
          :key="item.id"
          :item="item"
          :index="index"
        >
          <div >
            <!-- 默認插槽，作用于每個單元格，設定每個單元格的格式，設定 item 型別可繼承組件定義的樣式 -->
            <slot
              v-for="key in props.displayTitles ?? Object.keys(props.list[0])"
              :key="key"
              :item="Object.keys(item.data).includes(key) ? item.data[key] ? item.data[key] : props.undefinedPlaceholder : props.undefinedPlaceholder"
            >
              <div >
                {{ Object.keys(item.data).includes(key) ? item.data[key] ? item.data[key] : props.undefinedPlaceholder : props.undefinedPlaceholder }}
              </div>
            </slot>
          </div>
        </slot>
      </div>
    </div>
</template>

<script setup lang="ts">
import BaseBox from "./BaseBox.vue";
import {
  defineProps,
  withDefaults,
  onMounted,
  computed,
  ref,
  watch,
} from "vue";
const props = withDefaults(
  defineProps<{
    // 屬性名翻譯為標題，默認值 屬性名串列
    titleMapping?: Map<string, string>;
    // 列寬，與 grid-template-columns 格式，默認值 repeat(${props.displayTitles?.length ?? Object.keys(props.list[0]).length}, 1fr)
    columnSizes?: string;
    // 串列
    list: Array<any>;
    // 展示哪些標題，默認值 全部展示
    displayTitles?: Array<string>;
    // 走完每一行的時間，默認值 2300 ms
    interval?: number;
    // 是否顯示標題行，默認值 true
    noTitle?: Boolean;
    // 屬性無引數時替換為某字串，默認值 --
    undefinedPlaceholder?: string;
    // 滑鼠進入時暫停，默認值 true
    pauseWhenMouseEnter?: Boolean;
  }>(),
  {
    interval: 2300,
    noTitle: false,
    undefinedPlaceholder: "--",
    pauseWhenMouseEnter: false,
  }
);
const innerList = ref<Array<{ id: number; data: any }>>(
  props.list.map((item, index) => ({ id: index, data: item }))
);
const container = ref<HTMLDivElement>();
onMounted(() => {
  animate(true);
});
// 監控資料串列更新
watch(
  () => props.list,
  () => {
    innerList.value = props.list.map((item, index) => ({
      id: index,
      data: item,
    }));
  }
);
// 計算列大小
const columnSize = computed(() => {
  return (
    props.columnSizes ??
    `repeat(${
      props.displayTitles?.length ?? Object.keys(props.list[0]).length
    }, 1fr)`
  );
});
// 進行影片
const animation = ref<Animation>();
const animate = (isStart = false) => {
  // 計算影片高度
  let height = 0;
  if (!isStart) {
    height = -container.value!.children[1].getBoundingClientRect().height;
    // 移動陣列第一個到最后一個
    let temp = innerList.value.shift();
    innerList.value.push(temp!);
  } else {
    height = -container.value!.children[0].getBoundingClientRect().height;
  }
  // 進行影片
  animation.value = container.value!.animate(
    [
      {
        top: `${height}px`,
      },
    ],
    {
      duration: props.interval,
      iterations: 1,
    }
  );
  // 監聽影片完成后，重新開始影片
  animation.value.addEventListener("finish", () => animate(false));
};
</script>

<style scoped lang="scss">
.title-container {
  display: grid;
  padding: 1rem 0;
  font-size: 1.25rem;
  background-color: rgb(24, 34, 103);
  grid-template-columns: v-bind(columnSize);
  text-align: center;
}
:slotted(.item-container),
.item-container {
  overflow: hidden;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  padding: 1rem 0;
  grid-template-columns: v-bind(columnSize);
}
:slotted(.item),
.item {
  text-align: center;
  font-size: 1.25rem;
}
.scroll-table {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .container {
    overflow: hidden;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
  }
}
</style>

參考

• 插槽 Slots | Vue.js
• 使用 CSS 影片 - CSS：層疊樣式表 | MDN

標籤：其他

上一篇：正則運算式 基礎

下一篇：返回列表