当前位置: 首页 > news >正文

修改插槽样式,el-input 插槽 append 的样式

需缩少插槽 append 的 宽度

方法1、使用内联样式直接修改,指定 width 为 30px

                <el-input v-model="props.applyBasicInfo.outerApplyId" :disabled="props.operateCommandType === 'input-modify'"><template #append><el-button @click="onGenerateClick()" style="padding: 0;width: 30px;">Max</el-button></template></el-input>

方法2、打开页面,选择该元素,获取类名为 el-input-group__append

修改该类 el-input-group__append 的样式,指定 width 为 30px

<style scoped lang="scss">// 修改 el-input 插槽 append 的样式::v-deep .el-input-group__append {padding: 0;width: 30px;}
</style>

效果跟方法1设置的 30px 有些差异

再尝试 设置为 50px 

<style scoped lang="scss">// 修改 el-input 插槽 append 的样式::v-deep .el-input-group__append {padding: 0;width: 50px;}
</style>

这样就可以达到需求效果

http://www.lryc.cn/news/492927.html

相关文章:

  • UPLOAD LABS | PASS 01 - 绕过前端 JS 限制
  • 【css实现收货地址下边的平行四边形彩色线条】
  • 缓存方案分享
  • 第四十篇 DDP模型并行
  • 软件测试面试之常规问题
  • 《图像形态学运算全解析:原理、语法及示例展示》
  • 双十一线上服务调用链路追踪SkyWalking实战分析
  • 网络安全究竟是什么? 如何做好网络安全
  • 【C++】入门【一】
  • 【ArcGIS Pro实操第11期】经纬度数据转化成平面坐标数据
  • python学opencv|读取图像
  • ffmpeg RTP PS推流
  • Rust语言俄罗斯方块(漂亮的界面案例+详细的代码解说+完美运行)
  • NUMA架构及在极速网络IO场景下的优化实践
  • Brain.js 用于浏览器的 GPU 加速神经网络
  • Linux——用户级缓存区及模拟实现fopen、fweite、fclose
  • 视觉感知与处理:解密计算机视觉的未来
  • 【大数据学习 | Spark-Core】广播变量和累加器
  • postgresql按照年月日统计历史数据
  • pywin32库 -- 读取word文档中的图形
  • GitLab使用示例
  • uniapp echarts tooltip formation 不识别html
  • 3D扫描对文博行业有哪些影响?
  • 面试(十一)
  • React-useState的使用
  • 设计模式之破环单例模式和阻止破坏
  • 11.19c++面向对象+单例模式
  • 一文了解TensorFlow是什么
  • 如何做好一份技术文档?
  • Linux和Ubuntu的关系