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

这样就可以达到需求效果

相关推荐
PBitW9 小时前
为什么vite中TS报错,可以继续运行?Webpack不行?
前端·webpack·typescript·vite
光影少年10 小时前
react navite手写 FlatList 优化配置
前端·react native·react.js
曹牧10 小时前
C#:文本文件读取
服务器·前端·c#
柚yuzumi10 小时前
前端优化,从少触发一次开始:防抖与节流
前端·javascript
默_笙10 小时前
🚤 CSS 布局的"圈地运动":BFC 就是浏览器的独立领地
前端·javascript
我爱写代码i10 小时前
AI对话绘画数字人源码 - uniapp前端
前端·人工智能·uni-app
OpenTiny社区10 小时前
太酷了!装上OpenTiny dsh‑genui这个插件,你的DeepSeek Harness点击就能干活了!
前端·ai编程
ModyQyW10 小时前
vite-plugin-uni-pages 更新了什么
前端·uni-app
前端大卫11 小时前
H5 渲染 PDF 并添加高亮的两种方案【附源码】
前端
Dreams°12311 小时前
【Java后端+Vue前后端分离:内网正常、公网访问异常|5个高频经典踩坑完整复盘】
java·开发语言·vue.js