vue对插件(iview,elementui,treeselect)样式的局部修改方式

目录
  • (iview,elementui,treeselect)样式的局部修改
    • 学习描述
    • 具体方法
  • vue+iview 样式穿透-修改第三方插件样式
    • 修改第三方插件样式

(iview,elementui,treeselect)样式的局部修改

学习描述

在vue的使用过程中，我们知道插件的使用可以大大的提高我们的开发效率，这写插件都是经过很多人的验证和修改的，要比我们自己写方便的很多。

但是在开发的过程中，有些插件一些在特定的页面我们可能不要原来的样式，需要进行修改。然而我们在使用vue的过程中都会使用scope防止当前页面的样式污染到其它的页面，可是这样也就导致了我们修改了插件的样式无法起到作用。只有全局修改才能起到作用。

那么有没有别的方式，既能修改插件的样式而且有不会污染到全局的样式呢？ 答案是：有的

具体方法

1> /deep/ 深层穿透

scoped能有效的方式样式的全局污染，但是同时也是阻止了我们对第三方插件样式的修改，使用/deep/样式穿透既可以达到修改第三方插件样式的效果，而且不会对全局造成污染。

  /deep/ .ivu-tooltip-light .ivu-tooltip-inner {
    background-color: #ecc9e2;
    color: #f30000;
  }

2> >>>

其实这个就是/deep/的另外一种写法，只不过，可能有些sass,less之类的预处理无法正确的解析，所以最好是使用/deep/.

  >>> .ivu-tooltip-light .ivu-tooltip-inner {
    background-color: #ecc9e2;
    color: #f30000;
  }

注意：穿透方法实际上违反了scoped属性的意义。而且在vue中过多使用scoped导致页面打包文件体积增大。

vue+iview 样式穿透-修改第三方插件样式

修改第三方插件样式

方法一：

在以前没有用深度选择器的时候，当想修改第三方插件样式时，通常做法都是在公共样式表文件中，加一个.zujian-parent-class .disanfang-class来修改。

例如我想修改iview单元格样式：

common.styl文件中这样写

.first-table .ivu-table-cell
    padding-left: 10px;

方法二：

和方法一差不多的还可以在组件内写一个无scoped的

<style lang="stylus">
/*此处写覆盖样式*/
.first-table .ivu-table-cell
    padding-left: 10px;
</style>

<style lang="stylus" scoped>
/*此处写局部样式*/
</style>

方法三：

用深度选择器形成样式穿透是一个更好的选择，这样不用担心同名类造成样式污染

page.vue组件中

<style lang="stylus" scoped>
    /*样式穿透 可以使用/deep/ >>> ::v-deep 
    具体使用哪个根据不同的语言、版本以及webpack版本（webpack2.X的一般不能用 >>>）有所不同 */
    .first-table  /deep/ .ivu-table-cell {
        height: 37px;
        line-height:37px;
    }
</style>

官网链接

注意：/deep/ >>> ::v-deep 注意事项：

组件内部类无法穿透成功。

例如下单菜单组件，最外层的.ivu-dropdown可以，但是其下一层.ivu-dropdown-rel是无法穿透的。

经验证，以ivewui为例，组件最外层的类都是可以的，但是组件内部的类通过第三种方法有些是无法生效的。其实这也是根据具体组件的加载先后决定的。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 修改vant自带的样式过程

    vue 修改vant自带的样式过程

    目录 修改vant自带的样式 解决办法 vant的样式怎么修改不了? 修改vant自带的样式 今天用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效. css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用. 在vue项目中,当style 标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中. 解决办法 1.对于css语法起作用 使用深度选择器,

  • vue样式穿透 ::v-deep的具体使用

    之前在项目中用到了 vant,使用特别简单,而且组建也非常的丰富.即时这样,在项目中肯定也需要用额外的样式来打造自己的应用.直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式,但如果去掉scoped话又会影响全局样式.想了好多方法,都没得到很好的解决. 百度之后发现 可以用 /deep/或::v-deep来解决***(不过在vue3.0的环境下,使用/deep/时,编译会报错)***.没想

  • vue对插件(iview,elementui,treeselect)样式的局部修改方式

    目录 (iview,elementui,treeselect)样式的局部修改 学习描述 具体方法 vue+iview 样式穿透-修改第三方插件样式 修改第三方插件样式 (iview,elementui,treeselect)样式的局部修改 学习描述 在vue的使用过程中,我们知道插件的使用可以大大的提高我们的开发效率,这写插件都是经过很多人的验证和修改的,要比我们自己写方便的很多. 但是在开发的过程中,有些插件一些在特定的页面我们可能不要原来的样式,需要进行修改.然而我们在使用vue的过程中都会

  • vue两个组件间值的传递或修改方式

    1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改本地存储的值和获取修改后的值来实现: 4.就是父子组件间的值的传递与修改props,这里需要注意的是子组件里面不      能直接修改props里面接受的值,需要定义一个中间变量来接受props里的值并修改,通过$emit即this.$emit('checkDisplay',this.display

  • Vue中对数组和对象进行遍历和修改方式

    目录 对数组和对象进行遍历和修改 1.对数组进行循环 2. 修改数组的时候,不能直接通过下标去增加修改删除 3.对对象进行循环 4.增加对象的时候 修改数组和对象的特殊情况以及修改方法 修改数组的两个特殊情况 修补方法 对数组和对象进行遍历和修改 1.对数组进行循环 v-for进行循环,有两个参数(item,index) 注意:template可以成为占位符,在DOM里面不显示 2. 修改数组的时候,不能直接通过下标去增加修改删除 (1)可以用过push/pop/shift/unshift/sp

  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    浅谈vue中改elementUI默认样式引发的static与assets的区别

    首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调,比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色.

  • 关于iview和elementUI组件样式覆盖无效问题及解决

    目录 iview和elementUI组件样式覆盖无效 新建一个不含scoped的style标签覆盖组件样式 /deep/ 预处理器less下使用 Element-ui与IView中的样式覆盖问题 在Element-UI中覆盖样式 在IView中覆盖样式 iview和elementUI组件样式覆盖无效 iview和elementUI是我们在用vue开发项目时比较常用到的ui组件,在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改. 为了vue页面样式模块化,不对全局样式造成污染,我

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

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

  • vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例

    这次封装基于vuecli3 + typescript实现,javascript也是同理,没有区别: 自定义插件有助于我们可以将一些页面交互封装并在js或ts文件中引入实现,而不是只在 .vue文件. 1.实现toast插件封装(类似简易版的elementUi的message) 先书写一个toast组件 <template> <div ref="toastRef" class="toastMessageBox">{{ message }}<

  • 基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架. V

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

  • 详解如何在vue项目中引入elementUI组件

    详解如何在vue项目中引入elementUI组件

    前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

随机推荐