<!-- 表格按钮 -->
|
<template>
|
<div
|
:class="[
|
'inline-flex items-center justify-center min-w-8 h-8 px-2.5 mr-2.5 text-sm c-p rounded-md align-middle',
|
buttonClass
|
]"
|
:style="{ backgroundColor: buttonBgColor, color: iconColor }"
|
@click="handleClick"
|
>
|
<ArtSvgIcon :icon="iconContent" />
|
</div>
|
</template>
|
|
<script setup>
|
defineOptions({ name: 'ArtButtonTable' })
|
const props = defineProps({
|
type: { required: false },
|
icon: { required: false },
|
iconClass: { required: false },
|
iconColor: { required: false },
|
buttonBgColor: { required: false }
|
})
|
const emit = defineEmits(['click'])
|
const defaultButtons = {
|
add: { icon: 'ri:add-fill', class: 'bg-theme/12 text-theme' },
|
edit: { icon: 'ri:pencil-line', class: 'bg-secondary/12 text-secondary' },
|
delete: { icon: 'ri:delete-bin-5-line', class: 'bg-error/12 text-error' },
|
view: { icon: 'ri:eye-line', class: 'bg-info/12 text-info' },
|
more: { icon: 'ri:more-2-fill', class: '' }
|
}
|
const iconContent = computed(() => {
|
return props.icon || (props.type ? defaultButtons[props.type]?.icon : '') || ''
|
})
|
const buttonClass = computed(() => {
|
return props.iconClass || (props.type ? defaultButtons[props.type]?.class : '') || ''
|
})
|
const handleClick = () => {
|
emit('click')
|
}
|
</script>
|
