微信小程序自定义组件-可清除的input组件

最新推荐文章于 2025-07-11 13:15:29 发布

原创

最新推荐文章于 2025-07-11 13:15:29 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #自定义组件

本文介绍了如何在微信小程序中封装一个可清除的input自定义组件。组件包含输入提示图标、输入框和删除按钮，输入框内容为空时删除按钮隐藏。通过设置组件属性和监听事件，实现输入内容时显示删除按钮并能清除内容。详细介绍了组件的wxml布局、properties属性列表以及事件触发，并提供了使用组件的方法和最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了在项目中使用方便以及方便其他项目直接使用，便封装了一个可清除的input自定义组件。

组件需要达到的需求是：输入框内没有内容时，删除按钮隐藏；当输入框内有内容时，删除按钮显示，点击删除按钮则清空输入框内所有内容。并且还可以设置输入框整体样式以及输入框左侧图标。

明确了需求之后，就可以开始着手实现了。

首先，在目标目录下新建一个自定义组件

新建自定义组件.png

建好之后，我们需要来设计布局。根据需求来看，我们只需要三个组件：两个image和一个input。左边一个image提示图标，然后一个input输入框，最后一个image删除按钮。我们要把尽可能多的数据设置成可以修改的绑定数据，提高自定义组件的可扩展性。

最终确定的wxml布局文件如下：

<view class='input-class'>
     <image src='{
  
  {inputIcon}}' mode="scaleToFill" class='icon-class'></image>
     <input placeholder='{
  
  {inputHint}}' bindconfirm='{
  
  {confirmTap}}' style='flex:1;width:100%;padding-left:12rpx;' bindinput='inputListener' bindconfirm='inputConfirm' value='{
  
  {inputValue}}' type='{
  
  {inputType}}' passw