222
This commit is contained in:
zoujiandong
+242
@@ -0,0 +1,242 @@
|
||||
"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
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"u-icon": "../u-icon/u-icon"
|
||||
}
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
<view class="{{['u-input', 'data-v-5904192e', J]}}" style="{{K}}"><view class="u-input__content data-v-5904192e"><view wx:if="{{a}}" class="u-input__content__prefix-icon data-v-5904192e"><block wx:if="{{$slots.prefix}}"><slot name="prefix"></slot></block><block wx:else><u-icon wx:if="{{b}}" class="data-v-5904192e" u-i="5904192e-0" bind:__l="__l" u-p="{{b}}"></u-icon></block></view><view class="u-input__content__field-wrapper data-v-5904192e" bindtap="{{D}}"><block wx:if="{{r0}}"><input ref="input-native" class="u-input__content__field-wrapper__field data-v-5904192e" style="{{c}}" type="{{d}}" focus="{{e}}" cursor="{{f}}" value="{{g}}" auto-blur="{{h}}" disabled="{{i}}" maxlength="{{j}}" placeholder="{{k}}" placeholder-style="{{l}}" placeholder-class="{{m}}" confirm-type="{{n}}" confirm-hold="{{o}}" hold-keyboard="{{p}}" cursor-spacing="{{q}}" adjust-position="{{r}}" selection-end="{{s}}" selection-start="{{t}}" password="{{v}}" ignoreCompositionEvent="{{w}}" bindinput="{{x}}" bindblur="{{y}}" bindfocus="{{z}}" bindconfirm="{{A}}" bindkeyboardheightchange="{{B}}" bindnicknamereview="{{C}}"/></block></view><view wx:if="{{E}}" class="u-input__content__clear data-v-5904192e" bindtap="{{G}}"><u-icon wx:if="{{F}}" class="data-v-5904192e" u-i="5904192e-1" bind:__l="__l" u-p="{{F}}"></u-icon></view><view wx:if="{{H}}" class="u-input__content__subfix-icon data-v-5904192e"><block wx:if="{{$slots.suffix}}"><slot name="suffix"></slot></block><block wx:else><u-icon wx:if="{{I}}" class="data-v-5904192e" u-i="5904192e-2" bind:__l="__l" u-p="{{I}}"></u-icon></block></view></view></view>
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.u-empty.data-v-5904192e,
|
||||
.u-empty__wrap.data-v-5904192e,
|
||||
.u-tabs.data-v-5904192e,
|
||||
.u-tabs__wrapper.data-v-5904192e,
|
||||
.u-tabs__wrapper__scroll-view-wrapper.data-v-5904192e,
|
||||
.u-tabs__wrapper__scroll-view.data-v-5904192e,
|
||||
.u-tabs__wrapper__nav.data-v-5904192e,
|
||||
.u-tabs__wrapper__nav__line.data-v-5904192e,
|
||||
.up-empty.data-v-5904192e,
|
||||
.up-empty__wrap.data-v-5904192e,
|
||||
.up-tabs.data-v-5904192e,
|
||||
.up-tabs__wrapper.data-v-5904192e,
|
||||
.up-tabs__wrapper__scroll-view-wrapper.data-v-5904192e,
|
||||
.up-tabs__wrapper__scroll-view.data-v-5904192e,
|
||||
.up-tabs__wrapper__nav.data-v-5904192e,
|
||||
.up-tabs__wrapper__nav__line.data-v-5904192e {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: auto;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.u-input.data-v-5904192e {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
.u-input--radius.data-v-5904192e, .u-input--square.data-v-5904192e {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.u-input--no-radius.data-v-5904192e {
|
||||
border-radius: 0;
|
||||
}
|
||||
.u-input--circle.data-v-5904192e {
|
||||
border-radius: 100px;
|
||||
}
|
||||
.u-input__content.data-v-5904192e {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.u-input__content__field-wrapper.data-v-5904192e {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.u-input__content__field-wrapper__field.data-v-5904192e {
|
||||
line-height: 26px;
|
||||
text-align: left;
|
||||
color: #303133;
|
||||
height: 24px;
|
||||
font-size: 15px;
|
||||
flex: 1;
|
||||
}
|
||||
.u-input__content__clear.data-v-5904192e {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100px;
|
||||
background-color: #c6c7cb;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(0.82);
|
||||
margin-left: 4px;
|
||||
}
|
||||
.u-input__content__subfix-icon.data-v-5904192e {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.u-input__content__prefix-icon.data-v-5904192e {
|
||||
margin-right: 4px;
|
||||
}
|
||||
Reference in New Issue
Block a user