@arco-vue-pro-components/pro-components
Version:
基于@arco-design/web-vue组件的高级组件，包括pro-table
165 lines (164 loc) • 4.27 kB
JavaScript
;
var vue = require("vue");
var omit = require("../_utils/omit.js");
var util = require("./util.js");
var index = require("../_utils/index.js");
var webVue = require("@arco-design/web-vue");
const noPrecisionTypeArr = ["money", "int"];
var _ProInputNumber = vue.defineComponent({
name: "ProInputNumber",
props: {
type: {
type: String,
default: "decimal"
},
intPartNumber: Number,
capitalUnit: {
type: String,
default: "\u5143"
},
showCapital: {
type: Boolean,
default: false
},
maxLength: Number,
modelValue: Number,
defaultValue: Number,
precision: Number,
disabled: {
type: Boolean,
default: false
},
error: {
type: Boolean,
default: false
},
max: {
type: Number
},
min: {
type: Number,
default: -Infinity
},
placeholder: String,
size: {
type: String
},
allowClear: {
type: Boolean,
default: true
},
readOnly: {
type: Boolean,
default: false
},
onChange: {
type: Function
},
onFocus: {
type: Function
},
onBlur: {
type: Function
},
onClear: {
type: Function
},
onInput: {
type: Function
}
},
setup(props, {
slots,
attrs,
emit
}) {
const {
showCapital
} = vue.toRefs(props);
const capitalStr = vue.ref("");
const prefixCls = index.getPrefixCls("input-decimal");
const config = vue.computed(() => {
let newPrecision;
let newIntPartNumber;
let isCapital = false;
switch (props.type) {
case "decimal":
newPrecision = 2;
newIntPartNumber = 13;
break;
case "digit":
case "int":
newPrecision = 0;
newIntPartNumber = 13;
break;
case "money":
newPrecision = props.capitalUnit === "\u4E07\u5143" ? 6 : 2;
newIntPartNumber = props.capitalUnit === "\u4E07\u5143" ? 9 : 13;
isCapital = true;
break;
case "percent":
newPrecision = 3;
newIntPartNumber = 3;
break;
}
if (props.intPartNumber) {
newIntPartNumber = props.intPartNumber;
}
if (props.precision && !isCapital && !noPrecisionTypeArr.includes(props.type)) {
newPrecision = props.precision;
}
return {
precision: newPrecision,
intPartNumber: newIntPartNumber,
isCapital,
suffix: isCapital ? props.capitalUnit : props.type === "percent" ? "%" : void 0,
max: props.max || (props.type === "percent" ? 100 : void 0)
};
});
const formatter = (value) => {
const newValueObj = util.formatterDecimal(value, config.value.precision, config.value.isCapital, config.value.intPartNumber);
if (config.value.isCapital) {
capitalStr.value = util.toCapital(newValueObj.value, props.capitalUnit, config.value.precision);
}
return newValueObj.text;
};
const renderSuffix = () => {
return config.value.suffix;
};
const restProps = vue.computed(() => omit.omit(props, ["precision", "formatter", "parser"]));
return () => {
const _slots = {
prepend: slots.prepend,
suffix: slots.suffix || (config.value.suffix ? renderSuffix : void 0),
prefix: slots.prefix,
append: slots.append
};
return vue.createVNode("div", {
"class": `${prefixCls}-container`,
"style": {
width: "100%"
}
}, [vue.createVNode(webVue.InputNumber, vue.mergeProps({
"class": `${prefixCls}-input`,
"formatter": formatter,
"parser": (value) => {
return value.replace(/[^0-9.]/g, "");
}
}, restProps.value, {
"onClear": () => {
capitalStr.value = "";
},
"hideButton": true,
"min": props.min || 0,
"max": config.value.max,
"style": {
width: "100%"
}
}, attrs), _slots), config.value.isCapital && showCapital.value && vue.createVNode("div", {
"class": `${prefixCls}-capital`
}, [capitalStr.value])]);
};
}
});
module.exports = _ProInputNumber;