englishread-front/pages/components/SearchInput.vue

<template>
  <view class="search-input-container">
    <view class="search-box">
      <view class="search-icon" @click="handleSearch">
        <uv-icon name="search" size="20"></uv-icon>
      </view>
      <input 
        class="search-input" 
        type="text" 
        :placeholder="placeholder"
        v-model="inputValue"
        @input="handleInput"
        @confirm="handleSearch"
      />

      <text class="search-text" v-if="showSearchButton" @click="handleSearch">{{ searchButtonText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SearchInput',
  props: {
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    showSearchButton: {
      type: Boolean,
      default: true
    },
    searchButtonText: {
      type: String,
      default: '搜索'
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.inputValue = newVal
    },
    inputValue(newVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    handleInput(e) {
      this.inputValue = e.detail.value || e.target.value
      this.$emit('input', this.inputValue)
    },
    handleSearch() {
      // console.log('搜索的数值为', this.inputValue);
      this.$emit('search', this.inputValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-input-container {
  padding: 20rpx 30rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 37rpx;
  box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); 
  padding: 0 19rpx 0 29rpx;
  height: 79rpx;
  
  // transition: border-color 0.3s ease;
  
  // &:focus-within {
  //   border: 1rpx solid $primary-color;
  //   border-color: #c70019;
  // }
}

.search-icon {
  margin-right: 7rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 28rpx;
  color: $secondary-text-color;
  height: 100%;
  
  &::placeholder {
    color: #999;
  }
}


.search-text {
  color: $primary-color;
  font-size: 28rpx;
}

</style>