|
@@ -0,0 +1,156 @@
|
|
|
+<template>
|
|
|
+ <swiper class='swiper' ref='mySwiper' :options='swiperOption' v-show='swiperList.length'>
|
|
|
+ <swiper-slide v-for='(item,index) in swiperList' :class='{"active":item.active}' :key='`${index}_${item.drawernum}`'>{{item.drawernum}}</swiper-slide>
|
|
|
+ <div class='swiper-pagination' slot='pagination'></div>
|
|
|
+ <!-- 如果需要滚动条 -->
|
|
|
+ <!-- <div class='swiper-scrollbar'></div> -->
|
|
|
+ </swiper>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Vue from 'vue'
|
|
|
+import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
|
+import 'swiper/swiper-bundle.css'
|
|
|
+import { cloneDeep } from 'lodash'
|
|
|
+let swiperVm = null
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide,
|
|
|
+ },
|
|
|
+ directives: {
|
|
|
+ swiper: directive,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ list: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ swiper() {
|
|
|
+ return this.$refs.mySwiper.$swiper
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ swiperList: [],
|
|
|
+ swiperOption: {
|
|
|
+ observer: true,
|
|
|
+ observeParents: true,
|
|
|
+ slidesPerView: 3,
|
|
|
+ // slidesPerGroup: 3,
|
|
|
+ slidesPerColumn: 5,
|
|
|
+ spaceBetween: 10,
|
|
|
+ slidesPerColumnFill: 'row',
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination',
|
|
|
+ clickable: false,
|
|
|
+ type: 'fraction',
|
|
|
+ // bulletClass: 'my-bullet',
|
|
|
+ // bulletActiveClass: 'my-bullet-active',
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ click: function (event) {
|
|
|
+ const { realIndex } = this
|
|
|
+ // 这里有坑,需要注意的是:this 指向的是 swpier 实例,而不是当前的 vue, 因此借助 vm,来调用 methods 里的方法
|
|
|
+ // console.log(this) // -> Swiper
|
|
|
+ // 当前活动块的索引,与activeIndex不同的是,在loop模式下不会将 复制的块 的数量计算在内。
|
|
|
+ swiperVm.handleTap(event.target.innerText)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // autoplay: {
|
|
|
+ // //自动播放
|
|
|
+ // delay: 1500,
|
|
|
+ // disableOnInteraction: false,
|
|
|
+ // },
|
|
|
+ // speed: 1500, //播放速度
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ swiperVm = this
|
|
|
+ this.swiperList = cloneDeep(this.list)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log(this.swiper)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleTap(text) {
|
|
|
+ console.log(text)
|
|
|
+ if (text.indexOf('\n') !== -1) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let currentInfo = {}
|
|
|
+ this.swiperList.map((item, index) => {
|
|
|
+ item.active = false
|
|
|
+ if (text === item.drawernum) {
|
|
|
+ item.active = true
|
|
|
+ currentInfo = cloneDeep(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$emit('itemClick', currentInfo)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.swiper {
|
|
|
+ max-height: 300px;
|
|
|
+ width: 100%;
|
|
|
+ .swiper-slide {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ background: #ebeded;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.swiper {
|
|
|
+ max-height: 300px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ .swiper-slide {
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.swiper-pagination {
|
|
|
+ position: relative;
|
|
|
+ bottom: 0;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ color: #025baa;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.active {
|
|
|
+ background: #025baa !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+/deep/ .my-bullet {
|
|
|
+ width: 0.21333rem;
|
|
|
+ height: 0.21333rem;
|
|
|
+ border-radius: 100%;
|
|
|
+ background: #80add4;
|
|
|
+ opacity: 0.2;
|
|
|
+ margin: 0 3px;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+/deep/ .my-bullet:nth-child(1),
|
|
|
+/deep/ .my-bullet:nth-child(2),
|
|
|
+/deep/ .my-bullet:nth-child(3) {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+/deep/ .my-bullet-active {
|
|
|
+ background: #80add4;
|
|
|
+}
|
|
|
+</style>
|