1

YM

2024-06-06 c56935d7085725e609d926b064c146f3ffc29e6e

 src/uni_modules/next-search-more/components/next-search-more/next-search-more.vue

@@ -1,28 +1,76 @@
<template>
   <view class="next-search-more">
      <view class="search" :style="{ backgroundColor: backgroundColor }">
         <!-- 下拉菜单 -->
         <template>
            <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>
               </view>
            </view>
         </template>
         <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>
            </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 class="next-search-more">
    <view class="search" :style="{ backgroundColor: backgroundColor }">
      <!-- 下拉菜单 -->
      <template>
        <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>
          </view>
        </view>
      </template>
      <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"
          />
          <span
            class="cleanupBtn"
            v-if="inputVal"
            @click="inputVal = ''"
            style="
              position: absolute;
              top: 50%;
              margin-top: -10px;
              right: 10px;
              color: #fff;
              z-index: 2;
              display: inline-block;
              width: 20px;
              height: 20px;
              text-align: center;
              line-height: 20px;
              background-color: #a5a5a5;
              font-weight: bold;
              border-radius: 50%;
              font-size: 12px;
              cursor: pointer;
            "
            >✖</span
          >
        </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">
               <view class="button-item">{{ !isFixedSearchBtn ? searchName : '搜索' }}</view>
            </view>
@@ -32,279 +80,295 @@
               <view class="button-item"><text class="icon icon-more">&#xe61a;</text></view>
            </view>
         </template> -->
         <template>
            <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">
            <slot name="more"></slot>
         </view>
      </view>
   </view>
      <template>
        <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">
        <slot name="more"></slot>
      </view>
    </view>
  </view>
</template>

<script>
   export default {
      props: {
         val:{
            type: Number,
            default: 0
         },
         selectValue: {
            type: Array,
            default () {
               return [{
                  value: 0,
                  text: '篮球sdf'
               }]
            }
         },
         mode: {
            type: String,
            default: 'common'
         },
         button: {
            type: String,
            default: 'outside'
         },
         isFixedSearchBtn: {
            type: Boolean,
            default: true
         },
         radius: {
            type: String,
            default: '60'
         },
         placeholder: {
            type: String,
            default: '请输入搜索内容'
         },
         backgroundColor: {
            type: String,
            default: '#fff'
         },
         showMore: {
            type: Boolean,
            default: false
         },
         border: {
            type: String,
            default: '1px #f5f5f5 solid'
         }

      },
      data() {
         return {
            active: false,
            inputVal: '',
            searchName: '取消',
            isDelShow: false,
            isFocus: false,
            timer: 0
         };
      },
      methods: {
         focus() {
            this.active = true;
         },
         blur() {
            this.isFocus = false;
            if (!this.inputVal) {
               this.active = false;
            }
         },
         input() {
            clearInterval(this.timer)
            this.timer = setTimeout(() => {
               this.$emit('input', this.inputVal);
            }, 500)
         },
         clear() {
            this.inputVal = '';
            this.active = false;
            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);
         },
         selectMore() {
            this.$emit('moreClick')
         },
         // 搜索下拉框
         change(e){
            this.$emit('select',e)
            console.log(e);
         }
      },
      created() {
         this.$watch(() => this.inputVal, (newVal) => {
            if (newVal) {
               this.searchName = '搜索';
               this.isDelShow = true;
            } else {
               this.searchName = '取消';
               this.isDelShow = false;
            }
         })
      }
   };
export default {
  props: {
    val: {
      type: Number,
      default: 0
    },
    selectValue: {
      type: Array,
      default() {
        return [
          {
            value: 0,
            text: ""
          }
        ];
      }
    },
    mode: {
      type: String,
      default: "common"
    },
    button: {
      type: String,
      default: "outside"
    },
    isFixedSearchBtn: {
      type: Boolean,
      default: true
    },
    radius: {
      type: String,
      default: "60"
    },
    placeholder: {
      type: String,
      default: "请输入搜索内容"
    },
    backgroundColor: {
      type: String,
      default: "#fff"
    },
    showMore: {
      type: Boolean,
      default: false
    },
    border: {
      type: String,
      default: "1px #f5f5f5 solid"
    },
    keyword: {
      type: String
    }
  },
  data() {
    return {
      active: false,
      inputVal: "",
      searchName: "取消",
      isDelShow: false,
      isFocus: false,
      timer: 0
    };
  },
  methods: {
    focus() {
      this.active = true;
    },
    blur() {
      this.isFocus = false;
      if (!this.inputVal) {
        this.active = false;
      }
    },
    input() {
      clearInterval(this.timer);
      this.timer = setTimeout(() => {
        this.$emit("input", this.inputVal);
      }, 500);
    },
    clear() {
      this.inputVal = "";
      this.active = false;
      this.$emit("input", this.inputVal);
      this.$emit("search", "");
    },
    getFocus() {
      this.isFocus = true;
    },
    // 搜索
    search() {
      this.$emit("search", this.inputVal);
    },
    selectMore() {
      this.$emit("moreClick");
    },
    // 搜索下拉框
    change(e) {
      this.$emit("select", e);
    }
  },
  created() {
    this.inputVal = this.keyWord;
    this.$watch(
      () => this.inputVal,
      (newVal) => {
        if (newVal) {
          this.searchName = "搜索";
          this.isDelShow = true;
        } else {
          this.searchName = "取消";
          this.isDelShow = false;
        }
      }
    );
  },
  watch: {
    keyword(value) {
      this.inputVal = value;
    }
  }
};
</script>

<style lang="scss" scoped>
   ::v-deep  .uni-select{
       border-style: none;
   }
   ::v-deep .content{
      border-radius: 0 !important;
      // border: 1px solid #7d8ea5 !important;	
   }
   ::v-deep   .button-item {
      width: 100% !important; 
   }
		
   .xiala {
         width: 200rpx !important; 
   }
   .next-search-more {
      .search {
         display: flex;
         width: 100%;
         border-bottom: 1px #f5f5f5 solid;
         box-sizing: border-box;
         // padding: 15upx;
         border-radius: 35rpx;
         font-size: $uni-font-size-base;
         background: #fff;
         border: 1px solid #7d8ea5 ;
         margin: 30rpx 0;
::v-deep .uni-select {
  border-style: none;
}
::v-deep .content {
  border-radius: 0 !important;
  // border: 1px solid #7d8ea5 !important;
}
::v-deep .button-item {
  width: 100% !important;
}

         .content {
            display: flex;
            align-items: center;
            width: 100%;
            height: 60upx;
            border: 1px #ccc solid;
            background: #fff;
            overflow: hidden;
            transition: all 0.2s linear;
            border-radius: 30px;
.xiala {
  width: 200rpx !important;
}
.next-search-more {
  .search {
    display: flex;
    width: 100%;
    border-bottom: 1px #f5f5f5 solid;
    box-sizing: border-box;
    // padding: 15upx;
    border-radius: 35rpx;
    font-size: $uni-font-size-base;
    background: #fff;
    border: 1px solid #7d8ea5;
    margin: 30rpx 0;

            .content-box {
               width: 100%;
               display: flex;
               align-items: center;
    .content {
      display: flex;
      align-items: center;
      width: 100%;
      height: 60upx;
      border: 1px #ccc solid;
      background: #fff;
      overflow: hidden;
      transition: all 0.2s linear;
      border-radius: 30px;

               &.center {
                  justify-content: center;
               }
      .content-box {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;

               .icon {
                  padding: 0 15upx;
        &.center {
          justify-content: center;
        }

                  &.icon-del {
                     font-size: 38upx;
                  }
               }
        .icon {
          padding: 0 15upx;

               .input {
                  width: 100%;
                  max-width: 100%;
                  line-height: 60upx;
                  height: 60upx;
                  transition: all 0.2s linear;
          &.icon-del {
            font-size: 38upx;
          }
        }

                  &.center {
                     width: 200upx;
                  }
        .input {
          width: 100%;
          max-width: 100%;
          line-height: 60upx;
          height: 60upx;
          transition: all 0.2s linear;

                  &.sub {
                     // position: absolute;
                     width: auto;
                     color: grey;
                  }
               }
            }
          &.center {
            width: 200upx;
          }

            .searchBtn {
               height: 100%;
               flex-shrink: 0;
               padding: 0 30upx;
               background: $uni-color-success;
               line-height: 60upx;
               color: #fff;
               border-left: 1px #ccc solid;
               transition: all 0.3s;
            }
         }
          &.sub {
            // position: absolute;
            width: auto;
            color: grey;
          }
        }
      }

         .button {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-shrink: 0;
            // width: 0;
            transition: all 0.2s linear;
            white-space: nowrap;
            // overflow: hidden;
            &.active {
               padding-left: 15upx;
               width: 100upx;
            }
      .searchBtn {
        height: 100%;
        flex-shrink: 0;
        padding: 0 30upx;
        background: $uni-color-success;
        line-height: 60upx;
        color: #fff;
        border-left: 1px #ccc solid;
        transition: all 0.3s;
      }
    }

            .icon-more {
               font-size: 48upx;
            }
         }
      }
    .button {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0;
      // width: 0;
      transition: all 0.2s linear;
      white-space: nowrap;
      // overflow: hidden;
      &.active {
        width: 100upx;
      }

      .more-container-parent {
         flex-shrink: 0;
         width: 100%;
         // position: fixed;
         // position: sticky;
         z-index: 997;
         flex-wrap: nowrap;
         display: flex;
         flex-direction: row;
         position: relative;
         flex-direction: column;
      .icon-more {
        font-size: 48upx;
      }
    }
  }

         .more-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            background-color: #ffffff;
            padding: 20rpx;
            border-radius: 0 0 30rpx 30rpx;
            box-sizing: border-box;
            overflow: hidden;
         }
      }
   }
  .more-container-parent {
    flex-shrink: 0;
    width: 100%;
    // position: fixed;
    // position: sticky;
    z-index: 997;
    flex-wrap: nowrap;
    display: flex;
    flex-direction: row;
    position: relative;
    flex-direction: column;

   @font-face {
      font-family: 'iconfont';
      src: url('https://at.alicdn.com/t/c/font_4110624_nikfg21uyk8.ttf?t=1686190660183') format('truetype');
   }
    .more-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      background-color: #ffffff;
      padding: 20rpx;
      border-radius: 0 0 30rpx 30rpx;
      box-sizing: border-box;
      overflow: hidden;
    }
  }
}

   .icon {
      font-family: iconfont;
      font-size: 32upx;
      font-style: normal;
      color: #999;
   }
</style>
@font-face {
  font-family: "iconfont";
  src: url("https://at.alicdn.com/t/c/font_4110624_nikfg21uyk8.ttf?t=1686190660183")
    format("truetype");
}

.icon {
  font-family: iconfont;
  font-size: 32upx;
  font-style: normal;
  color: #999;
}
</style>