|
@@ -1,73 +1,40 @@
|
|
<template>
|
|
<template>
|
|
- <view
|
|
|
|
- class="u-search"
|
|
|
|
- @tap="clickHandler"
|
|
|
|
- :style="[{
|
|
|
|
|
|
+ <view class="u-search" @tap="clickHandler" :style="[{
|
|
margin: margin,
|
|
margin: margin,
|
|
- }, $u.addStyle(customStyle)]"
|
|
|
|
- >
|
|
|
|
- <view
|
|
|
|
- class="u-search__content"
|
|
|
|
- :style="{
|
|
|
|
|
|
+ }, $u.addStyle(customStyle)]">
|
|
|
|
+ <view class="u-search__content" :style="{
|
|
backgroundColor: bgColor,
|
|
backgroundColor: bgColor,
|
|
borderRadius: shape == 'round' ? '100px' : '4px',
|
|
borderRadius: shape == 'round' ? '100px' : '4px',
|
|
borderColor: borderColor,
|
|
borderColor: borderColor,
|
|
- }"
|
|
|
|
- >
|
|
|
|
|
|
+ }">
|
|
<template v-if="$slots.label || label !== null">
|
|
<template v-if="$slots.label || label !== null">
|
|
<slot name="label">
|
|
<slot name="label">
|
|
<text class="u-search__content__label">{{ label }}</text>
|
|
<text class="u-search__content__label">{{ label }}</text>
|
|
</slot>
|
|
</slot>
|
|
</template>
|
|
</template>
|
|
<view class="u-search__content__icon">
|
|
<view class="u-search__content__icon">
|
|
- <u-icon
|
|
|
|
- @tap="clickIcon"
|
|
|
|
- :size="searchIconSize"
|
|
|
|
- :name="searchIcon"
|
|
|
|
- :color="searchIconColor ? searchIconColor : color"
|
|
|
|
- ></u-icon>
|
|
|
|
|
|
+ <u-icon @tap="clickIcon" :size="searchIconSize" :name="searchIcon"
|
|
|
|
+ :color="searchIconColor ? searchIconColor : color"></u-icon>
|
|
</view>
|
|
</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="[{
|
|
|
|
|
|
+ <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,
|
|
textAlign: inputAlign,
|
|
color: color,
|
|
color: color,
|
|
backgroundColor: bgColor,
|
|
backgroundColor: bgColor,
|
|
height: $u.addUnit(height)
|
|
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>
|
|
|
|
|
|
+ }, inputStyle]" />
|
|
|
|
+ <view class="closeBox" v-if="keyword && clearabled && focused" @click="clear">
|
|
|
|
+ <view class="u-search__content__icon u-search__content__close">
|
|
|
|
+ <u-icon name="close" size="11" color="#ffffff" customStyle="line-height: 12px"></u-icon>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
- <text
|
|
|
|
- :style="[actionStyle]"
|
|
|
|
- class="u-search__action"
|
|
|
|
- :class="[(showActionBtn || show) && 'u-search__action--active']"
|
|
|
|
- @tap.stop.prevent="custom"
|
|
|
|
- >{{ actionText }}</text>
|
|
|
|
|
|
+ <text :style="[actionStyle]" class="u-search__action"
|
|
|
|
+ :class="[(showActionBtn || show) && 'u-search__action--active']"
|
|
|
|
+ @tap.stop.prevent="custom">{{ actionText }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -111,7 +78,7 @@
|
|
*/
|
|
*/
|
|
export default {
|
|
export default {
|
|
name: "u-search",
|
|
name: "u-search",
|
|
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
|
|
|
|
|
|
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
keyword: '',
|
|
keyword: '',
|
|
@@ -152,9 +119,10 @@
|
|
clear() {
|
|
clear() {
|
|
this.keyword = '';
|
|
this.keyword = '';
|
|
// 延后发出事件,避免在父组件监听clear事件时,value为更新前的值(不为空)
|
|
// 延后发出事件,避免在父组件监听clear事件时,value为更新前的值(不为空)
|
|
- this.$nextTick(() => {
|
|
|
|
- this.$emit('clear');
|
|
|
|
- })
|
|
|
|
|
|
+ // this.$nextTick(() => {
|
|
|
|
+ // this.$emit('clear');
|
|
|
|
+ // })
|
|
|
|
+ this.$emit('clear');
|
|
},
|
|
},
|
|
// 确定搜索
|
|
// 确定搜索
|
|
search(e) {
|
|
search(e) {
|
|
@@ -202,102 +170,113 @@
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<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;
|
|
|
|
|
|
+ @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 */
|
|
|
|
|
|
+ /* #ifdef H5 */
|
|
|
|
+ // iOS15在H5下,hx的某些版本,input type=search时,会多了一个搜索图标,进行移除
|
|
|
|
+ [type="search"]::-webkit-search-decoration {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
|
|
-.u-search {
|
|
|
|
- @include flex(row);
|
|
|
|
- align-items: center;
|
|
|
|
- flex: 1;
|
|
|
|
|
|
+ /* #endif */
|
|
|
|
|
|
- &__content {
|
|
|
|
- @include flex;
|
|
|
|
|
|
+ .u-search {
|
|
|
|
+ @include flex(row);
|
|
align-items: center;
|
|
align-items: center;
|
|
- padding: $u-search-content-padding;
|
|
|
|
flex: 1;
|
|
flex: 1;
|
|
- justify-content: space-between;
|
|
|
|
- border-width: 1px;
|
|
|
|
- border-color: transparent;
|
|
|
|
- border-style: solid;
|
|
|
|
- overflow: hidden;
|
|
|
|
|
|
|
|
- &__icon {
|
|
|
|
|
|
+ &__content {
|
|
@include flex;
|
|
@include flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- }
|
|
|
|
|
|
+ padding: $u-search-content-padding;
|
|
|
|
|
|
- &__label {
|
|
|
|
- color: $u-search-label-color;
|
|
|
|
- font-size: $u-search-label-font-size;
|
|
|
|
- margin: $u-search-label-margin;
|
|
|
|
- }
|
|
|
|
|
|
+ // padding-right: 0;
|
|
|
|
+ flex: 1;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ border-width: 1px;
|
|
|
|
+ border-color: transparent;
|
|
|
|
+ border-style: solid;
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- &__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;
|
|
|
|
- }
|
|
|
|
|
|
+ &__icon {
|
|
|
|
+ @include flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
|
|
- &__input {
|
|
|
|
- flex: 1;
|
|
|
|
- font-size: $u-search-input-font-size;
|
|
|
|
- line-height: 1;
|
|
|
|
- margin: $u-search-input-margin;
|
|
|
|
- color: $u-search-input-color;
|
|
|
|
|
|
+ &__label {
|
|
|
|
+ color: $u-search-label-color;
|
|
|
|
+ font-size: $u-search-label-font-size;
|
|
|
|
+ margin: $u-search-label-margin;
|
|
|
|
+ }
|
|
|
|
|
|
- &--placeholder {
|
|
|
|
- color: $u-search-input-placeholder-color;
|
|
|
|
|
|
+ &__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;
|
|
|
|
|
|
+ &__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;
|
|
|
|
|
|
+ &--active {
|
|
|
|
+ width: $u-search-action-active-width;
|
|
|
|
+ margin-left: $u-search-action-margin-left;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
-</style>
|
|
|
|
|
|
+
|
|
|
|
+ .closeBox {
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ height: 55rpx;
|
|
|
|
+ width: 65rpx;
|
|
|
|
+ // background: red;
|
|
|
|
+ }
|
|
|
|
+</style>
|