《ElementPlus 与 ElementUI 差异集合》el-input 多包裹一层 el-input__wrapper

最新推荐文章于 2024-03-22 12:57:10 发布
最新推荐文章于 2024-03-22 12:57:10 发布
阅读量346 收藏
点赞数 2
分类专栏： 《ElementPlus 与 ElementUI 差异集合》 文章标签： elementui elementplus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31213021/article/details/136717593
版权

差异

  • element-ui el-input 中，<div class="el-input"> 下一级就是 <input> 标签 ；
  • element-plus el-input中，<div class="el-input"> 和 <input> 标签之间多了一层 <div class="el-input__wrapper">，且有 padding 设置；
    在这里插入图片描述
    PS：如果是从 element-ui 项目升 element-plus，且保留原始样式。此处要费点功夫改造！！！
AvatarGiser
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
socket_wrapper-1.2.3-1.el8.x86_64.rpm
12-07
官方离线安装包，亲测可用
CPP.rar_C 函数手册_C++函数_CPP-Wrapper_c++ chm_c函数速查手册
09-21
C++函数速查手册，CHM格式。包含了几乎所有C++的函数
vue3修改el-input的el-input__wrapper
最新发布
weixin_46229676的博客
03-22 170
:deep(.el-input .el-input__wrapper){ background-color: var(--white); }
zed-ros-wrapper-master.zip_Ros ZED Wrapper_The Vision_ZED-ROS_ro
09-20
Ros ZED Wrapper is a ros core driver to develop ZED programs and to include the stereo vision on C programs
uid_wrapper-1.2.4-4.el8.x86_64.rpm
12-07
官方离线安装包，亲测可用
详解elementui之el-image-viewer(图片查看器)
10-16
主要介绍了详解elementui之el-image-viewer(图片查看器)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3+Element Plus中Input边框进行处理
m0_57341617的博客
07-14 3890
vue3+elementplus 使用遇到的问题及解决方法
elementplus
A5120184120的博客
09-17 1124
elementplus的输入框、对话框、表格、分页、日期选择器
element-plus input 遇到的问题
ximingx
05-02 1176
输入框两侧有空白 输入框后的图标没有显示 输入框两侧有空白, 全局样式修改 .el-input__wrapper { padding: 0 !important; } 输入框后的图标没有显示 <el-input> <template #append> <el-button> <el-icon> <Search></Search>.
ElementUI组件的＜el-input＞组件通过样式穿透设置圆角。
Dai_Aixy的博客
09-07 9254
ElementUI组件的组件通过样式穿透设置圆角。
element 改变input样式
weixin_53444090的博客
06-21 225
el-input v-model="val" placeholder="请输入" class="inputDeep" />记录一下：后续方便自己查找。
vue-input-facade:专为Vue创建的轻量级且无依赖的输入屏蔽库
04-28
Vue输入外观 专为Vue创建的轻量级且无依赖的输入屏蔽库 正在安装 npm i vue-input-facade yarn add vue-input-facade 输入 全球范围 为整个应用程序安装组件，指令和过滤器。 import InputFacade from 'vue-input-facade' Vue . use ( InputFacade ) 在本地 根据需要安装每个组件 import { InputFacade , facade , filter } from 'vue-input-facade' export default { components : { InputFacade } , directives : { facade } , filters : { facade : filter } , // ... rest of component
nss_wrapper-1.1.5-3.el8.aarch64.rpm
12-07
官方离线安装包，亲测可用
el-input等输入框自定义边框
m0_70542915的博客
11-20 699
写大屏总是有很多需要自定义的样式，使用element-plus中的输入框、日期选择框等组件的时候需要调整与大屏同系列颜色，遇到输入框调整边框颜色的时候有个边框怎么设置都去不掉。F12一次次调试，一层一层的修改border的值都没有用。最后终于走出border的狭隘视角。忽略了这么一个属性，最后才调整成功。
elementPlus中input框去掉边缘线
m0_61848095的博客
10-24 430
important;
el-input背景设置为透明色
你的小可爱的博客~
05-30 1811
【代码】el-input背景设置为透明色。
vue3 :deep()使用
qq_32140775的博客
01-10 1778
vue3 css 深度选择器
vue中el-input以及el-select组件，“ 获取焦点 ”时，怎么修改【背景样式，placeholder文字颜色】
weixin_50450473的博客
07-26 7211
html： 此处placeholder的文字颜色不易修改，先自定义2种不同文字颜色样式css： /deep/.colorchange.el-input__inner::-webkit-input-placeholder{ color:#c7fbeb; // 初始化的文字颜色 } /deep/.searchchange.el-input__inner::-webkit-input-placeholder{ color:#333; // 获取焦点时的文字颜色 ...
el-input框前面名字长短不一时，让上下el-input框对齐方法
05-23
可以使用CSS中的`vertical-align`属性来实现上下元素对齐。将两个`el-input`框包裹在一个父元素内，然后设置它们的`display`属性为`inline-block`，再设置它们的`vertical-align`属性为`middle`即可实现对齐。 以下是示例代码： ```html <div class="input-wrapper"> <el-input placeholder="姓名"></el-input> <el-input placeholder="邮箱"></el-input> </div> ``` ```css .input-wrapper { display: inline-block; } .el-input { vertical-align: middle; } ``` 这样，即使输入框前面的文字长度不同，也能够保证它们在竖直方向上对齐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值