小程序封装可清空的input组件

小程序学习之input组件封装

<view class="v-input v-input-class">
  <view class="v-input-label {{required?'v-input-required':''}}">{{label}}</view>
  <view class="v-input-value_container {{border?'v-input-value_container_border':''}}">
<input class="v-input-value " placeholder="{{placeholder}}" placeholder-style="{{placehoderStyle}}" placeholder-class="{{placeholderClass}}" maxlength="{{maxlength}}" focus="{{focus}}" confirm-type="{{confirmType}}" confirm-hold="{{confirmHold}}" disabled="{{disabled}}" password="{{password}}" type="{{type}}" value="{{value}}" bindinput="handleInputChange" bindfocus="handleInputFocus" bindblur="handleInputBlur" bindconfirm="handleInputConfirm" />
  <icon class="v-input-icon" wx:if="{{clearable}}" bindtap="handleClearTap" type="clear" size="18" />
  </view>  
</view>

js文件如下

Component({
  behaviors: ['wx://form-field'],
  externalClasses:['v-input-class'],
    /**
     * 组件的属性列表
     */
    properties: {
        label: String,
        password: {
            type: Boolean,
            value: false
        },
        disabled: {
            type: Boolean,
            value: false
        },
        placeholder: {
            type: String,
            value: '请输入'
        },
        placeholderStyle: String,
        placeholderClass: String,
        maxlength: {
            type: Number,
            value: 140
        },
        focus: {
            type: Boolean,
            value: false
        },
        confirmType: {
            type: String,
            value: 'done'
        },
        confirmHold: {
            type: Boolean,
            value: false
        },
        type: {
            type: String,
            value: 'text'
        },
        value: String,
        clearable: {
            type: Boolean,
            value: false
        },
        required: {
            type: Boolean,
            value: false,
        },
        message: {
            type: String,
            value: '请输入完整内容'
        },
        border: {
            type: Boolean,
            value: false
        }
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {
        handleInputChange(e) {
            let detail = {
                value: e.detail.value
            }
            this.setData({
                value: detail.value
            });

            this.triggerEvent('input', detail);
        },
        handleInputFocus(e) {
            this.triggerEvent('focus', e.detail);
        },
        handleInputBlur(e) {
            let detail = {
                value: e.detail.value
            }
            if (this.data.required) {
                if (this.checkValueRequired(detail.value)) {
                    this.setData({
                        value: detail.value
                    });
                }
            }

            this.triggerEvent('blur', detail);
        },
        handleInputConfirm(e) {
            let detail = {
                value: e.detail.value
            }
            this.setData({
                value: detail.value
            });
            this.triggerEvent('confirm', detail);
        },
        handleClearTap() {
            let detail = {
                value: ''
            }
            this.setData({
                value: ''
            })
            this.triggerEvent('clear', detail);
        },

        checkValueRequired() {
            if (!!this.data.value && this.data.value !== "") {
                return true
            } else {
                this._showToast(this.data.message)
                return false
            }
        },

        _showToast(message, icon = 'none') {
            wx.showToast({
                title: message,
                icon: icon
            })
        }
    }
})

加上behavior是因为在form表单中 提交表单时获取不到input，开发文档有。

在json文件中引入

  "usingComponents": {
    "v-input": "/components/input/input"
  }

就可以在wxml中使用

<v-input label="输入框" required clearable/>