@bingoit/mobile-form

移动端表单功能模块

Usage no npm install needed!

<script type="module">
  import bingoitMobileForm from 'https://cdn.skypack.dev/@bingoit/mobile-form';
</script>

README

mobile-form

定义移动端表单功能,如:表单模板的解析等;

安装方法

npm install @bingoit/mobile-form --save

使用方法

需要依赖mobile-ui模块,所以使用时需要先引入“mobile-ui”:

import Vue from 'vue';
import BingoMobileUI from '@bingoit/mobile-ui';
Vue.use(BingoMobileUI);

使用时需要配置相关参数:
1.系统参数的配置
参数设置:如设置系统名称,logo地址,是否为调试模式等。

 import {initSystem} from "@bingoit/mobile-base/lib/setting";
 initSystem({
     name: '测试系统名称 ',
     logo: require('./assets/logo.png'),
     isDebug: true,

     // 重要,没有配置该项将导致表单实例列表为流程表单时点击新增按钮报错
     flowFormInstanceRouterPath: '/flow/form/instance',
 });

2.配置未登录处理方法;如:

 //设置ajax请求,返回结果为未登录状态时的处理方法;
 import {removeToken, removeUserInfo, removeLoginState, getToken } from "@bingoit/utils";
 import { setTokenHandler, setNotLoginHandler } from "@bingoit/ajax";
 setNotLoginHandler(this,function () {
     removeLoginState();
     removeUserInfo();
     removeToken();
     router.push('/login/normal').then(() => {});
 });

3.设置获取token的方法(如果未设置使用默认浏览器sessionId通讯) ;如:

 //设置token
 setTokenHandler(this, function () {
     return getToken();
 });

4.设置路由拦截器;如:

 //设置路由拦截
 import {routerInterceptor} from "@bingoit/mobile-base/lib/utils/router.utils";
 routerInterceptor(router, store, undefined);

5.配置路由(基础模块路由的导入);如:

 import FormRouters from '@bingoit/mobile-form/lib/router/index';
 let routers = [];
 routers.push(...FormRouters);
 const router = new Router({
     routes: routers
 });
 export default router;

6.配置Vuex(基础模块的Vuex导入);如:

 import {BaseStoreState, BaseStoreMutations, BaseStoreGetters, modules} from '@bingoit/mobile-base/lib/store/index';
 let options =  {
     state: BaseStoreState,
     mutations: BaseStoreMutations,
     getters: BaseStoreGetters,
     modules,
 }
 export default new Vuex.Store(options);

7.配置自定义组件的解析组件:

window.customParseComponent="自定义组件对象";

表单渲染组件的使用

import Vue from 'vue';
import BingoMobileFormUI from '@bingoit/mobile-form';
Vue.use(BingoMobileFormUI);
<bgo-form-render></bgo-form-render>

基本组件

定义了以下组件:

  1. 表单渲染组件.