vue3-form-designer-test v0.0.1

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 参数

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

Events

Methods

Customize configuration

See Configuration Reference.