From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 01 Mar 2024 09:58:45 +0800 Subject: [PATCH] fix:手持设备 --- 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