teld-approval-flow-mobile v0.0.13-beta.11

teld-approval-flow-mobile

see teld-approval-flow

TELD 流程图组件的删减化版本，仅提供一种模式：运行时流程实例的查看，同时将原 PC 端组件替换为移动端组件。

Usage

用于 TELD 内部 ToC 框架中

0. 组件准备

在/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';

(如果还有其它组件，缺少样式的话，按照上面的方式进行引入即可)

1. 在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, // 【全展开|全收起】
  }
})

2. 在nuxt.config.js中引入teld-approval-flow-mobile.js，ssr: false即可

{
  //...
  plugins: [
    {
      src: '@@/plugins/teld-approval-flow-mobile.js',
      ssr: false,
    },
  ];
  //...
}

3. 引入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;

4. 引入完成，使用组件

运行时查看用组件： ApprovalFlowRuntime

运行时：查看流程实例带流转状态的流程图

<approval-flow-runtime :flow-info="flowInfo">

Changelog

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

Customize configuration

See Configuration Reference.