drip-ui/es/input/index.js

Lightweight Mobile UI Components built on Vue

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

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "drip-input"
    }, [_vm.type === 'textarea' ? _c('textarea', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.currentValue,
        expression: "currentValue"
      }],
      ref: "input",
      style: _vm.style,
      attrs: {
        "placeholder": _vm.placeholder || '',
        "maxlength": _vm.maxlength || ''
      },
      domProps: {
        "value": _vm.currentValue
      },
      on: {
        "focus": function focus($event) {
          _vm.focus(_vm.currentValue);
        },
        "blur": function blur($event) {
          _vm.blur(_vm.currentValue);
        },
        "input": [function ($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.currentValue = $event.target.value;
        }, function ($event) {
          _vm.update(_vm.currentValue);
        }],
        "click": function click($event) {
          _vm.clickInput(_vm.currentValue);
        }
      }
    }) : _vm._e()]);
  },
  name: 'input',
  props: {
    placeholder: {
      type: [String, Number]
    },
    maxlength: {
      type: Number
    },
    value: {
      type: [String, Number]
    },
    type: {
      type: String
    },
    style: {
      type: Object
    },
    autosize: {
      type: [Boolean, Object]
    }
  },
  data: function data() {
    return {
      currentValue: this.value
    };
  },
  watch: {
    currentValue: function currentValue(val) {
      this.$nextTick(this.adjustSize);
      this.$emit('input', val);
    }
  },
  mounted: function mounted() {
    this.$nextTick(this.adjustSize);
  },
  methods: {
    adjustSize: function adjustSize() {
      var input = this.$refs.input;

      if (!(this.type === 'textarea' && this.autosize) || !input) {
        return;
      }

      input.style.height = 'auto';
      var height = input.scrollHeight;

      if (isObj(this.autosize)) {
        var _this$autosize = this.autosize,
            maxHeight = _this$autosize.maxHeight,
            minHeight = _this$autosize.minHeight;

        if (maxHeight) {
          height = Math.min(height, maxHeight);
        }

        if (minHeight) {
          height = Math.max(height, minHeight);
        }
      }

      if (height) {
        input.style.height = height + 'px';
      }
    },
    focus: function focus(val) {
      this.$emit('focus', val);
    },
    blur: function blur(val) {
      this.$emit('blur', val);
    },
    clickInput: function clickInput(val) {
      this.$emit('click', val);
    },
    update: function update(val) {
      this.$emit('input', val);
    }
  }
});