CarouselWarp.vue

<!--
 * 动态echar轮播图
  -->
<script setup lang="ts">
import { reactive, onMounted, onBeforeUnmount } from 'vue';
import Com from 'src/components';
import { WarpTestData, WarpTestData2, WarpTestData3 } from '../config';

const state = reactive({
  list: [] as any,
  times: 5000,
});

onMounted(() => {
  initData();
});

onBeforeUnmount(() => {
  //
});

function initData() {
  state.list = WarpTestData;
}

function onDataChange1() {
  state.list = WarpTestData;
}

function onDataChange2() {
  state.list = WarpTestData2;
}

function onDataChange3() {
  state.list = WarpTestData3;
}

function onSetToEnpty() {
  state.list = [];
}

function onChangeTimers() {
  state.times = 2000;
}
</script>
<template>
  <div class="fit">
    <div class="my-warp-box">
      <Com.ChartCarouselWarp
        navigation
        item-key="seq"
        :list="state.list"
        :times="state.times"
      >
      </Com.ChartCarouselWarp>
    </div>
    <div class="btns">
      <q-btn
        label="图表轮播图测试数据1"
        @click="onDataChange1"
        color="primary"
      />
      <q-btn
        label="图表轮播图测试数据2"
        @click="onDataChange2"
        color="primary"
      />
      <q-btn
        label="图表轮播图测试数据3"
        @click="onDataChange3"
        color="primary"
      />
      <q-btn label="将数据置为空" @click="onSetToEnpty" color="primary" />
      <q-btn label="改变轮播时间" @click="onChangeTimers" color="orange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-warp-box {
  width: 500px;
  height: 300px;
}
.btns {
  padding-top: $padding-md;
  display: flex;
  flex-wrap: wrap;
  > button {
    margin-right: $padding-sm;
    margin-bottom: $padding-md;
  }
}
</style>