修改elmentui中el-date-picker下拉框样式(大小)

最近项目里面有一个组件需要用到日期选择器,且这个组件中的日期选择器需要比默认的大小(width:320px)要小一些.于是我准备打开控制台审查元素修改样式.
但是大家可以从下面的图片看到,这个下拉框的盒子与app的盒子是同级,它并不在app组件里,且我们在写样式的时候是加了scoped的,样式只会在app内生效,所以直接修改样式没有作用.

解决方法:
1.可以将scoped去掉,但是这样可能导致这个应用内的样式与其它样式混淆,不建议使用;

2.在全局写一个css样式,然后在main.js文件中引入,但是这个也有一个弊端就是会改变该应用内的所有日期选择框的大小,但是我们项目里还有其他地方也用到了日期选择器且需要它是正常大小,所以这个方法也无法解决我的问题;

3.最后研究官方文档看到可以给el-date-picker加popper-class属性,添加类名修改下拉框大小以及里面的内容样式.代码如下,问题得到解决.

<el-date-pickerpopper-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>

修改elmentui中el-date-picker下拉框样式(大小)相关推荐

小程序picker下拉框选择时间，只需要年和月
小程序picker下拉框选择时间,只需要年和月官方提供的组件可以选择到日我们现需要选择到月,只需要在代码里加上fields="month" <view class=&qu ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效，1.第一种写法：Input框中显示： - phpStudy...
jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别以上3种方法均可实 ...
Pyqt5 在表格中单元格设置下拉框，并根据选项改变背景颜色
关于怎么在表格中单元格设置下拉框,并根据选项改变背景颜色 def table_combox_init(self):combox_statePlm_jria_list = ['', '无', 'O', ...
html select 样式t调整_css修改html select下拉框样式(含右边箭头)
css修改html select下拉框样式(含右边箭头)2017-10-12 16:51 我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的. 如果不使用插件,靠纯css能不 ...
css修改layui的下拉框样式 js_layui创建表单下拉框样式不显示
border-left: 5px solid #009688; 注释:solid实体,实心样式: Blockquote:块引用;Fieldset:字段集; 1.所有浏览器都支持标签. fieldse ...
HTML下拉框样式美化
在网页中,下拉框的样式最难美化,默认样式巨丑,好在现在已经有各种框架实现了下拉框的样式美化,主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换,再将对应选项及事件进行关联. 最近一项 ...
ElementUI:多个Select下拉框存在时调整个别下拉框样式
当dialog中存在多个下拉框的时候,想改变某一个下拉框的样式,于是给某一个select绑定类,发现并没有生效,换了一种方法,将el-select用div包裹,将类绑定在div上,也没有效果. 在控制 ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

修改elmentui中el-date-picker下拉框样式(大小)

修改elmentui中el-date-picker下拉框样式(大小)相关推荐

最新文章

热门文章