243 lines
7.7 KiB
JavaScript
243 lines
7.7 KiB
JavaScript
"use strict";
|
||
const common_vendor = require("../../../../common/vendor.js");
|
||
const _sfc_main = {
|
||
name: "u-input",
|
||
mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$3],
|
||
data() {
|
||
return {
|
||
// 清除操作
|
||
clearInput: false,
|
||
// 输入框的值
|
||
innerValue: "",
|
||
// 是否处于获得焦点状态
|
||
focused: false,
|
||
// value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
|
||
firstChange: true,
|
||
// value绑定值的变化是由内部还是外部引起的
|
||
changeFromInner: false,
|
||
// 过滤处理方法
|
||
innerFormatter: (value) => value
|
||
};
|
||
},
|
||
created() {
|
||
if (this.formatter) {
|
||
this.innerFormatter = this.formatter;
|
||
}
|
||
},
|
||
watch: {
|
||
modelValue: {
|
||
immediate: true,
|
||
handler(newVal, oldVal) {
|
||
if (this.changeFromInner || this.innerValue === newVal) {
|
||
this.changeFromInner = false;
|
||
return;
|
||
}
|
||
this.innerValue = newVal;
|
||
if (this.firstChange === false && this.changeFromInner === false) {
|
||
this.valueChange(this.innerValue, true);
|
||
} else {
|
||
if (!this.firstChange)
|
||
common_vendor.formValidate(this, "change");
|
||
}
|
||
this.firstChange = false;
|
||
this.changeFromInner = false;
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
// 是否显示清除控件
|
||
isShowClear() {
|
||
const { clearable, readonly, focused, innerValue } = this;
|
||
return !!clearable && !readonly && !!focused && innerValue !== "";
|
||
},
|
||
// 组件的类名
|
||
inputClass() {
|
||
let classes = [], { border, disabled, shape } = this;
|
||
border === "surround" && (classes = classes.concat(["u-border", "u-input--radius"]));
|
||
classes.push(`u-input--${shape}`);
|
||
border === "bottom" && (classes = classes.concat([
|
||
"u-border-bottom",
|
||
"u-input--no-radius"
|
||
]));
|
||
return classes.join(" ");
|
||
},
|
||
// 组件的样式
|
||
wrapperStyle() {
|
||
const style = {};
|
||
if (this.disabled) {
|
||
style.backgroundColor = this.disabledColor;
|
||
}
|
||
if (this.border === "none") {
|
||
style.padding = "0";
|
||
} else {
|
||
style.paddingTop = "6px";
|
||
style.paddingBottom = "6px";
|
||
style.paddingLeft = "9px";
|
||
style.paddingRight = "9px";
|
||
}
|
||
return common_vendor.deepMerge(style, common_vendor.addStyle(this.customStyle));
|
||
},
|
||
// 输入框的样式
|
||
inputStyle() {
|
||
const style = {
|
||
color: this.color,
|
||
fontSize: common_vendor.addUnit(this.fontSize),
|
||
textAlign: this.inputAlign
|
||
};
|
||
return style;
|
||
}
|
||
},
|
||
emits: ["update:modelValue", "focus", "blur", "change", "confirm", "clear", "keyboardheightchange", "nicknamereview"],
|
||
methods: {
|
||
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
|
||
setFormatter(e) {
|
||
this.innerFormatter = e;
|
||
},
|
||
// 当键盘输入时，触发input事件
|
||
onInput(e) {
|
||
let { value = "" } = e.detail || {};
|
||
this.innerValue = value;
|
||
this.$nextTick(() => {
|
||
let formatValue = this.innerFormatter(value);
|
||
this.innerValue = formatValue;
|
||
this.valueChange(formatValue);
|
||
});
|
||
},
|
||
// 输入框失去焦点时触发
|
||
onBlur(event) {
|
||
this.$emit("blur", event.detail.value);
|
||
common_vendor.sleep(150).then(() => {
|
||
this.focused = false;
|
||
});
|
||
common_vendor.formValidate(this, "blur");
|
||
},
|
||
// 输入框聚焦时触发
|
||
onFocus(event) {
|
||
this.focused = true;
|
||
this.$emit("focus");
|
||
},
|
||
doFocus() {
|
||
this.$refs["input-native"].focus();
|
||
},
|
||
doBlur() {
|
||
this.$refs["input-native"].blur();
|
||
},
|
||
// 点击完成按钮时触发
|
||
onConfirm(event) {
|
||
this.$emit("confirm", this.innerValue);
|
||
},
|
||
// 键盘高度发生变化的时候触发此事件
|
||
// 兼容性：微信小程序2.7.0+、App 3.1.0+
|
||
onkeyboardheightchange(event) {
|
||
this.$emit("keyboardheightchange", event);
|
||
},
|
||
onnicknamereview(event) {
|
||
this.$emit("nicknamereview", event);
|
||
},
|
||
// 内容发生变化，进行处理
|
||
valueChange(value, isOut = false) {
|
||
if (this.clearInput) {
|
||
this.innerValue = "";
|
||
this.clearInput = false;
|
||
}
|
||
this.$nextTick(() => {
|
||
if (!isOut || this.clearInput) {
|
||
this.changeFromInner = true;
|
||
this.$emit("change", value);
|
||
this.$emit("update:modelValue", value);
|
||
}
|
||
common_vendor.formValidate(this, "change");
|
||
});
|
||
},
|
||
// 点击清除控件
|
||
onClear() {
|
||
this.clearInput = true;
|
||
this.innerValue = "";
|
||
this.$nextTick(() => {
|
||
this.valueChange("");
|
||
this.$emit("clear");
|
||
});
|
||
},
|
||
/**
|
||
* 在安卓nvue上，事件无法冒泡
|
||
* 在某些时间，我们希望监听u-from-item的点击事件，此时会导致点击u-form-item内的u-input后
|
||
* 无法触发u-form-item的点击事件，这里通过手动调用u-form-item的方法进行触发
|
||
*/
|
||
clickHandler() {
|
||
if (this.disabled || this.readonly) {
|
||
common_vendor.index.hideKeyboard();
|
||
}
|
||
}
|
||
}
|
||
};
|
||
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.prefixIcon || _ctx.$slots.prefix
|
||
}, _ctx.prefixIcon || _ctx.$slots.prefix ? {
|
||
b: common_vendor.p({
|
||
name: _ctx.prefixIcon,
|
||
size: "18",
|
||
customStyle: _ctx.prefixIconStyle
|
||
})
|
||
} : {}, {
|
||
c: common_vendor.s($options.inputStyle),
|
||
d: _ctx.type,
|
||
e: _ctx.focus,
|
||
f: _ctx.cursor,
|
||
g: $data.innerValue,
|
||
h: _ctx.autoBlur,
|
||
i: _ctx.disabled || _ctx.readonly,
|
||
j: _ctx.maxlength,
|
||
k: _ctx.placeholder,
|
||
l: _ctx.placeholderStyle,
|
||
m: _ctx.placeholderClass,
|
||
n: _ctx.confirmType,
|
||
o: _ctx.confirmHold,
|
||
p: _ctx.holdKeyboard,
|
||
q: _ctx.cursorSpacing,
|
||
r: _ctx.adjustPosition,
|
||
s: _ctx.selectionEnd,
|
||
t: _ctx.selectionStart,
|
||
v: _ctx.password || _ctx.type === "password" || false,
|
||
w: _ctx.ignoreCompositionEvent,
|
||
x: common_vendor.o((...args) => $options.onInput && $options.onInput(...args)),
|
||
y: common_vendor.o((...args) => $options.onBlur && $options.onBlur(...args)),
|
||
z: common_vendor.o((...args) => $options.onFocus && $options.onFocus(...args)),
|
||
A: common_vendor.o((...args) => $options.onConfirm && $options.onConfirm(...args)),
|
||
B: common_vendor.o((...args) => $options.onkeyboardheightchange && $options.onkeyboardheightchange(...args)),
|
||
C: common_vendor.o((...args) => $options.onnicknamereview && $options.onnicknamereview(...args)),
|
||
D: common_vendor.o((...args) => $options.clickHandler && $options.clickHandler(...args)),
|
||
E: $options.isShowClear
|
||
}, $options.isShowClear ? {
|
||
F: common_vendor.p({
|
||
name: "close",
|
||
size: "11",
|
||
color: "#ffffff",
|
||
customStyle: "line-height: 12px"
|
||
}),
|
||
G: common_vendor.o((...args) => $options.onClear && $options.onClear(...args))
|
||
} : {}, {
|
||
H: _ctx.suffixIcon || _ctx.$slots.suffix
|
||
}, _ctx.suffixIcon || _ctx.$slots.suffix ? {
|
||
I: common_vendor.p({
|
||
name: _ctx.suffixIcon,
|
||
size: "18",
|
||
customStyle: _ctx.suffixIconStyle
|
||
})
|
||
} : {}, {
|
||
J: common_vendor.n($options.inputClass),
|
||
K: common_vendor.s($options.wrapperStyle)
|
||
});
|
||
}
|
||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5904192e"]]);
|
||
wx.createComponent(Component);
|
||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/node-modules/uview-plus/components/u-input/u-input.js.map
|