jsm-mall-h5-front/src/components/searchInput.vue

<template>
  <view class="flex_ac" style="height: 88rpx; width: 100%">
    <view class="input-con">
      <image src="/static/image/matser/search.png" mode=""></image>
      <input
        @input="keychange"
        v-model="keyvalue"
        @confirm="confirm"
        confirm-type="search"
        class="f28_302"
        type="text"
        placeholder="请输入"
        placeholder-style="color:#CCCCCC"
      />
      <view class="cancel-btn">
        <text @click="search">搜索</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: ''
  },
  data() {
    return {
      keyvalue: ''
    }
  },
  methods: {
    keychange(e) {
      this.$emit('input', e)
    },
    confirm(e) {
      this.$emit('search', e.detail.value)
    },
    search() {
      this.$emit('search', this.keyvalue)
    }
  }
}
</script>

<style scoped lang="scss">
.input-con {
  @include flex_ac;
  flex: 1;
  padding: 0 0 0 24rpx;
  height: 64rpx;
  background: #f7f7f7;
  border-radius: 32rpx;

  input {
    flex: 1;
  }
  .cancel-btn {
    width: 66px;
    height: 32px;
    background: #6da7ff;
    border-radius: 16px;
    text-align: center;
    text {
      width: 27px;
      height: 14px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      color: #ffffff;
      line-height: 30px;
    }
  }

  image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 16rpx;
  }
}
</style>