Vue引用Swiper4插件无法重写分页器样式的解决方法


Posted in Javascript onSeptember 27, 2018

最近在尝试用nuxtjs来搭建新的站点,但是平时在jquery里面用惯的一些插件一到vue上面引用就各种不顺畅~本文记录一下在用Swiper插件来做轮播图的时候遇到的问题~至于怎么在vue里面引用插件就不累赘了,npm能告诉你~

Swiper的分页器是靠mounted()挂载到Vue组件上而不是直接写在template里,所以在style scoped中写的样式无法作用到分页器的点上。解决办法是把重写的样式写在scoped之外。(以下截图不完整,仅用做说明)

template:

Vue引用Swiper4插件无法重写分页器样式的解决方法

script:

Vue引用Swiper4插件无法重写分页器样式的解决方法

<style scoped></style>里面写不受影响的样式(template里面有的类名)

Vue引用Swiper4插件无法重写分页器样式的解决方法

在<style scoped></style>下面新建一个<style></style>,在<style></style>里面写分页器分页点的样式

Vue引用Swiper4插件无法重写分页器样式的解决方法

重写之后的样子:

Vue引用Swiper4插件无法重写分页器样式的解决方法

以上这篇Vue引用Swiper4插件无法重写分页器样式的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery复选框全选/取消示例
Dec 30 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
node.js require() 源码解读
Dec 13 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
jQuery操作cookie
Aug 08 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 #Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 #Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 #Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 #Javascript
axios 封装上传文件的请求方法
Sep 26 #Javascript
axios取消请求的实践记录分享
Sep 26 #Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 #Javascript
You might like
再次研究下cache_lite
2007/02/14 PHP
PHP eval函数使用介绍
2013/12/08 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
限制文本字节数js代码
2007/03/06 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
CNC数控操作工岗位职责
2013/11/19 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
小学生新年寄语
2014/04/03 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
就业导师推荐信范文
2015/03/27 职场文书
政工师工作总结2015
2015/05/26 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
html5调用摄像头实例代码
2021/06/28 HTML / CSS
python读取mnist数据集方法案例详解
2021/09/04 Python