vue3滚动表格

▽ 总错把期待当成希望

已于 2024-07-10 16:43:28 修改

阅读量406

点赞数 11

文章标签： vue.js 前端 javascript

于 2024-07-10 16:39:02 首次发布

本文链接：https://blog.csdn.net/qq_45451688/article/details/140327397

版权

编写大屏页面的时候要做一个滚动效果的表格，自己又懒得去手搓，百度了找了好多vue3的插件都不好使，最后找到这个插件（vue3-seamless-scroll）。有用到的小伙伴请查看下边！！！

官方文档

组件安装与引入

npm
npm install vue3-seamless-scroll --save
 
yarn
yarn add vue3-seamless-scroll

配置

list

无缝滚动列表数据，组件内部使用列表长度。
type: Array
required: true

v-model

通过v-model控制动画滚动与停止，默认开始滚动
type: Boolean
default: true
required: false

direction

控制滚动方向，可选值up，down，left，right
type: String
default: "up"
required: false

isWatch

开启数据更新监听
type: Boolean,
default: true,
required: false

……

使用

单文件引入

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

使用组件

<Vue3SeamlessScroll :hover-stop="true" :list="props.listData" :hover="true" :step="1">
    <ul class="listDataUl">
        <li v-for="(item, index) in props.listData" :key="index">
            <div class="liName">{{ item.name }}</div>
            <div class="liTime">{{ item.time }}</div>
            <div class="liErrName">{{ item.errName }}</div>
            <div class="liType">{{ item.type }}</div>
        </li>
    </ul>
</Vue3SeamlessScroll>

综上所述，vue3-seamless-scroll是一个功能强大且灵活的无缝滚动组件，我简单总结了一下，有好多配置项没有写，有问题的可以查看官方文档