微信小程序清除输入框内容组件 清空Input weui中一键清除input内容

前提

首先，我是在引用weUI扩展组件情况下，自己做了适当修改，即可全局引用Input, 使用清空输入内容功能。components为weui组件，本身weui是没有input组件的，我自己添加了一个Input-clear组件。

使用方法

第一步：引入weUI组件，方法很多，我是直接引入了weUI的components文件夹，也可用其他方法引入，详见微信公众平台文档说明

第二步： 在app.wxss页面引入weui.wxss

第三步： 在需要使用weUI组件的页面的json文件中添加你需要的组件，一定要开启使用组件功能：“component”: true,

{
  "component": true,
  "usingComponents": {
    "mp-toptips": "../../../components/toptips/toptips",
    "mp-cells": "../../../components/cells/cells",
    "mp-cell": "../../../components/cell/cell",
    "mp-input": "../../../components/input-clear/input-clear", 
    "mp-form": "../../../components/form/form"
  }
}

第四步： 然后就可以在组件啦

//wxml
<mp-form id="form" rules="{{rules}}" models="{{formData}}">   
   <mp-cells title="" footer="">
     <mp-cell prop="gmfName" title="公司名称" ext-class="weui-cells">
		<mp-input bindinput="formInputChange"  bindclear="clearInput" data-field="name" value="{{formData.name}}" class="weui-input" bindblur="hideList" placeholder="请输入公司名称(可检索)"/>  
	  </mp-cell> 
    </view>     
  </mp-cells>  
</mp-form>
//js
	data: {
		formData: {},
	}

// 修改input内容
  formInputChange(e) {
    const { field } = e.currentTarget.dataset;    
    this.setData({
      [`formData.${field}`]: e.detail.value
    })
    if (e.detail.value.length >= 2) {
      this.searchTitleList(e.detail.value)
    }
  }, 
  //清空输入框内容，并更新数据
  clearInput(e){
    const { field } = e.currentTarget.dataset;    
    this.setData({
       [`formDataG.${field}`]: ""
     })
  }

components组件详细可在github下载

（其中包含我自己修改的Input-clear）其他组件可以自行安装（我引用了部分weUI组件，需要全部自行安装），有需要可单独提取我的input-clear
github下载weUIcomponents组件包

如果你有更好的方法实现，欢迎交流！