简介

Vue3.0 版本，因 Avue 还存在一些 bug，请慎重使用。

本项目是一款基于 Avue 的表单设计器，拖拽式操作让你快速构建一个表单。

创建项目

使用 Vue 脚手架 vue-cli 创建基础项目。

安装依赖

yarn add element-plus @smallwei/avue@next otd-avue@next

如果要使用富文本字段，需单独安装依赖

yarn add avue-plugin-ueditor

引入依赖

main.js

import Vue from "vue";
import App from "./App.vue";

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
Vue.use(ElementPlus);

import Avue from "@smallwei/avue";
import "@smallwei/avue/lib/index.css";
Vue.use(Avue);

import OtdAvue from "otd-avue";
Vue.use(OtdAvue);

// 如果要使用富文本字段
import AvueUeditor from "avue-plugin-ueditor";
Vue.use(AvueUeditor);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

页面展示

App.vue

<template>
  <div id="app">
    <otd-avue style="height: 100vh;"></otd-avue>
  </div>
</template>

至此，一个最简单的示例就完成了。

基本属性

asideLeftWidth | 左侧操作栏宽度 | String/Number

默认'270px'。

<template>
  <otd-avue style="height: 100vh;" aside-left-width="270px"></otd-avue>
</template>

asideRightWidth | 右侧操作栏宽度 | String/Number

默认'380px'。

<template>
  <otd-avue style="height: 100vh;" aside-right-width="380px"></otd-avue>
</template>

storage | 本地缓存 | Boolean

是否开启本地缓存，默认false。开启后可防止刷新页面导致操作丢失。

<template>
  <otd-avue style="height: 100vh;" storage></otd-avue>
</template>

undoRedo | 撤销/重做 | Boolean

是否开启撤销/重做功能。默认true。

<template>
  <otd-avue style="height: 100vh;" undo-redo></otd-avue>
</template>

options | 配置 | Object/String

Avue 中 avue-form 的 option 配置。用于控制设计区域的初始展示。更多妙用可以看其他 demo。

• 注意，配置了 storage 之后，会优先从本地缓存中读取数据，options 可能会失效。

<template>
  <otd-avue style="height: 100vh;" :options="options"></otd-avue>
</template>

<script>
  export default {
    data() {
      return {
        options: {
          // 可以是Object
          column: [
            {
              label: "单行文本",
              prop: "input",
              type: "input",
            },
          ],
        },
        // options: `{ column: [{ label: '单行文本', prop: 'input', type: 'input' }] }`, // 也可以是String，用于接口请求后直接赋值
      };
    },
  };
</script>

showGithubStar | github 星星链接 ｜ Boolean

默认true。开源不易，且用且珍惜。:laughing:

toolbar ｜ 顶部操作栏 ｜ Array

如何自定义顶部操作栏

includeFields ｜ 左侧字段显示 ｜ Array

如何自定义左侧字段显示

customFields ｜ 自定义组件 ｜ Array

如何在左侧使用自定义组件

文档及 demo 项目

Wiki

依赖

element-plus

$ npm i element-plus

@smallwei/avue 3.0.0+

$ npm i @smallwei/avue@next

或自行引入 cdn

安装

组件

$ npm i otd-avue@next
或
$ yarn add otd-avue@next

$ yarn
$ yarn serve

html

详见 examples

使用

import OtdAvue from 'otd-avue'

Vue.use(OtdAvue)

<otd-avue style="height: 86vh;"
                  :options="options"
                  storage
                  @submit="handleSubmit"></otd-avue>

属性

| 参数 | 说明 | 类型 | 默认值 | | ------------------------------------- | ----------------------------------------- | ------------- | -------------------------------------------------------------------------------------------- | | options | 字段配置 | Object/String | { column: [] } | | storage | 开启本地存储功能，防止浏览器刷新丢失 json | Boolean | false | | asideLeftWidth | 左工具栏宽度 | String/Number | '270px' | | asideRightWidth | 右工具栏宽度 | String/Number | '380px' | | showAvueDoc（已废弃，请使用 toolbar） | 是否显示 Avue 文档 | Boolean | false | | showGithubStar | 是否显示 GitHub Star | Boolean | true | | toolbar | 顶部工具栏 | Array | ['avue-doc', 'import', 'generate', 'preview', 'clear'] | | undoRedo | 是否开启撤销重做功能 | Boolean | true | | includeFields | 左侧展示字段 | Array | fieldsConfig.js 中配置的字段 | | customFields | 自定义组件 | Array | 使用方法 |

options 字段配置

Avue 文档

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | ------------ | ------- | ----------------------- | ------ | | column | Avue 字段 | Array | - | [] | | labelPosition | 字段位置 | String | 'left'/'center'/'right' | - | | labelWidth | 字段宽度 | Number | - | - | | gutter | 字段间隔 | Number | - | 0 | | menuBtn | 表单按钮 | Boolean | true/false | true | | submitBtn | 显示提交按钮 | Boolean | true/false | true | | submitText | 提交按钮文本 | String | - | '提交' | | emptyBtn | 显示清空按钮 | Boolean | true/false | true | | emptyText | 清空按钮文本 | String | - | '清空' | | tabs | 多分组转标签 | Boolean | true/false | false | | detail | 详情模式 | Boolean | true/false | false | | readonly | 全局只读 | Boolean | true/false | false | | disabled | 全局禁用 | Boolean | true/false | false |

事件

| 名称 | 说明 | 回调参数 | | ------ | -------------- | --------------- | | submit | 生成 json 回调 | 当前配置的 json |

方法

| 名称 | 说明 | 参数 | 返回 | | ------- | --------------------- | --------------------- | ------- | | getData | 获取当前编辑器的 JSON | type: 'string'/'json' | Promise |

插槽

| 名称 | 说明 | | ------------ | ------------------ | | toolbar | 顶部工具栏右侧插槽 | | toolbar-left | 顶部工具栏左侧插槽 |

Avue 插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

打包

组件

$ yarn lib

源码

$ yarn build

License

MIT