template tag
<template>
<button :class="classes" >
<slot :iconSizeClasses="iconSizeClasses" />
</button>
</template>
script tag
<script setup>
import { toRefs, computed } from 'vue'
const baseClasses = [
'inline-flex items-center transition-colors font-medium select-none disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-dark-eval-2',
]
const variantClasses = (variant) => ({
'bg-purple-500 text-white hover:bg-purple-600 focus:ring-purple-500': variant == 'primary',
'bg-white text-gray-500 hover:bg-gray-100 focus:ring-purple-500 dark:text-gray-400 dark:bg-dark-eval-1 dark:hover:bg-dark-eval-2 dark:hover:text-gray-200':
variant == 'secondary',
'bg-green-500 text-white hover:bg-green-600 focus:ring-green-500': variant == 'success',
'bg-red-500 text-white hover:bg-red-600 focus:ring-red-500': variant == 'danger',
'bg-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-500': variant == 'warning',
'bg-cyan-500 text-white hover:bg-cyan-600 focus:ring-cyan-500': variant == 'info',
'bg-black text-gray-300 hover:text-white hover:bg-gray-800 focus:ring-black dark:hover:bg-dark-eval-3':
variant == 'black',
})
// 通过计算属性,绑定一堆类名,不知道这样的形式好不好
// <button :class="classes" >
const classes = computed(() => [
...baseClasses,
iconOnly
? {
'p-1.5': size == 'sm',
'p-2': size == 'base',
'p-3': size == 'lg',
}
: {
'px-2.5 py-1.5 text-sm': size == 'sm',
'px-4 py-2 text-base': size == 'base',
'px-5 py-2 text-xl': size == 'lg',
},
variantClasses(variant),
{
'rounded-md': !squared && !pill,
'rounded-full': pill,
},
{
'pointer-events-none opacity-50': href && disabled.value,
},
])
// <slot :iconSizeClasses="iconSizeClasses" />
const iconSizeClasses = [
{
'w-5 h-5': size == 'sm',
'w-6 h-6': size == 'base',
'w-7 h-7': size == 'lg',
},
]
</script>
标签:bg,封装,text,focus,hover,tailwindcss,按钮,ring,500
From: https://www.cnblogs.com/zhuoss/p/17177558.html