h5-colexiu/src/components/col-search/index.tsx

import { Button, Icon, Search } from "vant";
import { defineComponent, PropType } from "vue";
import styles from './index.module.less'
import iconSearch from '@common/images/icon_search.png';
import iconFilter from '@common/images/icon_filter.png';

type inputBackground = 'default' | 'white'

export default defineComponent({
  name: "ColSearch",
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    showAction: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入搜索关键词'
    },
    background: {
      type: String,
      default: '#fff'
    },
    inputBackground: {
      type: String as PropType<inputBackground>,
      default: 'default'
    },
    onSearch: {
      type: Function,
      default: (val: string) => { }
    },
    onFilter: {
      type: Function,
      default: () => { }
    }
  },
  data() {
    return {
      search: ''
    }
  },
  mounted() {

  },
  render() {
    return (
      <Search class={[styles['col-search'], styles[this.inputBackground]]} v-model={this.search}
        background={this.background}
        showAction={this.showAction}
        shape="round"
        placeholder={this.placeholder}
        onSearch={(val: string) => { this.onSearch(val) }}
        v-slots={{
          'left-icon': () => (<Icon name={iconSearch} size={16} />),
          'right-icon': () => (<Button class={styles.searchBtn} round type="primary" size="mini" onClick={() => { this.onSearch(this.search) }}>搜索</Button>),
          action: () => (<Icon name={iconFilter} size={28} onClick={() => { this.onFilter }} />)
        }} />
    )
  }
})