vue——可复用swiper以及scoped样式穿透(可以不受scoped的限制来修改样式)
Vue 修改 以及 可以 限制 样式 穿透 复用
2023-09-27 14:29:10 时间
参考: https://blog.csdn.net/dwb123456123456/article/details/82701740
https://blog.csdn.net/u014027876/article/details/81663080
https://www.jianshu.com/p/8601ccf91225
- 安装
npm install vue-awesome-swiper cnpm inatall vue-awesome-swiper
- main.js中引入
import vueSwiper from 'vue-awesome-swiper'
- component - ShopSlide.vue 中引入
import { swiper, swiperSlider } from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' components: { swiper, swiperSlider }
- 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>
- 其他组件内引用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>
- 样式穿透
<style scoped> .shopImg >>> .swiper-pagination-bullet-active{ background:#fff } </style>
或
<style lang="stylus" scoped> //stylus是一种css预编译语言,支持省略花括号,支持省略分号,代码整洁,支持引入,并且支持语法内函数 .shopImg >>> .swiper-pagination-bullet-active background:#fff </style>
相关文章
- 前端实操案例丨如何实现JS向Vue传值
- vue--动态修改标题
- vue项目实现常见的三种文件类型在线预览(pdf/word文件excel表格)
- 学好vue靠他就行了——VUEX
- 精品微信小程序中医药配方小程序药方+后台系统|前后分离VUE
- 精品spring boot+MySQL婚纱影楼管理系统vue
- 宝塔面板部署Vue项目、服务端Node___配置域名
- 对30节以前文章修改:Vue挂载页面更新
- Vue学习笔记之el-form表单 el-form-item label不换行
- Vue学习笔记之Vue的模板字符串
- vue切换路由页面内容没有重载
- 修改vue中<router-link>的默认样式
- Vue学习(二十二)自定义指令全攻略
- Vue模板语法
- vue 里实现多行文本省略
- vue里怎么修改svg的颜色?
- 【VUE】基础用法(属性与事件的绑定,条件渲染等)
- daterangepicker与vue集成,vue无法获得日期控件时间的修改解决方法
- vue报错 error: data.push is not a function
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航