YM
2024-04-26 a640a68b55034ad38b1936eedd33c23f63bec0f0
src/uni_modules/next-search-more/components/next-search-more/next-search-more.vue
@@ -6,21 +6,48 @@
            <view class="button xiala active" @click="selectMore">
               <view class="button-item">
                  <!-- <text class="icon icon-more">&#xe61a;</text> -->
                  <uni-data-select style="width: 100%;" v-model="val" :localdata="selectValue" @change="change"
                     :clear="false" ></uni-data-select>
            <uni-data-select
              style="width: 100%"
              v-model="val"
              :localdata="selectValue"
              @change="change"
              :clear="false"
            ></uni-data-select>
               </view>
            </view>
         </template>
         <view class="content" :style="{ 'border-radius': radius + 'px', border: border }">
      <view
        class="content"
        :style="{ 'border-radius': radius + 'px', border: border }"
      >
            <view class="content-box" :class="{ center: mode === 'center' }">
               <!-- <text class="icon icon-search">&#xe66f;</text> -->
               <text style="display: inline-block;padding-left: 20rpx;"></text>
               <input class="input" @confirm="search" :class="{ center: !active && mode === 'center' }" :focus="isFocus"
                  :placeholder="' '+placeholder" v-model="inputVal"  id="sdf" @input="input" @focus="focus" @blur="blur" />
               <text v-if="isDelShow" class="icon icon-del" @click="clear">&#xe61c;</text>
          <text style="display: inline-block; padding-left: 20rpx"></text>
          <input
            class="input"
            @confirm="search"
            :class="{ center: !active && mode === 'center' }"
            :focus="isFocus"
            :placeholder="' ' + placeholder"
            v-model="inputVal"
            id="sdf"
            @input="input"
            @focus="focus"
            @blur="blur"
          />
          <text v-if="isDelShow" class="icon icon-del" @click="clear"
            >&#xe61c;</text
          >
            </view>
            <view v-show="(active && isFixedSearchBtn && button === 'inside') || (isDelShow && button === 'inside')"
               class="searchBtn" @click="search">搜索</view>
        <view
          v-show="
            (active && isFixedSearchBtn && button === 'inside') ||
            (isDelShow && button === 'inside')
          "
          class="searchBtn"
          @click="search"
          >搜索</view
        >
         </view>
         <!-- <template v-if="mode === 'common' || mode ==='center'">
            <view v-if="button === 'outside'" class="button" :class="{ active: isFixedSearchBtn || active }" @click="search">
@@ -33,11 +60,16 @@
            </view>
         </template> -->
         <template>
            <view class="button btnn" :class="{ active: isFixedSearchBtn || active }" @click="search">
               <view class="button-item btn">{{ !isFixedSearchBtn ? searchName : '搜索' }}</view>
        <view
          class="button btnn"
          :class="{ active: isFixedSearchBtn || active }"
          @click="search"
        >
          <view class="button-item btn">{{
            !isFixedSearchBtn ? searchName : "搜索"
          }}</view>
            </view>
         </template>
      </view>
      <view class="more-container-parent">
         <view v-if="mode === 'more' && showMore" class="more-container">
@@ -57,19 +89,21 @@
         selectValue: {
            type: Array,
            default () {
               return [{
        return [
          {
                  value: 0,
                  text: '篮球sdf'
               }]
            text: ""
          }
        ];
            }
         },
         mode: {
            type: String,
            default: 'common'
      default: "common"
         },
         button: {
            type: String,
            default: 'outside'
      default: "outside"
         },
         isFixedSearchBtn: {
            type: Boolean,
@@ -77,15 +111,15 @@
         },
         radius: {
            type: String,
            default: '60'
      default: "60"
         },
         placeholder: {
            type: String,
            default: '请输入搜索内容'
      default: "请输入搜索内容"
         },
         backgroundColor: {
            type: String,
            default: '#fff'
      default: "#fff"
         },
         showMore: {
            type: Boolean,
@@ -93,15 +127,17 @@
         },
         border: {
            type: String,
            default: '1px #f5f5f5 solid'
      default: "1px #f5f5f5 solid"
    },
    keyword: {
      type: String
         }
      },
      data() {
         return {
            active: false,
            inputVal: '',
            searchName: '取消',
      inputVal: "",
      searchName: "取消",
            isDelShow: false,
            isFocus: false,
            timer: 0
@@ -118,45 +154,53 @@
            }
         },
         input() {
            clearInterval(this.timer)
      clearInterval(this.timer);
            this.timer = setTimeout(() => {
               this.$emit('input', this.inputVal);
            }, 500)
        this.$emit("input", this.inputVal);
      }, 500);
         },
         clear() {
            this.inputVal = '';
      this.inputVal = "";
            this.active = false;
            this.$emit('input', this.inputVal);
            this.$emit('search', '');
      this.$emit("input", this.inputVal);
      this.$emit("search", "");
         },
         getFocus() {
            this.isFocus = true;
         },
         // 搜索
         search() {
            if (!this.inputVal) return;
            // console.log(this.inputVal);
            this.$emit('search', this.inputVal);
      this.$emit("search", this.inputVal);
         },
         selectMore() {
            this.$emit('moreClick')
      this.$emit("moreClick");
         },
         // 搜索下拉框
         change(e){
            this.$emit('select',e)
      this.$emit("select", e);
            console.log(e);
         }
      },
      created() {
         this.$watch(() => this.inputVal, (newVal) => {
    this.inputVal = this.keyWord;
    this.$watch(
      () => this.inputVal,
      (newVal) => {
            if (newVal) {
               this.searchName = '搜索';
          this.searchName = "搜索";
               this.isDelShow = true;
            } else {
               this.searchName = '取消';
          this.searchName = "取消";
               this.isDelShow = false;
            }
         })
      }
    );
  },
  watch: {
    keyword(value) {
         console.log(value);
      this.inputVal = value;
    }
      }
   };
</script>
@@ -259,7 +303,6 @@
            white-space: nowrap;
            // overflow: hidden;
            &.active {
               padding-left: 15upx;
               width: 100upx;
            }
@@ -297,8 +340,9 @@
   }
   @font-face {
      font-family: 'iconfont';
      src: url('https://at.alicdn.com/t/c/font_4110624_nikfg21uyk8.ttf?t=1686190660183') format('truetype');
  font-family: "iconfont";
  src: url("https://at.alicdn.com/t/c/font_4110624_nikfg21uyk8.ttf?t=1686190660183")
    format("truetype");
   }
   .icon {