From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-input/u-input.vue | 354 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 354 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-input/u-input.vue b/minipro_standard/uni_modules/uview-ui/components/u-input/u-input.vue
new file mode 100644
index 0000000..30073eb
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-input/u-input.vue
@@ -0,0 +1,354 @@
+<template>
+ <view class="u-input" :class="inputClass" :style="[wrapperStyle]">
+ <view class="u-input__content">
+ <view
+ class="u-input__content__prefix-icon"
+ v-if="prefixIcon || $slots.prefix"
+ >
+ <slot name="prefix">
+ <u-icon
+ :name="prefixIcon"
+ size="18"
+ :customStyle="prefixIconStyle"
+ ></u-icon>
+ </slot>
+ </view>
+ <view class="u-input__content__field-wrapper" @tap="clickHandler">
+ <!-- 鏍规嵁uni-app鐨刬nput缁勪欢鏂囨。锛孒5鍜孉PP涓彧瑕佸０鏄庝簡password鍙傛暟(鏃犺true杩樻槸false)锛宼ype鍧囧け鏁堬紝姝ゆ椂
+ 涓轰簡闃叉type=number鏃讹紝鍙堝瓨鍦╬assword灞炴�э紝type鏃犳晥锛屾鏃堕渶瑕佽缃畃assword涓簎ndefined
+ -->
+ <input
+ class="u-input__content__field-wrapper__field"
+ :style="[inputStyle]"
+ :type="type"
+ :focus="focus"
+ :cursor="cursor"
+ :value="innerValue"
+ :auto-blur="autoBlur"
+ :disabled="disabled || readonly"
+ :maxlength="maxlength"
+ :placeholder="placeholder"
+ :placeholder-style="placeholderStyle"
+ :placeholder-class="placeholderClass"
+ :confirm-type="confirmType"
+ :confirm-hold="confirmHold"
+ :hold-keyboard="holdKeyboard"
+ :cursor-spacing="cursorSpacing"
+ :adjust-position="adjustPosition"
+ :selection-end="selectionEnd"
+ :selection-start="selectionStart"
+ :password="password || type === 'password' || undefined"
+ :ignoreCompositionEvent="ignoreCompositionEvent"
+ @input="onInput"
+ @blur="onBlur"
+ @focus="onFocus"
+ @confirm="onConfirm"
+ @keyboardheightchange="onkeyboardheightchange"
+ />
+ </view>
+ <view
+ class="u-input__content__clear"
+ v-if="isShowClear"
+ @tap="onClear"
+ >
+ <u-icon
+ name="close"
+ size="11"
+ color="#ffffff"
+ customStyle="line-height: 12px"
+ ></u-icon>
+ </view>
+ <view
+ class="u-input__content__subfix-icon"
+ v-if="suffixIcon || $slots.suffix"
+ >
+ <slot name="suffix">
+ <u-icon
+ :name="suffixIcon"
+ size="18"
+ :customStyle="suffixIconStyle"
+ ></u-icon>
+ </slot>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+import props from "./props.js";
+/**
+ * Input 杈撳叆妗�
+ * @description 姝ょ粍浠朵负涓�涓緭鍏ユ锛岄粯璁ゆ病鏈夎竟妗嗗拰鏍峰紡锛屾槸涓撻棬涓洪厤鍚堣〃鍗曠粍浠秛-form鑰岃璁＄殑锛屽埄鐢ㄥ畠鍙互蹇�熷疄鐜拌〃鍗曢獙璇侊紝杈撳叆鍐呭锛屼笅鎷夐�夋嫨绛夊姛鑳姐��
+ * @tutorial https://uviewui.com/components/input.html
+ * @property {String | Number} value 杈撳叆鐨勫��
+ * @property {String} type 杈撳叆妗嗙被鍨嬶紝瑙佷笂鏂硅鏄� 锛� 榛樿 'text' 锛�
+ * @property {Boolean} fixed 濡傛灉 textarea 鏄湪涓�涓� position:fixed 鐨勫尯鍩燂紝闇�瑕佹樉绀烘寚瀹氬睘鎬� fixed 涓� true锛屽吋瀹规�э細寰俊灏忕▼搴忋�佺櫨搴﹀皬绋嬪簭銆佸瓧鑺傝烦鍔ㄥ皬绋嬪簭銆丵Q灏忕▼搴� 锛� 榛樿 false 锛�
+ * @property {Boolean} disabled 鏄惁绂佺敤杈撳叆妗� 锛� 榛樿 false 锛�
+ * @property {String} disabledColor 绂佺敤鐘舵�佹椂鐨勮儗鏅壊锛� 榛樿 '#f5f7fa' 锛�
+ * @property {Boolean} clearable 鏄惁鏄剧ず娓呴櫎鎺т欢 锛� 榛樿 false 锛�
+ * @property {Boolean} password 鏄惁瀵嗙爜绫诲瀷 锛� 榛樿 false 锛�
+ * @property {String | Number} maxlength 鏈�澶ц緭鍏ラ暱搴︼紝璁剧疆涓� -1 鐨勬椂鍊欎笉闄愬埗鏈�澶ч暱搴� 锛� 榛樿 -1 锛�
+ * @property {String} placeholder 杈撳叆妗嗕负绌烘椂鐨勫崰浣嶇
+ * @property {String} placeholderClass 鎸囧畾placeholder鐨勬牱寮忕被锛屾敞鎰忛〉闈㈡垨缁勪欢鐨剆tyle涓啓浜唖coped鏃讹紝闇�瑕佸湪绫诲悕鍓嶅啓/deep/ 锛� 榛樿 'input-placeholder' 锛�
+ * @property {String | Object} placeholderStyle 鎸囧畾placeholder鐨勬牱寮忥紝瀛楃涓�/瀵硅薄褰㈠紡锛屽"color: red;"
+ * @property {Boolean} showWordLimit 鏄惁鏄剧ず杈撳叆瀛楁暟缁熻锛屽彧鍦� type ="text"鎴杢ype ="textarea"鏃舵湁鏁� 锛� 榛樿 false 锛�
+ * @property {String} confirmType 璁剧疆鍙充笅瑙掓寜閽殑鏂囧瓧锛屽吋瀹规�ц瑙乽ni-app鏂囨。 锛� 榛樿 'done' 锛�
+ * @property {Boolean} confirmHold 鐐瑰嚮閿洏鍙充笅瑙掓寜閽椂鏄惁淇濇寔閿洏涓嶆敹璧凤紝H5鏃犳晥 锛� 榛樿 false 锛�
+ * @property {Boolean} holdKeyboard focus鏃讹紝鐐瑰嚮椤甸潰鐨勬椂鍊欎笉鏀惰捣閿洏锛屽井淇″皬绋嬪簭鏈夋晥 锛� 榛樿 false 锛�
+ * @property {Boolean} focus 鑷姩鑾峰彇鐒︾偣锛屽湪 H5 骞冲彴鑳藉惁鑱氱劍浠ュ強杞敭鐩樻槸鍚﹁窡闅忓脊鍑猴紝鍙栧喅浜庡綋鍓嶆祻瑙堝櫒鏈韩鐨勫疄鐜般�俷vue 椤甸潰涓嶆敮鎸侊紝闇�浣跨敤缁勪欢鐨� focus()銆乥lur() 鏂规硶鎺у埗鐒︾偣 锛� 榛樿 false 锛�
+ * @property {Boolean} autoBlur 閿洏鏀惰捣鏃讹紝鏄惁鑷姩澶卞幓鐒︾偣锛岀洰鍓嶄粎App3.0.0+鏈夋晥 锛� 榛樿 false 锛�
+ * @property {Boolean} disableDefaultPadding 鏄惁鍘绘帀 iOS 涓嬬殑榛樿鍐呰竟璺濓紝浠呭井淇″皬绋嬪簭锛屼笖type=textarea鏃舵湁鏁� 锛� 榛樿 false 锛�
+ * @property {String 锝� Number} cursor 鎸囧畾focus鏃跺厜鏍囩殑浣嶇疆锛� 榛樿 -1 锛�
+ * @property {String 锝� Number} cursorSpacing 杈撳叆妗嗚仛鐒︽椂搴曢儴涓庨敭鐩樼殑璺濈 锛� 榛樿 30 锛�
+ * @property {String 锝� Number} selectionStart 鍏夋爣璧峰浣嶇疆锛岃嚜鍔ㄨ仛闆嗘椂鏈夋晥锛岄渶涓巗election-end鎼厤浣跨敤 锛� 榛樿 -1 锛�
+ * @property {String 锝� Number} selectionEnd 鍏夋爣缁撴潫浣嶇疆锛岃嚜鍔ㄨ仛闆嗘椂鏈夋晥锛岄渶涓巗election-start鎼厤浣跨敤 锛� 榛樿 -1 锛�
+ * @property {Boolean} adjustPosition 閿洏寮硅捣鏃讹紝鏄惁鑷姩涓婃帹椤甸潰 锛� 榛樿 true 锛�
+ * @property {String} inputAlign 杈撳叆妗嗗唴瀹瑰榻愭柟寮忥紙 榛樿 'left' 锛�
+ * @property {String | Number} fontSize 杈撳叆妗嗗瓧浣撶殑澶у皬 锛� 榛樿 '15px' 锛�
+ * @property {String} color 杈撳叆妗嗗瓧浣撻鑹� 锛� 榛樿 '#303133' 锛�
+ * @property {Function} formatter 鍐呭寮忓寲鍑芥暟
+ * @property {String} prefixIcon 杈撳叆妗嗗墠缃浘鏍�
+ * @property {String | Object} prefixIconStyle 鍓嶇疆鍥炬爣鏍峰紡锛屽璞℃垨瀛楃涓�
+ * @property {String} suffixIcon 杈撳叆妗嗗悗缃浘鏍�
+ * @property {String | Object} suffixIconStyle 鍚庣疆鍥炬爣鏍峰紡锛屽璞℃垨瀛楃涓�
+ * @property {String} border 杈规绫诲瀷锛宻urround-鍥涘懆杈规锛宐ottom-搴曢儴杈规锛宯one-鏃犺竟妗� 锛� 榛樿 'surround' 锛�
+ * @property {Boolean} readonly 鏄惁鍙锛屼笌disabled涓嶅悓涔嬪鍦ㄤ簬disabled浼氱疆鐏扮粍浠讹紝鑰宺eadonly鍒欎笉浼� 锛� 榛樿 false 锛�
+ * @property {String} shape 杈撳叆妗嗗舰鐘讹紝circle-鍦嗗舰锛宻quare-鏂瑰舰 锛� 榛樿 'square' 锛�
+ * @property {Object} customStyle 瀹氫箟闇�瑕佺敤鍒扮殑澶栭儴鏍峰紡
+ * @property {Boolean} ignoreCompositionEvent 鏄惁蹇界暐缁勪欢鍐呭鏂囨湰鍚堟垚绯荤粺浜嬩欢鐨勫鐞嗐��
+ * @example <u-input v-model="value" :password="true" suffix-icon="lock-fill" />
+ */
+export default {
+ name: "u-input",
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {
+ // 杈撳叆妗嗙殑鍊�
+ innerValue: "",
+ // 鏄惁澶勪簬鑾峰緱鐒︾偣鐘舵��
+ focused: false,
+ // value鏄惁绗竴娆″彉鍖栵紝鍦╳atch涓紝鐢变簬鍔犲叆immediate灞炴�э紝浼氬湪绗竴娆¤Е鍙戯紝姝ゆ椂涓嶅簲璇ヨ涓簐alue鍙戠敓浜嗗彉鍖�
+ firstChange: true,
+ // value缁戝畾鍊肩殑鍙樺寲鏄敱鍐呴儴杩樻槸澶栭儴寮曡捣鐨�
+ changeFromInner: false,
+ // 杩囨护澶勭悊鏂规硶
+ innerFormatter: value => value
+ };
+ },
+ watch: {
+ value: {
+ immediate: true,
+ handler(newVal, oldVal) {
+ this.innerValue = newVal;
+ /* #ifdef H5 */
+ // 鍦℉5涓紝澶栭儴value鍙樺寲鍚庯紝淇敼input涓殑鍊硷紝涓嶄細瑙﹀彂@input浜嬩欢锛屾鏃舵墜鍔ㄨ皟鐢ㄥ�煎彉鍖栨柟娉�
+ if (
+ this.firstChange === false &&
+ this.changeFromInner === false
+ ) {
+ this.valueChange();
+ }
+ /* #endif */
+ this.firstChange = false;
+ // 閲嶇疆changeFromInner鐨勫�间负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 {
+ // 鐢变簬uni-app鐨刬OS寮�鍙戣�呰兘鍔涙湁闄愶紝瀵艰嚧闇�瑕佸垎寮�鍐欐墠鏈夋晥
+ style.paddingTop = "6px";
+ style.paddingBottom = "6px";
+ style.paddingLeft = "9px";
+ style.paddingRight = "9px";
+ }
+ return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+ },
+ // 杈撳叆妗嗙殑鏍峰紡
+ inputStyle() {
+ const style = {
+ color: this.color,
+ fontSize: uni.$u.addUnit(this.fontSize),
+ textAlign: this.inputAlign
+ };
+ return style;
+ },
+ },
+ methods: {
+ // 鍦ㄥ井淇″皬绋嬪簭涓紝涓嶆敮鎸佸皢鍑芥暟褰撳仛props鍙傛暟锛屾晠鍙兘閫氳繃ref褰㈠紡璋冪敤
+ setFormatter(e) {
+ this.innerFormatter = e
+ },
+ // 褰撻敭鐩樿緭鍏ユ椂锛岃Е鍙慽nput浜嬩欢
+ onInput(e) {
+ let { value = "" } = e.detail || {};
+ // 鏍煎紡鍖栬繃婊ゆ柟娉�
+ const formatter = this.formatter || this.innerFormatter
+ const formatValue = formatter(value)
+ // 涓轰簡閬垮厤props鐨勫崟鍚戞暟鎹祦鐗规�э紝闇�瑕佸厛灏唅nnerValue鍊艰缃负褰撳墠鍊硷紝鍐嶅湪$nextTick涓噸鏂拌祴浜堣缃悗鐨勫�兼墠鏈夋晥
+ this.innerValue = value
+ this.$nextTick(() => {
+ this.innerValue = formatValue;
+ this.valueChange();
+ })
+ },
+ // 杈撳叆妗嗗け鍘荤劍鐐规椂瑙﹀彂
+ onBlur(event) {
+ this.$emit("blur", event.detail.value);
+ // H5绔殑blur浼氬厛浜庣偣鍑绘竻闄ゆ帶浠剁殑鐐瑰嚮click浜嬩欢瑙﹀彂锛屽鑷磃ocused
+ // 鐬棿涓篺alse锛屼粠鑰岄殣钘忎簡娓呴櫎鎺т欢鑰屾棤娉曡鐐瑰嚮鍒�
+ uni.$u.sleep(50).then(() => {
+ this.focused = false;
+ });
+ // 灏濊瘯璋冪敤u-form鐨勯獙璇佹柟娉�
+ uni.$u.formValidate(this, "blur");
+ },
+ // 杈撳叆妗嗚仛鐒︽椂瑙﹀彂
+ onFocus(event) {
+ this.focused = true;
+ this.$emit("focus");
+ },
+ // 鐐瑰嚮瀹屾垚鎸夐挳鏃惰Е鍙�
+ onConfirm(event) {
+ this.$emit("confirm", this.innerValue);
+ },
+ // 閿洏楂樺害鍙戠敓鍙樺寲鐨勬椂鍊欒Е鍙戞浜嬩欢
+ // 鍏煎鎬э細寰俊灏忕▼搴�2.7.0+銆丄pp 3.1.0+
+ onkeyboardheightchange() {
+ this.$emit("keyboardheightchange");
+ },
+ // 鍐呭鍙戠敓鍙樺寲锛岃繘琛屽鐞�
+ valueChange() {
+ const value = this.innerValue;
+ this.$nextTick(() => {
+ this.$emit("input", value);
+ // 鏍囪瘑value鍊肩殑鍙樺寲鏄敱鍐呴儴寮曡捣鐨�
+ this.changeFromInner = true;
+ this.$emit("change", value);
+ // 灏濊瘯璋冪敤u-form鐨勯獙璇佹柟娉�
+ uni.$u.formValidate(this, "change");
+ });
+ },
+ // 鐐瑰嚮娓呴櫎鎺т欢
+ onClear() {
+ this.innerValue = "";
+ this.$nextTick(() => {
+ this.valueChange();
+ this.$emit("clear");
+ });
+ },
+ /**
+ * 鍦ㄥ畨鍗搉vue涓婏紝浜嬩欢鏃犳硶鍐掓场
+ * 鍦ㄦ煇浜涙椂闂达紝鎴戜滑甯屾湜鐩戝惉u-from-item鐨勭偣鍑讳簨浠讹紝姝ゆ椂浼氬鑷寸偣鍑籾-form-item鍐呯殑u-input鍚�
+ * 鏃犳硶瑙﹀彂u-form-item鐨勭偣鍑讳簨浠讹紝杩欓噷閫氳繃鎵嬪姩璋冪敤u-form-item鐨勬柟娉曡繘琛岃Е鍙�
+ */
+ clickHandler() {
+ // #ifdef APP-NVUE
+ if (uni.$u.os() === "android") {
+ const formItem = uni.$u.$parent.call(this, "u-form-item");
+ if (formItem) {
+ formItem.clickHandler();
+ }
+ }
+ // #endif
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+.u-input {
+ @include flex(row);
+ align-items: center;
+ justify-content: space-between;
+ flex: 1;
+
+ &--radius,
+ &--square {
+ border-radius: 4px;
+ }
+
+ &--no-radius {
+ border-radius: 0;
+ }
+
+ &--circle {
+ border-radius: 100px;
+ }
+
+ &__content {
+ flex: 1;
+ @include flex(row);
+ align-items: center;
+ justify-content: space-between;
+
+ &__field-wrapper {
+ position: relative;
+ @include flex(row);
+ margin: 0;
+ flex: 1;
+
+ &__field {
+ line-height: 26px;
+ text-align: left;
+ color: $u-main-color;
+ height: 24px;
+ font-size: 15px;
+ flex: 1;
+ }
+ }
+
+ &__clear {
+ width: 20px;
+ height: 20px;
+ border-radius: 100px;
+ background-color: #c6c7cb;
+ @include flex(row);
+ align-items: center;
+ justify-content: center;
+ transform: scale(0.82);
+ margin-left: 4px;
+ }
+
+ &__subfix-icon {
+ margin-left: 4px;
+ }
+
+ &__prefix-icon {
+ margin-right: 4px;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3