drip-ui/es/form/num-counter.js

Lightweight Mobile UI Components built on Vue

export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', [_c('div', {
      staticClass: "counter"
    }, [_c('span', {
      staticClass: "counter-icon",
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          return _vm.subtractCount($event);
        }
      }
    }, [_vm._v("-")]), _c('span', {
      staticClass: "counter-num",
      domProps: {
        "textContent": _vm._s(_vm.count)
      }
    }), _c('span', {
      staticClass: "counter-icon",
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          return _vm.addCount($event);
        }
      }
    }, [_vm._v("\n      +\n    ")])])]);
  },
  props: {
    value: {
      type: [Number, String]
    },
    // 最小个数份数
    minNum: {
      type: [Number, String],
      "default": 1
    },
    // 最大可选份数
    maxNum: {
      type: [Number, String]
    }
  },
  data: function data() {
    return {
      count: this.value
    };
  },
  watch: {
    value: function value(val) {
      this.count = val;
    },
    count: function count(val) {
      this.$emit('input', val);
    }
  },
  methods: {
    subtractCount: function subtractCount() {
      if (this.count > this.minNum) {
        this.count--;
        this.$emit('numCount', {
          value: this.count,
          type: 'sub'
        });
        return;
      }

      this.$emit('lowMin', true);
    },
    addCount: function addCount() {
      if (this.count < this.maxNum) {
        this.count++;
        this.$emit('numCount', {
          value: this.count,
          type: 'add'
        });
        return;
      }

      this.$emit('highMax', true);
    }
  }
};