如何在uniapp input输入框右侧增加单位的解决方法

原创已于 2024-09-03 18:13:37 修改 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

于 2023-05-05 17:34:56 首次发布

这段代码展示了一个用于输入年份的文本框设计，使用了Flex布局来对齐元素，包括一个颜色定制的图标和一个单位标签。输入框具有确认类型和占位符文本，旨在收集保修期限信息。

zihao

别犹豫,直接复制

<view class="diygw-form-item diygw-col-24">
  <view class="title">参数</view>
  <view class="input solid">
  <!-- 重点 -->
    <text class="diy-icon-recharge" style="color: #07c160"></text>
    
    <view class="input-container">
      <input class="flex1" name="input4" comfirm-type="done" type="text" v-model="specification.warrantyPeriod" placeholder="请输入年份" />
      
       <!-- 重点 -->
      <text class="unit">年</text>
    </view>
  </view>
</view>

<style>
 //重点
.input-container {
  display: flex;
  align-items: center;
}

 //重点
.unit {
  margin-left: 5px;
  color: #999;
}
</style>