【VUE】elementUI轮播图插件点击事件

最新推荐文章于 2024-06-19 09:34:33 发布

SZnA1

最新推荐文章于 2024-06-19 09:34:33 发布

阅读量989

点赞数

分类专栏：疑难记录 VUE elementUI 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/liusuihong919520/article/details/126709278

版权

疑难记录同时被 3 个专栏收录

55 篇文章 3 订阅

订阅专栏

VUE

34 篇文章 1 订阅

订阅专栏

elementUI

17 篇文章 0 订阅

订阅专栏

elementUI Carousel 走马灯组件

点击切换轮播图图片的同时，更改dialog摸态框的标题

html:

    <el-dialog
      :title="dialogTitle"
      class="testDialog"
      :visible.sync="centerDialogVisible"
    >
      <el-carousel
        arrow="always"
        :autoplay="false"
        indicator-position="outside"
        @change="changeTitle"
      >
        <el-carousel-item>
            1
        </el-carousel-item>

        <el-carousel-item>
            2
        </el-carousel-item>

        <el-carousel-item>
            3
        </el-carousel-item>

        <el-carousel-item>
            4
        </el-carousel-item>
      </el-carousel>
    </el-dialog>

data:

  data() {
    return {
      centerDialogVisible: false, 
      dialogTitle: "title1",
    };
  },

methods:

    changeTitle: function (key1,key2) {
      if (key1 == 0) {
        this.dialogTitle = "title1";
      } else if (key1 == 1) {
        this.dialogTitle = "title2";
      } else if (key1 == 2) {
        this.dialogTitle = "title3";
      } else if (key1 == 3) {
        this.dialogTitle = "title4";
      }
      console.log(key1 + "key1为当前index",key2 +"key2为前一张图片的index");
    },