Avue

https://github.com/yuchenhui/avue2
Admin
Avue is a low-code front-end framework based on Element UI that uses JSON configurations to generate...
Tokens:213,143
Snippets:1,185
Trust Score:5.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### avue-video start and stop recording example

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

This example shows how to use the avue-video component with buttons to start and stop recording. The startRecord method calls the component's startRecord() method, and stopRecord calls stopRecord(). The data-change event provides the recorded video data (base64) in the console. Requires avue version 2.1.0 or later.

```vue
<el-button @click="startRecord" v-if="!flag" type="primary">开始录制</el-button>
<el-button type="danger" @click="stopRecord" v-else>停止录制</el-button>
<br /><br />
<avue-video background="https://avuejs.com/images/face.png" @data-change="dataChange" ref="video"></avue-video>

<script>
export default {
  data(){
    return {
      flag:false
    }
  },
  methods: {
      startRecord() {
        this.flag=true;
        this.$message.success('开始录制')
        this.$refs.video.startRecord();
      },
      stopRecord() {
        this.flag=false;
        this.$message.success('请看控制台视频文件的base64')
        this.$refs.video.stopRecord();
      },
      dataChange(data) {
        console.log(data);
      }
    }
}
</script>
```

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

### Basic Crud Configuration

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

A basic example of setting up an Avue Crud component with data and column definitions.

```vue
{{form}}
<avue-crud :data="data" :option="option" v-model="form"></avue-crud>

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

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

### Alibaba Cloud OSS upload - form example

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

avue-form upload example configured for Alibaba Cloud OSS. Uses the 'ali' oss type with a picture-img list type and canvas options.

```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",
            canvasOption: {
              text: "avue",
              ratio: 0.1,
            },
            oss: "ali",
            span: 24,
          },
        ],
      },
    };
  },
};
</script>
```

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

### Install Avue via CDN

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

Include Avue and its dependencies directly in an HTML file using CDN links.

```html
<!-- 引入样式文件 -->
<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"
/>
<!-- 引入相关JS 文件 -->
<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>
  // 在 #app 标签下渲染一个按钮组件
  new Vue({
    el:'app',
    data(){
      return{}
    }
  });
  app.use(AVUE);
</script>
```

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

### Install Avue via Vue CLI

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

Steps to create a new project and add Avue as a dependency using the Vue CLI.

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

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

# 在图形化界面中，点击 依赖 -> 安装依赖，然后将 @smallwei/avue 添加到依赖中即可。
```

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

### Install Avue via npm or yarn

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

Commands to install the Avue package as a dependency in an existing project that already uses ElementUI.

```bash
npm i @smallwei/avue@latest-v2 -S
yarn add @smallwei/avue@latest-v2 -S
```

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

### Open ImagePreview with configuration

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

This example demonstrates how to trigger the $ImagePreview method with a list of data objects and custom configuration options such as interval and event callbacks.

```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>
<script>
export default {
   data() {
    return {
      datas: [
        { thumbUrl: `https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg`, url: `https://img.alicdn.com/tfs/TB1uevcCrj1gK0jSZFuXXcrHpXa-1880-640.jpg`, type:'img' },
        { thumbUrl: `https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg`, url: `https://www.w3school.com.cn/i/movie.ogg`, type:'img' },
      ]
    }
  },
  methods: {
    openPreview(index = 0) {
      this.$ImagePreview(this.datas, index, {
        interval: 3000,
        closeOnClickModal: true,
        click: (data, index) => {
          this.$message.success('点击事件' + index)
        },
        beforeClose: () => {
          this.$message.success('关闭回调')
        }
      });
    }
  }
}
</script>
```

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

### Implement Verify and Video components

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

This example demonstrates how to integrate the avue-verify and avue-video components. It includes a button to trigger a random verification code and a dataChange method to handle video data updates.

```html
<el-button @click="$refs.verify.randomn()" type="primary">随机验证码</el-button><br /><br />
<span style="font-size: 24px;line-height: 24px;color: #333;">请使用普通话朗读下方验证码</span><br /><br />
<avue-verify v-model="data" :len="len" ref="verify"></avue-verify><br /><br />
<avue-video background="https://avuejs.com/images/face.png" @data-change="dataChange" ref="video"></avue-video>
```

```javascript
<script>
export default {
  data(){
    return {
      data:null,
      len:6,
    }
  },
  methods:{
    dataChange(data) {
      console.log(data);
    }
  }
}
</script>
```

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

### Implement avue-notice with tabs and data binding

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

This example demonstrates integrating the avue-notice component with el-tabs and configuring the data and options for the notification list.

```html
<el-tabs v-model="activeName">
  <el-tab-pane label="邮件(1)" name="first"></el-tab-pane>
  <el-tab-pane label="消息(2)" name="second"></el-tab-pane>
  <el-tab-pane label="通知" name="third"></el-tab-pane>
  <el-tab-pane label="计划" name="fourth"></el-tab-pane>
</el-tabs>
<avue-notice @click="handleClick" :data="data" :option="option" @page-change="pageChange"></avue-notice>
<script>
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)
    },
  }
}
</script>
```

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

### Avue Skeleton component usage examples

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

Demonstrates various configurations for the avue-skeleton component, including basic placeholders, block layouts, avatars, custom row counts, and dynamic loading states.

```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>
<script>
export default {
  data(){
    return {
      loading:true,
    }
  }
}
</script>
```

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

### Basic CountUp Usage

Source: https://github.com/yuchenhui/avue2/blob/main/default/count-up.md

Demonstrates the use of the avue-count-up component with basic end and start value configurations.

```html
<div style="font-size:43px;font-weight:500;color:red;">
  <p><avue-count-up :end="15033.2"></avue-count-up></p>
  <p><avue-count-up :end="1233.2" :start="1000"></avue-count-up></p>
</div>
<script>
export default {
  
}
</script>
```

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

### Initialize DataTabs Data Structure

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

Example of the data structure used to populate the DataTabs component, including title, href, and check properties.

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

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

### Import axios for upload component

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

Required setup to use the upload component. Import axios and pass it to Vue.use(Avue, { axios }).

```javascript
import axios from "axios";
Vue.use(Avue, { axios });
```

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

### Avue Login Component Implementation

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

This example demonstrates the usage of the avue-login component for different login scenarios including standard, image verification, phone verification, field customization, and margin adjustment.

```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>
```

```javascript
<script>
export default {
  data() {
    return {
      codesrc: '',
      form: {},
      option: {
        width: 400,
        time: 60,
        codeType: 'phone', //phone为手机验证码/img为图片验证码
        column: {
          username: {
            label: '用户名',
            autocomplete: 'off',
            rules: { required: true, message: '请输入用户名', trigger: 'blur' }
          },
          password: {
            label: '密码',
            autocomplete: 'off',
            rules: { required: true, message: '请输入密码', trigger: 'blur' }
          },
          code: {
            hide: true
          }
        }
      },
      option1: {
        width: 400,
        codeType: 'img',
        column: {
          username: {
            label: '用户名',
            placeholder: '手机号/邮箱/用户名',
            autocomplete: 'off',
            rules: { required: true, message: '请输入用户名', trigger: 'blur' }
          },
          password: {
            label: '密码',
            autocomplete: 'off',
            rules: { required: true, message: '请输入密码', trigger: 'blur' }
          },
          code: {
            label: '验证码',
            tip: '点击图片可以刷新验证码',
            autocomplete: 'off',
            rules: { required: true, message: '请输验证码', trigger: 'blur' }
          }
        }
      },
      option2: {
        width: 400,
        time: 60,
        codeType: 'phone',
        column: {
          username: {
            label: '手机号',
            prefixIcon: 'el-icon-mobile-phone',
            placeholder: '手机号/邮箱/用户名',
            autocomplete: 'off',
            rules: { required: true, message: '请输入手机号', trigger: 'blur' }
          },
          password: {
            hide: true,
          },
          code: {
            label: '验证码',
            autocomplete: 'off',
            rules: { required: true, message: '请输验证码', trigger: 'blur' }
          }
        }
      },
      option3: {
        width: 400,
        time: 60,
        labelWidth: 120,
        codeType: 'phone',
        column: {
          username: {
            label: '手机号',
            prefixIcon: 'el-icon-mobile-phone',
            placeholder: '手机号/邮箱/用户名',
            autocomplete: 'off',
            rules: { required: true, message: '请输入手机号', trigger: 'blur' }
          },
          password: {
            hide: true,
          },
          code: {
            label: '验证码',
            autocomplete: 'off',
            rules: { required: true, message: '请输验证码', trigger: 'blur' }
          }
        }
      },
      option4: {
        width: 400,
        column: {
          username: {
            label: '用户名',
            tip: '改变字段为user',
            prop: 'user',
          },
          password: {
            label: '密码',
            tip: '改变字段为pass',
            prop: 'pass',
          },
          code: {
            label: '验证码',
            tip: '改变字段为vaild',
            prop: 'vaild',
          }
        }
      }
    }
  },
  mounted() {
    this.refresh();
  },
  methods: {
    refresh() {
      this.$message.success('图片验证码刷新成功')
      this.codesrc = "https://pigx.pig4cloud.com/code?randomStr=" + new Date().getTime();
    },
    send(done) {
      this.$message.success(this.form.username + '验证码发送成功')
      done();
    },
    submit(form) {
      this.$message.success(JSON.stringify(form))
      console.log(form);
    }
  }
}
</script>
```

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

### Clipboard Copy Implementation

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

Example showing how to use the $Clipboard method to copy text from an input field or a static string, with success and error feedback using $message.

```html
<div style="width:400px">
  <div style="margin-bottom:10px">
    <el-button @click="copy">直接复制</el-button>
    <el-button @click="textarea=''">清 空</el-button>
  </div>
  <el-input placeholder="内容" v-model="text">
    <template slot="append">
      <el-button @click="copyText" color="primary">复制</el-button>
    </template>
  </el-input>
  <div style="margin-top:10px">
    <el-input type="textarea" v-model="textarea" cols="40" rows="3"></el-input>
  </div>
</div>
<script>
export default {
  data() {
    return {
      text: '',
      textarea: ''
    }
  },
  methods: {
    copyText() {
      this.$Clipboard({
        text: this.text
      }).then(() => {
        this.$message.success('复制成功')
      }).catch(() => {
        this.$message.error('复制失败')
      });
    },
    copy() {
      this.$Clipboard({
        text: '测试==复制至剪切板的文本==测试'
      }).then(() => {
        this.$message.success('复制成功')
      }).catch(() => {
        this.$message.error('复制失败')
      });
    }
  }
}
</script>
```

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

### Basic Tree Input Configuration

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

A basic example of defining a tree input within an Avue form using local dicData.

```vue
<avue-form :option="option"></avue-form>
<script>
export default {
  data(){
    return {
       option:{
          column: [{
            label: '树形下拉框',
            prop: 'tree',
            type: 'tree',
            props:{
              label:'name',
              value:'code',
              children:'list'
            },
            dicData:[{
              name:'字典1',
              code:0,
              list:[{
                label:'字典3',
                code:2
              }]
            },{
              name:'字典2',
              value:1
            }]
          }]
       }
    }
  }
}
</script>
```

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

### Data types example with dataType and props

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

Shows dataType configurations: object, string, and json. For object, props can map label/value fields.

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

<script>
export default {
  data() {
    return {
      form: {
        array: [{ label: "名称.jpg", value: "/images/logo-bg.jpg" }],
        array1: [{ name: "名称.jpg", url: "/images/logo-bg.jpg" }],
        string: "/images/logo-bg.jpg,/images/logo-bg.jpg",
        json: '[{"label":"名称.jpg","value":"/images/logo-bg.jpg"}]',
      },
      option: {
        labelWidth: 120,
        column: [
          {
            label: "数组对象",
            prop: "array",
            dataType: "object",
            type: "upload",
            propsHttp: {
              res: "data",
            },
            span: 24,
            action: "https://api.avuejs.com/imgupload",
          },
          {
            label: "数组对象",
            prop: "array1",
            dataType: "object",
            type: "upload",
            props: {
              label: "name",
              value: "url",
            },
            propsHttp: {
              res: "data",
            },
            span: 24,
            action: "https://api.avuejs.com/imgupload",
          },
          {
            label: "字符串",
            prop: "string",
            dataType: "string",
            type: "upload",
            propsHttp: {
              res: "data",
            },
            span: 24,
            action: "https://api.avuejs.com/imgupload",
          },
          {
            label: "json字符串",
            prop: "json",
            dataType: "json",
            type: "upload",
            propsHttp: {
              res: "data",
            },
            span: 24,
            action: "https://api.avuejs.com/imgupload",
          },
        ],
      },
    };
  },
};
</script>
```

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

### Implement avue-input-table with single and multiple selection

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

This example demonstrates how to use avue-input-table with standard, formatted, and multiple selection configurations within a Vue component.

```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>
    值:{{form1}}<br/>
    <avue-input-table multiple :props="props" :children="children" :formatter="formatter1" :on-load="onLoad1" v-model="form1" 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',
      form1: [0,1]
    }
  },
  methods: {
    formatter1(row) {
      if (Array.isArray(row)) {
        return row.map(ele => ele.name + '格式化').join(',')
      } else {
        return row.name + '格式化'
      }
    },
    onLoad1({ page, value, data }, callback) {
      if (value) {
        this.$message.success('首次查询' + value)
        callback([
          {
            id: '0',
            name: '张三',
            sex: '男',
            age: 18
          },
          {
            id: '2',
            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: '男',
            age: 18
          },
          {
            id: '1',
            name: '李四',
            sex: '女',
            disabled: true,
            age: 18
          },
          {
            id: '2',
            name: '王五',
            sex: '女'
          }
        ]
      })
    },
    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>
```

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

### Import Excel file using $Export.xlsx and download template

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

This example shows a template download button that opens /cdn/demo.xlsx and an upload component to select a file. When a file is selected, $Export.xlsx processes it and populates the avue-crud list with the parsed data.

```html
<div style="display:flex;">
 <el-button type="primary" @click="handleGet" >下载模版</el-button>
 <div style="width:20px;"></div>
 <el-upload :auto-upload="false" :show-file-list="false" action="action" :on-change="handleChange">
  <el-button type="primary">导入 excel</el-button>
 </el-upload>
</div>
<br />
<avue-crud :option="option" :data="list"></avue-crud>
```

```javascript
<script>
export default {
  data(){
    return {
      list:[],
      option:{
        column:[{
          label:'id',
          prop:'id'
        },{
          label:'姓名',
          prop:'name'
        },{
          label:'年龄',
          prop:'sex'
        }]
      }
    }
  },
  methods: {
    handleGet(){
      window.open('/cdn/demo.xlsx')
    },
    handleChange(file, fileLis) {
      this.$Export.xlsx(file.raw)
        .then(data => {
          this.list=data.results;
        })
    }
  }
}
</script>
```

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

### Avue form with datetimerange and defaultTime

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

Avue form with datetimerange column using defaultTime array to set specific start and end times. The form initializes datetime with a timestamp example.

```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>
```

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

### Avue form with datetimerange and daterange columns

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

Avue form with datetimerange and daterange columns. The form initializes datetime with a timestamp example. Custom placeholders are set for start and end of each range.

```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',
              format:'yyyy-MM-dd HH:mm:ss',
              valueFormat:'yyyy-MM-dd HH:mm:ss',
              startPlaceholder: '时间日期开始范围自定义',
              endPlaceholder: '时间日期结束范围自定义',
          },{
              label: "日期范围",
              prop: "daterange",
              type: "daterange",
              format:'yyyy-MM-dd',
              valueFormat:'yyyy-MM-dd',
              startPlaceholder: '日期开始范围自定义',
              endPlaceholder: '日期结束范围自定义',
          }]
        },
      };
    }
}
</script>
```

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

### 在 beforeOpen 中加载数据

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

在 beforeOpen 中调用 loading 方法显示加载状态，并在数据准备好后调用 done 方法完成加载。

```vue
<avue-crud
  :data="data"
  v-model="form"
  :before-open="beforeOpen"
  :option="option"
></avue-crud>
<script>
  export default {
    data() {
      return {
        form: {},
        data: [
          {
            name: "张三",
            sex: "男",
          },
        ],
        option: {
          column: [
            {
              label: "姓名",
              prop: "name",
            },
            {
              label: "性别",
              prop: "sex",
            },
          ],
        },
      };
    },
    methods: {
      beforeOpen(done, type, loading) {
        if (["view", "edit"].includes(type)) {
          loading();
          setTimeout(() => {
            done();
          }, 300);
        } else {
          // 新增逻辑
          this.form.name = "初始化赋值";
          done();
        }
      },
    },
  };
</script>
```

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

### Qiniu Cloud upload - form example

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

avue-form upload example configured for Qiniu Cloud. Uses the 'qiniu' oss type with a picture-img list type and img file type.

```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>
```

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

### Tencent Cloud COS upload - form example

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

avue-form upload example configured for Tencent Cloud COS. Uses the 'cos' oss type with a picture-img list type and img file type.

```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: "cos",
            span: 24,
          },
        ],
      },
    };
  },
};
</script>
```

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

### getPropRef

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

Gets the ref object for a given prop.

```APIDOC
## getPropRef

### Description
Gets the ref object for a given prop.

### Method
getPropRef

### Parameters
- **prop** - The property name.
```

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

### Basic Tree Usage with Node Events

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

Demonstrates basic tree implementation using the option and data props, along with node-click and node-contextmenu event handling.

```vue
{{form}}
<avue-tree  ref="tree" :option="option" :data="data"  v-model="form" @node-click="nodeClick"  @node-contextmenu="nodeContextmenu">
</avue-tree>
<script>
export default {
    data () {
      return {
          form:{},
          data:[
            {
              value:0,
              label:'一级部门',
              children:[
                {
                  value:1,
                  label:'一级部门1',
                },{
                  value:2,
                  label:'一级部门2',
                }
              ]
            },{
              value:3,
              label:'二级部门',
              children:[
                {
                  value:4,
                  label:'二级部门1',
                },{
                  value:5,
                  label:'二级部门2',
                }
              ]
            }
          ],
          option:{
            defaultExpandAll:true,
            formOption:{
              labelWidth:100,
              column:[{
                  label:'自定义项',
                  prop:'label'
              },{
                label:'测试',
                prop:'test'
              }],
            }
          }
      }
  },
  mounted(){
    this.$refs.tree.setCurrentKey(0)
  },
  methods:{
    nodeContextmenu (data, node, comp) {
      this.$message.success(JSON.stringify(data))
    },
    nodeClick(data){
      this.$message.success(JSON.stringify(data))
    }
  }
}
</script>
```

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

### Form Component Events Example (Vue)

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

Shows how to handle the change, click, focus, blur, and enter events on an avue-form column, displaying success messages and logging to the console. The example uses a select field with a remote dictionary URL and passes an object containing value, column, item, and dic to the handlers.

```Vue
<avue-form :option="option" v-model="obj"></avue-form>
<script>
  export default {
    data() {
      return {
        obj: {},
        data: [],
        option: {
          column: [
            {
              label: "省份",
              prop: "name",
              type: "select",
              props: {
                label: "name",
                value: "code",
              },
              dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
              change: ({ value, column, item, dic }) => {
                this.$message.success("change事件查看控制台");
                console.log("值改变", value, column, item, dic);
              },
              click: ({ value, column }) => {
                this.$message.success("click事件查看控制台");
                console.log("点击事件", value, column);
              },
              focus: ({ value, column }) => {
                this.$message.success("focus事件查看控制台");
                console.log("获取焦点", value, column);
              },
              blur: ({ value, column }) => {
                this.$message.success("blur事件查看控制台");
                console.log("失去焦点", value, column);
              },
              enter: ({ value, column }) => {
                this.$message.success("enter事件查看控制台");
                console.log("回车事件", value, column);
              },
            },
          ],
        },
      };
    },
  };
</script>
```

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

### Avue Keyboard Usage Example with Input Fields and Script

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

Example showing how to use the avue-keyboard component with two input fields. The keyboard is bound to the 'text' input initially, and after 5 seconds switches to 'text2'. The '清空' key is bound to clear the current input. The handleKeyboardClick method updates the current input value.

```html
<el-form :inline="true">
  <el-form-item label="输入框1">
    <el-input ref="text" id="text" v-model="text" placeholder="点击我，完后用虚拟键盘输入"></el-input>
  </el-form-item>
  <el-form-item label="输入框2">
    <el-input ref="text2" id="text2" v-model="text2" placeholder="点击我，完后用虚拟键盘输入"></el-input>
  </el-form-item>
</el-form>
<avue-keyboard ref="kb" :ele="ele" :keys="keys" @click="handleKeyboardClick" style="width: 800px; height: 300px">
</avue-keyboard>
```

```javascript
export default {
  data() {
    return {
      // keys: [
      //   ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
      //   ['a', 'b', 'c', 'd', 'Shift', '清空']
      // ],
      text: '',
      text2: '',
      ele: 'text'
    }
  },
  mounted() {
    this.$refs.text.focus();
    // 自定义按键绑定click
    this.$refs.kb.bindClick("清空", () => {
      this[this.ele] = ''
    })

    // 模拟更换输入框
    setTimeout(() => {
      this.ele = "text2"
    }, 5000);
  },
  methods: {
    // 键盘点击
    handleKeyboardClick(key, val) {
      this[this.ele] = val
    }
  }
}
```

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

### 配置 loadText、fileText 和 tip 文案

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

配置 loadText 上传等待文案、fileText 上传按钮文案和 tip 提示文案。

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

<script>
export default {
  data() {
    return {
      form: {},
      option: {
        column: [
          {
            label: "头像",
            prop: "imgUrl3",
            type: "upload",
            span: 24,
            propsHttp: {
              res: "data",
            },
            fileText: "我是上传按钮",
            loadText: "上传等待文案",
            tip: "只能上传jpg/png用户头像，且不超过500kb",
            action: "https://api.avuejs.com/imgupload",
          },
        ],
      },
    };
  },
};
</script>
```

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

### Basic avue-input usage

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

An example showing the avue-input component integrated with an element-ui layout and a Vue data object.

```vue
<el-row :span="24">
  <el-col :span="6">
     值:{{form}}<br/>
    <avue-input v-model="form" placeholder="请输入内容" ></avue-input>
  </el-col>
</el-row>
<script>
export default {
    data() {
      return {
        form:'我是内容'
      }
    }
}
</script>
```

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

### Fixed Time Points

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

Configuring specific start, end, and step intervals for time selection using pickerOptions.

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

<script>
export default {
  data() {
    return {
      option: {
        column: [{
          label: "时间",
          prop: "time",
          type: "time",
          pickerOptions: {
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }
        }]
      },
    };
  }
}
</script>
```

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

### $Clipboard

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

用于复制任意文本到剪切板，返回 Promise 对象，可处理成功和失败回调。

```APIDOC
## $Clipboard

### Description
复制任意文本到剪切板，返回 Promise 对象。

### Method
$Clipboard

### Parameters
- **text** (string) - 要复制的文本内容

### Request Example
this.$Clipboard({
  text: '复制的文本内容'
}).then(() => {
  this.$message.success('复制成功')
}).catch(() => {
  this.$message.error('复制失败')
});
```

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

### DialogForm弹窗表单 抽屉表单 弹窗表单（带上数据）

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

This example shows three buttons that trigger different DialogForm displays: a modal form, a drawer form (via the 'drawer' type), and a modal form with pre-filled data. The showDialog method uses the $DialogForm.show API with options like title, width, type, menuPosition, beforeClose, and callback. The showDialog1 method passes a data object to pre-populate the form. The callback handles the response, showing a success message, then closing the dialog after a delay.

```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>
```

```javascript
    <script>
    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)
              }
            })
          }
        }
      }
    </script>
```

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

### Fixed Time Range

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

Creating a dependent time range where the end time options are constrained by the selected start time.

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

<script>
export default {
  data() {
    return {
      form: {}
    };
  },
  computed: {
    option() {
      return {
        column: [{
          label: "开始时间",
          prop: 'start',
          type: 'time',
          format: 'HH:mm:ss',
          pickerOptions: {
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }
        },{
          label: "结束时间",
          prop: 'end',
          type: 'time',
          format: 'HH:mm:ss',
          pickerOptions: {
            start: '08:30',
            step: '00:15',
            end: '18:30',
            minTime: this.form.start
          }
        }]
      }
    }
  }
}
</script>
```

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

### Basic Cascader Implementation

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

Demonstrates a basic cascader setup where selecting a province triggers a data update for the city field.

```vue
<avue-form :option="option" v-model="form"></avue-form>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data(){
    return {
       form:{
          province: '110000',
          city: '110100'
       },
       option:{
          column: [  {
            label: '省份',
            prop: 'province',
            type: 'radio',
            cascader:['city'],
            span:24,
            props:{
              label:'name',
              value:'code'
            },
            dicUrl: `${baseUrl}/getProvince`,
          },
          {
            label: '城市',
            prop: 'city',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getCity/{{key}}`,
            rules: [
              {
                required: true,
                message: '请选择城市',
                trigger: 'blur'
              }
            ]
          }]
       }
    }
  }
}
</script>
```

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

### 引入 FileSaver 和 xlsx 库

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

在 index.html 的 head 标签中引入 FileSaver.js 和 xlsx.full.min.js，用于支持表格导出功能。

```html
<script src="https://cdn.staticfile.net/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="https://cdn.staticfile.net/xlsx/0.18.2/xlsx.full.min.js"></script>
```
Tokens:
Raw