解决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 相关文章推荐
图片之间的切换
Jun 26 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
vuex的使用和简易实现
Jan 07 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 Memcache 中实现消息队列
2009/11/24 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
Javascript Math对象
2009/08/13 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python中二维阵列的变换实例
2014/10/09 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
python将视频转换为全字符视频
2019/04/26 Python
Python初学者常见错误详解
2019/07/02 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python__new__内置静态方法使用解析
2020/01/07 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
jupyter 导入csv文件方式
2020/04/21 Python
python如何爬取网页中的文字
2020/07/28 Python
违反交通法规检讨书
2014/09/10 职场文书
交通事故和解协议书
2014/09/25 职场文书
python Polars库的使用简介
2021/04/21 Python