![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
飞天代码
这个作者很懒,什么都没留下…
展开
-
微前端(十一)子应用注意window的使用
子应用切记禁慎 window对象的使用类似这种代码 queryAllAccounts:`${window.projectName.loginDes}/component/allTenant`,这种代码开发可能是ok的,但放入到乾坤后发现代码不好使了。原因就是window对象的使用,因为放入乾坤后的window是主应用的window对象了,而不是子应用的window。解决方案:1、则需要将window.projectName对象注册到主应用才行。2、最好的做法还是子应用尽量不要使用window原创 2021-10-20 08:03:43 · 4097 阅读 · 2 评论 -
微前端(九)全局静态文件引入
比如主应用引入了字体文件子应用也引入了字体文件这样写当然没有问题,如果现在想减少请求次数,主应用引入了该文件,则子应用则可以不再引入啊。但如果子应用去掉该引入,会出现一个问题,就是直接刷新子应用界面的时候,字体图标不会显示。解决方案1:还是上面说的 主应用和子应用引入相同的静态文件,缺点就是重复引用,无效开销。解决方案2:就是判断刷新,如果不是主应用刷新,而是刷新的子应用,则先跳转到主应用,然后再路由到子应用。方案1就不说了,下面介绍方案2第一步:在main.js里面判断刷新界面if原创 2021-10-09 11:55:01 · 354 阅读 · 0 评论 -
微前端(一)项目搭建
微前端的春风已经吹遍了前端行业,国内可能用qiankun来做微前端最多的吧,我这里也是采用qiankun来进行验证。为了赶上微前端这列车,打算还是写几个demo来验证下。目前如果输入qiankun进行搜索,网上的例子基本都是官方的那个列子,丑、简单,基本找不到比较好的企业级应用列子,求人不如求己还是自己上吧计划写如下一个列子建立4个应用,1个是登录应用,1个是主框架应用,1个是oa任务应用、1个是oa会议应用。将oa的任务应用和oa的会议应用注册到主框架应用。项目目录结构大概如下:go-lo原创 2021-04-24 21:45:34 · 580 阅读 · 0 评论 -
vue打包文件过大(一)
项目上线了,业务功能ok,界面外观ok。就是有点缺陷就是第一次登录太慢了要8-9秒。这是客户给我的说的,虽然我解释了单页应用的优缺点,但还是需要分析下。最大的文件就是app.8669b0c5.js和chunk-vendors.c823af3e.js咋整呢,只能逐个来分析了安装分析插件webpack-bundle-analyzer ,这个就不说了配置vue.config.js文件 config .plugin('webpack-bundle-analyzer'原创 2021-02-26 11:04:05 · 660 阅读 · 4 评论 -
bpmn-js 改造(三)给节点添加颜色,给边线加上滚动功能
给节点添加颜色,其实给节点加颜色的方式比较多。我使用的比较粗暴的方式,直接使用jquery,加样式的方式 $("g[data-element-id='"+nodeId+"']").find(".djs-visual rect").css("fill",colors["not-pass-node"]["bgColor"]);其实就是根据节点id找到相应显示rect 设置其中的颜色样式。效果图:给红色边框加上滚动效果;第一步:添加样式信息 @-webkit-keyframes test {原创 2021-01-17 19:48:06 · 3436 阅读 · 2 评论 -
bpmn-js 改造(二)预览状态下添加拖拽功能
流程图查看采用的是BpmnViewer方式来展示流程图,上效果图:问题来了,发现svg图片无法拖拽位置,在设计模式下是可以的,但查看模式不行了。但有些场景是需要进行拖拽的。手动加上拖拽功能,因为我这边修改了大量bpmn-js的源码,所以我采用的是直接在这个源码基础上扩展。找到Viewer.js文件然后在导入的地方加上import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";import MoveCanvasModu原创 2021-01-17 19:41:06 · 2765 阅读 · 0 评论 -
ivew+vue实现表单设计器--实现tab多页签的拖拽添加(七)
前面实现了table表格的拖拽生成,这里记录下tab标签页的拖拽生成。直接上图:拖拽数据的准备import getTabPanelTemp from "./getTabPanelTemp";import GoingUtils from "../../../utils/goingUtils";export default { __config__: { layout: 'tabsItem', elTag: 'tabs', tagIcon: 'gf-tabs',原创 2020-12-21 13:22:30 · 1188 阅读 · 2 评论 -
vue 设置事件总线 EventBus
有些场景下使用 EventBus 总线要让代码简单许多。第一步:编写EventBus类 class EventBus { constructor(){ (this as any).callbacks = {} } /** * 事件总线中注册事件 singleFlag为true 表示只能注册一次 防止重复执行 * @param name * @param fn * @param singleFlag */原创 2020-12-21 12:17:10 · 223 阅读 · 0 评论 -
ivew+vue实现表单设计器--不同控件展示不同属性(六)
这个实现比较简单,就是根据点击的相应对象显示该对象的属性设置比如点击textarea:比如点击下拉控件:<template> <div class="right-board"> <Tabs value="ctlProp" style="height:calc(100% - 2px)"> <TabPane label="组件属性" name="ctlProp" style="height:calc(100% - 40px);overf原创 2020-12-12 10:27:04 · 542 阅读 · 0 评论 -
ivew+vue实现表单设计器--实现表格拖拽添加(五)
表单设计经常会碰到比较复杂的大表格,如果一行一行拖拽效率太低了,所以需要写个表格拖拽组件。最终效果大概就是根据输入的行和列生成后:核心功能有:1、双击进入编辑,输入文字,离开焦点完成输入,变成label2、设置字体、设置居左、居右、居中、改变背景色、改变字体颜色、加粗等3、通过拖拽调整表格和宽度和高度4、选中多列、多行进行合并、拆分操作5、可以插入行、插入列6、设置边框显示、以及边框粗细以及边框颜色等。7、每个单元格都可以拖拽其他组件进入生成...原创 2020-11-29 12:25:56 · 1340 阅读 · 1 评论 -
ivew+vue实现表单设计器--jsx操作细节(四)
中间表单显示区域采用的render+jsx方式来进行渲染,因为组件是多样的,如果采用传统写法则需要写大量的v-if、v-else来进行判断,而且扩展起来不方便。jsx的写法例子:这段代码的作用就是双击变成input输入框,离开焦点实现数据的编写。 colLabelTitle(h, currentItem, index, list) { const { activeItem } = this.$listeners const config = currentItem.__config__原创 2020-11-23 21:24:34 · 489 阅读 · 0 评论 -
ivew+vue实现表单设计器--前进后退操作(三)
操作前进、后退操作,这个功能比较重要,而且必须提前设计后,不然后面再来兼容这个功能就比较麻烦。这里只对dom的增加、删除等渲染进行前进、后退操作,考虑到web到性能,不对属性操作进行前进、后退。添加组件,后退数组操作点击后退,堆栈操作点击前进,逆向操作堆栈而已。第一步申明了2个数组,1个对象映射对象 data() { return { forwardList:[], backwardList:[], objMap:{},原创 2020-11-23 17:20:10 · 466 阅读 · 0 评论 -
ivew+vue实现表单设计器--拖拽增加、点击添加(二)
上一节讲了界面布局,这节主要介绍点击控件进行添加、拖拽控件进行添加。首先介绍下实现表单绘制的原理:所以不管是点击添加还是拖拽添加,其实都是向绘制list里面添加组件对象而已。申明绘制list data() { return { drawingList: [], } },点击组件进行添加:这个简单,就是注册click事件,点击的时候将组件对象追加到绘制list里面 <div v-for="(原创 2020-11-23 00:59:35 · 1210 阅读 · 0 评论 -
ivew+vue实现表单设计器---框架界面搭建(一)
网上有个基于element-ui的开源表单设计器,但目前我手头的项目都是基于ivew和自己封装的goingui控件库,由于组件不一样,加上开源的设计器功能还没达到预期,故打算从0 开始打造一个基于vue的表单设计器。第一步:工程搭建采用的vue2.*+ivew来进行开发,具体搭建就不写了。第二步:界面框架搭建采用左中右的方式来展示,直接上图:左边是控件区域,中间是组件展示效果区域,右边是组件属性查看,修改区域。这节没有啥特殊的难点,基本都是采用现成的组件,只是换了下图标或者下拉内容,而已。第原创 2020-11-21 10:52:04 · 1909 阅读 · 4 评论 -
framework7+vue+cordova移动开发(一)创建cordova项目并编译
进入到项目路径然后执行cordova 创建项目的命令:cordova create gointEplat com.example.gointEplat gointEplat完成后的目录结构:进入到gointEplat文件夹下,执行cordova platforms add ios ,执行 cordova platforms add android然后执行系统里面的相关命令执行完了,如果没有错误,则可以用xcode 或者 andorid studio 来进行模拟机调试了。...原创 2020-06-22 00:38:38 · 640 阅读 · 0 评论 -
采用d3开发流程设计器(七)实现撤销、恢复的功能
撤销和恢复一开始是不想做的,但后来感觉这个功能还是有点必要的,就只好加上了。需求:这里就不介绍了,就是个操作的前进后退功能。其实原理蛮简单的,就是做一些操作的时候将前进、后退操作指令以及相关参数传递给操作事件监听类。注意这里的参数一定是数据层面的,不能有对象层面的传递。 //添加事件操作监听 this.flowDesCtl.flowStackWatch.push( "window.flowDesCtl.removeNode", "window.flowDesCt原创 2020-06-16 12:54:55 · 800 阅读 · 5 评论 -
采用d3开发流程设计器(六)通过拖拽选中多个节点,然后拖动调整位置
需求:1:当图绘制一半时候,需要对多个节点位置进行调整,通过拖拽选中多个节点,然后进行调整。2、选中多个记录,点击删除来进行多个节点删除。效果图:选中多个节点进行拖拽移动。关键代码:第一步拖拽的时候创建一个临时的rect,并且设置透明度为0.7/** * 初始化一个用于拖拽都rect区块 * @param containerId */FlowDragSelArea.prototype.init=function (containerId) { this.flowDesCtl原创 2020-06-10 16:22:22 · 1414 阅读 · 1 评论 -
vue3+typescript项目开发 (三)添加jquery和jquery插件toastr
vue3中使用jquery,可能好多人说用了vue3没必要用jquery,其实不然。好多界面和组件,还是需要使用jquery的,不然都需要用原生js来实现,而且还需要考虑兼容性。废话不多说了第一步是按照jquery了cnpm i jquery --save-dev第二步:修改vue.config.js文件var webpack=require('webpack');... con...原创 2019-04-15 13:35:20 · 2897 阅读 · 0 评论 -
vue3+typescript+vu3x项目开发 ( 四)结合vuex
搜索vu3+typescript+vuex,网上例子一大把,但自己需要的那种帖子却少的可怜。做正真的工程项目的时候vuex是必不可少的,而且说实话一般都会分模块来管理store,而网上的例子大部分是不分模块的。第一步:废话不多说了,首先定义LoginStore.ts。const initState: any = { menulist: "store测试"};const mutat...原创 2019-04-16 09:34:50 · 1693 阅读 · 0 评论 -
vue3+typescript项目开发 (二)配置信息修改
第一步:集成ivewcnpm install iview --save执行该命令,安装iview组件库打开main.ts文件,添加如下代码://引入iview组件import iView from 'iview';import 'iview/dist/styles/iview.css';Vue.use(iView);第二步:修改router的配置信息...原创 2019-04-12 15:06:32 · 1145 阅读 · 0 评论 -
vue3+typescript项目开发 (一)升级相关组件
使用vue2开发项目2年了,那个时候typescript还没有流行,一晃2年过去了,现在已经vue3+typescript大行其道了,所以打算还是把自己的项目升级一下。第一步:自然是升级nodehttps://nodejs.org/en/ 到官网下载最新稳定版本进行安装我安装的是10.15.3 LTS第二步:升级vue-cli 重新安装vue-clicnpm install -g ...原创 2019-04-12 09:59:29 · 2833 阅读 · 0 评论 -
Vue2(三)实现子菜单展开收缩,带动画效果
以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感。 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。 看下效果图: 点开效果: 其实原理比较简单,就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-hei原创 2018-01-01 18:00:55 · 32683 阅读 · 4 评论 -
Vue2(二) 传递对象到子组件中
最近闲的无聊,用vue来重写自己的平台,以前是用jquery写的,去年用react写了一遍,今年打算用vue来翻写一遍。react中传递对象到子组件是非常普遍,vue还没传过,写个例子试了试,原来也差不多的。图底部有4个按钮,通过传入一个json对象到子模板中,子模板渲染相应的按钮控件子模板,goBtn的代码如下,接收一个item对象,根据item里的值来组装代码//系统常原创 2017-12-23 18:10:00 · 11111 阅读 · 0 评论 -
Vue2 (一)组件定义
vue都火了好久了,一直想研究研究。今天终于写了第一个组件js代码//右边图片菜单var imgMenuTemp=Vue.extend({ data(){ }, methods:{ //点击菜单子项 切换相应的界面展示。 changeSpace:(event)=>{ var el=event.targe原创 2017-11-04 18:37:11 · 593 阅读 · 0 评论 -
vue2(四)懒加载配置
一晃,用vue已经有3、4个月了,手机app界面达到了60多个了,打出的包都快1MB了,首页登陆已经慢的有点接受不了,懒加载的配置已经是迫在眉睫了。一开始以为配置懒加载会非常麻烦,但尝试了下,发现还是蛮简单的。 第一步:修改build/webpack.base.conf.js文件 修改内容: output: { path: config.build.assetsRoot原创 2018-01-20 21:48:28 · 1276 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----vuex整合进项目(三)
既然是正规项目自然少不了vuex咯,接下来我们来配置vuex。原创 2018-07-08 23:50:05 · 468 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----vueRouter3整合进项目(四)
项目采用的是VueRouter3.0.1作为路由。下面对vueRouter的配置进行一个详细的记录原创 2018-07-08 23:54:10 · 806 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----sass样式整合进项目(五)
本项目采用sass进行样式编写,这里对sass的整合进行一个详细的记录。原创 2018-07-08 23:56:23 · 654 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----定义全局工具类(六)
项目开发过程中建立了许多工具类:不可能在每个界面开发过程中都用相对路径去获取对象,所以需要将这些工具类申明成全局对象,而页面开发只要直接引用即可 定义前的引用方法: import GoingUtils from '../../utils/GoingUtils';定义后的引用方法: import GoingUtils from 'GoingUtils';其实这个...原创 2018-07-10 11:30:56 · 326 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----定义全局组件库(七)
在开发过程中使用了ivew控件库,但ivew控件毕竟有限,难免有些控件需要自己开发,但自己定义控件库也不可能一个一个单独去引用,也需要定义成全局组件库,业务界面不需要关心引用直接使用就是。比如我写了一个goLoading组件,目录结构如下: 第一步:将组件在index.js中进行注册:import GoLoading from './goLoading/index';cons...原创 2018-07-10 11:39:25 · 466 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----基于axios编写后台通讯类queryCommad(八)
queryCommand是自己编写的一个后台通信类,是基于Axios实现。原创 2018-07-10 11:42:45 · 210 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----项目搭建(一)
使用vue2开发项目都有1年多了,但一直忙于开发也没时间进行一次全面的总结,今天公司任务完成的差不多,心血来潮想对这一年多的项目成果进行一次全面的重构,顺便把vue2的使用过程进行一次详细的记录。 第一步:安装node(略)第二步:安装npm(略)第三步:安装vue-cli: vue-cli是vue脚手架,也就是用来构建vue项目的工具 打开cmd进入命令模式:输入以下命令...原创 2018-07-06 16:55:50 · 546 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----idea环境配置(二)
第一节完成了项目的搭建,但点开里面目录,发现vue文件的内容报错,而且后缀为vue的文件也没有特殊显示。这是因为开发环境没有进行相应的设置导致。这是设置前的展示效果。 第一步是设置对es6的支持。 添加选择ECMAScript6第二步:添加vue插件 添加成功后,显示效果就如下,表示安装Ok了: ...原创 2018-07-07 08:50:47 · 379 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----兼容IE的配置(十)
网上搜索下vue2项目支持IE会有大量相关的文档,而且会详细讲解配置过程,但折腾了半天才发现网上的方式并不适合我项目的实际情况。因为该项目大概有将近100个界面,每个界面都会用到几个特殊的工具类: 比如系统工具类GoingUtils 、系统断言类AssertUtils、离线存储类StorageUtils等, 所以我直接把这些工具类压缩后直接在index.html中引入,不然每次使用都要引入...原创 2018-07-14 22:33:55 · 715 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----svg图片在项目中的使用(十一)
svg图片的优点不在阐述,直接讲解怎么集成到项目中。 项目中采用的vue2-svg-icon组件,来使用svg图片。 第一步:自然就是安装vue2-svg-icon插件cnpm install vue2-svg-icon --save-dev第二步:则就是src/assets/下新建svg文件夹 第三步:将插件配置到main.js里面import Icon from 'v...原创 2018-07-20 15:58:58 · 454 阅读 · 0 评论 -
Vue2+VueRouter3+Webpack3.6+Axios项目实战----Grunt在项目中的使用(十二)
可能有人会疑问,既然都用webpack了怎么还需要用grunt呢。 先介绍下使用背景:原创 2018-07-20 16:03:25 · 510 阅读 · 0 评论 -
vue动态路由来生成系统菜单(一)
先说下功能吧,就是菜单通过动态路由进行渲染出来,而不是路由配置写死来实现。虽然网上已经有各种帖子来介绍,但我还是折腾了快2天才搞定。直接上代码吧&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;go-page go-manage-page&amp;quot;&amp;amp;gt; &amp;amp;l原创 2019-03-15 15:50:48 · 5648 阅读 · 1 评论 -
vue动态路由来生成系统菜单(二) 解决刷新空白的问题
由于子路由都是动态追加的,当界面刷新的时候,其实我们路由里面并没有该子界面的配置,所以就是404咯,也就是空白咯在页面刷新时候,在router.beforeEach里面去判断,如果是动态路由而且是第一次加载,则动态追加该路由,再进行界面的跳转。核心代码如下:var dynamicRouter=null//用来获取后台拿到的路由 var getLastUrl=(str,yourStr)=&...原创 2019-03-16 01:02:51 · 10884 阅读 · 0 评论 -
vue2(五) 将接口用 webpack 代理到本地
以前是用mock模拟的数据来进行开发,但有的时候还是不方便,最好的方式还是莫过于代理到本地进行访问。第一步:修改config/index.js文件 找到其中的 proxyTable: {}修改成: proxyTable: { '/go-nifty/**': { target: 'http://192.168.1.1:8180', // 你接口的域原创 2018-01-21 22:49:09 · 1182 阅读 · 0 评论