From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +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-鍦嗗舰锛宻quare-鏂瑰舰锛堥粯璁� '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) {
+ // 鍙屽悜缁戝畾鍊硷紝璁﹙-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 = '';
+ // 寤跺悗鍙戝嚭浜嬩欢锛岄伩鍏嶅湪鐖剁粍浠剁洃鍚琧lear浜嬩欢鏃讹紝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浜嬩欢锛岃嚜浠巋x2.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鍦℉5涓嬶紝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.9.3