Vue2配合element 上下滚动文本组件

上优

已于 2023-07-11 17:33:02 修改

阅读量578

点赞数

文章标签： javascript 前端 css

于 2023-07-11 15:31:07 首次发布

本文链接：https://blog.csdn.net/weixin_65084919/article/details/131661440

版权

该代码示例展示了如何在Vue.js应用中结合Element-UI库创建一个垂直方向的轮播组件。页面包含一个自定义的telegraph类样式，使用了Element-UI的carousel组件来展示数据列表，并实现了上翻下翻的导航功能。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      #app {
        height: 100vh;
        width: 100vw;
        display: flex;
      }
      .telegraph {
        margin: auto;
        background-color: #eaf5ff;
        border-radius: 12px;
        height: 24px;
        line-height: 24px;
        color: #5791ff;
        font-size: 12px;
        padding: 0 20px;
        width: 400px;
        display: flex;
      }

      .telegraph .carousel {
        width: 100%;
      }

      .telegraph .count {
        color: #a7abb3;
        font-size: 12px;
        min-width: max-content;
        display: flex;
        align-items: center;
      }

      .direction {
        display: flex;
        flex-direction: column;
      }
      .direction i {
        line-height: 7px !important ;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="telegraph">
        <el-carousel
          height="24px"
          class="carousel"
          ref="carousel"
          indicator-position="none"
          direction="vertical"
          autoplay
        >
          <el-carousel-item v-for="(item,index) in info" :key="index">
            <div>{{item.name}}</div>
          </el-carousel-item>
        </el-carousel>
        <div class="count">
          <span>共计{{info.length}}条</span>
          <div class="direction">
            <i class="el-icon-caret-top" @click="performancePunishsTb(1)"></i>
            <i
              class="el-icon-caret-bottom"
              @click="performancePunishsTb(0)"
            ></i>
          </div>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            info: [
              {
                name: "莎拉",
              },
              {
                name: "六花",
              },
              {
                name: "黑子",
              },
            ],
          };
        },
        methods: {
          performancePunishsTb(type) {
            const func = {
              1: () => {
                this.$refs.carousel.prev();
              },
              0: () => {
                this.$refs.carousel.next();
              },
            };

            func[type] ? func[type]() : console.error("传参不对");
          },
        },
      });
    </script>
  </body>
</html>