如何在开启autogrow属性的q-input组件中将按钮定位在底部？

1. 普通Q-Input（无autogrow）按钮底部定位 #

通过给插槽内的按钮添加自定义样式，利用flex布局特性将按钮对齐到底部：

模板代码 #

<q-input label="普通输入框" placeholder="输入内容">
  <template v-slot:append>
    <q-btn icon="send" class="btn-bottom-align" size="sm" />
  </template>
</q-input>

样式代码 #

.btn-bottom-align {
  align-self: flex-end;
  margin-bottom: 4px; /* 匹配输入框内边距，调整底部间距 */
}

2. 开启autogrow属性时按钮底部定位 #

开启autogrow后输入框高度随内容动态变化，需要修改输入框内部容器布局，确保按钮始终固定在底部：

模板代码 #

<q-input 
  label="自动增高输入框" 
  autogrow
  placeholder="多行输入测试"
  class="input-autogrow-bottom-btn"
>
  <template v-slot:append>
    <q-btn icon="send" size="sm" />
  </template>
</q-input>

样式代码 #

.input-autogrow-bottom-btn .q-input__inner {
  display: flex;
  flex-direction: column;
}

.input-autogrow-bottom-btn .q-input__append {
  align-self: flex-end;
  margin-top: auto; /* 自动填充上方剩余空间，将按钮推到底部 */
  margin-bottom: 4px;
}

补充说明 #

• 修改q-input__inner的flex方向为列布局，让输入内容区和按钮垂直排列
• 若需要调整按钮水平位置，修改align-self的值即可（flex-start居左、center居中）

内容的提问来源于stack exchange，提问作者Timur