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>
|
)
|
}
|
},
|
})
|
