H5-Merchant/pages/supplychainon/search/search.vue

<template>
  <view class="search-wrapper">
    <view class="flex-row justify-end">
      <image
        class="search__image"
        referrerpolicy="no-referrer"
        src="/static/images/new_ui/search_icon_blod.png"
      />
      <input
        class="search__input"
        v-model="searchValue"
        type="text"
        @input="handleInput"
        :placeholder="placeholder"
      />
      <button class="search__btn" @click="haandleSearch">搜索</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "请输入搜索内容",
    },
  },

  data() {
    return {
      searchValue: "",
    };
  },
  methods: {
    haandleSearch() {
      this.$emit("search", this.searchValue);
    },
    handleInput() {
      if (!this.searchValue) {
        this.$emit("search", this.searchValue);
      }
    },
  },
};
</script>

<style lang="scss">
.search-wrapper {
  background: #ffffff;
  height: 110rpx;
  display: flex;
  align-items: center;
  width: 100%;

  .search__image {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    left: 40rpx;
    top: 18rpx;
  }
  .search__input {
    border: 2rpx solid #000;
    flex: 1;
    height: 60rpx;
    margin-left: 26rpx;
    padding: 0 120rpx 0 55rpx;
    border-radius: 30rpx;
    margin-right: 20rpx;
    border: none;
    background: #f8f8f8;
    font-size: 26rpx;
    color: #333333;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .justify-end {
    position: relative;
    border-radius: 30rpx;
    flex: 1;
  }
  .search__btn {
    position: absolute;
    right: 20rpx;
    width: 108rpx;
    height: 60rpx;
    white-space: nowrap;
    background-color: rgba(31, 124, 255, 1);
    border-radius: 30rpx;
    text-align: center;
    font-size: 28rpx;
    line-height: 60rpx;
    color: rgba(255, 255, 255, 1);
  }
}
</style>