在vue中使用bpmn-js(一)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在vue中使用bpmn-js(一)相关的知识,希望对你有一定的参考价值。
参考技术A 由于之前的公司的项目中的工作流管理要用到流程图,而 bpmn-js 官方的文档是全英的而且使用的 js 框架是 jQuery ,可能是比较新的技术,官方也还在不断的更新,相关的文档或者资料很少很难找,只好自己不断爬坑填坑了。一个 BPMN 2.0 渲染工具包和Web建模器。
github地址: https://github.com/bpmn-io
实例地址: https://bpmn.io/toolkit/bpmn-js/
安装相关的依赖都是必须的,可以在官方文档上查看,在这里就不详细讲了。
swiper在vue中使用,纵向滚动翻页,超出一屏的解决方案
参考技术A 1.使用方法<template>
<Swiper
:options="swiperOption"
:style=" height: setHeight "
@slideChange="onSlideChange"
>
<SwiperSlide class="slide">page1</SwiperSlide>
<SwiperSlide class="slide">page2</SwiperSlide>
<SwiperSlide class="slide">page3</SwiperSlide>
</Swiper>
</template>
<script>
import swiper, swiperSlide from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
export default
components:
Swiper: swiper,
SwiperSlide: swiperSlide,
,
data()
let vm = this;
return
swiperOption:
direction: 'vertical',
initialSlide: 0,
on:
init()
vm.$swiper = this;
,
,
,
setHeight:
document.documentElement.clientHeight || document.body.clientHeight,
;
,
created()
this.setHeight =
document.documentElement.clientHeight || document.body.clientHeight;
this.handlerSwiper();
,
methods:
onSlideChange()
let pageIndex = this.$swiper.activeIndex;
switch (pageIndex)
case 0:
// ...
break;
case 1:
// ...
break;
case 2:
// ...
break;
,
handlerSwiper()
let startScroll, touchStart, touchCurrent;
this.$nextTick(() =>
this.$swiper.slides.on(
'touchstart',
function (e)
startScroll = Math.floor(this.scrollTop); // 针对安卓获取到小数进行向下取整
touchStart = e.targetTouches[0].pageY;
,
true,
);
this.$swiper.slides.on(
'touchmove',
function (e)
touchCurrent = e.targetTouches[0].pageY;
let touchesDiff = touchCurrent - touchStart;
let slide = this;
let onlyScrolling =
slide.scrollHeight > slide.offsetHeight && //allow only when slide is scrollable
((touchesDiff < 0 && startScroll === 0) || //start from top edge to scroll bottom
(touchesDiff > 0 &&
startScroll === slide.scrollHeight - slide.offsetHeight) || //start from bottom edge to scroll top
(startScroll > 0 &&
startScroll < slide.scrollHeight - slide.offsetHeight)); //start from the middle
if (onlyScrolling)
e.stopPropagation();
,
true,
);
);
,
,
;
</script>
<style scoped>
body
overflow: hidden;
.swiper-container
width: 100%;
.swiper-slide
overflow: scroll;
background: #00f;
height: 1000px; /* 高度由内容填充后删掉 */
</style>
2.解决swiper在微信开发者工具无法滑动:
以上是关于在vue中使用bpmn-js(一)的主要内容,如果未能解决你的问题,请参考以下文章
springboot整合activiti+bpmn-js或VUE(架构搭建篇)
springboot整合activiti+bpmn-js或VUE(架构搭建篇)
Nginx+Django-Python+BPMN-JS的整合工作流实战项目