### Avue Quick Start Guide

Source: https://github.com/yuchenhui/avue2/blob/main/README.md

Covers the initial steps for using the Avue framework, including installation procedures and basic usage guidelines. This section is essential for new users to get started with the framework.

```zh
- [介绍](home.md) - Avue 框架介绍
- [快速上手](installation.md) - 安装和基本使用
- [全局配置](global.md) - 全局配置选项
- [全局api](api.md) - 全局 API 函数
- [国际化](locale.md) - 多语言切换设置
```

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

### Avue Installation Guide

Source: https://github.com/yuchenhui/avue2/blob/main/home.md

Provides instructions on how to install and get started with Avue, a low-code frontend framework.

```Markdown
Please refer to the [Quick Start](https://v2.avuejs.com/docs/installation.html) chapter.
```

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

### Install Avue with Vue CLI

Source: https://github.com/yuchenhui/avue2/blob/main/installation.md

Create a new project using Vue CLI and install Avue through its dependency management interface.

```bash
# Install Vue Cli
npm install -g @vue/cli

# Create a project
vue create hello-world

# After creation, open the graphical interface via the command, as shown below
vue ui

# In the graphical interface, click Dependencies -> Install Dependencies, then add @smallwei/avue to the dependencies.
```

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

### Install Avue via CDN

Source: https://github.com/yuchenhui/avue2/blob/main/installation.md

Include Avue using CDN links in an HTML file. Access components via the global AVUE variable. Requires Vue and ElementUI.

```html
<!-- Import CSS files -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css"
/>
<link 
  rel="stylesheet" 
  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<!-- Import relevant JS files -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/avue.min.js"></script>

<div id="app"></div>
<script>
  // Render a button component under the #app tag
  new Vue({
    el:'app',
    data(){
      return{}
    }
  });
  app.use(AVUE);
</script>
```

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

### Install Avue with npm/yarn

Source: https://github.com/yuchenhui/avue2/blob/main/installation.md

Install Avue using npm or yarn in an existing Vue project. ElementUI is a required dependency.

```js
//Install ElementUI dependency first
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(ElementUI)
Vue.use(Avue);
```

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

### Avue with Axios for Dictionary Usage

Source: https://github.com/yuchenhui/avue2/blob/main/installation.md

Configure Avue to use Axios for dictionary data fetching. For older versions, set window.axios.

```js
import axios from 'axios'
Vue.use(Avue,{axios})

// For older versions:
// main.js
// window.axios = axios
```

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

### Avue Setup with Axios

Source: https://github.com/yuchenhui/avue2/blob/main/crud/dic.md

Demonstrates how to integrate Axios with Avue for data fetching. This setup is crucial for network dictionary configurations. Ensure Axios is installed and imported.

```js
import axios from 'axios'
Vue.use(Avue,{axios})

// For older versions:
// window.axios = axios
```

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

### Avue DialogForm Usage Examples

Source: https://github.com/yuchenhui/avue2/blob/main/default/dialog-form.md

Demonstrates how to trigger modal and drawer forms using the $DialogForm service. Includes examples for showing a basic modal form, a drawer form, and a modal form pre-populated with data.

```javascript
export default {
  data() {
      return {
        option: {
          submitText: '完成',
          span:24,
          column: [
            {
              label: "姓名",
              prop: "name",
              rules: [{
                required: true,
                message: "请输入姓名",
                trigger: "blur"
              }],
            },
            {
              label: "年龄",
              prop: "age"
            }
          ]
        },
        form: {}
      }
    },
    methods: {
      showDialog(type) {
        this.$DialogForm.show({
          title: '弹窗页面',
          width: '30%',
          type:type,
          menuPosition:'right',
          option: this.option,
          beforeClose: (done) => {
            this.$message.success('关闭前方法')
            done()
          },
          callback:(res)=>{
            console.log(res.data);
            this.$message.success('关闭等待框')
            setTimeout(() => {
              res.done()
              setTimeout(() => {
                this.$message.success('关闭弹窗')
                res.close()
              }, 1000)
            }, 1000)
          }
        })
      },
      showDialog1() {
        this.$DialogForm.show({
          title: '弹窗页面（带上数据)',
          width: '50%',
          data: { name: 'small',age:18 },
          option: this.option,
          callback:(res)=>{
            console.log(res.data);
            this.$message.success('关闭等待框')
            setTimeout(() => {
              res.done()
              setTimeout(() => {
                this.$message.success('关闭弹窗')
                res.close()
              }, 1000)
            }, 1000)
          }
        })
      }
    }
  }
}
```

```html
<el-button type="primary" @click="showDialog"> 弹窗表单</el-button>
<el-button type="primary" @click="showDialog('drawer')"> 抽屉表单</el-button>
<el-button type="success" @click="showDialog1"> 弹窗表单（带上数据）</el-button>
```

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

### Basic Pagination Setup

Source: https://github.com/yuchenhui/avue2/blob/main/crud/page.md

Demonstrates the fundamental setup of pagination in Avue2. It shows how to bind page properties like `currentPage`, `pageSize`, and `total` to the `avue-crud` component and control them via buttons.

```vue
<p>
  页码:{{page.currentPage}}
  <el-button type="primary" @click="page.currentPage=page.currentPage+1">页码+1</el-button>
</p>
<p>
  条数:{{page.pageSize}}
  <el-button type="primary" @click="page.pageSize=page.pageSize+10">条数+10</el-button>
</p>
<p>
  总数:{{page.total}}
  <el-button type="primary" @click="page.total=page.total+10">总页数+10</el-button>
</p>
<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>

<script>
export default {
  data() {
    return {
      page:{
        total: 1000, 
        currentPage: 1, 
        pageSize: 10
      },
      data: [],
      option: {
        header:false,
        column:[
          {
            label:'姓名',
            prop:'name'
          }
        ]
      }
    }
  }
}
</script>
```

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

### Avue File Upload Setup

Source: https://github.com/yuchenhui/avue2/blob/main/form/form-upload.md

Demonstrates how to import and use the Avue upload component with Axios. This setup is necessary for making HTTP requests for file uploads.

```js
//使用上传附件需要引入axios
import axios from "axios";
Vue.use(Avue, { axios });
```

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

### Avue Login Component Examples

Source: https://github.com/yuchenhui/avue2/blob/main/default/login.md

Demonstrates the usage of the Avue Login component with different configurations for various login scenarios. Includes examples for standard user login, image verification code login, phone number login, and customization of fields and margins.

```html
<div>
  <h2>普通用户登录</h2>
  <avue-login :option="option" @submit="submit">
  </avue-login>
  <hr />
  <h2>图片验证码登录</h2>
  <avue-login :option="option1" @refresh="refresh" :codesrc="codesrc" @submit="submit">
  </avue-login>
  <hr />
  <h2>手机号登录</h2>
  <avue-login :option="option2" @submit="submit" @send="send" v-model="form">
  </avue-login>
  <hr />
  <h2>改变字段</h2>
  <avue-login :option="option4" @submit="submit" @send="send">
  </avue-login>
  <hr />
  <h2>调整边距</h2>
  <avue-login :option="option3" @submit="submit" @send="send">
  </avue-login>
</div>
```

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

### Avue Form Configuration Example

Source: https://github.com/yuchenhui/avue2/blob/main/crud/default.md

Shows a configuration object for an Avue form, defining fields like file upload and array input. It includes properties for data types, input types, HTTP configurations for uploads, and display tips.

```javascript
{
  dataType: 'string',
  type: 'upload',
  propsHttp: {
    home:'https://avuejs.com',
    res: 'data'
  },
  span: 24,
  listType: 'picture-card',
  tip: '只能上传jpg/png文件，且不超过500kb',
  action: '/imgupload'
}, {
  label: '数组',
  prop: 'array',
  dataType: 'number',
  propsHttp: {
    home:'http://demo.cssmoban.com',
  },
  type: 'array'
}
```

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

### Icon Examples

Source: https://github.com/yuchenhui/avue2/blob/main/component/input-icon.md

Demonstrates various icon categories available in Avue, including parking, basic, directional, and symbol icons. Each icon is represented by a string value.

```javascript
{
  icon: {
    list: [
      {
        label: '停车场',
        value: '#icon-tingchechang'
      }
    ]
  },
  basicIcons: {
    label: '基本图标',
    list: ['el-icon-info', 'el-icon-error', 'el-icon-error', 'el-icon-success', 'el-icon-warning', 'el-icon-question']
  },
  directionIcons: {
    label: '方向图标',
    list: ['el-icon-info', 'el-icon-back', 'el-icon-arrow-left', 'el-icon-arrow-down', 'el-icon-arrow-right', 'el-icon-arrow-up']
  },
  symbolIcons: {
    label: '符号图标',
    list: ['el-icon-plus', 'el-icon-minus', 'el-icon-close', 'el-icon-check']
  }
}
```

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

### Avue CRUD Component Usage Example

Source: https://github.com/yuchenhui/avue2/blob/main/crud/crud-fun.md

This example demonstrates how to use the Avue CRUD component with the custom mixin. It shows the template structure, binding the mixin's data and events, and configuring the component via an options file and API definitions.

```js
@/page/system/params.vue
<template>
  <basic-container>
    <avue-crud v-bind="bindVal"
               v-on="onEvent"
               v-model="form"
               :page.sync="page">
    </avue-crud>
  </basic-container>
</template>

<script>
export default window.$crudCommon({
  data () {
    return {}
  },
  methods: {
    //列表前操作方法
    listBefore(){},

    //列表后操作方法
    listAfter(){},

    //新增前操作方法
    addBefore () {

```

```js
@/option/system/params.js
export default (safe)=>{
  //safe => vue的this对象
  return {
    ...
    column:[]
    ....
  }
}
```

```js
@/api/system/params.js
export const list = ()=>{
}
export const add = ()=>{
}
export const del = ()=>{
}
export const update = ()=>{
}
```

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

### Amap API Setup

Source: https://github.com/yuchenhui/avue2/blob/main/component/input-map.md

Includes necessary scripts and security configuration for integrating Amap (Gaode Maps) API into a Vue project. Ensure these are placed correctly in your index.html.

```html
<script>
  window._AMapSecurityConfig = {
    securityJsCode: 'xxxxx',
  }
</script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=xxxxxxxx&plugin=AMap.PlaceSearch'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
```

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

### Avue Skeleton Examples

Source: https://github.com/yuchenhui/avue2/blob/main/default/skeleton.md

Demonstrates various Avue Skeleton component configurations including basic placeholder, block mode, avatar display, custom rows, custom list items, and dynamic loading with a switch.

```html
最简单的占位效果。
<avue-skeleton></avue-skeleton>
<br />
最后一行占满的效果
<avue-skeleton block></avue-skeleton>
<br />
带头像的效果
<avue-skeleton avatar></avue-skeleton>
<br />
自定义行数的效果
<avue-skeleton avatar :rows="5"></avue-skeleton>
<br />
自定义列表的效果
<avue-skeleton avatar :rows="4" :number="3"></avue-skeleton>
<br />
动态切换效果
<el-switch :active-value="false" :inactive-value="true" v-model="loading" active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
<avue-skeleton :loading="loading">
  <span>加载的内容</span>
</avue-skeleton>
```

```javascript
export default {
  data(){
    return {
      loading:true,
    }
  }
}
```

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

### Avue Framework Introduction

Source: https://github.com/yuchenhui/avue2/blob/main/README.md

Provides an introduction to the Avue framework, detailing its purpose as a low-code front-end framework based on the Element framework. It highlights how JSON configuration is used to generate pages, reducing development effort and significantly improving efficiency.

```zh
Avue 是一个基于 Element 框架的低代码前端框架，使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。
```

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

### Basic Color Picker Usage

Source: https://github.com/yuchenhui/avue2/blob/main/form/input-color.md

Demonstrates the basic setup for a color picker input in an Avue form. It requires defining the 'color' type for the input column.

```vue
<avue-form :option="option"></avue-form>

<script>
export default{
  data() {
    return {
      option: {
        column: [
          {
            label: '颜色选择器',
            prop: 'color',
            type: 'color'
          }
        ]
      }
    }
  }
}
</script>
```

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

### Qiniu Cloud OSS Upload Setup

Source: https://github.com/yuchenhui/avue2/blob/main/form/form-upload.md

Instructions for setting up Qiniu Cloud OSS uploads in Avue. This includes importing the CryptoJS library and configuring Vue.use with Qiniu credentials and bucket information.

```html
<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://avuejs.com/cdn/CryptoJS.js"></script>
```

```js
Vue.use(AVUE, {
  qiniu: {
    AK: '', //七牛云相关密钥
    SK: '', //七牛云相关密钥
    bucket:'https://upload.qiniup.com', //存储地区，默认为华东，其他的如下表
    scope: 'test', //存储空间名称
    url: 'https://cdn.avuejs.com/' //外链的域名地址
  }
})
```

```vue
<avue-form :option="option" v-model="form"> </avue-form>
<script>
export default {
  data() {
    return {
      form: {},
      option: {
        column: [
          {
            label: "七牛上传",
            prop: "imgUrl",
            type: "upload",
            listType: "picture-img",
            fileType: "img",
            oss: "qiniu",
            span: 24,
          },
        ],
      },
    };
  },
};
</script>
```

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

### Avue Code Component Usage

Source: https://github.com/yuchenhui/avue2/blob/main/default/code.md

Example of using the Avue code component in a Vue template. The `syntax` prop specifies the language for highlighting, and the `height` prop controls the component's height. This component is typically used within a Vue application after installing Avue.

```vue
<avue-code syntax="javascript" :height="300">
      // Used in main.js
      Vue.use(AVUE);
</avue-code>
<script>
export default {
  
}
</script>
```

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

### Avue Crud Object Column Configuration

Source: https://github.com/yuchenhui/avue2/blob/main/crud/object.md

Demonstrates how to configure the 'column' property of the Avue Crud component as an object, where each key corresponds to a 'prop'. This feature was added in version 2.10.12. The example shows a basic setup with 'name' and 'sex' columns.

```vue
<avue-crud :option="option" :data="data" ></avue-crud>

<script>
export default {
  data () {
    return {
      form: {},
      data: [{
        name: '姓名',
        sex: 14
      }],
      option: {
        labelWidth: 120,
        column: {
          name: {
            label: '姓名',
          },
          sex: {
            label: '年龄',
          }
        }
      }
    }
  },
  created () {
    this.option.column.name.label += '(name)';
  }
}
</script>
```

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

### Avue Data Filtering Example

Source: https://github.com/yuchenhui/avue2/blob/main/crud/form.md

Illustrates how to filter data dictionaries and null fields in Avue forms. It provides buttons to trigger filtering actions and displays the form data. The `filterDic` option removes fields starting with '$', and `filterNull` removes fields with empty values.

```vue
<avue-crud :key="reload" v-model="form" :option="option" :data="data">
  <template slot="nameForm" slot-scope="{size}">
    <el-button size="small" type="danger" @click="filterDic"
      >过滤数据字典</el-button
    >
    <el-button size="small" type="success" @click="filterNull"
      >过滤空数据</el-button
    >
    <el-button size="small" type="primary" @click="filter">不过滤</el-button>
    <p>{{form}}</p>
    <el-input v-model="form.name" :size="size"></el-input>
  </template>
</avue-crud>

<script>
  export default {
    data() {
      return {
        data: [
          {

```

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

### Avue Form Cascader - Lazy Loading

Source: https://github.com/yuchenhui/avue2/blob/main/form/form-cascader.md

This example shows the setup for lazy loading data in the cascader component. While the provided code snippet initializes the form and option, the actual lazy loading implementation would typically involve a function to load child nodes dynamically based on the parent node.

```vue
<avue-form v-model="form" :option="option"></avue-form>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
const dic=[
  {
    value: 'zhinan',
    label: '指南',
    children: [
      {
        value: 'shejiyuanze',
        label: '设计原则',
        children: [
          {
            value: 'yizhi',
            label: '一致'
          }, 
          {
            value: 'fankui',
            label: '反馈'
          }
        ]
      }
    ]
  }
]
export default {
    data() {
      return {
        form:{
          cascader: ["110000", "110100", "110101"]
        },
        option: {
          column: [
            {
              label: '级联',

```

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

### Avue Video Tutorial Link

Source: https://github.com/yuchenhui/avue2/blob/main/data/data0.md

Provides a link to a video tutorial series for Avue, specifically focusing on '修仙' (cultivation) concepts within the Avue framework.

```javascript
links = [
  {
    title: '赠送 Avue 修仙系列视频教程',
    href: 'https://www.bilibili.com/video/av24644922',
    check: true,
  }
]
```

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

### Avue img Array Input Example

Source: https://github.com/yuchenhui/avue2/blob/main/component/img.md

This snippet demonstrates how to use the Avue array component with the 'img' type to create an input field for image URLs. It shows the template setup with the avue-array component and the corresponding Vue script for data management. The component binds to a form data property, which is an array of strings representing image URLs.

```vue
<el-row :span="24">
  <el-col :span="6">
     值:{{form}}<br/>
    <avue-array type="img" v-model="form" placeholder="请输入内容" ></avue-array>
  </el-col>
</el-row>

<script>
export default {
    data() {
      return {
        form:[
          'https://avuejs.com/images/logo-bg.jpg',
          'https://avuejs.com/images/logo-bg.jpg',
        ]
      }
    }
}
</script>
```

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

### HTML Setup for Highlight.js

Source: https://github.com/yuchenhui/avue2/blob/main/default/code.md

This snippet shows how to include the necessary highlight.js CSS and JavaScript files in your HTML's head section to enable code highlighting. Ensure these are loaded before your application's scripts.

```html
<!-- Import necessary packages (must be placed in the head tag of index.html) -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
```

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

### Color Picker with Default Value

Source: https://github.com/yuchenhui/avue2/blob/main/form/input-color.md

Shows how to set an initial default value for the color picker using the 'value' property. The example sets a default RGBA color.

```vue
<avue-form :option="option"></avue-form>

<script>
export default{
  data() {
    return {
      option: {
        column: [
          {
            label: '颜色选择器',
            prop: 'color',
            type: 'color',
            value: 'rgba(71, 46, 46, 1)'
          }
        ]
      }
    }
  }
}
</script>
```

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

### Global Avue Configuration

Source: https://github.com/yuchenhui/avue2/blob/main/global.md

Demonstrates how to initialize Avue with global configuration options. This includes setting component sizes, default CRUD and Form options, and cloud storage configurations.

```javascript
Vue.use(AVUE,{
  size:'',
  crudOption:{},
  formOption:{},
  tableSize:'',
  formSize:'',
  appendToBody:true,
  modalAppendToBody:true,
  cos:{},
  qiniu:{},
  ali:{},
  canvas:{}
});
```

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

### Avue Crud with Custom Menu Left Slot

Source: https://github.com/yuchenhui/avue2/blob/main/crud/head.md

This example demonstrates how to add custom content to the left side of the Avue Crud menu bar using the `menuLeft` slot. A primary button is added as an example.

```vue
<avue-crud :data="data" :option="option">
  <template slot="menuLeft" slot-scope="{size}">
    <el-button type="primary" :size="size">自定义按钮</el-button>
  </template>
</avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          { name:'张三', sex:'男' },
          { name:'李四', sex:'女' }
        ],
        option:{
          column:[
             { label:'姓名', prop:'name' },
             { label:'性别', prop:'sex' }
          ]
        },
      };
    }
}
</script>
```

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

### Default Time for Datetime Range

Source: https://github.com/yuchenhui/avue2/blob/main/form/form-date.md

Sets default start and end times for the 'datetimerange' picker. The 'defaultTime' property accepts an array of strings, where the first element sets the start time and the second sets the end time.

```vue
<avue-form v-model="form" :option="option"></avue-form>

<script>
export default {
    data() {
      return {
        form:{
            datetime:'1398250549123'//时间戳例子
        },
        option:{
          labelWidth:110,
          column: [{
              label: "时间日期范围",
              type: 'datetimerange',
              prop:'datetimerange',
              span:24,
              defaultTime:['12:00:00', '08:00:00'],
              format:'yyyy-MM-dd HH:mm:ss',
              valueFormat:'yyyy-MM-dd HH:mm:ss',
              startPlaceholder: '时间日期开始范围自定义',
              endPlaceholder: '时间日期结束范围自定义',
          }]
        },
      };
    }
}
</script>
```

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

### Image Cropper Usage Example

Source: https://github.com/yuchenhui/avue2/blob/main/default/image-cropper.md

Demonstrates how to integrate and use the Image Cropper component within a Vue application. It includes opening the cropper, displaying cropped images, and handling callbacks for success and cancellation.

```vue
<div>
  <el-button @click="openPreview(0)" style="margin-bottom:20px;">打开图片裁剪</el-button>
  <p>
    <img width="200px" style="margin-right:20px" v-for="(d, index) of datas" :src="d.thumbUrl" @click="openPreview(index)">
  </p>
  <div>
    <h3> 裁剪图片</h3>
    <img :src="src" />
  </div>
</div>
<script>
export default {
  data() {
    return {
      src: '',
      datas: [
        { thumbUrl: `/images/logo.png`, url: `/images/logo.png` },
        { thumbUrl: `https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg`, url: `https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg` },
        { thumbUrl: `https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg`, url: `https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg` }
      ]
    }
  },
  methods: {
    openPreview(index = 0) {
      this.$ImageCropper({
        img: this.datas[index].thumbUrl,
        // autoCropWidth:100,
        // autoCropHeight:100,
        // fixed:true,
        // fixedNumber:[100,100],
        type: 'base64',
        callback: (res) => {
          console.log(res);
          this.src = res;
        },
        cancel: () => {
          this.$message.success('取消了');
        }
      });
    }
  }
}
</script>
```

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

### Avue Dynamic Subform - Form Usage

Source: https://github.com/yuchenhui/avue2/blob/main/form/form-dynamic.md

Illustrates using the dynamic subform component in a form-centric manner by setting the `type` to 'form' within the `children` configuration. This example also shows how to hide the row index by setting `index` to `false`.

```vue
<avue-form :option="option" v-model="form">
 <template slot-scope="{row}" slot="input">
   <el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>
  </template>
</avue-form>
<script>
export default {
  data() {
      return {
        form: {
          dynamic: [{
            input: 1,
            select: 1
          }, {
            input: 2,
            select: 2
          }]
        },
        option: {
          column: [{
            label: '子表单',
            prop: 'dynamic',
            type: 'dynamic',
            span: 24,
            children: {
              index: false,
              align: 'center',
              type: 'form',
              headerAlign: 'center',
              rowAdd: (done) => {
                this.$message.success('新增回调');
                done({
                  input: '默认值'
                });
              },
              rowDel: (row, done) => {
                this.$message.success('删除回调' + JSON.stringify(row));
                done();
              },
              column: [{
                width: 200,
                label: '输入框',
                prop: "input"
              }, {
                label: '选择框',
                prop: "select",
                type: 'select',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }]
            }
          }]
        }
      }
  }
}
</script>
```

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

### Avue input-table Single Selection Example

Source: https://github.com/yuchenhui/avue2/blob/main/component/input-table.md

Demonstrates the basic usage of the Avue input-table component for single data selection. It includes configuration for columns, props, and a data loading function.

```vue
<el-row :span="24">
  <el-col :span="6">
    值:{{form}}<br/>
    <avue-input-table :props="props" :children="children" :on-load="onLoad" v-model="form" placeholder="请选择数据"></avue-input-table>
    格式化值:{{form}}<br/>
    <avue-input-table :props="props" :children="children" :formatter="formatter" :on-load="onLoad" v-model="form" placeholder="请选择数据"></avue-input-table>
  </el-col>
</el-row>

<script>
export default {
  data() {
    return {
      children: {
        border: true,
        column: [
          {
            label: '姓名',
            width: 120,
            search: true,
            prop: 'name'
          },
          {
            label: '性别',
            search: true,
            prop: 'sex'
          }
        ]
      },
      props: {
        label: 'name',
        value: 'id'
      },
      form: '0'
    }
  },
  methods: {
    formatter(row) {
      if (!row.name) return ''
      return row.name + '-' + row.sex
    },
    onLoad({ page, value, data }, callback) {
      if (value) {
        this.$message.success('首次查询' + value)
        callback({
          id: '0',
          name: '张三',
          sex: '男'
        })
        return
      }
      if (data) {
        this.$message.success('搜索查询参数' + JSON.stringify(data))
      }
      if (page) {
        this.$message.success('分页参数' + JSON.stringify(page))
      }
      callback({
        total: 2,
        data: [
          {
            id: '0',
            name: '张三',
            sex: '男'
          },
          {
            id: '1',
            name: '李四',
            sex: '女'
          }
        ]
      })
    }
  }
}
</script>
```

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

### Avue Version Information

Source: https://github.com/yuchenhui/avue2/blob/main/home.md

Clarifies the documentation version and provides a link to the Vue 3.x upgrade.

```Markdown
You are browsing the Avue documentation based on Vue 2.x; [click here](https://avuejs.com/) to view the upgraded version for Vue 3.x.
```

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

### Alibaba Cloud OSS Integration

Source: https://github.com/yuchenhui/avue2/blob/main/form/form-upload.md

Provides instructions for integrating Alibaba Cloud OSS for file uploads with Avue Form. This involves including the Alibaba Cloud SDK and configuring global Avue parameters with OSS credentials.

```html
<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.net/ali-oss/6.10.0/aliyun-oss-sdk.min.js"></script>
```

```javascript
//入口处全局配置阿里云的参数
Vue.use(AVUE, {
  ali: {
    region: "oss-cn-beijing",
    endpoint: "oss-cn-beijing.aliyuncs.com",
    stsToken: "",
    accessKeyId: "",
    accessKeySecret: "",
    bucket: "avue",
  },
});
```

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

### Avue Form Grouping Example

Source: https://github.com/yuchenhui/avue2/blob/main/crud/form.md

Demonstrates how to group form elements in Avue using the 'group' property in the option. This example includes sections for user information, refund applications with cascaded selects for province, city, and area, and custom user information fields.

```vue
<avue-crud :option="option" v-model="obj" :data="data"></avue-crud>
<script>
  let baseUrl = "https://cli.avuejs.com/api/area";
  export default {
    data() {
      return {
        obj: {
          name: "11",
        },
        data: [
          {
            name: "张三",
            sex: 15,
            province: "110000",
            city: "110100",
            area: "110101",
            checkbox: ["110000"],
          },
        ],
        option: {
          column: [
            {
              label: "姓名",
              prop: "name",
              display: false,
            },
            {
              label: "年龄",
              prop: "sex",
              display: false,
            },
          ],
          group: [
            {
              label: "用户信息",
              prop: "jbxx",
              icon: "el-icon-edit-outline",
              column: [
                {
                  label: "姓名",
                  prop: "name",
                },
                {
                  label: "年龄",
                  prop: "sex",
                },
              ],
            },
            {
              label: "退款申请",
              prop: "tksq",
              icon: "el-icon-view",
              column: [
                {
                  label: "省份",
                  prop: "province",
                  type: "select",
                  props: {
                    label: "name",
                    value: "code",
                  },
                  cascader: ["city"],
                  dicUrl: `${baseUrl}/getProvince`,
                  rules: [
                    {
                      required: true,
                      message: "请选择省份",
                      trigger: "blur",
                    },
                  ],
                },
                {
                  label: "城市",
                  prop: "city",
                  type: "select",
                  cascader: ["area"],
                  props: {
                    label: "name",
                    value: "code",
                  },
                  cascaderIndex: 0,
                  dicUrl: `${baseUrl}/getCity/{{key}}`,
                  rules: [
                    {
                      required: true,
                      message: "请选择城市",
                      trigger: "blur",
                    },
                  ],
                },
                {
                  label: "地区",
                  prop: "area",
                  type: "select",
                  props: {
                    label: "name",
                    value: "code",
                  },
                  cascaderIndex: 0,
                  dicUrl: `${baseUrl}/getArea/{{key}}`,
                  rules: [
                    {
                      required: true,
                      message: "请选择地区",
                      trigger: "blur",
                    },
                  ],
                },
              ],
            },
            {
              label: "用户信息",
              prop: "yhxxs",
              icon: "el-icon-edit-outline",
              column: [
                {
                  label: "测试长度",
                  prop: "len",
                  maxlength: 5,
                },
                {
                  labelWidth: 120,
                  label: "测试自定义",
                  prop: "names",
                  formslot: true,
                },
              ],
            },
          ],
        },
      };
    },
  };
</script>
```

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

### Avue Notice Component Script Logic

Source: https://github.com/yuchenhui/avue2/blob/main/default/notice.md

Provides the JavaScript logic for the Avue Notice component example. It defines the component's data, including the notice list and configuration options, and implements methods for handling user interactions and data pagination.

```javascript
let list = [
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '史蒂夫·乔布斯 关注了你',
    subtitle: '05-08 15:08',
    tag: '已经开始',
    status: 0
  },
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '斯蒂夫·沃兹尼亚克 关注了你',
    subtitle: '05-08 15:08',
    tag: '未开始',
    status: 1
  },
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '乔纳森·伊夫 关注了你',
    subtitle: '05-08 15:08',
    tag: '有警告',
    status: 2
  },
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '蒂姆·库克 关注了你',
    subtitle: '05-08 15:08',
    status: 3,
    tag: '有错误'
  },
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '比尔·费尔南德斯 关注了你',
    subtitle: '05-08 15:08',
    status: 4,
    tag: '已完成'
  }
]
export default {
  data() {
    return {
      activeName: 'first',
      option: {
        props: {
          img: 'img',
          title: 'title',
          subtitle: 'subtitle',
          tag: 'tag',
          status: 'status'
        },
      },
      data: list,
    }
  },
  methods: {
    handleClick(item) {
      this.$message.success(JSON.stringify(item))
    },
    pageChange(page, done) {
      setTimeout(() => {
        this.$message.success('页码' + page)
        this.data = this.data.concat(list);
        done();
      }, 1000)
    },
  }
}
```

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

### Avue Upload Component with Picture-Img List Type

Source: https://github.com/yuchenhui/avue2/blob/main/component/upload.md

This snippet demonstrates using the Avue Upload component with the `list-type` attribute set to 'picture-img'. This configuration is suitable for displaying uploaded images in a thumbnail format. It includes the same action and HTTP props configuration as the basic example.

```html
<el-col :span="6">
  值:{{form1}}<br />
  <avue-upload
    :action="action"
    :props-http="propsHttp"
    type="upload"
    v-model="form1"
    list-type="picture-img"
  ></avue-upload>
</el-col>
```

```javascript
export default {
  data() {
    return {
      action: "https://api.avuejs.com/imgupload",
      propsHttp: {
        url: "url",
        name: "name",
        res: "data",
      },
      form1: "",
    };
  },
};
```

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

### Avue CRUD Basic Structure

Source: https://github.com/yuchenhui/avue2/blob/main/crud/menu.md

Demonstrates the basic structure of an Avue CRUD component with data and options, including column definitions. This serves as a foundational example for Avue table configurations.

```vue
<avue-crud :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
      data:[
        { ids:1, name:'张三', sex:'男' },
        { ids:2, name:'李四', sex:'女' }
      ],
      option:{
        rowKey:'ids',
        copyBtn:true,
        delBtn:false,
        column:[
           { label:'姓名', prop:'name' },
           { label:'性别', prop:'sex' }
        ]
      },
    }
  }
}
</script>
```