解决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 相关文章推荐
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
javascript制作2048游戏
Mar 30 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
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判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
vue如何判断dom的class
2018/04/26 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Python实现扫码工具的示例代码
2020/10/09 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
四群教育工作实施方案
2014/03/26 职场文书
大学社团活动总结
2014/04/26 职场文书
心理咨询承诺书
2014/05/20 职场文书
确保工程质量承诺书
2015/04/29 职场文书
四年级数学教学反思
2016/02/16 职场文书
高三英语教学反思
2016/03/03 职场文书
调解协议书范本
2016/03/21 职场文书
车辆挂靠协议书
2016/03/23 职场文书
浅析Python中的套接字编程
2021/06/22 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技