PricingPlans 组件提供了一个灵活的布局，用于使用默认插槽或 plans 属性来显示 PricingPlan 组件列表。
<template>
<UPricingPlans>
<UPricingPlan
v-for="(plan, index) in plans"
:key="index"
v-bind="plan"
/>
</UPricingPlans>
</template>
plans 属性和默认插槽。使用 plans 属性作为对象数组，其中包含 PricingPlan 组件的属性。
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans :plans="plans" />
</template>
使用 orientation 属性更改 PricingPlans 的方向。默认为 horizontal。
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans orientation="vertical" :plans="plans" />
</template>
plans 属性而不是默认插槽时，计划的 orientation 会自动反转，horizontal 变为 vertical，反之亦然。当其中一个计划缩放以获得更好的视觉平衡时，使用 compact 属性可以减少计划之间的间距。
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
scale: true,
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans compact :plans="plans" />
</template>
当其中一个计划缩放以获得更好的视觉平衡时，使用 scale 属性可以调整计划之间的间距。
<script setup lang="ts">
const plans = ref([
{
title: 'Solo',
description: 'Tailored for indie hackers.',
price: '$249',
features: [
'One developer',
'Lifetime access'
],
button: {
label: 'Buy now'
}
},
{
title: 'Startup',
description: 'Best suited for small teams.',
price: '$499',
scale: true,
features: [
'Up to 5 developers',
'Everything in Solo'
],
button: {
label: 'Buy now'
}
},
{
title: 'Organization',
description: 'Ideal for larger teams and organizations.',
price: '$999',
features: [
'Up to 20 developers',
'Everything in Startup'
],
button: {
label: 'Buy now'
}
}
])
</script>
<template>
<UPricingPlans scale :plans="plans" />
</template>
在页面中使用 PricingPlans 组件创建定价页面
<script setup lang="ts">
const { data: plans } = await useAsyncData('plans', () => queryCollection('plans').all())
</script>
<template>
<UPage>
<UPageHero title="Pricing" />
<UPageBody>
<UContainer>
<UPricingPlans :plans="plans" />
</UContainer>
</UPageBody>
</UPage>
</template>
plans 是使用 @nuxt/content 模块中的 queryCollection 获取的。| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
计划 | PricingPlanProps[]
| |
orientation | 'horizontal' | "horizontal" | "vertical"定价计划的方向。 |
紧凑 | false | boolean当 |
缩放 | false | boolean当 |
| 插槽 | 类型 |
|---|---|
徽章 | { ui: object; } & { plan: PricingPlanProps; } |
title | { plan: PricingPlanProps; } |
description | { plan: PricingPlanProps; } |
price | { plan: PricingPlanProps; } |
discount | { plan: PricingPlanProps; } |
billing | { ui: object; } & { plan: PricingPlanProps; } |
功能 | { plan: PricingPlanProps; } |
按钮 | { ui: object; } & { plan: PricingPlanProps; } |
页头 | { plan: PricingPlanProps; } |
主体 | { plan: PricingPlanProps; } |
页脚 | { plan: PricingPlanProps; } |
tagline | { plan: PricingPlanProps; } |
terms | { plan: PricingPlanProps; } |
default | {} |
export default defineAppConfig({
ui: {
pricingPlans: {
base: 'flex flex-col gap-y-8',
variants: {
orientation: {
horizontal: 'lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]',
vertical: ''
},
compact: {
false: 'gap-x-8'
},
scale: {
true: ''
}
},
compoundVariants: [
{
compact: false,
scale: true,
class: 'lg:gap-x-13'
}
]
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pricingPlans: {
base: 'flex flex-col gap-y-8',
variants: {
orientation: {
horizontal: 'lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]',
vertical: ''
},
compact: {
false: 'gap-x-8'
},
scale: {
true: ''
}
},
compoundVariants: [
{
compact: false,
scale: true,
class: 'lg:gap-x-13'
}
]
}
}
})
]
})