最近项目里面有一个组件需要用到日期选择器,且这个组件中的日期选择器需要比默认的大小(width:320px)要小一些.于是我准备打开控制台审查元素修改样式.
但是大家可以从下面的图片看到,这个下拉框的盒子与app的盒子是同级,它并不在app组件里,且我们在写样式的时候是加了scoped的,样式只会在app内生效,所以直接修改样式没有作用.
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站点击跳转浏览。
解决方法:
1.可以将scoped去掉,但是这样可能导致这个应用内的样式与其它样式混淆,不建议使用;
2.在全局写一个css样式,然后在main.js文件中引入,但是这个也有一个弊端就是会改变该应用内的所有日期选择框的大小,但是我们项目里还有其他地方也用到了日期选择器且需要它是正常大小,所以这个方法也无法解决我的问题;
3.最后研究官方文档看到可以给el-date-picker加popper-class属性,添加类名修改下拉框大小以及里面的内容样式.代码如下,问题得到解决.
推荐第三种
<el-date-picker popper-class="popperClass" size="small" v-model="year" ></el-date-picker>
<style lang="scss" scoped> .popperClass.el-date-picker { width: 220px; height: 200px; &__header-label { font-size:14px; } .el-picker-panel__content { width: 220px; height: 200px; margin-left: 0; } .el-year-tabel td { padding: 5px 0; .cell { width: 32px; height: 32px; } } } </style>
