修改插槽样式,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>

这样就可以达到需求效果

相关推荐
aiwery1 分钟前
一文掌握 TypeScript 工具类型:Record、Partial、Omit、Pick 等实战用法
前端·代码规范
ankleless15 分钟前
C语言(12)——进阶函数
前端·html
码码哈哈爱分享17 分钟前
Tauri 框架介绍
css·rust·vue·html
一条上岸小咸鱼19 分钟前
Kotlin 基本数据类型(四):String
android·前端·kotlin
我是哈哈hh34 分钟前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清1 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
一枚前端小能手1 小时前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
晴空雨1 小时前
React 合成事件原理:从事件委托到 React 17 的重大改进
前端·react.js
魏嗣宗1 小时前
Node.js 网络编程全解析:从 Socket 到 HTTP,再到流式协议
前端·全栈
pepedd8641 小时前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae