buddhism/components/search-box/search-box.vue

<template>
  <view class="searchBox" :style="{ width: width }">
    <image class="search-icon" :src="searchIcon" mode="aspectFit"></image>
    <input
      class="search-input"
      :value="value"
      @input="onInput"
      :placeholder="placeholder"
      placeholder-class="search-placeholder"
      @confirm="onSearch"
      confirm-type="search"
    />
    <view class="search-btn" @click="onSearch">{{ btnText }}</view>
  </view>
</template>

<script>
  import CommonEnum from '@/enum/common.js'
  export default {
    name: 'SearchBox',
    props: {
      value: {
        type: String,
        default: '',
      },
      width: {
        type: String,
        default: '690rpx',
      },
      placeholder: {
        type: String,
        default: '请输入高僧姓名',
      },
      btnText: {
        type: String,
        default: '搜索',
      },
      // 建议传递 CommonEnum.SEARCH 作为默认图标
      searchIcon: {
        type: String,
        default: () => CommonEnum.SEARCH,
      },
    },
    methods: {
      onInput(e) {
        // 只更新输入值，不触发搜索
        this.$emit('input', e.detail.value)
      },
      onSearch() {
        // 只在点击搜索按钮或按回车时触发搜索
        if (this.value.trim()) {
          this.$emit('search', this.value)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .searchBox {
    display: flex;
    align-items: center;
    height: 70rpx;
    background: #fffbf5;
    border-radius: 10rpx;
    border: 1rpx solid #c7a26d;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    padding: 0 12rpx;
  }
  .search-icon {
    width: 32rpx;
    height: 32rpx;
    margin: 0 28rpx;
  }
  .search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    background: transparent;
    border: none;
    outline: none;
    height: 100%;
  }
  .search-placeholder {
    color: #bfa16b;
    font-size: 28rpx;
  }
  .search-btn {
    background: #bfa16b;
    color: #fff;
    font-size: 26rpx;
    border-radius: 6rpx;
    padding: 0 24rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16rpx;
  }
</style>