@ithinkdt/naive/src/components/ImportBtn.jsx

iThinkDT Naive UI

import { defineComponent, useAttrs, useSlots } from 'vue'

import { NButton } from 'ithinkdt-ui'

import { $msg } from '@ithinkdt/core'

import { NUpload, NUploadTrigger } from './lazy'

export const NImportBtn = defineComponent({
    inheritAttrs: false,
    props: {
        accept: {
            type: String,
            default: '',
        },
    },

    emits: {
        chose: () => true,
    },

    setup(props, { emit }) {
        const slots = useSlots()
        const attrs = useAttrs()

        function _upload({ file, onFinish, onError }) {
            if (props.accept && !file.name.endsWith(props.accept)) {
                $msg.warning(`请选择类型为 '${props.accept}' 的文件`)
                onError()
                return
            }
            emit('chose', { file: file.file || file })
            onFinish()
        }

        return () => (
            <NUpload abstract accept={props.accept} custom-request={_upload}>
                <NUploadTrigger abstract>
                    {{
                        default:
                            slots.trigger ||
                            (({ handleClick }) => (
                                <NButton {...{ type: 'primary', ghost: true, ...attrs }} onClick={handleClick}>
                                    导 入
                                </NButton>
                            )),
                    }}
                </NUploadTrigger>
            </NUpload>
        )
    },
})