Vue scoped属性添加情况下第三方组件样式的修改

最新推荐文章于 2023-07-31 20:53:15 发布
最新推荐文章于 2023-07-31 20:53:15 发布
阅读量393 收藏
点赞数 2
文章标签： vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39105074/article/details/105205795
版权

由于样式里用了scoped，所以样式只对当前页面有效，这会面临一个问题，就是没法修改第三方组件的样式。于是在这里引入了样式穿透的概念。

第三方组件用div套一层，然后用div的 class属性定位

具体用法：
.testClass /deep/ .ivu-form-item-content{

  height:244px

}

修改的便是当前页面类名为testClass里第三方组件应用ivu-form-item-content的高度为244px

一只_程序猿
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview实现表格的expand和编辑功能
wytraining
09-08 1749
iview表格实现的编辑和expand功能
iview Form组件源码分析
NewTyun的博客
11-28 1162
iView 是TalkingData 基于 Vue.js 开发的一套高质量 UI 组件库 ，其包含了工程构建、主题定制、多语言等功能，极大提升了我们在开发项目时的工作效率，几个项目下来感...
Vue中的scoped及穿透方法，改变第三方组件库样式
weixin_43764828的博客
12-21 572
我们什么时候需要用到穿透呢？ scope的意思是为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块。 当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。 就是在我们需要修改原生样式，比如要修改antd design vue内置的组件的样式的时候，比如table组件...
Vue 中， 修改Iview form表单的默认样式
热门推荐
qq1558456的博客
01-31 1万+
使用过Iview的应该都知道，iview的样式是锁定了的，不像bootstrap那样可以直接修改，刚开始的时候，使用iview的时候，想修改字体大小和颜色，真的很迷，网上的那些方法也试过，可惜无效 这里我是使用的 vue2 + iview3 比如我现在要修改Iview 的form表单中label标签的字体颜色，默认颜色和class 如下 之前我在网上搜的时候，大多方法都是如下 （...
Vue中 对Table表格中的输入项进行校验
晓风揽月
12-22 1万+
项目开发中，经常会遇到在场景：对table表格的输入项字段进行校验，同时提交时整体校验，效果如图所示： Table: ！！这个校验的实现，主要思路是：1.From表单中嵌套使用table表格，用表单的校验机制实现校验； 2.ivu-form-item元素，绑定动态prop; html代码如下，本次项目里样式用了 View UI ，element其他，也同样适用这个校验方法： <template> <div class="wrapper"> <...
vue 表单form-item模板（编辑，查看，新建）
最新发布
luemeon的博客
07-31 1145
为空的，可以直接不提交/提交null/undefined。
vue中node_modules中第三方模块的修改使用详解
10-16
当我们在父组件中发现第三方模块的样式与自身项目有较大差异时，一种快速的方式是去掉组件中style标签的scoped属性，并使用！important来强制覆盖第三方模块的默认样式。这种方法简单且易于操作，但可能会带来样式...
解决vue加scoped后就无法修改vant的UI组件的样式问题
10-14
在Vue项目中，当我们使用`scoped`属性来限制样式只作用于当前组件时，可能会遇到一个问题，即无法修改引入的第三方UI库，如Vant的组件样式。这是因为`scoped`的作用范围仅限于当前组件，不会影响其子组件。Vant的...
Vue cli 引入第三方JS和CSS的常用方法分享
10-18
本文将详细介绍两种在 Vue CLI 项目中引入第三方 JS 和 CSS 的常见方法。 ### 方法一：在 `index.html` 中引入 这是最传统也是最直观的方式，适用于全局引入第三方库。在项目根目录下的 `public/index.html` 文件...
Vue中scoped穿透 修改子组件样式
weixin_43550562的博客
11-05 847
scoped看起来很好用，当时在Vue项目中，scope会阻挡我们修改第三方组件样式。 当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。 1、stylus的样式穿透 使用 >>> .wrapper >>> .swiper-...
第三方组件库的样式优先级 scoped 的作用 样式穿透 内联样式
Farewell_w的博客
08-17 1110
文章目录1. scoped 的作用2. 样式穿透3. 样式穿透和内联样式 我们在使用第三方组件库的样式的时候，往往会需要根据自身需求来修改组件的默认样式。 我们在使用第三方组件库的时候，我们自己写的组件的样式出现在前面，而插件（第三方组件库）的样式会从后面进来，会覆盖掉我们写的样式，所以如果我们直接给这个组件添加类和样式，是不能成功修改组件原有的样式的。 1. scoped 的作用 scoped 只针对当前组件生效，不污染全局样式 举个例子，如果我在 home.vue 这个组件中编写如下 <tem
css vue 内联_vue ssr css内联样式和link标签重复
weixin_26814683的博客
12-23 557
我把基于vue-cli3的项目改造成了SSR，发现服务器吐出的html中内联了css，同时还会注入css的link标签，这样造成了css的重复引入。我不想在html中注入内联的style，我想全部使用link标签，对于不经常变化的css这样能更好的利用缓存，该如何做？以下是vue.config.jsconst WebpackBar = require('webpackbar');const nod...
vue-cli3.0搭建移动端项目的适配问题以及解决第三方组件样式受影响的问题
weixin_44727080的博客
09-30 816
我们之前使用的解决移动端适配常用的方法是媒体查询+rem,em，这种适合小的项目，而且每次rem值计算也太麻烦了点，这里列出现在常用的另一种方法就是：lib-flexible和postcss-px2rem-exclude来完美的解决适配问题。
vue 表单封装（利用iview自带组件）
zhxh0376的专栏
06-14 3918
实战代码功能如下 1.inputNumber 数字框 千分位和小数点 处理。（详细功能会另起文章） 2.AutoComplete 和select 框的联动处理 3. 弹框功能和弹框表单 4.动态添加表单字段 5.实战富文本编辑器另起文档说明。 封装目的和解决痛点， 表单字段 10几个20个时候，需要人为的不断拷贝和添加 相同的代码 特别是iview 冗余代码会非常多，ht...
Iview框架检索框封装
HeMister的博客
04-22 575
<template> <div class="CAVQueryPage"> <Form :ref="formQuery" :model="formQuery[formRefName]" :rules="formQueryValidate" label-position="top" > <Row :gutter...
021_Form表单
aihiao的专栏
02-24 1151
1. Form表单 1.1. 属性 参数 说明 类型 可选值 默认值 model 表单数据对象 object 无 无 rules 表单验证规则 object 无 无 inlin
vue 如何让CSS只在当前组件中起作用？
06-10
在Vue中，可以使用scoped样式来实现让CSS只在当前组件中起作用的效果。具体实现方式是在样式块中添加scoped属性，例如： ```html <template> <div class="my-component"> <h1>Title</h1> </div> </template> <style scoped> .my-component h1 { color: red; } </style> ``` 在上面的示例中，样式块中添加了scoped属性，表示这些样式只作用于当前组件的DOM元素，而不会影响到其他组件。 注意，使用scoped样式时，需要注意以下几点： 1. scoped样式只作用于当前组件的DOM元素，如果子组件也需要使用这些样式，则需要将这些样式提取到公共的CSS文件中。 2. 如果样式选择器中使用了伪类或者伪元素，scoped样式可能无法生效，可以使用/deep/或>>>选择器来解决。 3. scoped样式只对组件中的标签起作用，如果组件中使用了第三方库或者自定义组件，这些组件中的样式不会受到scoped样式的影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值