jy-docs/jydocs-mobile/src/components/Search.vue

<template>
  <div class="search-container van-fade-an">
      <div class="click-pop" v-if="type === 'click'"  @click="onClick"></div>
      <van-search @input="$emit('input', $event)" @search="onSearch" class="my-search" left-icon="diy-search" v-model.trim="input" placeholder="搜索文档" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Icon, Search } from 'vant'

// @ is an alias to /src
  @Component({
    name: 'Search',
    components: {
      [Search.name]: Search,
      [Icon.name]: Icon
    }
  })
export default class Empty extends Vue {
    @Prop({ default: 'input' }) type?: string | undefined;
    input = ''

    onSearch () {
      this.$emit('submit', this.input)
    }

    onClick () {
      if (this.type === 'click') {
        this.$emit('click')
      }
    }
}
</script>

<style scoped lang="scss">
@keyframes show {
  to {
    opacity: 1;
  }
}
.van-fade-an {
  opacity: 0;
  animation: show 1s 300ms ease forwards;
  z-index: 666;
  position: relative;
}
.click-pop {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
  opacity: 0;
}
.search-container {
  width: 100%;
}
.my-search {
  &::v-deep.van-search {
    padding: 7px 16px;
    .van-search__content {
      border-radius: 8px;
      background: #F5F6F7;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }
    .van-cell {
      align-items: center;
      height: 38px;
    }
    .van-field__left-icon {
      height: 20px;
      margin-right: 8px;
    }
    .van-field__control {
      color: #171826;
      font-family: PingFang SC;
      font-size: 14px;
      letter-spacing: 0px;
      text-align: left;
    }
  }

  @include diy-icon('search', 20, 20)
}
</style>