定价计划列表PRO

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

用法

PricingPlans 组件提供灵活的布局，可以使用默认插槽或 plans 属性显示 PricingPlan 组件列表。

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

计划

使用 plans 属性作为对象数组，其中包含 PricingPlan 组件的属性。

个人版
专为独立开发者量身定制。
$249
  • 一名开发者
  • 终身访问
创业版
最适合小型团队。
$499
  • 最多 5 名开发者
  • 包含个人版的所有功能
组织版
非常适合大型团队和组织。
$999
  • 最多 20 名开发者
  • 包含创业版的所有功能
<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。

个人版
专为独立开发者量身定制。
  • 一名开发者
  • 终身访问
$249
创业版
最适合小型团队。
  • 最多 5 名开发者
  • 包含个人版的所有功能
$499
组织版
非常适合大型团队和组织。
  • 最多 20 名开发者
  • 包含创业版的所有功能
$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 属性而不是默认插槽时，计划的方向会自动反转，horizontal 变为 vertical，反之亦然。

紧凑

使用 compact 属性可以减少计划之间的内边距，当其中一个计划被放大时，可以获得更好的视觉平衡。

个人版
专为独立开发者量身定制。
$249
  • 一名开发者
  • 终身访问
创业版
最适合小型团队。
$499
  • 最多 5 名开发者
  • 包含个人版的所有功能
组织版
非常适合大型团队和组织。
$999
  • 最多 20 名开发者
  • 包含创业版的所有功能
<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 属性调整计划之间的间距，当其中一个计划被放大时，可以获得更好的视觉平衡。

个人版
专为独立开发者量身定制。
$249
  • 一名开发者
  • 终身访问
创业版
最适合小型团队。
$499
  • 最多 5 名开发者
  • 包含个人版的所有功能
组织版
非常适合大型团队和组织。
$999
  • 最多 20 名开发者
  • 包含创业版的所有功能
<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

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

方向

'horizontal'

"horizontal" | "vertical"

compact

false

boolean

scale

false

boolean

plans

PricingPlanProps[]

插槽

插槽类型
默认

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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({
      uiPro: {
        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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        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'
            }
          ]
        }
      }
    })
  ]
})

PricingPlan

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

PricingTable

一个响应式定价表格组件，用于显示分级定价计划及功能对比。