uniapp自定义input清除按钮

uniapp小程序,引入uni-ui库后,观察到其他组件,有的默认有清除按钮,比如:

 在写内置组件 input框,查看文档没有此属性,官方示例在这里:https://github.com/dcloudio/hello-uniapp/blob/master/pages/component/input/input.nvue

 还需自行复制对应的css,试了下效果不太好。

我需要和级联选择器风格一致的清除按钮,f12查看其有对应类名:

 修改下原本的input框,成功了。

代码如下:

 <view class="wc">
            <text class="text-title">标题/内容:</text>
            <input
              class="info-input"
              v-model="title"
              clear
              placeholder="请输入"
              clearable
              placeholder-style="color:#969899"
            />
            <text
              class="uni-icons uniui-clear"
              v-if="title"
              @click="
                () => {
                  title = ''
                }
              "
            ></text>
</view>

对应的css要复制过来:

.uni-icons {
  font-family: uniicons;
  text-decoration: none;
  text-align: center;
  color: #c0c4cc;
  font-size: 24px;
}
.uniui-clear:before {
  content: '\e66d';
}

 成功。

 

posted @ 2024-05-13 15:28  行走的蒲公英  阅读(763)  评论(0编辑  收藏  举报