From e3492fcd961ddfb9d6e0cec9d81e9e2d6f4ae12f Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期一, 18 十月 2021 18:16:19 +0800
Subject: [PATCH] TODO#128251 新增動作操作元件-swiper (推薦顧問)
---
PAMapp/pages/index.vue | 5 ++
PAMapp/plugins/vue-awesome-swiper.js | 4 ++
PAMapp/components/Ui/UiSwiper.vue | 63 +++++++++++++++++++++++++++++++
PAMapp/package.json | 5 ++
PAMapp/nuxt.config.js | 4 +
5 files changed, 78 insertions(+), 3 deletions(-)
diff --git a/PAMapp/components/Ui/UiSwiper.vue b/PAMapp/components/Ui/UiSwiper.vue
new file mode 100644
index 0000000..e2e66b5
--- /dev/null
+++ b/PAMapp/components/Ui/UiSwiper.vue
@@ -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>
\ No newline at end of file
diff --git a/PAMapp/nuxt.config.js b/PAMapp/nuxt.config.js
index c0608b4..d09a98c 100644
--- a/PAMapp/nuxt.config.js
+++ b/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
diff --git a/PAMapp/package.json b/PAMapp/package.json
index 4c7b2cf..2a97efb 100644
--- a/PAMapp/package.json
+++ b/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",
diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index 094902d..4f6e0b9 100644
--- a/PAMapp/pages/index.vue
+++ b/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">
diff --git a/PAMapp/plugins/vue-awesome-swiper.js b/PAMapp/plugins/vue-awesome-swiper.js
new file mode 100644
index 0000000..8528533
--- /dev/null
+++ b/PAMapp/plugins/vue-awesome-swiper.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+
+Vue.use(VueAwesomeSwiper)
--
Gitblit v1.8.0