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

<template>
  <van-sticky :offset-top="Offset">
    <van-search class="my-search" left-icon="diy-search" v-model.trim="input" placeholder="搜索文档" />
  </van-sticky>
</template>

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

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

    get Offset () {
      const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
      if (tempN) {
        return tempN.offsetHeight
      } else {
        return 0
      }
    }
}
</script>

<style scoped lang="scss">
.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>