From da25434b85fc5b4321c429bf95e719d00ec395bb Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 11 Jan 2024 16:21:16 +0800
Subject: [PATCH] 定位优化

---
 uni_modules/uview-ui/components/u-search/u-search.vue |  303 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 303 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-search/u-search.vue b/uni_modules/uview-ui/components/u-search/u-search.vue
new file mode 100644
index 0000000..f169c7f
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-search/u-search.vue
@@ -0,0 +1,303 @@
+<template>
+	<view
+	    class="u-search"
+	    @tap="clickHandler"
+	    :style="[{
+			margin: margin,
+		}, $u.addStyle(customStyle)]"
+	>
+		<view
+		    class="u-search__content"
+		    :style="{
+				backgroundColor: bgColor,
+				borderRadius: shape == 'round' ? '100px' : '4px',
+				borderColor: borderColor,
+			}"
+		>
+			<template v-if="$slots.label || label !== null">
+				<slot name="label">
+					<text class="u-search__content__label">{{ label }}</text>
+				</slot>
+			</template>
+			<view class="u-search__content__icon">
+				<u-icon
+					@tap="clickIcon"
+				    :size="searchIconSize"
+				    :name="searchIcon"
+				    :color="searchIconColor ? searchIconColor : color"
+				></u-icon>
+			</view>
+			<input
+			    confirm-type="search"
+			    @blur="blur"
+			    :value="value"
+			    @confirm="search"
+			    @input="inputChange"
+			    :disabled="disabled"
+			    @focus="getFocus"
+			    :focus="focus"
+			    :maxlength="maxlength"
+			    placeholder-class="u-search__content__input--placeholder"
+			    :placeholder="placeholder"
+			    :placeholder-style="`color: ${placeholderColor}`"
+			    class="u-search__content__input"
+			    type="text"
+			    :style="[{
+					textAlign: inputAlign,
+					color: color,
+					backgroundColor: bgColor,
+					height: $u.addUnit(height)
+				}, inputStyle]"
+			/>
+			<view
+			    class="u-search__content__icon u-search__content__close"
+			    v-if="keyword && clearabled && focused"
+			    @tap="clear"
+			>
+				<u-icon
+				    name="close"
+				    size="11"
+				    color="#ffffff"
+					customStyle="line-height: 12px"
+				></u-icon>
+			</view>
+		</view>
+		<text
+		    :style="[actionStyle]"
+		    class="u-search__action"
+		    :class="[(showActionBtn || show) && 'u-search__action--active']"
+		    @tap.stop.prevent="custom"
+		>{{ actionText }}</text>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+
+	/**
+	 * search ���������
+	 * @description ������������������������������������������������������������������������������������������������
+	 * @tutorial https://www.uviewui.com/components/search.html
+	 * @property {String}			shape				������������������round-���������square-��������������� 'round' ���
+	 * @property {String}			bgColor				������������������������������ '#f2f2f2' ���
+	 * @property {String}			placeholder			��������������������������� '������������������' ���
+	 * @property {Boolean}			clearabled			��������������������������������� true ���
+	 * @property {Boolean}			focus				��������������������������������� false ���
+	 * @property {Boolean}			showAction			��������������������������������� true ���
+	 * @property {Object}			actionStyle			������������������������������������
+	 * @property {String}			actionText			��������������������������� '������' ���
+	 * @property {String}			inputAlign			��������������������������������� ��������� 'left' ���
+	 * @property {Object}			inputStyle			���������������������������������������
+	 * @property {Boolean}			disabled			������������������������������ false ���
+	 * @property {String}			borderColor			������������������������������������������������ (������ 'transparent' )
+	 * @property {String}			searchIconColor		������������������������������������������������������ (������ '#909399' )
+	 * @property {Number | String}	searchIconSize ������������������������������22
+	 * @property {String}			color				������������������������������ '#606266' ���
+	 * @property {String}			placeholderColor	placeholder������������������ '#909399' ���
+	 * @property {String}			searchIcon			������������������������������������uView���������������������������  (������ 'search' )
+	 * @property {String}			margin				������������������������������������������������������������������������������������"30px"   (������ '0' )
+	 * @property {Boolean} 			animation			��������������������������������������������� false ���
+	 * @property {String}			value				������������������
+	 * @property {String | Number}	maxlength			������������������������������������-1������������������  (������ '-1' )
+	 * @property {String | Number}	height				������������������������px��������� 64 ���
+	 * @property {String | Number}	label				���������������������������
+	 * @property {Object}			customStyle			���������������������������������
+	 *
+	 * @event {Function} change ������������������������������������
+	 * @event {Function} search ���������������������������������������������������������������������������������"������"������������
+	 * @event {Function} custom ���������������������������������
+	 * @event {Function} clear ���������������������������������
+	 * @example <u-search placeholder="���������������������" v-model="keyword"></u-search>
+	 */
+	export default {
+		name: "u-search",
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		data() {
+			return {
+				keyword: '',
+				showClear: false, // ���������������������������������
+				show: false,
+				// ������input���������������������������������������������������������������������������������
+				focused: this.focus
+				// ���������������������
+				// inputValue: this.value
+			};
+		},
+		watch: {
+			keyword(nVal) {
+				// ���������������������v-model������������������������
+				this.$emit('input', nVal);
+				// ������change������������������������v-model������������������������������������������������������
+				this.$emit('change', nVal);
+			},
+			value: {
+				immediate: true,
+				handler(nVal) {
+					this.keyword = nVal;
+				}
+			}
+		},
+		computed: {
+			showActionBtn() {
+				return !this.animation && this.showAction
+			}
+		},
+		methods: {
+			// ������HX2.6.9 v-model������������������������������input������������������������������������
+			inputChange(e) {
+				this.keyword = e.detail.value;
+			},
+			// ������������
+			// ���������������������������this.$refs���������������������������������
+			clear() {
+				this.keyword = '';
+				// ���������������������������������������������clear������������value������������������(���������)
+				this.$nextTick(() => {
+					this.$emit('clear');
+				})
+			},
+			// ������������
+			search(e) {
+				this.$emit('search', e.detail.value);
+				try {
+					// ������������
+					uni.hideKeyboard();
+				} catch (e) {}
+			},
+			// ������������������������������������
+			custom() {
+				this.$emit('custom', this.keyword);
+				try {
+					// ������������
+					uni.hideKeyboard();
+				} catch (e) {}
+			},
+			// ������������
+			getFocus() {
+				this.focused = true;
+				// ���������������������������������������������
+				if (this.animation && this.showAction) this.show = true;
+				this.$emit('focus', this.keyword);
+			},
+			// ������������
+			blur() {
+				// ���������������������������������@touchstart���������������hx2.8.4���������������������������������������
+				// ������������������������������������������������������������������������������@blur������������������������������������������������������������������
+				setTimeout(() => {
+					this.focused = false;
+				}, 100)
+				this.show = false;
+				this.$emit('blur', this.keyword);
+			},
+			// ������������������������disabled=true������������������������������������������������������������������������������������
+			clickHandler() {
+				if (this.disabled) this.$emit('click');
+			},
+			// ������������������
+			clickIcon() {
+				this.$emit('clickIcon');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+$u-search-content-padding: 0 10px !default;
+$u-search-label-color: $u-main-color !default;
+$u-search-label-font-size: 14px !default;
+$u-search-label-margin: 0 4px !default;
+$u-search-close-size: 20px !default;
+$u-search-close-radius: 100px !default;
+$u-search-close-bgColor: #C6C7CB !default;
+$u-search-close-transform: scale(0.82) !default;
+$u-search-input-font-size: 14px !default;
+$u-search-input-margin: 0 5px !default;
+$u-search-input-color: $u-main-color !default;
+$u-search-input-placeholder-color: $u-tips-color !default;
+$u-search-action-font-size: 14px !default;
+$u-search-action-color: $u-main-color !default;
+$u-search-action-width: 0 !default;
+$u-search-action-active-width: 40px !default;
+$u-search-action-margin-left: 5px !default;
+
+/* #ifdef H5 */
+// iOS15���H5������hx������������������input type=search������������������������������������������������
+[type="search"]::-webkit-search-decoration {
+    display: none;
+}
+/* #endif */
+
+.u-search {
+	@include flex(row);
+	align-items: center;
+	flex: 1;
+
+	&__content {
+		@include flex;
+		align-items: center;
+		padding: $u-search-content-padding;
+		flex: 1;
+		justify-content: space-between;
+		border-width: 1px;
+		border-color: transparent;
+		border-style: solid;
+		overflow: hidden;
+
+		&__icon {
+			@include flex;
+			align-items: center;
+		}
+
+		&__label {
+			color: $u-search-label-color;
+			font-size: $u-search-label-font-size;
+			margin: $u-search-label-margin;
+		}
+
+		&__close {
+			width: $u-search-close-size;
+			height: $u-search-close-size;
+			border-top-left-radius: $u-search-close-radius;
+			border-top-right-radius: $u-search-close-radius;
+			border-bottom-left-radius: $u-search-close-radius;
+			border-bottom-right-radius: $u-search-close-radius;
+			background-color: $u-search-close-bgColor;
+			@include flex(row);
+			align-items: center;
+			justify-content: center;
+			transform: $u-search-close-transform;
+		}
+
+		&__input {
+			flex: 1;
+			font-size: $u-search-input-font-size;
+			line-height: 1;
+			margin: $u-search-input-margin;
+			color: $u-search-input-color;
+
+			&--placeholder {
+				color: $u-search-input-placeholder-color;
+			}
+		}
+	}
+
+	&__action {
+		font-size: $u-search-action-font-size;
+		color: $u-search-action-color;
+		width: $u-search-action-width;
+		overflow: hidden;
+		transition-property: width;
+		transition-duration: 0.3s;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		/* #endif */
+		text-align: center;
+
+		&--active {
+			width: $u-search-action-active-width;
+			margin-left: $u-search-action-margin-left;
+		}
+	}
+}
+</style>

--
Gitblit v1.8.0