222

schangxiang@126.com

2025-04-30 9bec4dcae002f36aa23231da11cb03a156b40110

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import {
  computed,
  defineComponent,
  Fragment,
  nextTick,
  onMounted,
  ref,
  SetupContext,
} from 'vue'
import IconButton from '@/components/IconButton/IconButton'
import { CaretBottom } from '@element-plus/icons-vue'
import { useVModel } from '@vueuse/core'
import Option from './Option'
import { debounce, has, throttle } from 'lodash'
import styles from './Select.module.scss'
interface SelectProps {
  [key: string]: any
}
 
export default defineComponent<SelectProps, any>({
  //@ts-ignore
  props: ['disabled', 'optionData', 'options', 'isScroll'],
  setup(props: SelectProps, { attrs, slots, emit }: any) {
    const options = computed(() => {
      return (
        props.optionData?.value ||
        (props.optionData as Array<any>) ||
        props.options
      )
    })
    const selectRef = ref()
    const isShow = ref(false)
 
    const onMousedown = () => {
      isShow.value = true
      nextTick(() => {
        selectRef.value.selectRef.click()
      })
    }
 
    return () => {
      const disabled =
        typeof props.disabled?.value === 'boolean'
          ? props.disabled?.value
          : (props.disabled as boolean)
      return (
        <div style={{ width: '100%' }}>
          {isShow.value ? (
            <el-select
              disabled={disabled}
              ref={selectRef}
              {...attrs}
              suffix-icon={
                <span style={{ marginRight: '-3px' }}>
                  <el-icon>
                    <CaretBottom />
                  </el-icon>
                </span>
              }
            >
              {options.value
                ? options.value.map((item: any) => {
                    const label = item.label || item.name || item.description
                    return <Option {...item} label={label} />
                  })
                : slots.default?.()}
            </el-select>
          ) : (
            <div
              class={styles.select}
              style={{ width: '100%' }}
              onMousedown={onMousedown}
            >
              {attrs.modelValue ? 'OK' : 'NG'}
              <el-icon class={styles.icon}>
                <CaretBottom />
              </el-icon>
            </div>
          )}
        </div>
      )
    }
  },
})