最近的一个小程序项目需要一个可清理的输入框控件。为了便于直接在项目和其他项目中使用，封装了一个可清理的输入自定义组件。

组件需要满足以下要求：输入框中没有内容时，隐藏删除按钮；当输入框中有内容时，将显示删除按钮，点击删除按钮将清除输入框中的所有内容。您还可以设置输入框的整体样式和输入框左侧的图标。

一旦需求明确，我们就可以开始实现它们。

首先，在目标目录中创建新的自定义组件

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

最终的wxml布局文件如下：

view class=' input-class ' image src=' { { input ticon } } ' mode=' scaleToFill ' class=' icon-class '/image input placeholder=' { { input thint } } ' bind confirm=' { { confirm tap } } ' style=' flex 33601；宽度：100%；填充-left :12 rpx；'bind input=' input listener ' bind confirm=' input confirm ' value=' { { input value } } ' type=' { { input type } } ' password=' { { isPassword } } ' confirm-type=' { { confirm type } } '/input image class=' { { isClearShow ' 'clearimgshow ' : ' clearimgide ' } } ' src=' clear . png ' bind tap=' clear tap ' mode=' width fix '/image/view然后，我们将设置组件的一些属性和监听方法。属性中定义了小程序的组件属性列表。js文件。写下所有需要公开并且可以在这里修改的属性。语法示例如下：

properties : { myproperty : }//property name type 3360 string，//type(必选)，目前接受的类型包括：string、number、boolean、object、array、null(代表任何类型)value: ' '、//属性初始值(可选)，如果未指定，将根据类型选择observer :函数(newval、oldval、changed path){//属性更改时要执行的函数(可选)，也可以写成中定义的方法名字符串例如：' _propertyChange' //通常newVal是新设置的数据，oldVal是旧数据} }，myProperty2: String //简化定义模式}我的属性列表如下：

/* * *组件属性列表*/properties : { input thint : { type : String，value:' search'}，inputicon 3360 {type:string，value3360' search.png'}，inputType: { type: String，value: 'text' }，ispassword : { type 3: Boolean，value: false }，confirm

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意事件，引用组件的页面可以监听这些事件。

监控和触发事件的语法如下：

//触发事件//当用户定义组件触发事件时，需要使用triggerEvent方法指定事件名称、detail对象和事件选项methods : { ontap 3360 function(){ var myeventdetail={ }//detail对象。事件监视器函数var myEventOption={} //提供了选项this。triggerevent ('myevent '，myeventdetail，myeventoption)} }//来监控事件！-当自定义组件触发“myevent”事件时，调用“onMyEvent”方法-组件-标记-名称bind myevent=' on myevent'/！-或者可以写成-component-tag-name bind : my event=' on my event '/这里我们需要设置触发事件，比如输入框的输入事件和输入框的确认事件。通过triggerEvent方法指定事件名称和事件触发事件参数

/* * *组件的方法列表*/methods : { input listener 3360 function(e){ var value=e . detail . value；var cursor=e . detail . cursor；if(value===null | | value===undefined | | value . length===0){ this . setdata({ isclearshow : false })；} else { this . setdata({ isclearshow : true })；} var detail={ value: value，cursor:游标}；this . triggerevent(' inputListener '，detail)；}，inputConfirm:函数(e){ var value=e . detail . value；var detail={ value : value } this . triggerevent(' input confirm '，detail)；}，clearTap:函数(){ this . setdata({ isclearshow : false，inputvalue : ' ' })；}}以上，这个可清洗输入组件的定制开发已经完成。现在让我们看看如何使用这个组件。

首先，在页面中设置usingComponents属性。需要使用这个组件来引入这个定制组件的json文件

使用组件' : {//这是设置的价格标签名称和组件地址' clearinput' : '././components/clear input/clear input ' }。然后，我们可以在页面上引用这个自定义组件，引用方法非常简单，可以通过上一步设置的标签名进行引用。

clearinputinputthint='搜索顺序' icon-class=' common _ search _ img ' input-class=' common _ search _ input ' confirm type=' search ' bind : input listener=' input listener bind : input confirm=' search event '/最终效果图如下：

GitHub项目地址：https://github.com/RaoMeng/TemplateOfHotel

摘要

以上是边肖推出的微信小程序自定义组件的可清洗输入组件。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！