@cqmcui/cqmcui/dist/packages/_es/InputNumber.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, normalizeStyle } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
import { Minus, Plus } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("input-number");
const _sfc_main = create({
  components: { Minus, Plus },
  props: {
    modelValue: {
      type: [Number, String],
      default: 0
    },
    inputWidth: {
      type: [Number, String],
      default: ""
    },
    buttonSize: {
      type: [Number, String],
      default: ""
    },
    min: {
      type: [Number, String],
      default: 1
    },
    max: {
      type: [Number, String],
      default: 9999
    },
    step: {
      type: [Number, String],
      default: 1
    },
    decimalPlaces: {
      type: [Number, String],
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  emits: ["update:modelValue", "change", "blur", "focus", "reduce", "add", "overlimit"],
  setup(props, { emit }) {
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true,
        [`${prefixCls}--disabled`]: props.disabled
      };
    });
    const fixedDecimalPlaces = (v) => {
      return Number(v).toFixed(Number(props.decimalPlaces));
    };
    const change = (event) => {
      const input = event.target;
      emit("update:modelValue", input.valueAsNumber, event);
    };
    const emitChange = (value, event) => {
      let output_value = fixedDecimalPlaces(value);
      emit("update:modelValue", output_value, event);
      emit("change", output_value, event);
    };
    const addAllow = (value = Number(props.modelValue)) => {
      return value < Number(props.max) && !props.disabled;
    };
    const reduceAllow = (value = Number(props.modelValue)) => {
      return value > Number(props.min) && !props.disabled;
    };
    const reduce = (event) => {
      emit("reduce", event);
      if (reduceAllow()) {
        let output_value = Number(props.modelValue) - Number(props.step);
        emitChange(output_value, event);
      } else {
        emit("overlimit", event, "reduce");
      }
    };
    const add = (event) => {
      emit("add", event);
      if (addAllow()) {
        let output_value = Number(props.modelValue) + Number(props.step);
        emitChange(output_value, event);
      } else {
        emit("overlimit", event, "add");
      }
    };
    const focus = (event) => {
      if (props.disabled)
        return;
      if (props.readonly)
        return;
      emit("focus", event);
    };
    const blur = (event) => {
      if (props.disabled)
        return;
      if (props.readonly)
        return;
      const input = event.target;
      let value = input.valueAsNumber;
      if (value < Number(props.min)) {
        value = Number(props.min);
      } else if (value > Number(props.max)) {
        value = Number(props.max);
      }
      emitChange(value, event);
      emit("blur", event);
    };
    return {
      classes,
      change,
      blur,
      focus,
      add,
      addAllow,
      reduce,
      reduceAllow,
      pxCheck
    };
  }
});
const _hoisted_1 = ["min", "max", "disabled", "readonly", "value"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Minus = resolveComponent("Minus");
  const _component_Plus = resolveComponent("Plus");
  return openBlock(), createElementBlock("view", {
    class: normalizeClass(_ctx.classes)
  }, [
    createElementVNode("view", {
      class: normalizeClass(["cqmc-input-number__icon cqmc-input-number__left", { "cqmc-input-number__icon--disabled": !_ctx.reduceAllow() }]),
      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.reduce && _ctx.reduce(...args))
    }, [
      renderSlot(_ctx.$slots, "left-icon", {}, () => [
        createVNode(_component_Minus, {
          width: _ctx.pxCheck(_ctx.buttonSize),
          height: _ctx.pxCheck(_ctx.buttonSize)
        }, null, 8, ["width", "height"])
      ])
    ], 2),
    createElementVNode("input", {
      type: "number",
      min: _ctx.min,
      max: _ctx.max,
      style: normalizeStyle({ width: _ctx.pxCheck(_ctx.inputWidth), height: _ctx.pxCheck(_ctx.buttonSize) }),
      disabled: _ctx.disabled,
      readonly: _ctx.readonly,
      value: _ctx.modelValue,
      onInput: _cache[1] || (_cache[1] = (...args) => _ctx.change && _ctx.change(...args)),
      onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.blur && _ctx.blur(...args)),
      onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.focus && _ctx.focus(...args))
    }, null, 44, _hoisted_1),
    createElementVNode("view", {
      class: normalizeClass(["cqmc-input-number__icon cqmc-input-number__right", { "cqmc-input-number__icon--disabled": !_ctx.addAllow() }]),
      onClick: _cache[4] || (_cache[4] = (...args) => _ctx.add && _ctx.add(...args))
    }, [
      renderSlot(_ctx.$slots, "right-icon", {}, () => [
        createVNode(_component_Plus, {
          width: _ctx.pxCheck(_ctx.buttonSize),
          height: _ctx.pxCheck(_ctx.buttonSize)
        }, null, 8, ["width", "height"])
      ])
    ], 2)
  ], 2);
}
const InputNumber = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  InputNumber as default
};