小程序自定义input框，带图片带删除按钮

废话不多说，先看下效果

这个是我抽离出来的一个component组件。
上代码：

wxml文件

<view class='input-class'>
   <image class='icon-class' src='{{inputIcon}}' mode="scaleToFill" ></image>
   <input class='input' placeholder='{{inputHint}}' placeholder-class='input-placeholder-class' bindinput='inputListener' bindblur='inputBlur' type='{{inputType}}' bindconfirm='inputConfirm' value='{{inputValue}}' confirm-type='{{confirmType}}' password='{{isPassword}}' auto-focus maxlength='{{maxLength}}'></input>
   <image class="{{isClearShow?'clearImgShow':'clearImgHide'}}" src='../../images/清除.png' bindtap='clearTap' mode='widthFix'></image>
</view>

wxss

.input-class {
  width: 100%;
  height: 122rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1rpx #EEEEEE;
}

.icon-class {
  height: 30rpx;
  width: 30rpx;
}

.input {
  margin-left: 20rpx;
  flex: 0.9;
  height: 100%;
  font-size: 32rpx;
  color: #141A30;
}

.input-placeholder-class {
  font-size: 28rpx;
  color: #A3A3A3;
}

.clearImgShow {
  width: 35rpx;
  height: 35rpx;
}

.clearImgHide {
  display: none;
}

js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    inputHint: {//占位符
      type: String,
      value: ''
    },
    inputIcon: {//左侧图标
      type: String,
      value: ''
    },
    inputType: {//键盘类型
      type: String,
      value: 'text'
    },
    isPassword: {//密码密文
      type: Boolean,
      value: false
    },
    confirmType: {//完成键类型
      type: String,
      value: "done"
    },
    maxLength: {//最大长度
      type: String,
      value: '100'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isClearShow: false,//显示清除按钮
    inputValue: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //输入监听
    inputListener: 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: cursor
      };
      this.triggerEvent('inputListener', detail);
    },
    //点击完成按钮
    inputConfirm: function (e) {
      var value = e.detail.value;
      var detail = {
        value: value
      }
      this.triggerEvent('inputConfirm', detail);
    },
    //失去焦点
    inputBlur: function () {
      this.setData({
        isClearShow: false,
      });
    },
    //点击清除按钮
    clearTap: function () {
      this.triggerEvent("clearTap");
      this.setData({
        isClearShow: false,
        inputValue: ''
      });
    }
  }
})

使用

xxx.json

"usingComponents": {
    "login-input": "../../components/login-input/login-input"
  }

js中需要实现来进行赋值，已经按钮的使能效果

data: {
    accountValue: '',
    pwdValue: '',
    disable: true,
  },
//输入监听
  inputListener: function (e) {
    if (e.currentTarget.id === 'accountInput') {
      this.setData({
        accountValue: e.detail.value,
        disable: !(e.detail.value.length > 0 & this.data.pwdValue.length >= 6),
      });
    } else {
      this.setData({
        pwdValue: e.detail.value,
        disable: !(e.detail.value.length >= 6 & this.data.accountValue.length > 0),
      });
    }

  },
  //点击完成键
  inputConfirm: function (e) {

  },
  //清楚按钮
  clearTap: function (e) {
    if (e.currentTarget.id === 'accountInput') {
      this.setData({
        accountValue: '',
        disable: true,
      });
    } else {
      this.setData({
        pwdValue: '',
        disable: true,
      });
    }
  }

wxml

<view class="login-input">
    <login-input class='login-input' id='accountInput' inputHint='请输入用户名' inputIcon='../../../../../images/用户名.png' confirmType='done' bind:inputListener='inputListener' bind:inputConfirm='inputConfirm' bind:clearTap='clearTap'/>
  </view>

  <view class="login-input">
    <login-input class='login-input' id='passwordInput' inputHint='请输入登录密码' inputIcon='../../../../../images/密码.png' confirmType='done' isPassword='true' bind:inputListener='inputListener' bind:inputConfirm='inputConfirm' bind:clearTap='clearTap' maxLength='20'/>
  </view>

wxss

container 是最外层包裹的view哦

.container {
  background-color: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-input {
  width: 80%;
  height: 122rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1rpx solid #E7E7E7;
}

觉得有帮助的点个赞吧，谢谢小哥哥小姐姐