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

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

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

template：

script:

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

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

重写之后的样子：

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

赞 (0)

相关推荐

  • 用Vue写一个分页器的示例代码

    用Vue写一个分页器的示例代码

    之前一直想要自己试着实现一个分页器,但是一直拖,今天写完,大概照着网易云音乐的样子来完成.这个小例子很简单,通过这个小例子,可以学习到Vue计算属性的使用,并了解到写分页器需要区分的情况.这篇文章会慢慢从头来实现这个小例子,相信你一定会学会,而且看完了我的思路之后说不定会有更棒的思路和想法! 实现的效果是这样子的: 一.先简单布局 <template> <div class="pageContainer"> <ul class="pagesInn

  • Vue实现简单分页器

    Vue实现简单分页器

    提前说明:这原本是一个Jquery分页器,因为公司项目前后端不分离,以前的分页用的是基于.net的分页器.后来我引入了jquery分页器,在我掌握Vue之后,又自己写了一些基于Vue的插件(为什么不用成熟的Vue插件库,还是因为前后端没分离)但是前后端相对最开始的混杂已经算是分得很开了. 分页器的样式是bootstrap风格的,是一个完全自定义样式的分页器,这意味着你可以很轻松把它改成你想要的样子(例子效果图如下). 所有的分页器DEMO,都不会太简单,所以想要真正的掌握(支配)一款好用的分页插

  • Vue分页器实现原理详解

    网上搜的分页器大多是jQuery实现的,而且也不太完善,于是自己写了个分页器组件,以后再用也不慌,直接复制过去就ok,下面说说具体实现的代码和原理吧. 新闻组件template: <template> <div v-if="news"> <div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (i

  • vue仿element实现分页器效果

    1 .起因 今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习. 2.实现难点 分页器的实现难点主要是什么时候显示分页器的省略, 我的思路是: 规定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下: <div class="pagination" @click="pageClick"> &l

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

    最近在尝试用nuxtjs来搭建新的站点,但是平时在jquery里面用惯的一些插件一到vue上面引用就各种不顺畅~本文记录一下在用Swiper插件来做轮播图的时候遇到的问题~至于怎么在vue里面引用插件就不累赘了,npm能告诉你~ Swiper的分页器是靠mounted()挂载到Vue组件上而不是直接写在template里,所以在style scoped中写的样式无法作用到分页器的点上.解决办法是把重写的样式写在scoped之外.(以下截图不完整,仅用做说明) template: script:

  • vue 引用自定义ttf、otf、在线字体的方法

    1. 将下载好的字体放到本地目录 分别是两种字体 放到项目的 assets 目录中 2. 引入字体文件 首先创建一个 styles 文件夹,之后也可以用于存放一些公共的样式文件.再新建一个 index.less 文件,引入字体. @font-face { font-family: Snickles; src: url('../assets/Snickles-webfont.ttf'); } @font-face { font-family: Ronda; src: url('../assets/

  • Vue绑定class和绑定内联样式的实现方法

    Vue绑定class和绑定内联样式的实现方法

    目录 绑定class 绑定内联样式 绑定class 方式一: 对象语法:给 v-bind:class传 一个对象,以动态地切换 class 当对象中某key对应的值为true时,该key做为className被添加到标签上 .box { width: 100px; height: 100px; background-color: gray; } .circle { border-radius: 50%; } <div id="app"> <div class=&quo

  • vue 数组和对象不能直接赋值情况和解决方法(推荐)

    Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers

  • 基于vue打包后字体和图片资源失效问题的解决方法

    1. vue打包后font-awesome字体失效 解决方案: 2. 打包后图片资源失效 解决方案: 针对html中引用的图片 针对css添加的背景中引用的图片 以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 解决vue打包之后静态资源图片失效的问题 vue cli使用绝对路径引用图片问题的解决 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题 vue-cli中打包

  • nginx 部署 vue 项目找不到js css文件的解决方法

    很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/

  • vue webpack打包后图片路径错误的完美解决方法

    vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原

  • vue使用v-if v-show页面闪烁,div闪现的解决方法

    在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

  • vue webpack build资源相对路径的问题及解决方法

    默认情况webpack+vue-cli打包的css.js等静态资源路径都是绝对的,即static在根目录下,如果部署到带有文件夹目录的项目中,资源路径就会出错. 如图: 解决方法: 在webpack.prod.conf.js中,output中添加或者修改为 publicPath: './': output: { publicPath: './', path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunk

随机推荐