Pro Naive UI

https://naive-ui.pro-components.cn/zh-CN/
Admin
A Vue 3 component library built on Naive UI providing high-quality UI components and utilities for...
Tokens:43,198
Snippets:400
Trust Score:2
Update:4 months ago
Show doc for...
Tokens:
Raw
### Use All Components in SFC after Global Install

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/docs/installation

Example of using any Pro Naive UI component in an SFC after the library has been globally installed.

```vue
<template>
  <pro-card>pro-naive-ui</pro-card>
</template>
```

--------------------------------

### Install Pro Naive UI with npm

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/docs/installation

Use npm to install the pro-naive-ui package.

```bash
npm i pro-naive-ui
```

--------------------------------

### Use ProCard in SFC with Setup Script

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/docs/installation

A concise way to use Pro Naive UI components in SFCs using the `<script setup>` syntax.

```vue
<template>
  <pro-card>pro-naive-ui</pro-card>
</template>

<script setup>
  import { ProCard } from 'pro-naive-ui'
</script>
```

--------------------------------

### Manual Global Installation of Specific Components

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/docs/installation

Manually installs only specified components (e.g., ProCard) globally using `create` for a more controlled build.

```javascript
import {
  create,
  ProCard,
} from 'pro-naive-ui'
import { createApp } from 'vue'

const proNaive = create({
  components: [ProCard]
})

const app = createApp()
app.use(proNaive)
```

--------------------------------

### ProTime Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Demonstrates the ProTime component for selecting a time.

```vue
<template>
  <pro-time
    title="时间"
    path="time"
    :field-props="nTimePickerProps"
  />
</template>
```

--------------------------------

### Global Installation of Pro Naive UI (Not Recommended)

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/docs/installation

Globally installs Pro Naive UI in the Vue app. This method is not recommended due to potential code redundancy and loss of tree-shaking capabilities.

```javascript
import proNaive from 'pro-naive-ui'
import { createApp } from 'vue'

const app = createApp(App)
app.use(proNaive)
```

--------------------------------

### ProAutoComplete Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Shows how to implement the ProAutoComplete component for input with suggestions.

```vue
<template>
  <pro-auto-complete
    title="自动填充"
    path="auto-complete"
    :field-props="nAutoCompleteProps"
  />
</template>
```

--------------------------------

### ProTextarea Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Provides an example of the ProTextarea component for multi-line text input, including field props.

```vue
<template>
  <pro-textarea
    title="文本域"
    path="textarea"
    :field-props="nInputProps"
  />
</template>
```

--------------------------------

### ProDynamicTags Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Demonstrates the ProDynamicTags component for managing dynamic tags.

```vue
<template>
  <pro-dynamic-tags
    title="动态标签"
    path="dynamic-tags"
    :field-props="nDynamicTagsProps"
  />
</template>
```

--------------------------------

### ProSelect Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Demonstrates the ProSelect component for dropdown selections.

```vue
<template>
  <pro-select
    title="下拉框"
    path="select"
    :field-props="nSelectProps"
  />
</template>
```

--------------------------------

### ProCheckbox Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Provides an example of the ProCheckbox component for boolean selection.

```vue
<template>
  <pro-checkbox
    title="复选框"
    path="checkbox"
    :field-props="nNCheckboxProps"
  />
</template>
```

--------------------------------

### ProUpload Example with Constraints

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Illustrates ProUpload with configurations for title, max size, image-only uploads, and custom callbacks for size and type errors.

```vue
<template>
  <pro-upload
    title="上传"
    path="upload"
    :field-props="{
      title:'资源上传',
      maxSize:1024 * 10,
      onlyAcceptImage:true,
      onOverSize:(data) =>{
        console.log('超出文件大小',data)
      },
      onUnAcceptType:(data) =>{
        console.log('不支持的格式',data)
      },
      ...nUploadProps
    }"
  />
</template>
```

--------------------------------

### ProModalForm Basic Usage

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Demonstrates the basic usage of the ProModalForm component. No specific setup or imports are required beyond the component itself.

```vue
<pro-modal-form></pro-modal-form>
```

--------------------------------

### ProSwitch Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Basic usage of the ProSwitch component for boolean toggling.

```vue
<template>
  <pro-switch
    title="开关"
    path="switch"
    :field-props="nSwitchProps"
  />
</template>
```

--------------------------------

### ProInputOtp Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Demonstrates the ProInputOtp component for One-Time Password input, available since version 2.2.0.

```vue
<template>
  <pro-input-otp
    title="验证码"
    path="code"
    :field-props="nInputOtpProps"
  />
</template>
```

--------------------------------

### ProSlider Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Shows the ProSlider component for selecting a value within a range.

```vue
<template>
  <pro-slider
    title="滑动选择"
    path="slider"
    :field-props="nSliderProps"
  />
</template>
```

--------------------------------

### ProInput Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Shows a basic usage of the ProInput component for text input, including passing field props.

```vue
<template>
  <pro-input
    title="名称"
    path="name"
    :field-props="nInputProps"
  />
</template>
```

--------------------------------

### ProTreeSelect Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Demonstrates how to use the ProTreeSelect component with custom field props.

```vue
<template>
  <pro-tree-select
    title="树形选择"
    path="tree-select"
    :field-props="nTreeSelectProps"
  />
</template>
```

--------------------------------

### ProTransfer Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Shows ProTransfer with custom label and value fields.

```vue
<template>
  <pro-transfer
    title="穿梭框"
    path="transfer"
    :field-props="{
      labelField:'a',
      valueField:'b',
      ...nTransferProps
    }"
  />
</template>
```

--------------------------------

### ProRate Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Basic usage of the ProRate component for star ratings.

```vue
<template>
  <pro-rate
    title="评分"
    path="rate"
    :field-props="nRateProps"
  />
</template>
```

--------------------------------

### ProDigit Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Basic usage of the ProDigit component for inputting numerical values.

```vue
<template>
  <pro-digit
    title="数字"
    path="digit"
    :field-props="nInputNumberProps"
  />
</template>
```

--------------------------------

### Parent Component Setup for ProModalForm

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Set up the ProModalForm in the parent component using createProModalForm and render it with the pro-modal-form tag.

```vue
<!-- 父组件 -->
<script setup lang="ts">
import { createProModalForm } from 'pro-naive-ui'

const modalForm = createProModalForm()
</script>

<template>
  <pro-modal-form :form="modalForm">
    <pro-input path="name" />
  </pro-modal-form>
</template>
```

--------------------------------

### ProCascader Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Illustrates the usage of the ProCascader component for hierarchical data selection.

```vue
<template>
  <pro-cascader
    title="级联选择"
    path="cascader"
    :field-props="nNCascaderProps"
  />
</template>
```

--------------------------------

### ProRadioGroup Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Shows ProRadioGroup with custom label and value fields, vertical layout, and options.

```vue
<template>
  <pro-radio-group
    title="单选框组"
    path="radio-group"
    :field-props="{
      // type: 'button',
      labelField:'a',
      valueField:'b',
      flexProps:{
        vertical:true
      },
      options:[
        {a:'北京',b:0}
      ],
      ...nRadioGroupProps
    }"
  />
</template>
```

--------------------------------

### ProPassword Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Illustrates the use of the ProPassword component for secure password input, with field props.

```vue
<template>
  <pro-password
    title="密码"
    path="password"
    :field-props="nInputProps"
  />
</template>
```

--------------------------------

### Manual Value Update with on-update-value

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

This example demonstrates manual control over value updates using the `on-update-value` event, allowing for secondary confirmation or processing of input values.

```html
<template>
  <n-form-item label="Name" required>
    <n-input :value="name" @update:value="handleNameUpdate" />
  </n-form-item>
  <n-button @click="submit">Submit</n-button>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('');

const handleNameUpdate = (value) => {
  // Perform secondary confirmation or processing
  name.value = value;
};

const submit = () => {
  console.log('Submitted name:', name.value);
};
</script>
```

--------------------------------

### ProDateRange Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Illustrates the use of ProDateRange component for selecting a date range with custom placeholders.

```vue
<template>
  <pro-date-range
    title="日期范围"
    path="date-range"
    :placeholder="['开始','结束']"
  />
</template>
```

--------------------------------

### ProCheckboxGroup Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Demonstrates the usage of ProCheckboxGroup with custom label and value fields, and vertical flex layout.

```vue
<template>
  <pro-checkbox-group
    title="复选框组"
    path="checkbox-group"
    :field-props="{
      labelField:'a',
      valueField:'b',
      flexProps:{
        vertical:true
      },
      options:[
        {a:'北京',b:0}
      ],
      ...nCheckboxGroupProps
    }"
  />
</template>
```

--------------------------------

### Polling with pollingInterval

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/use-request

Enable polling by setting `options.pollingInterval`. `useRequest` will periodically trigger the `service`. Use `cancel` to stop polling or `run`/`runAsync` to start it.

```javascript
const { loading, run, cancel } = useRequest(service, {
  pollingInterval: 2000 // Poll every 2 seconds
});

// To start polling
run();
// To stop polling
cancel();
```

--------------------------------

### Developing Custom ProJsonCode Component

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Example of developing a completely new component (`pro-json-code`) from scratch to integrate into various form types like pro-form, pro-search-form, and pro-modal-form.

```json
{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "declaration": true,
    "skipLibCheck": true
  }
}
```

--------------------------------

### UMD Basic Demo with ProCard

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/docs/installation

Demonstrates basic usage of Pro Naive UI with Vue and ProCard via UMD CDN links. Ensure to specify versions for stability.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
    <!-- 会使用最新版本，你最好指定一个版本 -->
    <script src="https://unpkg.com/naive-ui"></script>
    <!-- 会使用最新版本，你最好指定一个版本 -->
    <script src="https://unpkg.com/pro-naive-ui"></script>
  </head>
  <body>
    <div id="app">
      <pro-card title="title">
        {{ message }}
      </pro-card>
    </div>
    <script>
      const App = {
        setup() {
          return {
            message: 'pro-naive'
          }
        }
      }
      const app = Vue.createApp(App)
      app.use(proNaive)
      app.mount('#app')
    </script>
  </body>
</html>
```

--------------------------------

### ProLayout Basic Demo

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/layout

This is a basic demonstration of the ProLayout component. It showcases the default layout and its responsiveness.

```vue
<template>
  <n-config-provider :theme-overrides="{ common: { borderRadius: '0px' } }">
    <n-layout style="height: 100vh;">
      <n-layout-header style="height: 50px;">
        <div class="flex h-full items-center justify-center">Header</div>
      </n-layout-header>
      <n-layout has-sider position="absolute">
        <n-layout-sider collapse-level="0" show-trigger="bar" width="224" collapsed-width="58">
          <div class="flex h-full items-center justify-center">Sider</div>
        </n-layout-sider>
        <n-layout-content>
          <div class="flex h-full items-center justify-center">Content</div>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { NConfigProvider, NLayout, NLayoutHeader, NLayoutSider, NLayoutContent } from 'naive-ui'
</script>

<style scoped>
.n-layout-header {
  background-color: rgba(128, 128, 128, 0.2);
  padding: 5px 0;
}
.n-layout-sider {
  background-color: rgba(128, 128, 128, 0.2);
  padding: 10px 0;
}
.n-layout-content {
  background-color: rgba(128, 128, 128, 0.15);
  padding: 10px;
}
</style>
```

--------------------------------

### Manual Import of Components and Locale

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/docs/installation

Demonstrates manual import of specific components (ProConfigProvider, ProCard) and locale (zhCN) for tree-shaking. Useful for customizing builds.

```vue
<script>
  import { defineComponent } from 'vue'
  import { ProConfigProvider, ProCard } from 'pro-naive-ui'
  // locale
  import { zhCN } from 'pro-naive-ui'

  export default defineComponent({
    components: {
      ProConfigProvider,
      ProCard,
    },
    setup() {
      return {
        zhCN,
      }
    }
  })
</script>

<template>
  <pro-config-provider :locale="zhCN">
    <pro-card>pro-naive-ui</pro-card>
  </pro-config-provider>
</template>

<style>
  body {
    background: black;
  }
</style>
```

--------------------------------

### Developing Custom ProInput Component

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/field

Illustrates how to create a custom component by extending `pro-input`, demonstrating encapsulation for reuse.

```html
<template>
  <pro-input label="Name" path="name" :rules="[{ required: true, message: 'Please input name', trigger: 'blur' }]"/>
  <n-button type="primary">Submit</n-button>
</template>

<script setup>
import ProInput from './ProInput.vue'; // Assuming ProInput is in a separate file
</script>
```

--------------------------------

### ProModalForm with Size

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Illustrates setting the overall size of the ProModalForm. Available options are 'small', 'medium', and 'large'.

```vue
<pro-modal-form size="large"></pro-modal-form>
```

--------------------------------

### Using createProModalForm with Open and Close

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Shows how to use the `open` and `close` methods provided by the `createProModalForm` controller to control the visibility of the modal form.

```vue
const proModalForm = createProModalForm()

function openModal() {
  proModalForm.open()
}

function closeModal() {
  proModalForm.close()
}
```

--------------------------------

### Create ProModalForm Controller

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Demonstrates the creation of a ProModalForm controller using `createProModalForm`. This controller provides methods to manage the modal's state and form interactions.

```vue
const proModalForm = createProModalForm()
const { open, close, show, values, submit, validate, resetFieldValue, restoreFieldValue } = proModalForm
```

--------------------------------

### Using createProModalForm with Form Events

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Demonstrates how to subscribe to form events like `onReset`, `onSubmit`, and `onSubmitFailed` using methods provided by the `createProModalForm` controller.

```vue
const proModalForm = createProModalForm()

proModalForm.onReset(() => {
  console.log('Form reset')
})

proModalForm.onSubmit(({ values, warnings }) => {
  console.log('Form submitted with values:', values, 'and warnings:', warnings)
})

proModalForm.onSubmitFailed((errors) => {
  console.error('Form submission failed:', errors)
})
```

--------------------------------

### Use ProCard in SFC (Direct Import)

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/docs/installation

Recommended method for using Pro Naive UI components in Single File Components (SFCs) by directly importing them. This ensures only used components are bundled.

```vue
<template>
  <pro-card>pro-naive-ui</pro-card>
</template>

<script>
  import { defineComponent } from 'vue'
  import { ProCard } from 'pro-naive-ui'

  export default defineComponent({
    components: {
      ProCard
    }
  })
</script>
```

--------------------------------

### ProModalForm with Edit Form Echo

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Shows how to populate the ProModalForm with existing data for editing purposes. The 'model' prop is used to provide the initial values.

```vue
<pro-modal-form :model="{
  name: 'naive-ui',
  url: 'https://naive-ui.com',
}"></pro-modal-form>
```

--------------------------------

### Using createProModalForm with Set Initial Values

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Demonstrates using the `setInitialValue` and `setInitialValues` methods from the `createProModalForm` controller to set or update initial values for form fields.

```vue
const proModalForm = createProModalForm()

function handleSetInitialValue() {
  proModalForm.setInitialValue('fieldName', 'initialValue')
}

function handleSetInitialValues() {
  proModalForm.setInitialValues({ field1: 'value1', field2: 'value2' }, 'overwrite')
}
```

--------------------------------

### Asynchronous Data Fetching

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/form

You can use useRequest to fetch data asynchronously for your form. The example shows fetching user information.

```vue
<script setup lang="ts">
import {
  createProForm,
  ProForm,
  ProFormItem,
  ProInput,
  ProFormSubmit,
  ProFormReset,
  useRequest,
} from 'pro-naive-ui'

const proForm = createProForm({
  onSubmit: (values) => {
    console.log(values)
  },
})

const { data, loading } = useRequest(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: 'test',
        userInfo: {
          age: 18,
        },
      })
    }, 1000)
  })
})
</script>

<template>
  <pro-form :form="proForm" :loading="loading" :initial-values="data">
    <pro-form-item path="name" label="姓名" :required="true">
      <pro-input placeholder="请输入姓名" />
    </pro-form-item>
    <pro-form-item path="userInfo.age" label="年龄" :required="true">
      <pro-input />
    </pro-form-item>
    <pro-form-item>
      <pro-form-reset>重置</pro-form-reset>
      <pro-form-submit>提交</pro-form-submit>
    </pro-form-item>
  </pro-form>
</template>

```

--------------------------------

### ProCard with Default Collapse Disabled

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/card

This example shows how to disable the default collapse/expand functionality of the ProCard by setting the 'show-collapse' prop to false.

```vue
<template>
  <n-card title="卡片" :show-collapse="false">
    卡片内容
  </n-card>
</template>
```

--------------------------------

### Basic ProFormList Usage

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/form-list

Demonstrates the fundamental usage of ProFormList for entering structured list data. It includes options for adding, removing, and displaying list items.

```vue
<pro-form-list v-model:value="form.userInfo" />
```

--------------------------------

### Custom Collapse/Expand Text in ProCard

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/card

Illustrates how to customize the collapse and expand text for the ProCard. This example shows '折叠' for collapse and implies '展开' for expand.

```vue
<template>
  <n-card title="卡片">
    <template #header-extra>
      <n-button type="text">折叠</n-button>
    </template>
    卡片内容
  </n-card>
</template>
```

--------------------------------

### Child Component to Open ProModalForm

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

In a descendant component, use useInjectProModalForm to get the modal form instance and open the modal via a button click.

```vue
<!-- 后代组件 -->
<script setup lang="ts">
import { useInjectProModalForm } from 'pro-naive-ui'

const modalForm = useInjectProModalForm<{name?:string}>()!
</script>

<template>
  <n-button @click="modalForm.open">打开弹窗</n-button>
</template>
```

--------------------------------

### ProFormList API - unshift method

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/form-list

Demonstrates the usage of the `unshift` instance method to add new items to the beginning of the list.

```javascript
const formListInstance = ref<ProFormListInst | null>(null);
formListInstance.value?.unshift({ name: 'Prepended Item' });
```

--------------------------------

### ProModalForm as Inline Form

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Illustrates rendering the ProModalForm as an inline form. This changes the layout and appearance to be more compact.

```vue
<pro-modal-form :inline="true"></pro-modal-form>
```

--------------------------------

### ProFormList Validation Timing Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/form-list

Demonstrates manual validation of a ProFormList after adding an item. Manual validation is required as instance API calls do not trigger automatic validation.

```vue
<script setup lang="ts">
import type { ProFormListInst } from 'pro-naive-ui'
import { ref } from 'vue'
import { createProForm } from 'pro-naive-ui'

const formListInst = ref<ProFormListInst>()
const proForm = createProForm<{name?:string}>()

function handleClick(){
  formListInst.value!.push({....})
  // 手动校验列表
  proForm.validate('list')
}
</script>

<template>
  <pro-form :form="proForm">
    <pro-form-list ref="formListInst" path="list" required>
      ....
    </pro-form-list>
  </pro-form>
</template>
```

--------------------------------

### Basic Table Management with useNDataTable

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/use-n-data-table

Demonstrates how useNDataTable automatically manages table pagination. Pass the `tableProps` from the returned `table` object to your NDataTable component.

```javascript
import { useNDataTable } from 'pro-naive-ui';

export default defineComponent({
  setup() {
    const { table, search } = useNDataTable({
      // ... other options
    });

    return {
      table
    };
  }
});

```

--------------------------------

### ProFormList with Default New Row Values

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/form-list

Sets default values for newly added rows in ProFormList using the `creatorInitialValue` prop. This ensures that new entries start with predefined data.

```vue
<pro-form-list :creator-initial-value="() => ({ name: 'New User', age: 18 })" v-model:value="form.userInfo" />
```

--------------------------------

### Import ProDateTextConfig

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/plain

Import the configuration type for ProDateText. This defines the structure for date formatting options.

```typescript
interface ProDateTextConfig {
  /**
   * @see https://date-fns.org/v3.6.0/docs/format
   * 格式化模式，默认支持几种常用格式
   * month = MMM
   * time = HH:mm:ss
   * date = yyyy-MM-dd
   * quarter = yyyy-qqq
   * year = yyyy年(支持国际化)
   * week = YYYY-w周(支持国际化)
   * datetime = yyyy-MM-dd HH:mm:ss
   * 默认值为 datetime，你可以写 date-fns 支持的所有格式
   */
  pattern?: 'date' | 'time' | 'datetime' | 'year' | 'month' | 'quarter' | 'week' | ({} & string)
}
```

--------------------------------

### Using createProModalForm with Reset and Restore

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Shows how to use the `resetFieldValue`, `resetFieldsValue`, `restoreFieldValue`, and `restoreFieldsValue` methods from the `createProModalForm` controller to manage form field values and their states.

```vue
const proModalForm = createProModalForm()

function handleResetField() {
  proModalForm.resetFieldValue('fieldName')
}

function handleRestoreField() {
  proModalForm.restoreFieldValue('fieldName')
}
```

--------------------------------

### Nested ProFormList Example

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/form-list

Illustrates the use of nested ProFormList components to create hierarchical data structures. The component automatically handles path management for nested forms and enables cross-level linking.

```vue
<pro-form-list v-model:value="form.userInfo">
  <template #default="{ row }">
    <pro-input v-model="row.name" path="name" />
    <pro-form-list v-model:value="row.details" path="details">
      <template #default="{ row: detailRow }">
        <pro-input v-model="detailRow.title1" path="title1" />
      </template>
    </pro-form-list>
  </template>
</pro-form-list>
```

--------------------------------

### Basic Form Usage

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/form

Demonstrates the basic usage of ProForm. The placeholder for form items is generated from the title. Required fields are automatically handled.

```vue
<script setup lang="ts">
import {
  createProForm,
  ProForm,
  ProInput,
  ProFormItem,
  ProFormSubmit,
  ProFormReset,
} from 'pro-naive-ui'

const proForm = createProForm({
  // default values
  initialValues: {
    username: 'test',
    age: 18,
  },
})
</script>

<template>
  <pro-form :form="proForm">
    <pro-form-item path="username" label="用户名" :required="true">
      <pro-input placeholder="请输入用户名" />
    </pro-form-item>
    <pro-form-item path="age" label="年龄" :required="true">
      <pro-input placeholder="请输入年龄" />
    </pro-form-item>
    <pro-form-item>
      <pro-form-reset>重置</pro-form-reset>
      <pro-form-submit>提交</pro-form-submit>
    </pro-form-item>
  </pro-form>
</template>

```

--------------------------------

### Managing Request Parameters

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/use-request

The `params` returned by `useRequest` is an array containing the arguments used in the last `service` call. For example, if `run(1, 2, 3)` was called, `params` will be `[1, 2, 3]`.

```javascript
const { loading, run, params } = useRequest(service);

// Example usage:
run(1, 'example', true);
// params will be [1, 'example', true]
```

--------------------------------

### ProFormList Instance Methods

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/form-list

This section outlines the available instance methods for the ProFormList component, which allow programmatic manipulation of the list data.

```APIDOC
## ProFormList Instance Methods

The type declarations referenced are introduced as follows:

```typescript
import type { InternalPath, ProFormListInst } from 'pro-naive-ui'
```

| Name | Type | Description | Version |
|---|---|---|---|
| push | `(...items: T[]) => void` | Append data to the end. | |
| pop | `() => void` | Pop data from the end. | |
| insert | `(index: number, ...items: T[]) => void` | Insert data at a specified position. | |
| remove | `(index: number) => void` | Delete data at a specified position. | |
| shift | `() => void` | Pop data from the beginning. | |
| unshift | `(...items: T[]) => void` | Append data to the beginning. | |
| move | `(from: number, to: number) => void` | Move data from one position to another. | |
| moveUp | `(index: number) => void` | Move data up. | |
| moveDown | `(index: number) => void` | Move data down. | |
```

--------------------------------

### Custom Refresh Behavior

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/use-request

Demonstrates custom refresh behaviors, showing how to refresh using `refreshDeps` or by explicitly calling `run` with the latest ID.

```javascript
// Example using refreshDeps
const { loading: loadingDeps, run: runDeps } = useRequest(service, {
  refreshDeps: [userId],
});

// Example using run
const { loading: loadingRun, run: runExplicit } = useRequest(service, {
  manual: true
});

// To trigger refresh with latest ID using refreshDeps:
// (This happens automatically when userId changes)

// To trigger refresh with latest ID using run:
// runExplicit(latestUserId);
```

--------------------------------

### Manually Control ProCard Collapse/Expand

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/card

Shows how to manually control the collapse and expand state of a ProCard using the 'show' prop and a button to toggle it.

```vue
<template>
  <n-card :show="show" title="卡片">
    <template #header-extra>
      <n-button type="text" @click="show = !show">
        {{ show ? '收起' : '展开' }}
      </n-button>
    </template>
    卡片内容
  </n-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    return {
      show: ref(true)
    }
  }
})
</script>
```

--------------------------------

### Using createProModalForm with Submit and Validate

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/modal-form

Demonstrates using the `submit` and `validate` methods from the `createProModalForm` controller to manually trigger form submission and validation.

```vue
const proModalForm = createProModalForm()

function handleSubmit() {
  proModalForm.submit()
}

function handleValidate() {
  proModalForm.validate()
}
```

--------------------------------

### useLayoutMenu Options

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/layout

Options for the useLayoutMenu composable to integrate menu data with ProLayout.

```APIDOC
## useLayoutMenu Options

Below are the parameters passed to `useLayoutMenu`. The referenced type declarations are as follows:
```typescript
import type { MenuOption } from 'naive-ui'

type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T);
```

| Name | Type | Default Value | Description | Version |
|---|---|---|---|---|
| mode | "vertical" | "horizontal" | "sidebar" | "mixed-sidebar" | "full-content" | "two-column" | "mixed-two-column" | `-` | Layout mode | |
| menus | `MaybeRefOrGetter<MenuOption[]>` | `[]` | Menu data | |
| childrenField | `string` | `'children'` | Field name for child menus in menu data | |
```

--------------------------------

### 配置全局中文 locale

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/docs/i18n

将 `pro-config-provider` 的 `locale` 属性设置为 `zhCN` 来设定全局中文。需要从 `pro-naive-ui` 导入 `ProConfigProvider` 和 `zhCN`。

```vue
<template>
  <pro-config-provider :locale="zhCN">
    <app />
  </pro-config-provider>
</template>

<script>
  import { defineComponent } from 'vue'
  import { ProConfigProvider,zhCN } from 'pro-naive-ui'

  export default defineComponent({
    components: {
      ProConfigProvider
    },
    setup() {
      return {
        zhCN,
      }
    }
  })
</script>
```

--------------------------------

### Importing DrawerProps Type

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/drawer-form

Demonstrates how to import the DrawerProps type from 'naive-ui' for use with the ProDrawerForm component's drawerProps.

```typescript
import type { DrawerProps } from 'naive-ui'
```

--------------------------------

### Import ProTagsConfig

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/plain

Import the configuration type for ProTags. This is used to define the structure for tag display configurations.

```typescript
import type { ProTagsConfig } from 'pro-naive-ui'
```

--------------------------------

### Import ProCopyableTextConfig

Source: https://naive-ui.pro-components.cn/zh-CN/os-theme/components/plain

Import the configuration type for ProCopyableText. This is used to define options for the copyable text component.

```typescript
import { ProCopyableTextConfig } from 'pro-naive-ui'
```
Tokens:
Raw