community-front/pages/components/Search.vue

<template>
  <!-- 自定义搜索框组件 -->
  <view class="search-container" >
    <view class="search-input" :style="{ backgroundColor: bgColor }">
      <!-- 搜索图标 -->
      <view v-if="searchIconAlign === 'left' && showIcon" class="search-icon left" @click="clickIcon">
        <text class="iconfont">🔍</text>
      </view>

      <view v-if="searchIconAlign === 'center' && showIcon" class="search-icon center" @click="clickIcon">
        <text class="iconfont">🔍</text>
      </view>
      
      <input
        :value="value"
        :placeholder="placeholder"
        type="text"
        :disabled="disabled"
        :maxlength="maxLength"
        @input="input"
        @confirm="search"
        @keyup.enter="search"
        class="input-field"
        :style="{ 
          textAlign: textAlign, 
          borderRadius: borderRadius,
          height: height, 
          width: width }"
      />
      
      <!-- 清除按钮 -->
      <view v-if="value && !disabled" class="clear-icon" @click="clear">
        <text class="iconfont">✕</text>
      </view>
      
      <!-- 搜索图标在右侧 -->
      <view v-if="searchIconAlign === 'right' && showIcon" class="search-icon right" @click="clickIcon">
        <text class="iconfont">🔍</text>
      </view>
    </view>
    
    <!-- 取消按钮 -->
    <view v-if="showCancel" class="cancel-btn" @click="cancel">
      <text>取消</text>
    </view>
  </view>
</template>

<script>

export default{
  name:'Search',
  props:{
    placeholder:{
      type:String,
      default:'搜索'
    },
    // 是否展示搜索图标
    showIcon:{
      type:Boolean,
      default:true
    },
    // 是否展示右侧的取消按钮
    showCancel:{
      type:Boolean,
      default:true
    },
    // 搜索图标对齐位置
    searchIconAlign:{
      type:String,
      default:'left'
    },
    // 搜索框内容对齐方式
    textAlign:{
      type:String,
      default:'left'
    },
    // v-model传入的内容怎么用
    value:{
      type:String,
      default:''
    },
    // 搜索框内容改变时触发的事件
    height:{
      type:String,
      default:'60rpx'
    },
    width:{
      type:String,
      default:'100%'
    },
    bgColor:{
      type:String,
      default:'#f3f7f8'
    },
    disabled:{
      type:Boolean,
      default:false
    },
    maxLength:{
      type:Number,
      default:100
    },
    borderRadius:{
      type:String,
      default:'30rpx'
    },

  },
  methods:{
     clickIcon(){
      console.log('clickIcon');
      this.search()
       
     },
     clear(){
      // console.log('clear');
       this.$emit('clear', '')
       this.$emit('input', '')
     },
     search(){
      console.log('search', this.value);
      
       this.$emit('search', this.value)
     },
     cancel(){
      // console.log('cancel');
       this.$emit('cancel')
       this.$emit('input', '')
     },
     input(e){
       const value = e.detail.value
       console.log('input', value)
       this.$emit('input', value)
      //  this.onChange(value)
     }
   },
  watch:{
    value(newVal){
      console.log(newVal)
      this.$emit('change', newVal)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  display: flex;
  align-items: center;
  padding: 20rpx;
  // background-color: #fff;
  
  .search-input {
    flex: 1;
    display: flex;
    align-items: center;
    // height: 60rpx;
    border-radius: 30rpx;
    padding: 0 20rpx;
    position: relative;
    
    .search-icon {
      // flex: 0.1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40rpx;
      height: 40rpx;
      
      &.left {
        margin-right: 10rpx;
      }
      
      &.right {
        margin-left: 10rpx;
      }
      
      .iconfont {
        font-size: 28rpx;
        color: #999;
      }
    }
    
    .input-field {
      flex: 1;
      padding-left: 4rpx;
      border: none;
      outline: none;
      background: transparent;
      font-size: 28rpx;
      color: #333;
      // background-color: #f1f6ff;
      &::placeholder {
        color: #999;
      }
    }
    
    .clear-icon {
      display: flex;
      // align-items: center;
      line-height: 40rpx;
      justify-content: center;
      width: 40rpx;
      height: 40rpx;
      margin-left: 10rpx;
      border-radius: 50%;
      background: #f0f0f0;
      .iconfont {
        font-size: 20rpx;
        color: #b2b2b2;
      }
    }
  }
  
  .cancel-btn {
    margin-left: 20rpx;
    padding: 0 20rpx;
    
    text {
      font-size: 28rpx;
      color: #007aff;
    }
  }
}
</style>