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

iThinkDT Naive UI

import { defineComponent } from 'vue'
import { NButton, NIcon } from 'ithinkdt-ui'

import { IAdd, IEdit, IDel } from './assets'

export const NSuffix = defineComponent({
    name: 'Suffix',
    props: {
        deletable: {
            type: Boolean,
            default: true,
        },
        modifiable: {
            type: Boolean,
            default: true,
        },
        creatable: {
            type: Boolean,
            default: true,
        },
    },
    emits: {
        create: () => true,
        modify: () => true,
        delete: () => true,
    },
    setup(props, { emit }) {
        return () => (
            <div
                onClick={(e) => {
                    e.stopImmediatePropagation()
                }}
                style="display: flex; gap: 6px; align-items: center"
            >
                {props.creatable ? (
                    <NButton
                        key="create"
                        type="primary"
                        text
                        style="font-size: 18px"
                        onClick={() => {
                            emit('create')
                        }}
                    >
                        <NIcon>
                            <IAdd />
                        </NIcon>
                    </NButton>
                ) : undefined}
                {props.modifiable ? (
                    <NButton
                        key="modify"
                        type="primary"
                        text
                        style="font-size: 18px"
                        onClick={() => {
                            emit('modify')
                        }}
                    >
                        <NIcon>
                            <IEdit />
                        </NIcon>
                    </NButton>
                ) : undefined}

                {props.deletable ? (
                    <NButton
                        key="delete"
                        type="error"
                        text
                        style="font-size: 18px"
                        onClick={() => {
                            emit('delete')
                        }}
                    >
                        <NIcon>
                            <IDel />
                        </NIcon>
                    </NButton>
                ) : undefined}
            </div>
        )
    },
})