vue3-form-designer

项目安装依赖

npm install

编译、启动开发环境

npm run dev

Lints 修复文件

npm run lint

SDK 打包

npm run lib

SDK 安装

npm set registry https://nexus3.100url.cn/repository/npm_public/
npm install --save vue3-form-designer

SDK 使用示例

需要安装的项目依赖：vue3、element-plus

入口JavaScript文件

import VueFormDesigner from 'vue3-form-designer'
import 'vue3-form-designer/lib/vue3-form-designer.css'
import store from "./store/index";

app.use(VueFormDesigner, { appId: 123, store })

options 参数

参数|说明|类型|是否必填 :--|:--|:--|:--|:-- appId|需要通过医百云开通表单服务，然后创建应用获取|Number|是 store|vuex实例|Object|是 previewUrlPC|pc端预览地址, 默认使用中台使用端地址|String|否 previewUrlMobile|移动端预览地址, 默认使用中台使用端地址|String|否 bucketName|存储桶名称, 默认使用公用的|String|否 regionEn|区域英文名, 默认使用公用桶的区域名称|String|否

vue文件

<vue-form-designer></vue-form-designer>

<vue-form-designer
      form-id="955825029411508224"
      :show-back="true"
      :prevent-tab-change="false"
      :tab-items="['表单设置', '表单分享']"
      @on-tab-change="handleTabChange"
    >
  <template slot="tabContent">
    <div v-if="tabName === '3'">表单设置的内容</div>
    <div v-if="tabName === '4'">表单分享的内容</div>
  </template>
</vue-form-designer>

自定义主题色

静态修改（开发阶段，主题色硬编码）

1. SDK中element-plus部分主题色会和应用项目中的element-plus主题色保持一致。
2. 其他部分主题色利用scss修改或自行用css覆盖。
3. 利用scss修改示例：

入口JavaScript文件

import './styles/index.scss'

./styles/index.scss

$--form-color-primary: #409EFF !default;
@import "~vue3-form-designer/src/styles/index";

动态修改

在使用组件的页面

onMounted(() => {
  const { appContext: { config: { globalProperties } } } = getCurrentInstance()
  globalProperties.$VueFormDesigner.changeTheme('#1AB370') // 颜色必须用16进制的，不能用单词、rgb形式的
});

Attributes

参数|说明|类型|可选值|默认值 :--|:--|:--|:--|:-- form-id|默认为新建，有form-id时为编辑|String|-|- default-form-name|新建表单时，默认表单名称|String|-|未命名表单 show-back|是否显示回退按钮|Boolean|-|true show-rule|是否显示规则tab|Boolean|-|true show-jump-rule|是否显示跳转规则|Boolean|-|false show-preview|是否显示预览按钮|Boolean|-|true disabled-save|是否禁用保存按钮|Boolean|-|false prevent-tab-change|是否阻止未保存表单时的tab切换，主要用于新建表单时|Boolean|-|true tab-items|要添加的tab导航，字符串数组|Array|-|- back-method|点击回退按钮时，调用的方法|Function|-|- show-dynamic-url|是否显示动态数据源|Boolean|-|false

Events

事件名称|说明|回调参数 :--|:--|:-- on-name-save|获取更新后的表单名称|新的表单名称 on-form-save|获取表单保存后的id|表单id on-tab-change|获取tab的变化|下一个tab的值（数字字符串，如：'2'）

Methods

方法名|说明|参数 :--|:--|:-- setCurrentTabName|设置当前tab的值|tab的值 getFormName|获取表单名称|-

Customize configuration

See Configuration Reference.