Back to Details

avue-form

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:
  • Install and set up Avue-form in a Vue project
  • Use Avue-form components in Vue applications
  • Configure form options and columns
  • Handle form validation
  • Use form events and methods
  • Customize form components
  • Understand Avue-form API and methods
  • Troubleshoot Avue-form issues
当用户有以下需求时，可使用本技能：
  • 在Vue项目中安装和设置Avue-form
  • 在Vue应用中使用Avue-form组件
  • 配置表单选项与列
  • 处理表单验证
  • 使用表单事件与方法
  • 自定义表单组件
  • 了解Avue-form的API与方法
  • 排查Avue-form相关问题

How to use this skill

如何使用本技能

This skill is organized to match the Avue-form official documentation structure (https://avuejs.com/form/form-doc.html). When working with Avue-form:
  1. Identify the topic from the user's request:
    • Installation/安装 → 
      examples/components/installation.md
    • Basic Usage/基础用法 → 
      examples/components/basic-usage.md
    • Configuration/配置 → 
      examples/components/configuration.md
    • Features/功能特性 → 
      examples/features/
    • API/API 文档 → 
      api/
  2. Load the appropriate example file from the 
    examples/
    directory:
    Components (组件):
    • examples/components/intro.md
      - Introduction to Avue-form
    • examples/components/installation.md
      - Installation guide
    • examples/components/basic-usage.md
      - Basic usage
    • examples/components/configuration.md
      - Configuration
    • examples/components/options.md
      - Form options
    • examples/components/columns.md
      - Form columns
    • examples/components/validation.md
      - Form validation
    • examples/components/events.md
      - Form events
    • examples/components/methods.md
      - Form methods
    Features (功能特性):
    • examples/features/dynamic-form.md
      - Dynamic form
    • examples/features/form-layout.md
      - Form layout
    • examples/features/form-rules.md
      - Form rules
    • examples/features/form-submit.md
      - Form submit
    • examples/features/form-reset.md
      - Form reset
    • examples/features/custom-components.md
      - Custom components
    • examples/features/form-group.md
      - Form group
    • examples/features/form-tabs.md
      - Form tabs
  3. Follow the specific instructions in that example file for syntax, structure, and best practices
    Important Notes:
    • Avue-form is based on Vue
    • Components use Vue syntax
    • Examples include both Options API and Composition API
    • Each example file includes key concepts, code examples, and key points
  4. Reference API documentation in the 
    api/
    directory when needed:
    • api/form-api.md
      - Form component API
    • api/options-api.md
      - Options API
    • api/columns-api.md
      - Columns API
    • api/events-api.md
      - Events API
    • api/methods-api.md
      - Methods API
  5. Use templates from the 
    templates/
    directory:
    • templates/installation.md
      - Installation templates
    • templates/basic-form.md
      - Basic form templates
    • templates/configuration.md
      - Configuration templates
本技能的结构与Avue-form官方文档（https://avuejs.com/form/form-doc.html）保持一致。使用Avue-form时：
  1. 从用户请求中确定主题：
    • 安装 → 
      examples/components/installation.md
    • 基础用法 → 
      examples/components/basic-usage.md
    • 配置 → 
      examples/components/configuration.md
    • 功能特性 → 
      examples/features/
    • API文档 → 
      api/
  2. 从
    examples/
    目录中加载对应的示例文件    ：
    组件:
    • examples/components/intro.md
      - Avue-form介绍
    • examples/components/installation.md
      - 安装指南
    • examples/components/basic-usage.md
      - 基础用法
    • examples/components/configuration.md
      - 配置说明
    • examples/components/options.md
      - 表单选项
    • examples/components/columns.md
      - 表单列
    • examples/components/validation.md
      - 表单验证
    • examples/components/events.md
      - 表单事件
    • examples/components/methods.md
      - 表单方法
    功能特性:
    • examples/features/dynamic-form.md
      - 动态表单
    • examples/features/form-layout.md
      - 表单布局
    • examples/features/form-rules.md
      - 表单规则
    • examples/features/form-submit.md
      - 表单提交
    • examples/features/form-reset.md
      - 表单重置
    • examples/features/custom-components.md
      - 自定义组件
    • examples/features/form-group.md
      - 表单分组
    • examples/features/form-tabs.md
      - 表单标签页
  3. 遵循示例文件中的具体说明，包括语法、结构与最佳实践
    重要提示:
    • Avue-form基于Vue开发
    • 组件使用Vue语法
    • 示例包含Options API和Composition API两种写法
    • 每个示例文件均包含核心概念、代码示例与关键点
  4. 必要时参考
    api/
    目录下的API文档    :
    • api/form-api.md
      - 表单组件API
    • api/options-api.md
      - 选项API
    • api/columns-api.md
      - 列API
    • api/events-api.md
      - 事件API
    • api/methods-api.md
      - 方法API
  5. 使用
    templates/
    目录下的模板    :
    • templates/installation.md
      - 安装模板
    • templates/basic-form.md
      - 基础表单模板
    • templates/configuration.md
      - 配置模板

1. Understanding Avue-form

1. 了解Avue-form

Avue-form is a Vue form component library that provides rich form controls and configuration options.
Key Concepts:
  • Form Component: Main form component
  • Options: Form configuration options
  • Columns: Form field definitions
  • Validation: Form validation rules
  • Events: Form events
  • Methods: Form methods
Avue-form是一款Vue表单组件库，提供丰富的表单控件与配置选项。
核心概念:
  • Form Component: 主表单组件
  • Options: 表单配置选项
  • Columns: 表单项定义
  • Validation: 表单验证规则
  • Events: 表单事件
  • Methods: 表单方法

2. Installation

2. 安装

Using npm:
bash
npm install @avue/form
Using yarn:
bash
yarn add @avue/form
Using pnpm:
bash
pnpm add @avue/form
使用npm:
bash
npm install @avue/form
使用yarn:
bash
yarn add @avue/form
使用pnpm:
bash
pnpm add @avue/form

3. Basic Setup

3. 基础配置

javascript
// main.js
import Vue from 'vue'
import Avue from '@avue/form'
import '@avue/form/lib/theme-default/index.css'

Vue.use(Avue)
vue
<template>
  <avue-form :option="option" v-model="form"></avue-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      option: {
        column: [
          {
            label: 'Name',
            prop: 'name',
            type: 'input'
          }
        ]
      }
    }
  }
}
</script>
javascript
// main.js
import Vue from 'vue'
import Avue from '@avue/form'
import '@avue/form/lib/theme-default/index.css'

Vue.use(Avue)
vue
<template>
  <avue-form :option="option" v-model="form"></avue-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      option: {
        column: [
          {
            label: 'Name',
            prop: 'name',
            type: 'input'
          }
        ]
      }
    }
  }
}
</script>

Doc mapping (one-to-one with official documentation)

文档映射（与官方文档一一对应）

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the 
examples/
directory (see mapping above).
To use examples:
  • Identify the topic from the user's request
  • Load the appropriate example file from the mapping above
  • Follow the instructions, syntax, and best practices in that file
  • Adapt the code examples to your specific use case
To use templates:
  • Reference templates in 
    templates/
    directory for common scaffolding
  • Adapt templates to your specific needs and coding style
本技能包含与官方文档结构匹配的详细示例，所有示例均位于
examples/
目录中（参见上述映射关系）。
使用示例的方法:
  • 从用户请求中确定主题
  • 根据上述映射加载对应的示例文件
  • 遵循文件中的说明、语法与最佳实践
  • 根据具体需求调整代码示例
使用模板的方法:
  • 参考
    templates/
    目录下的模板搭建通用框架
  • 根据具体需求与编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the 
api/
directory, organized to match the official Avue-form API documentation structure:
详细的API文档位于
api/
目录中，结构与官方Avue-form API文档保持一致:

Form Component API (
api/form-api.md
)

表单组件API (
api/form-api.md
)

  • Form component props
  • Form component events
  • Form component slots
  • 表单组件属性
  • 表单组件事件
  • 表单组件插槽

Options API (
api/options-api.md
)

选项API (
api/options-api.md
)

  • Form options configuration
  • Option properties
  • Option methods
  • 表单选项配置
  • 选项属性
  • 选项方法

Columns API (
api/columns-api.md
)

列API (
api/columns-api.md
)

  • Column definitions
  • Column properties
  • Column types
  • 列定义
  • 列属性
  • 列类型

Events API (
api/events-api.md
)

事件API (
api/events-api.md
)

  • Form events
  • Event handlers
  • Event parameters
  • 表单事件
  • 事件处理器
  • 事件参数

Methods API (
api/methods-api.md
)

方法API (
api/methods-api.md
)

  • Form methods
  • Method parameters
  • Method return values
To use API reference:
  1. Identify the API you need help with
  2. Load the corresponding API file from the 
    api/
    directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the 
    examples/
    directory
  • 表单方法
  • 方法参数
  • 方法返回值
使用API参考的方法:
  1. 确定所需的API
  2. 从
    api/
    目录中加载对应的API文件
  3. 查找API签名、参数、返回类型与示例
  4. 参考链接的示例文件获取详细使用模式
  5. 所有API文件均包含指向
    examples/
    目录中相关示例文件的链接

Best Practices

最佳实践

  1. Configure options properly: Set up form options correctly
  2. Define columns clearly: Define form columns with proper types
  3. Handle validation: Use validation rules appropriately
  4. Handle events: Use form events for interactions
  5. Use methods: Leverage form methods for operations
  6. Customize components: Customize components when needed
  7. Follow Vue patterns: Follow Vue.js best practices
  1. 正确配置选项：合理设置表单选项
  2. 清晰定义列：为表单项设置正确的类型
  3. 处理验证逻辑：合理使用验证规则
  4. 处理事件：利用表单事件实现交互
  5. 使用方法：借助表单方法执行操作
  6. 自定义组件：必要时自定义组件
  7. 遵循Vue规范：遵循Vue.js最佳实践

Resources

资源

Keywords

关键词

Avue-form, avue-form, @avue/form, Vue form, form component, 表单组件, 表单配置, 表单验证, 表单事件, 表单方法, form options, form columns, form validation, form events, form methods, dynamic form, form layout, form rules, form submit, form reset, custom components, form group, form tabs
Avue-form, avue-form, @avue/form, Vue form, form component, 表单组件, 表单配置, 表单验证, 表单事件, 表单方法, form options, form columns, form validation, form events, form methods, dynamic form, form layout, form rules, form submit, form reset, custom components, form group, form tabs