teld-approval-flow-mobile
v0.0.15
Published
build a npm pack for teld-approval-flow-moblie
Downloads
116
Readme
teld-approval-flow-mobile
TELD 流程图组件的删减化版本,仅提供一种模式:运行时流程实例的查看,同时将原 PC 端组件替换为移动端组件。
Usage
用于 TELD 内部 ToC 框架中
- 组件准备
在/plugins/components/mobile.js
文件中注册项目中用到的组件
确保如下注册组件:
// import Vue from 'vue';
import { install } from '@teld/component-proxy/export/mobile.js';
import {
Button,
Popup,
// ...
} from '@teld/component-proxy/mobile.js';
const components = [
Button,
Popup,
// ...
];
// van-xx 组件注册为 tm-xx
install(components);
在/assets/custom-mobile.less
文件中,为用到的组件引入样式文件
@import '~@teld/component-proxy/style/mobile/button/index.less';
@import '~@teld/component-proxy/style/mobile/popup/index.less';
(如果还有其它组件,缺少样式的话,按照上面的方式进行引入即可)
- 在
plugins
下新建teld-approval-flow-mobile.js
文件
import Vue form 'vue'
import * as TAF from 'teld-approval-flow-mobile'
import 'teld-approval-flow-mobile/lib/teld-approval-flow-mobile.css'
Vue.use(TAF, {
scaleButtons: {
visible: true,
initScale: 60,
position: 'top right',
spaceX: '10px',
spaceY: '20px',
},
designer: {
useButtonToggleAll: true, // 【全展开|全收起】
}
})
- 在
nuxt.config.js
中引入teld-approval-flow-mobile.js
,ssr: false
即可
{
//...
plugins: [
{
src: '@@/plugins/teld-approval-flow-mobile.js',
ssr: false,
},
];
//...
}
- 引入
flow
数据管理模块
在store/
下新建flow.js
文件
注:nuxtjs 会按文件名做子模块引入,无需手动在
store/index.js
中引入子模块
import { flowStore } from 'teld-approval-flow-mobile'
export default flowStore
// 或者
// import * as TAF
// export default TAF.flowStore
// 或
const { flowStore } =
require('teld-approval-flow-mobile').default || require('teld-approval-flow-mobile');
export default flowStore;
- 引入完成,使用组件
运行时查看用组件: ApprovalFlowRuntime
运行时:查看流程实例带流转状态的流程图
<approval-flow-runtime :flow-info="flowInfo">
Changelog
Development
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Deploy (publish to NMP)
pnpm build
pnpm publish