插件实现表格自动

最新推荐文章于 2024-08-23 17:32:08 发布

举头三尺有神农

最新推荐文章于 2024-08-23 17:32:08 发布

阅读量172

点赞数 1

文章标签： html css html5 javascript

本文链接：https://blog.csdn.net/M__Yang_/article/details/120830100

版权

本文介绍了如何在Vue项目中使用vue-seamless-scroll插件实现平滑滚动效果，包括了在main.js中的引入、HTML模板中的应用以及CSS和JS的配合。通过实例展示了如何配合Element UI组件实现鼠标悬停提示功能。

摘要由CSDN通过智能技术生成

简单的说一下插件用法，亲测比较好用的

1、npm install vue-seamless-scroll --save

2、main.js中引入

html中代码

     <div class="cent-right">
          <vue-seamless-scroll :data="listData" class="seamless-warp">
            <ul class="item">
              <!-- listData 是用接口请求的数据 存放在listData中 -->
              <li
                v-for="item in listData"
                :key="item.id"
                @mouseenter="enters(item.id)"
                @mouseleave="leaver(item.id)"
              >
                <span style="width: 50px; line-height: 70px"
                  ><img src="../assets/image/complaintsEvent/ss.png" alt=""
                /></span>
                <!-- 这块用了elementui里面的组件，鼠标悬浮可显示当前行的详情(如果一行文字比较少就可以加入这个组件) -->
                <el-tooltip
                  popper-class="atooltip"
                  class="item"
                  effect="dark"
                  :content="item.title"
                  placement="top"
                >
                  <span
                    class="title"
                    style="width: 630px"
                    v-text="item.title"
                  ></span>
                </el-tooltip>
              </li>
            </ul>
          </vue-seamless-scroll>
          <!-- <label v-show="arry">暂无</label> -->
        </div>

js中请求的数据

css中样式部分

.seamless-warp {
  margin-top: 48px;
  height: 198px;
  overflow: hidden;
  .item li {
    height: 50px;
    display: flex;
    position: relative;
    border-bottom: 1px solid rgba(157, 255, 255, 0.1);
    cursor: pointer;
    span {
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 50px;
      color: rgba(219, 255, 255, 1);
    }
  }
}

实现滚动（没gif截图）