Quick Start

This page walks you through installation, styles, global/on-demand usage, i18n integration and minimal examples.

Install

npm i @castor-ui/castor-antdv ant-design-vue

The component library depends on Ant Design Vue 4.x and Vue3.

Basic usage

After global registration, you can directly use the three components in the template:

// main.ts
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

import CastorAntdv from '@castor-ui/castor-antdv'
import '@castor-ui/castor-antdv/style.css'

import App from './App.vue'

const app = createApp(App)
app.use(Antd)
app.use(CastorAntdv)
app.mount('#app')

On-demand

You can also import only the components you need:

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

import { CaCommonTable, CaCommonQuery, CaCommonForm } from '@castor-ui/castor-antdv'
import '@castor-ui/castor-antdv/style.css'

const app = createApp(App)
app.use(Antd)
app.component('CaCommonTable', CaCommonTable)
app.component('CaCommonQuery', CaCommonQuery)
app.component('CaCommonForm', CaCommonForm)

i18n

The component library supports passing in the project's t function and locale:

import { createApp } from 'vue'
import CastorAntdv, { setCastorAntdvLocale, provideI18n } from '@castor-ui/castor-antdv'

// Example with vue-i18n (pseudo code)
// const i18n = createI18n({ legacy: false, locale: 'en-US', messages })

createApp(App)
  // .use(i18n)
  .use(CastorAntdv, {
    i18n: {
      // t: i18n.global.t, // Pass in your t function
      locale: 'en-US'      // Optional, default is zh-CN
    }
  })
  .mount('#app')

// Can also be done at runtime:
// provideI18n(app, i18n.global.t)
// setCastorAntdvLocale('zh-CN')

Minimal examples

Here are the minimal runnable examples of the three core components, with types coming from the package definition for complete type hinting.

通用表格 CaCommonTable

<script setup lang="ts">
import { computed } from 'vue'
import type { TableField } from '@castor-ui/castor-antdv'

const columns = computed<TableField[]>(() => [
  { type: 'index', label: '#', dataField: '__index__' },
  { type: 'default', label: 'Name', dataField: 'name' },
  { type: 'status', label: 'Status', dataField: 'status', extendProps: { options: [
    { label: 'Enabled', value: true },
    { label: 'Disabled', value: false }
  ]}}
])

const dataSource = [
  { id: 1, name: 'Alice', status: true },
  { id: 2, name: 'Bob', status: false }
]
</script>

<template>
  <CaCommonTable :columns="columns" :data-source="dataSource" :loading="false" title="Users" />
</template>

通用查询 CaCommonQuery

<script setup lang="ts">
import { reactive, computed } from 'vue'
import type { QueryField } from '@castor-ui/castor-antdv'

const model = reactive({ keyword: '' })

const fields = computed<QueryField[]>(() => [
  { type: 'default', label: '关键字', dataField: 'keyword', columnSpan: 8 },
])
</script>

<template>
  <CaCommonQuery :model="model" :fields="fields" />
</template>

通用表单 CaCommonForm

<script setup lang="ts">
import { reactive, computed } from 'vue'
import type { FormField } from '@castor-ui/castor-antdv'

const model = reactive({ name: '', status: true })

const fields = computed<FormField[]>(() => [
  { type: 'text', label: '名称', dataField: 'name', columnSpan: 12 },
  { type: 'switch', label: '启用', dataField: 'status', columnSpan: 12 },
])
</script>

<template>
  <CaCommonForm title="编辑" operate-type="add" :model="model" :fields="fields" />
</template>

常见问题

• 样式不生效？请确认已引入 ant-design-vue/dist/reset.css 与 @castor-ui/castor-antdv/style.css。
• 类型报错？请确认使用的是 Vue3 + TS，且 node_modules/@castor-ui/castor-antdv/es/types 能被解析。
• 国际化不生效？若未传入 t 函数，组件将使用内置文案；也可调用 setCastorAntdvLocale 切换语言。