otd-avue v1.0.60

简介

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 字段配置

Avue 文档

事件

方法

插槽

Avue 插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

打包

组件

$ yarn lib

源码

$ yarn build

License

MIT