定价方案列表

GitHub
在响应式网格布局中显示定价计划列表。

用法

PricingPlans 组件提供了一个灵活的布局，可以通过默认插槽或 plans prop 来显示一系列 PricingPlan 组件。

<template>
  <UPricingPlans>
    <UPricingPlan
      v-for="(plan, index) in plans"
      :key="index"
      v-bind="plan"
    />
  </UPricingPlans>
</template>
网格列将根据计划的数量自动计算，这适用于 plans prop，也适用于默认插槽。

计划

将 plans prop 用作具有 PricingPlan 组件属性的对象数组。

个人版
专为独立开发者定制。
$249
  • 一位开发者
  • 终身访问
创业版
最适合小型团队。
$499
  • 最多 5 位开发者
  • Solo 版本的所有功能
组织
对大型团队和组织而言是理想选择。
$999
  • 最多 20 位开发者
  • Startup 版本的所有功能
<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

使用 orientation prop 来更改 PricingPlans 的方向。默认为 horizontal。

个人版
专为独立开发者定制。
  • 一位开发者
  • 终身访问
$249
创业版
最适合小型团队。
  • 最多 5 位开发者
  • Solo 版本的所有功能
$499
组织
对大型团队和组织而言是理想选择。
  • 最多 20 位开发者
  • Startup 版本的所有功能
$999
<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 prop 而不是默认插槽时，计划的 orientation 会自动反转，horizontal 变为 vertical，反之亦然。

紧凑

使用 compact prop 来减小计划之间的填充，当其中一个计划被缩放时，以获得更好的视觉平衡。

个人版
专为独立开发者定制。
$249
  • 一位开发者
  • 终身访问
创业版
最适合小型团队。
$499
  • 最多 5 位开发者
  • Solo 版本的所有功能
组织
对大型团队和组织而言是理想选择。
$999
  • 最多 20 位开发者
  • Startup 版本的所有功能
<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 prop 来调整计划之间的间距，当其中一个计划被缩放时，以获得更好的视觉平衡。

个人版
专为独立开发者定制。
$249
  • 一位开发者
  • 终身访问
创业版
最适合小型团队。
$499
  • 最多 5 位开发者
  • Solo 版本的所有功能
组织
对大型团队和组织而言是理想选择。
$999
  • 最多 20 位开发者
  • Startup 版本的所有功能
<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>

示例

尽管这些示例使用Nuxt Content，但这些组件可以与任何内容管理系统集成。

在页面内

在页面中使用 PricingPlans 组件来创建定价页面

pages/pricing/index.vue
<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 进行获取。

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

plans

PricingPlanProps[]

orientation

'horizontal'

"vertical" | "horizontal"

定价计划的方向。

紧凑

false

boolean

当为 true 时，计划将显示为无间隙。

scale

false

boolean

当为 true 时，计划将显示为更大的间隙。当一个计划被缩放时很有用。不适用于 compact。

插槽

插槽类型
default

{}

主题

app.config.ts
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'
        }
      ]
    }
  }
})
vite.config.ts
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'
            }
          ]
        }
      }
    })
  ]
})

更新日志

5cb65— 特性：导入 @nuxt/ui-pro 组件

PricingPlan

一个可定制的定价计划，用于在定价页面中显示。

PricingTable

一个响应式定价表组件，用于显示具有功能比较的分级定价计划。