yunxing 4 éve
szülő
commit
ee00a7f0ed

+ 156 - 0
src/components/equipmentFacilities/MSwiper copy.vue

@@ -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>

+ 1 - 0
src/components/equipmentFacilities/MSwiper.vue

@@ -76,6 +76,7 @@ export default {
     },
     mounted() {
         console.log(this.swiper)
+        window.sssss= this.swiper
     },
     methods: {
         handleTap(text) {

+ 101 - 0
src/components/equipmentFacilities/Test.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class='cardFlow'>
+        <swiper :options='swiperOption' ref='mySwiper'>
+            <swiper-slide v-for='(slide, index) in virtualData.slides' :key='index'>
+                <img :src='"https://api.godsunchained.com/v0/image/" +slide +"?format=card&w=300"' />
+            </swiper-slide>
+
+            <!-- Optional controls -->
+            <div class='swiper-pagination' slot='pagination'></div>
+            <div class='swiper-button-prev' slot='button-prev'></div>
+            <div class='swiper-button-next' slot='button-next'></div>
+        </swiper>
+    </div>
+</template>
+
+<script>
+import 'swiper/swiper-bundle.css'
+
+import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
+export default {
+    components: {
+        Swiper,
+        SwiperSlide,
+    },
+
+    data() {
+        return {
+            virtualData: {
+                slides: [],
+            },
+            swiperOption: {
+                slidesPerView: 9,
+                centeredSlides: true,
+                spaceBetween: -120,
+                slideToClickedSlide: true,
+                effect: 'coverflow',
+                autoHeight: false,
+                setWrapperSize: true,
+                height: 500,
+                coverflowEffect: {
+                    rotate: 20,
+                    slideShadows: false,
+                    stretch: -200,
+                    depth: 400,
+                    //modifier: 5
+                },
+                pagination: {
+                    el: '.swiper-pagination',
+                    type: 'fraction',
+                },
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev',
+                    
+                },
+                virtual: {
+                    addSlidesBefore: 15,
+                    addSlidesAfter: 15,
+                    renderExternal: (data) => {
+                        console.log('renderExternal', data)
+                        this.virtualData = data
+                    },
+                    slides: (function () {
+                        console.log(1111111111111)
+                        const slides = []
+                        for (let i = 0; i < 600; i += 1) {
+                            slides.push(parseInt(Math.random() * 380))
+                        }
+                        console.log(slides)
+                        return slides
+                    })(),
+                },
+            },
+        }
+    },
+    methods: {
+        toSlide(i) {
+            console.log('toSlide')
+            this.$refs.mySwiper.swiper.slideTo(i, 0)
+        },
+    },
+}
+</script>
+
+<style>
+.cardFlow {
+    position: relative;
+    background-color: black;
+    padding: 20px 0;
+    border-radius: 15px;
+    overflow: hidden;
+    height: 500px;
+    transform-style: preserve-3d;
+}
+
+/*.swiper-pagination{
+background-color: rgba(0,0,0, 0.4);
+padding: 5px 10px;
+border-radius: 3px;
+}*/
+</style>

+ 3 - 0
src/views/equipmentFacilities/LowVoltageCabinetDetail.vue

@@ -14,6 +14,7 @@
             </swiper>-->
             <!-- 解决input搜索,页面卡顿的情况,将swiper抽离成组件 -->
             <MSwiper :list='list' v-if='list.length' @itemClick='itemClick' />
+            <!-- <Test /> -->
         </div>
         <div class='info-container' v-show='list.length'>
             <div class='border'></div>
@@ -63,6 +64,7 @@ import { queryDygjcxline } from '@/api/equipmentList'
 import { mapGetters } from 'vuex'
 import { cloneDeep } from 'lodash'
 import MSwiper from '@/components/equipmentFacilities/MSwiper'
+import Test from '@/components/equipmentFacilities/Test'
 // let swiperVm = null
 export default {
     name: 'LowVoltageCabinetDetail',
@@ -71,6 +73,7 @@ export default {
         Swiper,
         SwiperSlide,
         MSwiper,
+        Test,
     },
     directives: {
         swiper: directive,