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

iThinkDT Naive UI

import { defineComponent } from 'vue'

import { NFlex, NButton } from 'ithinkdt-ui'

export const DtSelection = defineComponent({
    name: 'DtSelection',
    props: {
        mode: {
            type: String,
            required: true,
        },
        selection: {
            type: [Number, Array],
            required: true,
        },
    },
    emits: {
        'update:mode': () => true,
        clear: () => true,
    },
    setup(props, { emit }) {
        return () => {
            const length = Array.isArray(props.selection) ? props.selection.length : props.selection
            if (props.mode !== 'selection' && !length) return <div />

            return (
                <div>
                    <NFlex align="center" wrap-item={false}>
                        <span>已选中 {length} 条</span>
                        <NButton
                            text
                            type="primary"
                            onClick={() => {
                                emit('update:mode', props.mode === 'all' ? 'selection' : 'all')
                            }}
                        >
                            {props.mode === 'all' ? '查看' : '返回'}
                        </NButton>
                        <NButton
                            text
                            onClick={() => {
                                emit('clear')
                                emit('update:mode', 'all')
                            }}
                        >
                            清除
                        </NButton>
                    </NFlex>
                </div>
            )
        }
    },
})