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

<template>
  <view :style="{ width: width }" class="searchBox">
    <image :src="searchIcon" class="search-icon" mode="aspectFit"></image>
    <input
      :placeholder="placeholder"
      :value="value"
      class="search-input"
      confirm-type="search"
      placeholder-class="search-placeholder"
      @confirm="onSearch"
      @input="onInput"
    />
    <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) {
        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>