283 lines
8.7 KiB
JavaScript
283 lines
8.7 KiB
JavaScript
"use strict";
|
||
const common_vendor = require("../../../../common/vendor.js");
|
||
const _sfc_main = {
|
||
name: "u-number-box",
|
||
mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$3],
|
||
data() {
|
||
return {
|
||
// 输入框实际操作的值
|
||
currentValue: "",
|
||
// 定时器
|
||
longPressTimer: null
|
||
};
|
||
},
|
||
watch: {
|
||
// 多个值之间，只要一个值发生变化，都要重新检查check()函数
|
||
watchChange(n) {
|
||
this.check();
|
||
},
|
||
// 监听v-mode的变化，重新初始化内部的值
|
||
modelValue: {
|
||
handler: function(newV, oldV) {
|
||
if (newV !== this.currentValue) {
|
||
this.currentValue = this.format(this.modelValue);
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
computed: {
|
||
getCursorSpacing() {
|
||
return common_vendor.getPx(this.cursorSpacing);
|
||
},
|
||
// 按钮的样式
|
||
buttonStyle() {
|
||
return (type) => {
|
||
const style = {
|
||
backgroundColor: this.bgColor,
|
||
height: common_vendor.addUnit(this.buttonSize),
|
||
color: this.color
|
||
};
|
||
if (this.isDisabled(type)) {
|
||
style.backgroundColor = "#f7f8fa";
|
||
}
|
||
return style;
|
||
};
|
||
},
|
||
// 输入框的样式
|
||
inputStyle() {
|
||
this.disabled || this.disabledInput;
|
||
const style = {
|
||
color: this.color,
|
||
backgroundColor: this.bgColor,
|
||
height: common_vendor.addUnit(this.buttonSize),
|
||
width: common_vendor.addUnit(this.inputWidth)
|
||
};
|
||
return style;
|
||
},
|
||
// 用于监听多个值发生变化
|
||
watchChange() {
|
||
return [this.integer, this.decimalLength, this.min, this.max];
|
||
},
|
||
isDisabled() {
|
||
return (type) => {
|
||
if (type === "plus") {
|
||
return this.disabled || this.disablePlus || this.currentValue >= this.max;
|
||
}
|
||
return this.disabled || this.disableMinus || this.currentValue <= this.min;
|
||
};
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
emits: ["update:modelValue", "focus", "blur", "overlimit", "change", "plus", "minus"],
|
||
methods: {
|
||
init() {
|
||
this.currentValue = this.format(this.modelValue);
|
||
},
|
||
// 格式化整理数据，限制范围
|
||
format(value) {
|
||
value = this.filter(value);
|
||
value = value === "" ? 0 : +value;
|
||
value = Math.max(Math.min(this.max, value), this.min);
|
||
if (this.decimalLength !== null) {
|
||
value = value.toFixed(this.decimalLength);
|
||
}
|
||
return value;
|
||
},
|
||
// 过滤非法的字符
|
||
filter(value) {
|
||
value = String(value).replace(/[^0-9.-]/g, "");
|
||
if (this.integer && value.indexOf(".") !== -1) {
|
||
value = value.split(".")[0];
|
||
}
|
||
return value;
|
||
},
|
||
check() {
|
||
const val = this.format(this.currentValue);
|
||
if (val !== this.currentValue) {
|
||
this.currentValue = val;
|
||
this.emitChange(val);
|
||
}
|
||
},
|
||
// 判断是否出于禁止操作状态
|
||
// isDisabled(type) {
|
||
// if (type === 'plus') {
|
||
// // 在点击增加按钮情况下，判断整体的disabled，是否单独禁用增加按钮，以及当前值是否大于最大的允许值
|
||
// return (
|
||
// this.disabled ||
|
||
// this.disablePlus ||
|
||
// this.currentValue >= this.max
|
||
// )
|
||
// }
|
||
// // 点击减少按钮同理
|
||
// return (
|
||
// this.disabled ||
|
||
// this.disableMinus ||
|
||
// this.currentValue <= this.min
|
||
// )
|
||
// },
|
||
// 输入框活动焦点
|
||
onFocus(event) {
|
||
this.$emit("focus", {
|
||
...event.detail,
|
||
name: this.name
|
||
});
|
||
},
|
||
// 输入框失去焦点
|
||
onBlur(event) {
|
||
this.format(event.detail.value);
|
||
this.$emit(
|
||
"blur",
|
||
{
|
||
...event.detail,
|
||
name: this.name
|
||
}
|
||
);
|
||
},
|
||
// 输入框值发生变化
|
||
onInput(e) {
|
||
const {
|
||
value = ""
|
||
} = e.detail || {};
|
||
if (value === "")
|
||
return;
|
||
let formatted = this.filter(value);
|
||
if (this.decimalLength !== null && formatted.indexOf(".") !== -1) {
|
||
const pair = formatted.split(".");
|
||
formatted = `${pair[0]}.${pair[1].slice(0, this.decimalLength)}`;
|
||
}
|
||
formatted = this.format(formatted);
|
||
this.emitChange(formatted);
|
||
return formatted;
|
||
},
|
||
// 发出change事件
|
||
emitChange(value) {
|
||
if (!this.asyncChange) {
|
||
this.$nextTick(() => {
|
||
this.$emit("update:modelValue", value);
|
||
this.currentValue = value;
|
||
this.$forceUpdate();
|
||
});
|
||
}
|
||
this.$emit("change", {
|
||
value,
|
||
name: this.name
|
||
});
|
||
},
|
||
onChange() {
|
||
const {
|
||
type
|
||
} = this;
|
||
if (this.isDisabled(type)) {
|
||
return this.$emit("overlimit", type);
|
||
}
|
||
const diff = type === "minus" ? -this.step : +this.step;
|
||
const value = this.format(this.add(+this.currentValue, diff));
|
||
this.emitChange(value);
|
||
this.$emit(type);
|
||
},
|
||
// 对值扩大后进行四舍五入，再除以扩大因子，避免出现浮点数操作的精度问题
|
||
add(num1, num2) {
|
||
const cardinal = Math.pow(10, 10);
|
||
return Math.round((num1 + num2) * cardinal) / cardinal;
|
||
},
|
||
// 点击加减按钮
|
||
clickHandler(type) {
|
||
this.type = type;
|
||
this.onChange();
|
||
},
|
||
longPressStep() {
|
||
this.clearTimeout();
|
||
this.longPressTimer = setTimeout(() => {
|
||
this.onChange();
|
||
this.longPressStep();
|
||
}, 250);
|
||
},
|
||
onTouchStart(type) {
|
||
if (!this.longPress)
|
||
return;
|
||
this.clearTimeout();
|
||
this.type = type;
|
||
this.longPressTimer = setTimeout(() => {
|
||
this.onChange();
|
||
this.longPressStep();
|
||
}, 600);
|
||
},
|
||
// 触摸结束，清除定时器，停止长按加减
|
||
onTouchEnd() {
|
||
if (!this.longPress)
|
||
return;
|
||
this.clearTimeout();
|
||
},
|
||
// 清除定时器
|
||
clearTimeout() {
|
||
clearTimeout(this.longPressTimer);
|
||
this.longPressTimer = null;
|
||
}
|
||
}
|
||
};
|
||
if (!Array) {
|
||
const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
|
||
_easycom_u_icon2();
|
||
}
|
||
const _easycom_u_icon = () => "../u-icon/u-icon.js";
|
||
if (!Math) {
|
||
_easycom_u_icon();
|
||
}
|
||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||
return common_vendor.e({
|
||
a: _ctx.showMinus && _ctx.$slots.minus
|
||
}, _ctx.showMinus && _ctx.$slots.minus ? {
|
||
b: common_vendor.o(($event) => $options.clickHandler("minus")),
|
||
c: common_vendor.o(($event) => $options.onTouchStart("minus")),
|
||
d: common_vendor.o((...args) => $options.clearTimeout && $options.clearTimeout(...args))
|
||
} : _ctx.showMinus ? {
|
||
f: common_vendor.p({
|
||
name: "minus",
|
||
color: $options.isDisabled("minus") ? "#c8c9cc" : "#323233",
|
||
size: "15",
|
||
bold: true,
|
||
customStyle: _ctx.iconStyle
|
||
}),
|
||
g: common_vendor.o(($event) => $options.clickHandler("minus")),
|
||
h: common_vendor.o(($event) => $options.onTouchStart("minus")),
|
||
i: common_vendor.o((...args) => $options.clearTimeout && $options.clearTimeout(...args)),
|
||
j: $options.isDisabled("minus") ? 1 : "",
|
||
k: common_vendor.s($options.buttonStyle("minus"))
|
||
} : {}, {
|
||
e: _ctx.showMinus,
|
||
l: _ctx.disabledInput || _ctx.disabled,
|
||
m: $options.getCursorSpacing,
|
||
n: _ctx.disabled || _ctx.disabledInput ? 1 : "",
|
||
o: $data.currentValue,
|
||
p: common_vendor.o((...args) => $options.onBlur && $options.onBlur(...args)),
|
||
q: common_vendor.o((...args) => $options.onFocus && $options.onFocus(...args)),
|
||
r: common_vendor.o((...args) => $options.onInput && $options.onInput(...args)),
|
||
s: common_vendor.s($options.inputStyle),
|
||
t: _ctx.showPlus && _ctx.$slots.plus
|
||
}, _ctx.showPlus && _ctx.$slots.plus ? {
|
||
v: common_vendor.o(($event) => $options.clickHandler("plus")),
|
||
w: common_vendor.o(($event) => $options.onTouchStart("plus")),
|
||
x: common_vendor.o((...args) => $options.clearTimeout && $options.clearTimeout(...args))
|
||
} : _ctx.showPlus ? {
|
||
z: common_vendor.p({
|
||
name: "plus",
|
||
color: $options.isDisabled("plus") ? "#c8c9cc" : "#323233",
|
||
size: "15",
|
||
bold: true,
|
||
customStyle: _ctx.iconStyle
|
||
}),
|
||
A: common_vendor.o(($event) => $options.clickHandler("plus")),
|
||
B: common_vendor.o(($event) => $options.onTouchStart("plus")),
|
||
C: common_vendor.o((...args) => $options.clearTimeout && $options.clearTimeout(...args)),
|
||
D: $options.isDisabled("plus") ? 1 : "",
|
||
E: common_vendor.s($options.buttonStyle("plus"))
|
||
} : {}, {
|
||
y: _ctx.showPlus
|
||
});
|
||
}
|
||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a83780b3"], ["__file", "/Users/zsq/Sources/github/2025property-pay/pay-customer/node_modules/uview-plus/components/u-number-box/u-number-box.vue"]]);
|
||
wx.createComponent(Component);
|