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

import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import { NImage, NInput, NIcon, dividerDark } from 'naive-ui';

import { renderfontsvg } from '@/utils/index';
import disSearch from './images/disSearch.png';
import searchIcon from './images/searchIcon.png';
export default defineComponent({
  name: 'student-studentList',
  props: ['searchWord'],
  emits: ['changeValue'],
  setup(props, { emit, attrs }) {
    const isFocus = ref(false);
    return () => (
      <>
        <NInput
          {...attrs}
          clearable
          class={styles.searchInput}
          v-slots={{
            prefix: () => (
              <NImage
                class={styles.searchIcon}
                previewDisabled
                src={isFocus.value ? searchIcon : disSearch}></NImage>
            )
          }}
          value={props.searchWord}
          onInput={($event: any) => {
            emit('changeValue', $event);
          }}
          onFocus={() => {
            isFocus.value = true;
          }}
          onBlur={() => {
            isFocus.value = false;
          }}></NInput>
      </>
    );
  }
});