TODO#128251 新增動作操作元件-swiper (推薦顧問)

Mila

2021-10-18 e3492fcd961ddfb9d6e0cec9d81e9e2d6f4ae12f

TODO#128251 新增動作操作元件-swiper (推薦顧問)

 PAMapp/components/Ui/UiSwiper.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,63 @@
<template>
<div>
    <swiper ref="mySwiper"
      :options="swiperOptions"
      @click-slide="clkItem"
    >
        <swiper-slide
          v-for="(i, index) in 5"
          :key="index"
        >
          <span>連結到業務員{{i}}詳細資訊</span>
        </swiper-slide>

        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { SwiperOptions } from 'swiper';

@Component
export default class UiSwiper extends Vue {
    swiperOptions: SwiperOptions = {
        loop: true,
        slideToClickedSlide: false,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        breakpoints: {
          320: {
            slidesPerView: 2,
            slidesPerGroup: 2,
            spaceBetween: 20
          },
          1024: {
            slidesPerView: 4,
            slidesPerGroup: 4,
            spaceBetween: 40
          }
        }
    }

    clkItem(loopIndex: number, realIndex: number) {
      this.$router.push('/agentInfo')
    }
}
</script>

<style lang="scss" scoped>
.swiper-container {
  height: 80px;
  width: 90%;
}
.swiper-slide {
  border: solid 1px;
  padding: 5px;
  cursor: pointer;
}
</style>

 PAMapp/nuxt.config.js

@@ -25,12 +25,14 @@
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'swiper/css/swiper.css',
    '~/assets/scss/main.scss',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/element-ui.js'
    '~/plugins/element-ui.js',
    { src: '~/plugins/vue-awesome-swiper.js', mode: 'client' }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components

 PAMapp/package.json

@@ -11,10 +11,13 @@
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@types/swiper": "^5.4.3",
    "core-js": "^3.18.3",
    "element-ui": "^2.15.6",
    "nuxt": "^2.15.8",
    "nuxt-property-decorator": "^2.9.1"
    "nuxt-property-decorator": "^2.9.1",
    "swiper": "^5.4.5",
    "vue-awesome-swiper": "^4.1.1"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.8",

 PAMapp/pages/index.vue

@@ -1,5 +1,8 @@
<template>
    <div>PAMapp-Home</div>
    <div>PAMapp-Home
        <h5>推薦顧問</h5>
        <Ui-Swiper></Ui-Swiper>
    </div>
</template>

<script lang="ts">

 PAMapp/plugins/vue-awesome-swiper.js

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,4 @@
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)