如何在项目中使用

创建项目

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

安装依赖

yarn add element-ui @smallwei/avue @sscfaith/avue-form-design

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

yarn add avue-plugin-ueditor

引入依赖

main.js

import Vue from 'vue'
import App from './App.vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

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

import AvueFormDesign from '@sscfaith/avue-form-design'
Vue.use(AvueFormDesign)

// 如果要使用富文本字段
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">
    <avue-form-design style="height: 100vh;"></avue-form-design>
  </div>
</template>

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

基本属性

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

默认'270px'。

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

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

默认'380px'。

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

storage | 本地缓存 | Boolean

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

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

undoRedo | 撤销/重做 | Boolean

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

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

options | 配置 | Object/String

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

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

<template>
  <avue-form-design style="height: 100vh;"
                    :options="options"></avue-form-design>
</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

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