定价表
用法
PricingTable 组件提供了一种响应式且可定制的方式，以表格形式显示定价计划，它会自动在桌面端切换到水平表格布局以便于比较，在移动端切换到垂直卡片布局以便于阅读。
- 个人版最受欢迎面向独立开发者。$249按年计费/月功能开发者数量1项目GitHub 仓库访问权限更新补丁和次要更新支持社区安全SSO审计日志自定义安全审查
- 团队面向成长型团队。$499按年计费/月功能开发者数量5项目GitHub 仓库访问权限更新所有更新支持优先安全SSO审计日志自定义安全审查
- 企业版面向大型组织。定制功能开发者数量无限制项目GitHub 仓库访问权限更新所有更新支持24/7安全SSO审计日志自定义安全审查
套餐
使用 tiers 属性作为对象数组来定义您的定价计划。每个套餐对象支持以下属性：
id: string- 套餐的唯一标识符（必需）title?: string- 定价计划的名称description?: string- 套餐的简短描述price?: string- 套餐的当前价格（例如，“$99”、“€99”、“免费”）discount?: string- 将会显示price并带有删除线（例如，“$79”、“€79”）的折扣价格billingCycle?: string- 出现在价格旁边的单位价格周期（例如，“/月”、“/席位/月”）billingPeriod?: string- 出现在计费周期上方的附加计费上下文（例如，“按月计费”）badge?: string | BadgeProps- 在标题旁边显示一个徽章{ color: 'primary', variant: 'subtle' }button?: ButtonProps- 配置号召性用语按钮{ size: 'lg', block: true }highlight?: boolean- 是否在视觉上突出显示此套餐作为推荐选项
- 个人版最受欢迎面向独立开发者。$249按年计费/月
- 团队面向成长型团队。$499按年计费/月
- 企业版面向大型组织。定制
<script setup lang="ts">
const tiers = ref([
{
id: 'solo',
title: 'Solo',
description: 'For indie hackers.',
price: '$249',
billingCycle: '/month',
billingPeriod: 'billed annually',
badge: 'Most popular',
button: {
label: 'Buy now',
variant: 'subtle'
}
},
{
id: 'team',
title: 'Team',
description: 'For growing teams.',
price: '$499',
billingCycle: '/month',
billingPeriod: 'billed annually',
button: {
label: 'Buy now'
},
highlight: true
},
{
id: 'enterprise',
title: 'Enterprise',
description: 'For large organizations.',
price: 'Custom',
button: {
label: 'Contact sales',
color: 'neutral'
}
}
])
</script>
<template>
<UPricingTable :tiers="tiers" />
</template>
分组
使用 sections 属性将功能组织成逻辑组。每个部分代表一个您想在不同定价套餐中进行比较的功能类别。
title: string- 功能部分的标题features: PricingTableSectionFeature[]- 一个功能数组，包含它们在每个套餐中的可用性- 每个功能都需要一个
title和一个tiers对象，将套餐 ID 映射到值 - 布尔值（
true/false）将显示为勾号（✓）或减号（-） - 字符串值将显示为文本（例如，“无限制”、“最多 5 个用户”）
- 数字值将按原样显示（例如，10、100）
- 每个功能都需要一个
- 个人版面向独立开发者。$249/月功能开发者数量1项目安全SSO
- 团队面向成长型团队。$499/月功能开发者数量5项目安全SSO
- 企业版面向大型组织。定制功能开发者数量无限制项目安全SSO
<script setup lang="ts">
const tiers = ref([
{
id: 'solo',
title: 'Solo',
price: '$249',
description: 'For indie hackers.',
billingCycle: '/month',
button: {
label: 'Buy now',
variant: 'subtle'
}
},
{
id: 'team',
title: 'Team',
price: '$499',
description: 'For growing teams.',
billingCycle: '/month',
button: {
label: 'Buy now'
}
},
{
id: 'enterprise',
title: 'Enterprise',
price: 'Custom',
description: 'For large organizations.',
button: {
label: 'Contact sales',
color: 'neutral'
}
}
])
const sections = ref([
{
title: 'Features',
features: [
{
title: 'Number of developers',
tiers: {
solo: '1',
team: '5',
enterprise: 'Unlimited'
}
},
{
title: 'Projects',
tiers: {
solo: true,
team: true,
enterprise: true
}
}
]
},
{
title: 'Security',
features: [
{
title: 'SSO',
tiers: {
solo: false,
team: true,
enterprise: true
}
}
]
}
])
</script>
<template>
<UPricingTable :tiers="tiers" :sections="sections" />
</template>
示例
使用插槽
PricingTable 组件提供了强大的插槽自定义选项，以定制您的内容显示。您可以使用通用插槽自定义单个元素，或使用其 ID 定向特定元素。
- 个人版面向独立开发者。$249/月功能开发者数量1项目安全SSO
- 团队面向成长型团队。$499/月功能开发者数量5项目安全SSO
- 企业版面向大型组织。定制功能开发者数量无限制项目安全SSO
<script setup lang="ts">
const tiers = [
{
id: 'solo',
title: 'Solo',
price: '$249',
description: 'For indie hackers.',
billingCycle: '/month',
button: { label: 'Buy now', variant: 'subtle' as const }
},
{
id: 'team',
title: 'Team',
price: '$499',
description: 'For growing teams.',
billingCycle: '/month',
button: { label: 'Buy now' },
highlight: true
},
{
id: 'enterprise',
title: 'Enterprise',
price: 'Custom',
description: 'For large organizations.',
button: { label: 'Contact sales', color: 'neutral' as const }
}
]
const sections = [
{
id: 'features',
title: 'Features',
features: [
{
id: 'developers',
title: 'Number of developers',
tiers: { solo: '1', team: '5', enterprise: 'Unlimited' }
},
{
id: 'projects',
title: 'Projects',
tiers: { solo: true, team: true, enterprise: true }
}
]
},
{
id: 'security',
title: 'Security',
features: [
{
title: 'SSO',
tiers: { solo: false, team: true, enterprise: true }
}
]
}
]
</script>
<template>
<UPricingTable :tiers="tiers" :sections="sections">
<!-- Customize specific tier title -->
<template #team-title="{ tier }">
<div class="flex items-center gap-2">
<UIcon name="i-lucide-crown" class="size-4 text-amber-500" />
{{ tier.title }}
</div>
</template>
<!-- Customize specific section title -->
<template #section-security-title="{ section }">
<div class="flex items-center gap-2">
<UIcon name="i-lucide-shield-check" class="size-4 text-green-500" />
<span class="font-semibold text-green-700">{{ section.title }}</span>
</div>
</template>
<!-- Customize specific feature value -->
<template #feature-developers-value="{ feature, tier }">
<template v-if="feature.tiers?.[tier.id]">
<UBadge :label="String(feature.tiers[tier.id])" color="primary" variant="soft" />
</template>
<UIcon v-else name="i-lucide-x" class="size-4 text-muted" />
</template>
</UPricingTable>
</template>
该组件支持各种插槽类型，以获得最大的自定义灵活性。
| 插槽类型 | 模式 | 描述 | 示例 |
|---|---|---|---|
| 套餐插槽 | #{套餐ID}-{元素} | 定位到特定套餐 | #team-title, #solo-price |
| 分组插槽 | #section-{id|formatted-title}-title | 定位到特定分组 | #section-features-title |
| 功能插槽 | #feature-{id|formatted-title}-{title|value} | 定位到特定功能 | #feature-developers-title |
| 通用插槽 | #tier-title, #section-title 等。 | 应用于所有项 | #feature-value |
id 时，插槽名称将从标题自动生成（例如，“Premium Features!” 将变成 #section-premium-features-title）。API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
tiers |
要在表格中显示的定价套餐。每个套餐代表一个定价计划，并包含其自己的标题、描述、价格和功能。
| |
sections |
要在表格中显示的各功能分组。每个分组包含一个标题和一系列功能，以及它们在每个套餐中的可用性。 | |
caption |
要在表格上方显示的标题。 | |
ui |
|
插槽
| 插槽 | 类型 |
|---|---|
caption |
|
tier |
|
tier-title |
|
tier-description |
|
tier-badge |
|
tier-button |
|
tier-billing |
|
tier-discount |
|
tier-price |
|
section-title |
|
feature-title |
|
feature-value |
|
主题
export default defineAppConfig({
ui: {
pricingTable: {
slots: {
root: 'w-full relative',
table: 'w-full table-fixed border-separate border-spacing-x-0 hidden md:table',
list: 'md:hidden flex flex-col gap-6 w-full',
item: 'p-6 flex flex-col border border-default rounded-lg',
caption: 'sr-only',
thead: '',
tbody: '',
tr: '',
th: 'py-4 font-normal text-left border-b border-default',
td: 'px-6 py-4 text-center border-b border-default',
tier: 'p-6 text-left font-normal',
tierTitleWrapper: 'flex items-center gap-3',
tierTitle: 'text-lg font-semibold text-highlighted',
tierDescription: 'text-sm font-normal text-muted mt-1',
tierBadge: 'truncate',
tierPriceWrapper: 'flex items-center gap-1 mt-4',
tierPrice: 'text-highlighted text-3xl sm:text-4xl font-semibold',
tierDiscount: 'text-muted line-through text-xl sm:text-2xl',
tierBilling: 'flex flex-col justify-between min-w-0',
tierBillingPeriod: 'text-toned truncate text-xs font-medium',
tierBillingCycle: 'text-muted truncate text-xs font-medium',
tierButton: 'mt-6',
tierFeatureIcon: 'size-5 shrink-0',
section: 'mt-6 flex flex-col gap-2',
sectionTitle: 'font-semibold text-sm text-highlighted',
feature: 'flex items-center justify-between gap-1',
featureTitle: 'text-sm text-default',
featureValue: 'text-sm text-muted flex justify-center min-w-5'
},
variants: {
section: {
true: {
tr: '*:pt-8'
}
},
active: {
true: {
tierFeatureIcon: 'text-primary'
}
},
highlight: {
true: {
tier: 'bg-elevated/50 border-x border-t border-default rounded-t-lg',
td: 'bg-elevated/50 border-x border-default',
item: 'bg-elevated/50'
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pricingTable: {
slots: {
root: 'w-full relative',
table: 'w-full table-fixed border-separate border-spacing-x-0 hidden md:table',
list: 'md:hidden flex flex-col gap-6 w-full',
item: 'p-6 flex flex-col border border-default rounded-lg',
caption: 'sr-only',
thead: '',
tbody: '',
tr: '',
th: 'py-4 font-normal text-left border-b border-default',
td: 'px-6 py-4 text-center border-b border-default',
tier: 'p-6 text-left font-normal',
tierTitleWrapper: 'flex items-center gap-3',
tierTitle: 'text-lg font-semibold text-highlighted',
tierDescription: 'text-sm font-normal text-muted mt-1',
tierBadge: 'truncate',
tierPriceWrapper: 'flex items-center gap-1 mt-4',
tierPrice: 'text-highlighted text-3xl sm:text-4xl font-semibold',
tierDiscount: 'text-muted line-through text-xl sm:text-2xl',
tierBilling: 'flex flex-col justify-between min-w-0',
tierBillingPeriod: 'text-toned truncate text-xs font-medium',
tierBillingCycle: 'text-muted truncate text-xs font-medium',
tierButton: 'mt-6',
tierFeatureIcon: 'size-5 shrink-0',
section: 'mt-6 flex flex-col gap-2',
sectionTitle: 'font-semibold text-sm text-highlighted',
feature: 'flex items-center justify-between gap-1',
featureTitle: 'text-sm text-default',
featureValue: 'text-sm text-muted flex justify-center min-w-5'
},
variants: {
section: {
true: {
tr: '*:pt-8'
}
},
active: {
true: {
tierFeatureIcon: 'text-primary'
}
},
highlight: {
true: {
tier: 'bg-elevated/50 border-x border-t border-default rounded-t-lg',
td: 'bg-elevated/50 border-x border-default',
item: 'bg-elevated/50'
}
}
}
}
}
})
]
})
更新日志
5cb65— 特性：导入 @nuxt/ui-pro 组件