classroom-instruments/src/components/TheSearch/index.tsx

import { PropType, defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { InputProps, NButton, NInput } from 'naive-ui';
import icon_search from '/src/common/images/icon_search.svg';
import icon_searchActive from '/src/common/images/icon_searchActive.svg';

export default defineComponent({
  name: 'TheSearch',
  props: {
    /** 圆角 */
    round: {
      type: Boolean as PropType<InputProps['round']>,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  emits: ['search'],
  setup(props, { emit }) {
    const searchData = reactive({
      value: ''
    });
    return () => (
      <NInput
        class={[styles.TheSearch, props.border ? '' : styles.noBorder]}
        round={props.round}
        placeholder="请输入搜索关键词"
        clearable
        v-model:value={searchData.value}
        onClear={() => emit('search', '')}
        onKeyup={(e: KeyboardEvent) => {
          e.stopPropagation();
          if (e.code === 'Enter') {
            emit('search', searchData.value ? searchData.value.trim() : '');
          }
        }}>
        {{
          prefix: () => (
            <>
              <img class={styles.default} src={icon_search} />
              <img class={styles.active} src={icon_searchActive} />
            </>
          ),
          suffix: () => (
            <NButton
              size="small"
              round
              type="primary"
              onClick={() =>
                emit('search', searchData.value ? searchData.value.trim() : '')
              }>
              搜索
            </NButton>
          )
        }}
      </NInput>
    );
  }
});