目录

Element UI 组件库的使用

简介

Element,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

问题

DatePicker 组件生成 input 和 Input 、Select 组件生成的 input 在设置宽度 100%后,宽度不一致的问题

问题描述

DatePicker 组件生成 input 和 Input 、Select 组件生成的 input 在设置宽度 100%后,宽度不一致

产生原因

DatePicker 组件生成的 input 在前面会有一个小图标,默认的样式 padding-left: 30px ,而不带图标的 input 的默认样式为 padding-left: 15px ,因此当单纯的设置 width: 100% 会导致 input 宽度不同。

https://cdn.jsdelivr.net/gh/Humble-Xiang/picx-images@master/Development/element-ui-1.khwlgr2x9t8.webp https://cdn.jsdelivr.net/gh/Humble-Xiang/picx-images@master/Development/element-ui-2.4wpdqmphikq0.webp

解决方式

el-date-picker 设置样式 style="width:100%;margin-right:-15px"