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

需缩少插槽 append 的 宽度

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

html 复制代码
                <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

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

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

再尝试 设置为 50px

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

这样就可以达到需求效果

相关推荐
泷羽Sec-pp11 分钟前
基于Centos 7系统的安全加固方案
java·服务器·前端
IT 古月方源18 分钟前
GRE技术的详细解释
运维·前端·网络·tcp/ip·华为·智能路由器
myepicure88821 分钟前
Windows下调试Dify相关组件(1)--前端Web
前端·llm
用户595943992721931 分钟前
松下功率继电器HE-A全新登场
前端
JosieBook34 分钟前
【ASP.NET学习】Web Pages 最简单的网页编程开发模型
前端·asp.net·菜鸟教程
雨 子1 小时前
Spring Web MVC
前端·spring boot·spring·mvc·postman
计算机毕设指导61 小时前
基于Springboot美食推荐商城系统【附源码】
java·前端·spring boot·后端·spring·tomcat·美食
!win !1 小时前
外部H5唤起常用小程序链接规则整理
前端·小程序
染指悲剧2 小时前
vue实现虚拟列表滚动
前端·javascript·vue.js
林涧泣2 小时前
【Uniapp-Vue3】navigator路由与页面跳转
前端·vue.js·uni-app