From 66d2c8d8c97e19fdbd969f97dd3d6a28f27c415f Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 01 Nov 2023 16:07:03 +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