colexiu-project/src/components/searchInput/index.tsx

import { Search } from '@element-plus/icons-vue'
import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElIcon
} from 'element-plus'

import white from './while.module.less'
import classes from './index.module.less'
import request from '@/helpers/request'

export default defineComponent({
  name: 'searchInput',
  props: {
    title: {
      type: String,
      default: ''
    },
    isWhile: {
      type: Boolean,
      default: true
    },
    searchVal: {
      type: Object,
      default: {}
    }
  },
  emits: ['startSearch'],
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      search: props.searchVal.search,
      subject: null as null | number | string,
      subjectList: []
    })
    watch(
      () => props.searchVal,
      searchVal => {
        // console.log(searchVal,'searchVal')
        state.search = searchVal.search?searchVal.search:''
        state.subject = Number(props.searchVal.subject)?Number(props.searchVal.subject):''
      }
    )
    const getSubjectList = async () => {
      try {
        const res = await request.get(
          '/api-website/open/subject/subjectSelect',
          {}
        )

        state.subjectList = res.data
      } catch (e) {
        console.log(e)
      }
    }

    const startSearch = () => {
      conent.emit('startSearch', {
        search: state.search,
        subject: state.subject
      })
    }
    onMounted(() => {
      getSubjectList()
    })
    let classStyle
    props.isWhile ? (classStyle = white) : (classStyle = classes)
    return () => (
      <>
        <div class={[classStyle.wrap, props.isWhile ? 'While' : '']}>
          <ElInput
          clearable
            v-model={state.search}
            placeholder="搜一搜你想练习的曲目"
            class={classStyle.inputSelect}
            v-slots={{
              prepend: () => (
                <div class={classStyle.selectWrap}>
                  <ElSelect
                   clearable
                    v-model={state.subject}
                    placeholder="请选择声部"
                    style="width: 115px"
                    popper-class="subSelect"
                    v-slots={{
                      suffix: () => <div class={classStyle.san}></div>
                    }}
                  >
                    {state.subjectList.map((item: any) => (
                      <ElOption label={item.name} value={item.id} />
                    ))}
                  </ElSelect>
                  <div class={classStyle.line}></div>
                </div>
              ),
              append: () => (
                <ElButton
                  onClick={startSearch}
                  v-slots={{
                    icon: () => (
                      <ElIcon class={classStyle.searchIcon}>
                        <Search></Search>
                      </ElIcon>
                    )
                  }}
                  style={{ color: '#2DC7AA', font: '20px' }}
                />
              )
            }}
          ></ElInput>
        </div>
      </>
    )
  }
})