vue-seamless-scroll使用

vue-seamless-scroll详细使用步骤可参照此网址（01 - 默认配置 | vue-seamless-scroll）

<template>
  <div>
    <portal-props-common :show-channel-id="true" :show-card-theme="false" :show-custom="false" />
    <a-form-model-item label="字体颜色">
      <a-select v-model="grid.component.titleColorMoveTitle">
        <a-select-option value="blue">
          蓝色
        </a-select-option>
        <a-select-option value="black">
          黑色
        </a-select-option>
        <a-select-option value="red">
          红色
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="总显示条数">
      <a-input-number v-model="grid.component.number" :min="3" />
    </a-form-model-item>
  </div>
</template>

<script>
import portalMoveTitleView from './portal-move-title-view.vue'
import components from './_import-components/portal-move-title-edit-import'
function getComponentForEdit(component) {
  return {
    render() {
      if (!this.$attrs.data.titleColorMoveTitle) {
        this.$set(this.$attrs.data, 'titleColorMoveTitle', 'blue')
      }
      if (!this.$attrs.data.number) {
        this.$set(this.$attrs.data, 'number', '3')
      }
      const isEdit = true
      const componentProps = {
        ...this.$attrs.data,
        isEdit,
      }
      return <portalMoveTitleView componentProps={componentProps} />
    },
  }
}
export const metaInfo = {
  componentForEdit: getComponentForEdit(),
}
export default {
  name: 'PortalMoveTitleEdit',
  metaInfo: {
    title: 'PortalMoveTitleEdit',
  },
  components,
  data() {
    return {}
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>

<template>
  <div :class="$style.wrap" style="width:auto">
    <vue-seamless-scroll
      :key="componentProps.number"
      :data="componentProps.isEdit ? mockData : data"
      :class-option="classOption"
      :class="$style.seamless"
    >
      <ul :class="$style.item">
        <li v-for="item in componentProps.isEdit ? mockData : data" :key="item.id"
          ><a
            :href="getArticleUrl(item.id)"
            :title="item.title"
            :class="[
              { [$style.titleblue]: componentProps.titleColorMoveTitle === 'blue' },
              { [$style.titlered]: componentProps.titleColorMoveTitle === 'red' },
              { [$style.titleblack]: componentProps.titleColorMoveTitle === 'black' },
            ]"
            >{
   
   { item.title }}</a
          ></li
        >
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import components from './_import-components/portal-move-title-view-import'
import { channelListMixin } from './channel-list-mixin'
export default {
  name: 'PortalMoveTitleView',
  metaInfo: {
    title: 'PortalMoveTitleView',
  },
  components: {
    ...components,
    vueSeamlessScroll,
  },
  mixins: [channelListMixin],

  props: {
    componentProps: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      mockData: [],
    }
  },
  computed: {
    classOption() {
      return {
        step: 3, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true,
      }
    },
  },
  watch: {
    'componentProps.number': {
      immediate: true,
      handler(newValue) {
        this.getMockData()
      },
    },
  },
  created() {},
  mounted() {
    this.getMockData()
  },
  methods: {
    getMockData() {
      this.mockData = []

      for (var i = 0; i < this.componentProps.number; i++) {
        const num = i + 1
        const txt =
          '第' +
          num +
          '条新征程上谱写能源报国新篇章条条新征程上谱写能源报国新篇章条条新征程上谱写能源报国新篇章条程上谱写能源报国新篇章程上谱写能源报国新篇章'
        this.mockData.push({
          id: Math.random(),
          title: txt,
        })
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.seamless {
  height: 50px;
  overflow: hidden;
  .item {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 50px;
    li {
      display: flex;
      width: 100%;
      margin-left: 650px;
      font-family: 'Microsoft Yahei';
      font-size: 22px;
      white-space: nowrap;
      list-style: none;
    }
  }
}
.titleblue {
  color: #004287;
  &:hover {
    color: #004287;
  }
}
.titlered {
  color: $red-6;
  &:hover {
    color: $red-6;
  }
}
.titleblack {
  color: #000;
  &:hover {
    color: #000;
  }
}
</style>