@wfrog/vc
Version:
`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。
110 lines (107 loc) • 4.65 kB
JavaScript
import './index.css'
// vue-script:D:\project\_my\vc\src\components\input-number\index.vue?type=script
import { useCssVars as _useCssVars, defineComponent as _defineComponent } from "vue";
import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, isRef as _isRef, mergeProps as _mergeProps, createBlock as _createBlock, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
import { computed, nextTick, ref, shallowRef, useCssModule, useSlots } from "vue";
import { ElInputNumber } from "element-plus";
var _hoisted_1 = {
key: 0,
class: "el-input-group__prepend"
};
var input_number_default = /* @__PURE__ */ _defineComponent({
__name: "index",
props: {
modelValue: { type: Number, required: true, default: 0 },
precision: { type: Number, required: false, default: 0 },
controlsPosition: { type: String, required: false },
size: { type: String, required: false },
inputNumberClass: { type: String, required: false },
inputWidth: { type: String, required: false, default: "80px" }
},
emits: ["update:modelValue", "change", "blur"],
setup(__props, { emit: emits }) {
const props = __props;
_useCssVars((_ctx) => ({
"82b20fc6-inputWidth": __props.inputWidth
}));
const $slots = useSlots();
const $style = useCssModule();
const visible = ref(true);
const eleInputNumber = shallowRef();
const mainClass = computed(() => {
const className = {
[$style["input-number"]]: true,
"el-input": true,
"el-input-group--prepend": $slots.prepend,
"input-with-select": eleInputNumber.value?.querySelector(".el-input-group__prepend>.el-select")
};
if (props.size) {
className[`el-input--${props.size}`] = true;
}
return className;
});
const myControlsPosition = computed(() => $slots.prepend && props.controlsPosition === void 0 ? "right" : props.controlsPosition);
const myValue = computed({
get: () => props.modelValue,
set: (val) => {
const myVal = val === null ? myValue.value : val;
emits("update:modelValue", myVal);
}
});
const limitInputValue = (e) => {
const key = e.key;
if (key === "e" || key === "E" || props.precision === 0 && key === ".") {
e.preventDefault();
return false;
}
return true;
};
const handleChange = (currentValue, oldValue) => {
myValue.value = currentValue === 0 ? currentValue : currentValue || oldValue || 0;
emits("change", myValue.value, oldValue || 0);
};
const handleBlur = (e) => {
const eleInput = eleInputNumber.value?.querySelector(".el-input__inner[type=number]");
if (eleInput.value === "") {
visible.value = false;
nextTick(() => visible.value = true);
}
emits("blur", e);
};
return (_ctx, _cache) => {
return _openBlock(), _createElementBlock("div", {
ref_key: "eleInputNumber",
ref: eleInputNumber,
class: _normalizeClass(_unref(mainClass))
}, [
_unref($slots).prepend ? (_openBlock(), _createElementBlock("div", _hoisted_1, [
_renderSlot(_ctx.$slots, "prepend")
])) : _createCommentVNode("v-if", true),
visible.value ? (_openBlock(), _createBlock(_unref(ElInputNumber), _mergeProps({
key: 1,
modelValue: _unref(myValue),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _isRef(myValue) ? myValue.value = $event : null)
}, _ctx.$attrs, {
size: __props.size,
"step-strictly": "",
class: [__props.inputNumberClass, _unref($style)["el-input-number"]],
precision: __props.precision,
"controls-position": _unref(myControlsPosition),
onKeydown: limitInputValue,
onChange: handleChange,
onBlur: handleBlur
}), null, 16, ["modelValue", "size", "class", "precision", "controls-position"])) : _createCommentVNode("v-if", true)
], 2);
};
}
});
// vue-style:D:\project\_my\vc\src\components\input-number\index.vue?type=style&index=0&isModule=true&isNameImport=true
var input_number_default2 = { "input-number": "_input-number_199yu_1", "el-input-number": "_el-input-number_199yu_18" };
// src/components/input-number/index.vue
var cssModules = {};
input_number_default.__cssModules = cssModules = {};
cssModules["$style"] = input_number_default2;
var input_number_default3 = input_number_default;
export {
input_number_default3 as default
};