Function Select

tech-study.js:4581–4682

({ data, maxlength, placeholder = '', onchange, onblur, value, keep, })

    ]);
}
function Select({ data, maxlength, placeholder = '', onchange, onblur, value, keep, }) {
    const selectData = reactive(data.map((v) => ({ selected: false, active: false, ele: undefined, ...v })));
    const focus = ref(false);
    const input = shallowRef(undefined);
    const list = shallowRef(undefined);
    const valueRef = ref('');
    value &&
        watch(value, () => {
            const item = selectData.find((v) => v.value === value.value);
            valueRef.value = item ? item.label : '';
            if (!item) {
                selectData.forEach((v) => (v.selected = false));
                list.value && (list.value.scrollTop = 0);
            }
        }, true);
    return createElementNode('div', undefined, {
        class: 'egg_select',
    }, [
        createElementNode('input', { value: valueRef }, {
            class: 'egg_select_input',
            type: 'text',
            placeholder,
            maxlength,
            ref: input,
            onfocus() {
                if (list.value && input.value) {
                    focus.value = true;
                    if (input.value.value && valueRef.value) {
                        const index = selectData.findIndex((v) => v.label === valueRef.value);
                        if (index + 1) {
                            list.value.scrollTop = selectData[index].ele?.offsetTop || 0;
                            selectData.forEach((v, i) => (v.selected = i === index));
                        }
                        return;
                    }
                }
            },
            oninput() {
                if (list.value && input.value) {
                    const { value } = input.value;
                    // 文本存在
                    if (value) {
                        const index = selectData.findIndex((v) => v.label.includes(value));
                        // 存在匹配
                        if (index + 1) {
                            list.value.scrollTop = selectData[index].ele?.offsetTop || 0;
                            selectData.forEach((v, i) => {
                                v.active = i === index;
                                v.active &&
                                    setTimeout(() => {
                                        v.active = false;
                                    }, 300);
                            });
                        }
                        return;
                    }
                    // 清除
                    selectData.forEach((v) => (v.active = v.selected = false));