otd-avue

简介

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。开源不易，且用且珍惜。😆

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