PricingPlan 组件提供了一种灵活的方式来显示定价方案，其中包含可自定义的内容，包括标题、描述、价格、功能等。
PricingPlans 组件以响应式网格布局显示多个定价方案。使用 title prop 设置 PricingPlan 的标题。
<template>
<UPricingPlan title="Solo" class="w-96" />
</template>
使用 description prop 设置 PricingPlan 的描述。
<template>
<UPricingPlan title="Solo" description="For bootstrappers and indie hackers." />
</template>
使用 badge prop 在 PricingPlan 标题旁边显示 Badge。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
badge="Most popular"
/>
</template>
您可以传递 Badge 组件的任何属性来对其进行自定义。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
:badge="{
label: 'Most popular',
color: 'neutral',
variant: 'solid'
}"
/>
</template>
使用 price prop 设置 PricingPlan 的价格。
<template>
<UPricingPlan title="Solo" description="For bootstrappers and indie hackers." price="$249" />
</template>
使用 discount prop 设置折扣价格，该价格将与原始价格一起显示（原始价格将显示删除线）。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
discount="$199"
/>
</template>
使用 billing-cycle 和/或 billing-period prop 显示 PricingPlan 的账单信息。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$9"
billing-cycle="/month"
billing-period="billed annually"
/>
</template>
使用 features prop 作为字符串数组来显示 PricingPlan 的功能列表
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Unlimited patch & minor updates',
'Lifetime access'
]"
/>
</template>
您还可以传入一个包含以下属性的对象数组
title: stringicon?: string<script setup lang="ts">
const features = ref([
{
title: 'One developer',
icon: 'i-lucide-user'
},
{
title: 'Unlimited projects',
icon: 'i-lucide-infinity'
},
{
title: 'Access to GitHub repository',
icon: 'i-lucide-github'
},
{
title: 'Unlimited patch & minor updates',
icon: 'i-lucide-refresh-cw'
},
{
title: 'Lifetime access',
icon: 'i-lucide-clock'
}
])
</script>
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="features"
/>
</template>
使用 button prop，其中包含 Button 组件的任何属性，以在 PricingPlan 底部显示一个按钮。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Unlimited patch & minor updates',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
/>
</template>
onClick 字段添加点击处理程序以触发计划购买。使用 variant prop 更改 PricingPlan 的变体。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Unlimited patch & minor updates',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
variant="subtle"
/>
</template>
使用 orientation prop 更改 PricingPlan 的方向。默认为 vertical。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
orientation="horizontal"
variant="outline"
/>
</template>
使用 tagline prop 在价格上方显示标语文本。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
orientation="horizontal"
tagline="Pay once, own it forever"
/>
</template>
使用 terms prop 在价格下方显示条款。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
orientation="horizontal"
tagline="Pay once, own it forever"
terms="Invoices and receipts available."
/>
</template>
使用 highlight prop 在 PricingPlan 周围显示高亮边框。
<template>
<UPricingPlan
title="Solo"
description="For bootstrappers and indie hackers."
price="$249"
:features="[
'One developer',
'Unlimited projects',
'Access to GitHub repository',
'Unlimited patch & minor updates',
'Lifetime access'
]"
:button="{
label: 'Buy now'
}"
highlight
/>
</template>
使用 scale prop 使 PricingPlan 比其他计划更大。
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
title | string | |
description | string | |
徽章 | 字符串 | BadgeProps在标题旁边显示一个徽章。可以是字符串或对象。
| |
账单周期 | string显示在价格旁边的单价周期。通常用于显示重复计费间隔。 | |
账单期限 | string显示在计费周期上方的额外计费上下文。通常用于显示实际的计费频率。 | |
价格 | string方案的当前价格。与 | |
折扣 | string方案的折扣价格。如果提供， | |
功能 | string[] | PricingPlanFeature[]在价格下方显示功能列表。可以是字符串数组或对象数组。
| |
按钮 | ButtonProps在底部显示购买按钮。
| |
标语 | string显示突出定价价值主张的标语。 | |
条款 | string在底部显示条款。 | |
orientation | 'vertical' | "vertical" | "horizontal"定价计划的方向。 |
variant | 'outline' | "soft" | "solid" | "outline" | "subtle" |
高亮 | boolean在定价方案周围显示一个环以突出显示它。 | |
缩放 | boolean放大计划以使其更突出。 | |
ui | { root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; titleWrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; priceWrapper?: ClassNameValue; price?: ClassNameValue; discount?: ClassNameValue; billing?: ClassNameValue; billingPeriod?: ClassNameValue; billingCycle?: ClassNameValue; features?: ClassNameValue; feature?: ClassNameValue; featureIcon?: ClassNameValue; featureTitle?: ClassNameValue; badge?: ClassNameValue; button?: ClassNameValue; tagline?: ClassNameValue; terms?: ClassNameValue; } |
| 插槽 | 类型 |
|---|---|
徽章 | { ui: object; } |
title | {} |
description | {} |
价格 | {} |
折扣 | {} |
账单 | { ui: object; } |
功能 | {} |
按钮 | { ui: object; } |
页头 | {} |
主体 | {} |
页脚 | {} |
标语 | {} |
条款 | {} |
export default defineAppConfig({
ui: {
pricingPlan: {
slots: {
root: 'relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6',
header: '',
body: 'flex flex-col min-w-0',
footer: 'flex flex-col gap-6 items-center',
titleWrapper: 'flex items-center gap-3',
title: 'text-highlighted text-2xl sm:text-3xl text-pretty font-semibold',
description: 'text-muted text-base text-pretty mt-2',
priceWrapper: 'flex items-center gap-1',
price: 'text-highlighted text-3xl sm:text-4xl font-semibold',
discount: 'text-muted line-through text-xl sm:text-2xl',
billing: 'flex flex-col justify-between min-w-0',
billingPeriod: 'text-toned truncate text-xs font-medium',
billingCycle: 'text-muted truncate text-xs font-medium',
features: 'flex flex-col gap-3 flex-1 mt-6 grow-0',
feature: 'flex items-center gap-2 min-w-0',
featureIcon: 'size-5 shrink-0 text-primary',
featureTitle: 'text-muted text-sm truncate',
badge: '',
button: '',
tagline: 'text-base font-semibold text-default',
terms: 'text-xs/5 text-muted text-center text-balance'
},
variants: {
orientation: {
horizontal: {
root: 'grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default',
body: 'lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center',
footer: 'lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto',
features: 'lg:grid lg:grid-cols-2 lg:mt-12'
},
vertical: {
footer: 'justify-end',
priceWrapper: 'mt-6'
}
},
variant: {
solid: {
root: 'bg-inverted',
title: 'text-inverted',
description: 'text-dimmed',
price: 'text-inverted',
discount: 'text-dimmed',
billingCycle: 'text-dimmed',
billingPeriod: 'text-dimmed',
featureTitle: 'text-dimmed'
},
outline: {
root: 'bg-default ring ring-default'
},
soft: {
root: 'bg-elevated/50'
},
subtle: {
root: 'bg-elevated/50 ring ring-default'
}
},
highlight: {
true: {
root: 'ring-2 ring-inset ring-primary'
}
},
scale: {
true: {
root: 'lg:scale-[1.1] lg:z-[1]'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
variant: 'soft',
class: {
root: 'divide-accented'
}
},
{
orientation: 'horizontal',
variant: 'subtle',
class: {
root: 'divide-accented'
}
}
],
defaultVariants: {
variant: 'outline'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pricingPlan: {
slots: {
root: 'relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6',
header: '',
body: 'flex flex-col min-w-0',
footer: 'flex flex-col gap-6 items-center',
titleWrapper: 'flex items-center gap-3',
title: 'text-highlighted text-2xl sm:text-3xl text-pretty font-semibold',
description: 'text-muted text-base text-pretty mt-2',
priceWrapper: 'flex items-center gap-1',
price: 'text-highlighted text-3xl sm:text-4xl font-semibold',
discount: 'text-muted line-through text-xl sm:text-2xl',
billing: 'flex flex-col justify-between min-w-0',
billingPeriod: 'text-toned truncate text-xs font-medium',
billingCycle: 'text-muted truncate text-xs font-medium',
features: 'flex flex-col gap-3 flex-1 mt-6 grow-0',
feature: 'flex items-center gap-2 min-w-0',
featureIcon: 'size-5 shrink-0 text-primary',
featureTitle: 'text-muted text-sm truncate',
badge: '',
button: '',
tagline: 'text-base font-semibold text-default',
terms: 'text-xs/5 text-muted text-center text-balance'
},
variants: {
orientation: {
horizontal: {
root: 'grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default',
body: 'lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center',
footer: 'lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto',
features: 'lg:grid lg:grid-cols-2 lg:mt-12'
},
vertical: {
footer: 'justify-end',
priceWrapper: 'mt-6'
}
},
variant: {
solid: {
root: 'bg-inverted',
title: 'text-inverted',
description: 'text-dimmed',
price: 'text-inverted',
discount: 'text-dimmed',
billingCycle: 'text-dimmed',
billingPeriod: 'text-dimmed',
featureTitle: 'text-dimmed'
},
outline: {
root: 'bg-default ring ring-default'
},
soft: {
root: 'bg-elevated/50'
},
subtle: {
root: 'bg-elevated/50 ring ring-default'
}
},
highlight: {
true: {
root: 'ring-2 ring-inset ring-primary'
}
},
scale: {
true: {
root: 'lg:scale-[1.1] lg:z-[1]'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
variant: 'soft',
class: {
root: 'divide-accented'
}
},
{
orientation: 'horizontal',
variant: 'subtle',
class: {
root: 'divide-accented'
}
}
],
defaultVariants: {
variant: 'outline'
}
}
}
})
]
})