drip-ui/es/form/form-item.js

Lightweight Mobile UI Components built on Vue

import create from '../utils/create';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return !_vm.data.hide ? _c('div', {
      staticClass: "cell",
      "class": {
        'cell-small': _vm.size === 'small',
        'cell-line': _vm.data.hideLine,
        'cell-hight': _vm.data.cellHight
      }
    }, [_c('label', {
      "class": {
        'cell-small-label': _vm.size === 'small'
      },
      domProps: {
        "innerHTML": _vm._s(_vm.data.isLabel ? _vm.label : _vm.data.label)
      }
    }), _c('div', {
      staticClass: "cell-right",
      "class": {
        'cell-small-right': _vm.size === 'small'
      },
      on: {
        "click": function click($event) {
          _vm.selectInput(_vm.data);
        }
      }
    }, [_vm.data.rightType === 'selectButton' ? _c('select-button', {
      attrs: {
        "list": _vm.data.list,
        "type": _vm.data.type,
        "values": _vm.data.raValue,
        "width": _vm.data.width
      },
      on: {
        "getValue": _vm.getValue
      }
    }) : _vm.data.rightType === 'textarea' ? _c('div', {
      staticClass: "cell-right-textarea"
    }, [_c('textarea', {
      directives: [{
        name: "model",
        rawName: "v-model.trim",
        value: _vm.currentValue,
        expression: "currentValue",
        modifiers: {
          "trim": true
        }
      }],
      staticClass: "cell-right-textarea",
      "class": {
        'invalid': _vm.data.error
      },
      attrs: {
        "placeholder": _vm.data.placeholder,
        "maxlength": _vm.data.maxlength || ''
      },
      domProps: {
        "value": _vm.currentValue
      },
      on: {
        "blur": [function ($event) {
          _vm.blur(_vm.data);
        }, function ($event) {
          _vm.$forceUpdate();
        }],
        "focus": function focus($event) {
          _vm.focus(_vm.data);
        },
        "input": [function ($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.currentValue = $event.target.value.trim();
        }, function ($event) {
          _vm.update(_vm.data);
        }]
      }
    })]) : _vm.data.rightType === 'numInput' ? _c('div', {
      staticClass: "cell-right-numInput"
    }, [_c('num-counter', {
      attrs: {
        "minNum": _vm.data.minNum,
        "maxNum": _vm.data.maxNum
      },
      on: {
        "numCount": _vm.numCount,
        "lowMin": _vm.lowMin,
        "highMax": _vm.highMax
      },
      model: {
        value: _vm.currentValue,
        callback: function callback($$v) {
          _vm.currentValue = typeof $$v === 'string' ? $$v.trim() : $$v;
        },
        expression: "currentValue"
      }
    })], 1) : _c('input', {
      directives: [{
        name: "model",
        rawName: "v-model.trim",
        value: _vm.currentValue,
        expression: "currentValue",
        modifiers: {
          "trim": true
        }
      }],
      "class": {
        'invalid': _vm.data.error
      },
      attrs: {
        "type": _vm.data.type,
        "readonly": _vm.data.readonly,
        "disabled": _vm.data.disabled,
        "placeholder": _vm.data.placeholder
      },
      domProps: {
        "value": _vm.currentValue
      },
      on: {
        "blur": [function ($event) {
          _vm.blur(_vm.data);
        }, function ($event) {
          _vm.$forceUpdate();
        }],
        "focus": function focus($event) {
          _vm.focus(_vm.data);
        },
        "input": [function ($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.currentValue = $event.target.value.trim();
        }, function ($event) {
          _vm.update(_vm.data);
        }]
      }
    }), _vm.data.riskDescShow && _vm.data.riskDesc.length ? _c('div', {
      staticClass: "cell-select"
    }, [_c('form-risk-desc', {
      attrs: {
        "options": _vm.data
      },
      on: {
        "change": _vm.riskDescChange
      }
    })], 1) : _vm._e(), _vm.data.showTip && _vm.data.tip ? _c('div', {
      staticClass: "cell-tip"
    }, [[_c('render', {
      attrs: {
        "template": _vm.data.tip()
      }
    })]], 2) : _vm._e(), _c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.data.btn && !_vm.data.hideSelectBtn,
        expression: "data.btn && !data.hideSelectBtn"
      }],
      staticClass: "cell-select",
      on: {
        "click": function click($event) {
          $event.stopPropagation();

          _vm.selectRight(_vm.data);
        }
      }
    }, [_vm.data.btn ? [_c('render', {
      attrs: {
        "template": _vm.data.btn()
      }
    })] : _vm._e()], 2)], 1)]) : _vm._e();
  },
  name: 'form-item',
  props: {
    data: {
      type: Object
    },
    size: {
      type: String,
      "default": 'default'
    },
    label: {
      type: String
    }
  },
  watch: {
    'data.value': function dataValue(val) {
      this.currentValue = this.data.disabled || this.data.showView ? this.data.valueView || this.data.value : val;
      this.update(this.data);
    },
    'data.showView': function dataShowView(val) {
      this.currentValue = this.data.disabled || val ? this.data.valueView || this.data.value : this.data.value;
      this.update(this.data);
    },
    currentValue: function currentValue(val) {
      if (!this.data.disabled || !this.data.showView) {
        this.data.value = val;
      } else {
        this.data.value = this.data.value;
      }
    } // data: {
    //   // handler (val) {
    //   //   if (
    //   //     val.error &&
    //   //     val.value
    //   //   ) {
    //   //     val.error = false
    //   //   }
    //   // },
    //   // deep: true
    // }

  },
  data: function data() {
    return {
      currentValue: this.data.disabled || this.data.showView ? this.data.valueView || this.data.value : this.data.value,
      currentTop: 0
    };
  },
  methods: {
    riskDescChange: function riskDescChange(options) {
      this.$emit('riskDescChange', options);
    },
    // 选择右边弹框
    selectRight: function selectRight(val) {
      this.$emit('selectRight', val);
    },
    // 单选按钮选择的值
    getValue: function getValue(val) {
      // this.data.raValue = val
      this.$emit('getRaValue', val);
    },
    numCount: function numCount(val) {
      this.$emit('getNumValue', val);
    },
    // 选择份数超出最大
    highMax: function highMax(val) {
      this.$emit('highMax', val);
    },
    // 选择份数小于最小
    lowMin: function lowMin(val) {
      this.$emit('lowMin', val);
    },
    // 如果input框可以不填内容，但是有下拉按钮，那么点击input框也会选择
    selectInput: function selectInput(data) {
      if (data.disabled && data.btn) {
        this.selectRight(data);
      }
    },
    // input操作
    update: function update(val) {
      this.$set(this.data, 'error', false);
      this.$emit('input', val);
      this.$emit('update', val);
    },
    blur: function blur(val) {
      this.$emit('blur', val);
    },
    focus: function focus(val) {
      this.$emit('focus', val);
    }
  },
  components: {
    render: function render() {
      return import('./render'
      /* webpackChunkName: "form render" */
      );
    },
    selectButton: function selectButton() {
      return import('../select-button'
      /* webpackChunkName: "form selectButton" */
      );
    },
    numCounter: function numCounter() {
      return import('./num-counter'
      /* webpackChunkName: "form numCounter" */
      );
    },
    formRiskDesc: function formRiskDesc() {
      return import('./form-risk-desc'
      /* webpackChunkName: "form riskDesc" */
      );
    }
  }
});