封裝微信小程序中input組件組件

參數	類型	示例
password	Boolean（是否是密碼類型）	password
placeholder	String （提示詞）	請輸入
name	String （form表單中name值）	name
maxlength	Number （最大輸入長度 默認140）	10
disabled	disabled （是否禁用）	disabled
must	Boolean（是否必填）	true
unit	String （單位）	kg
jiantou	Boolean （是否顯示箭頭）	true
value	String （input框中value值）	LGAG4DX39F3013734

<view class="row row-class">
  <text class="{{must == true ? 'must' : ''}}">{{must?'*':''}}{{title}}</text>
  <input type="{{type}}"
   password="{{password}}" 
   placeholder="{{placeholder}}" 
   name="{{name}}" 
   value="{{value}}"
    bindinput="_textInput" 
    maxlength="{{maxlength}}"
    disabled="{{disabled}}" 
    placeholder-class="input-placeholde" 
    cursor-spacing='140' />
  <text class="right">
     <text>{{unit}}</text>
     <text class="{{jiantou == true ? 'iconfont iconyoujiantou' : ''}}"></text>
  </text>
</view>

/* component/tow-row-login/tow-row-login.wxss */
@import "../../utils/iconfont.wxss";/*引入字體圖標*/

.input-row {
  background-color: white;
  height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
}

.input-row text {
  margin-right: 8px;
  font-size: 21px;
  color: #108ee9;
}

.input-row input {
  flex: 1;
  font-size: #bbb;
  color: #333;
}

.input-placeholde {
  color: #bbb;
  font-size: 16px;
}

.line {
  border-bottom: 2rpx solid #ddd;
}

.row .right {
  width: 45rpx;
}

.row .iconfont {
  width: 50rpx;
  font-size: 20px;
  color:  #333;
}

  properties: {
    title: { //左側標題
      type: String,
      value: ""
    },
    type: {//輸入文本類型
      type: String,
      value: "text"
    },
    placeholder: { //輸入框提示詞
      type: String,
      value: "請輸入"
    },
    value: { //輸入框默認值
      type: String,
      value: ""
    },
    maxlength: { //輸入框最大長度
      type: Number,
      value: 140
    },
    password: { //輸入框是否是密碼類型
      type: Boolean,
      value: false
    },
    name: { //輸入框在form表單中的name
      type: String,
      value: ""
    },
    unit: {
      type: String,
      value: ""
    },
    must: { //是否必填
      type: Boolean,
      value: false
    },

    jiantou: { //右箭頭
      type: Boolean,
      value: false
    },

    disabled: { //是否禁用
      type: Boolean,
      value: false,
      observer: function(newVal, oldVal) {
        if (newVal == true) {
          this.setData({
            placeholder: "無"
          })
        }
      }
    }
  },
  externalClasses: ['row-class'],
  behaviors: ['wx://form-field'],
  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

    /**
     * 輸入框內容變化回調
     */
    _textInput: function(e) {
      this.setData({
        value: e.detail.value
      })
    }
  }

<form bindsubmit="save">
     <row-input title="整備質量" name="conditionQuality" row-class="line" type="digit" unit="kg" placeholder="請輸入整備質量" />
</form>