vue 可复用swiper以及scoped样式穿透（可以不受scoped的限制来修改样式）

参考： https://blog.csdn.net/dwb123456123456/article/details/82701740
https://blog.csdn.net/u014027876/article/details/81663080
https://www.jianshu.com/p/8601ccf91225

1. 安装

npm install  vue-awesome-swiper

cnpm inatall vue-awesome-swiper

1. main.js中引入

import vueSwiper from 'vue-awesome-swiper'

1. component - ShopSlide.vue 中引入

import { swiper, swiperSlider } from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

components: {

swiper,

swiperSlider

}

1. ShopSlide.vue代码

<template>

<swiper :options="swiperOption" ref="mySwiper" v-bind:class="ifSlide?'':'swiper-no-swiping'">

<!-- slides -->

<swiper-slide v-for="(picitem,index) in shopImgsList" :key="index">

<img :src="picitem.imgpath" alt="" style="display:inline-block;width:100%;vertical-align:middle;">

</swiper-slide>

<div class="swiper-scrollbar" slot="scrollbar"></div>

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

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

<div class="swiper-pagination pageIcon" slot="pagination"></div>

</swiper>

</template>

<script>

import { swiper, swiperSlider } from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

export default {

name: 'ShopSlide',

data() {

return {

swiperOption: {

notNextTick: true,

loop: true,

autoplay: 3000,

speed: 800,

direction: 'horizontal',

grabCursor: true,

setWrapperSize: true,

autoHeight: true,

autoplayDisableOnInteraction: false,

// 如果需要分页符

pagination: '.swiper-pagination',

// 如果需要前进后退按钮

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

// 如果需要滚动条

scrollbar: '.swiper-scrollbar',

paginationClickable: true,

mousewheelControl: true,

observeParents: true,

debugger: true

},

ImgsList: [],

ifSlide: true

}

},

props: {

shopImgsList: {

type: Array,

required: true

}

},

components: {

swiper,

swiperSlider

},

watch: {

shopImgsList: function(newVal, oldVal) {

this.ImgsList = newVal;

if(this.ImgsList.length == 1) {

this.swiperOption.autoplay = false;

this.ifSlide = false;

}

}

}

}

</script>

<style>

.swiper-wrapper {

font-size: 0;

}

.swiper-pagination.pageIcon {

width: 3.75rem;

height: .2rem;

position: absolute;

bottom: .1rem !important;

text-align: center;

line-height: .2rem;

box-sizing: border-box;

padding: 0 .3rem;

font-size: 0;

}

.pageIcon span {

background: rgba(0, 0, 0, .2);

}

.swiper-pagination-bullet-active {

background-color: #ff7035 !important;

opacity: 1;

}

.swiper-button-next {

background-color:

}

.swiper-slide {

width: 100%;

height: 100% !important;

line-height: 3.75rem !important;

}

.swiper-wrapper {

height: 100% !important;

line-height: 3.75rem !important;

background-color: #fff;

}

.swiper-container-autoheight,

.swiper-container-autoheight .swiper-slide {

height: 100%;

width: 100%;

overflow: hidden;

}

</style>

1. 其他组件内引用ShopSlide.vue

<template>

<div class="shopImg">

<shop-slide :shopImgsList="shopImgsList"></shop-slide>

</div>

</template>

<script>

import ShopSlide from './ShopSlide.vue'

export default{

data( ) {

return{

shopImgList : [ { imgpath: '1.jpg '} , { imgpath: '2.jpg '}]

}

},

components: {

ShopSlide

}

}

<script>

1. 样式穿透

<style scoped>

.shopImg >>> .swiper-pagination-bullet-active{

background:#fff

}

</style>

或

<style lang="stylus" scoped>  //stylus是一种css预编译语言,支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数

.shopImg >>> .swiper-pagination-bullet-active background:#fff

</style>

• 点赞
• 收藏
• 分享
• 文章举报