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> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战