解决vue加scoped后就无法修改vant的UI组件的样式问题


Posted in Javascript onSeptember 07, 2020

有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用。

解决方法:

使用深度选择器,将scoped样式中的选择器“深入”,即影响子组件

<style scoped>
 .a >>> .b { /* ... */ }
</style>

以上的代码会编译成:

.a[data-v-f3f3eg9] .b { /* ... */ }

注意:如果你使用了Less或Sass等预处理器,可能无法>>>正确解析。在这些情况下,您可以使用组合/deep/或::v-deep组合 - 两者都是别名,>>>并且工作完全相同。

使用Less或Sass等预处理器的写法如下:

.van-radio {
 /deep/ .van-radio__label {
  width: 500px;
 }
}

补充知识:vue+vant移动端遇到的那些问题

1、项目引用了lib-flexible 跟px2rem-loader做适配,然后真机测试的时候发现字体在手机上显示的很小。【推荐去看下px2rem-loader的文档】

原因+解决:百度说应该在后面加上/*px*/(font-size:14px;/*px*/),这里这么设置时,字体的大小要为两倍,如你想让字体显示为14px,css代码则为【font-size:28px;/*px*/】,对于border这些不想转换为rem的(或者说没必要转换的),在后面加上/*no*/;

2、使用vant组件时发现样式什么的跟vant官网的demo天差地别

原因+解决:是引入的适配框架把单位都给转换成rem了,所以gg了,自己调整样式就好了

3、页面写style用了scoped,调整vant组件样式的时候,不起作用【这里涉及了vue最重要的点:父子组件,半吊子的我完全没吃透父子关系】

原因+解决:scoped的作用是让样式应用于当前页,不影响其他的页面的样式,而当你用了vant组件想调整它的组件样式时,这个组件是子组件,因为你用了scoped,所以影响不到它,这个时候你应该使用deep——深入选择器,下图就是用法,如果你用了less或者sass这些,写法请自行百度!!!(本人略怂,不敢在项目赶得时候用太多不熟的东西),当然啦,你也可以任性的在公共css样式文件里写,我说的就跟你没半毛钱关系了,谨防被打死就好!

解决vue加scoped后就无法修改vant的UI组件的样式问题

4、使用了vant的搜索组件,然后在ios上测试时发现,input框被放大了

原因+解决:在index.html的头部加上"maximum-scale=1.0, user-scalable=0",禁止它放大

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

5、vant的组件,我是按需引入的,在main.js中引入,使用toast组件时,引用了,直接在要用的页面的方法里this.$toast()这样就可以,然后使用vant的图片预览组件的时候以为这样也可以,结果gg,发现直接在页面上引入,照着文档那样写就可以。

原因+解决:仔细对比了toast跟imagePreview的文档介绍,发现toast是有介绍说它挂载到了vue上。。。emmmm,imagePreview怕是没挂载,挂载上去之后就可以用了

解决vue加scoped后就无法修改vant的UI组件的样式问题

6、 跳转页面时标题名没切换,比如首页跳到联系页,页面头部还是首页【看Vue Router文档】

原因+解决:因为我没做什么修改操作,所以不会变。在路由router/index.js中对路由配置 meta 字段,再在main.js中使用全局前置守卫

解决vue加scoped后就无法修改vant的UI组件的样式问题

router.beforeEach((to, from, next) => {
 //修改标题
 if (to.meta.title) {
  document.title = to.meta.title;
 }
 next();
});

第一次将自己自学的东西应用到项目中,新项目开始,自己作为项目中唯一的前端,不怕死的用了vue,其实也是个半吊子,现在一期开发结束,总结下这些遇到的问题,可能很基础,但是毕竟是自己遇到的,还是要记录下来的!

以上这篇解决vue加scoped后就无法修改vant的UI组件的样式问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
Vue.js原理分析之nextTick实现详解
Sep 07 #Javascript
小程序实现可拖动的悬浮按钮
Sep 07 #Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 #Javascript
nginx部署多个vue项目的方法示例
Sep 06 #Javascript
js实现简单的无缝轮播效果
Sep 05 #Javascript
JS+CSS实现炫酷光感效果
Sep 05 #Javascript
js实现炫酷光感效果
Sep 05 #Javascript
You might like
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
PHP框架性能测试报告
2016/05/08 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python 命令行传入参数实现解析
2019/08/30 Python
django 简单实现登录验证给你
2019/11/06 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
物流司机岗位职责
2013/12/28 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
终止劳动合同协议书
2014/10/05 职场文书
学校捐书活动总结
2015/05/08 职场文书
升职自荐书
2019/05/09 职场文书
自荐信范文
2019/05/20 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS