前端恶霸-CSDN博客

原创 JointJS动态流程图升级

之前写了一片JointJS的简单使用，最近解答评论的同时又重新查看了下发现有些不足，大半年不接触进行温习都要思考一下才想起来，感觉可能对初入学习理解起来帮助不大，现在更新升级版本，帮助大家同时以便以后使用起来更好的回忆。废话不多说进入正题这次会分成三个部分进行讲解一简单使用先上效果图这种模式的流程图较为简单准备还是1.jquery2.Lodash.js...

2018-12-20 17:15:22 2192 3

原创树形结构 - layui.tree

最近公司项目有点多一段时间没有更新，刚完成的一个项目用到了tree树形结构有一些使用心得分享一下. 开始是想使用zTree -- jQuery 控件，后来还是选用了基于layui的树形控件，因为项目后台管理界面都是用到layui，风格上统一一下感觉会好点（有点强迫症- -!）,废话不多说上菜。。需要引用四个文件jquery，layui.css，layui.js，layui-xtree...

2018-07-20 15:59:08 18277 7

原创 jquery Gantt甘特图简单应用

最近公司排产需要做个甘特图，做了一个智能排产；js和css的引用<link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js

2018-06-29 09:55:10 15257 6

原创 JointJS动态流程图

最近公司有个导航项目需要做个流程图比较复杂的那种，作为一个前端小菜也是很蒙的，要求就两条一：动态加载流程图；二：动态连线；这两点要求也是难住了一阵呢，最后选择了jointJS，选着原因官网API很详细，代码量比较少封装起来使用也很便捷，进阶文档基础略过，没接触过得可以去在官网先学习一下，废话不多少直接上硬菜。我这块写了两个一个是节点型流程图和关系行流程图。（源码在下一篇文章可以...

2018-05-28 16:39:53 18725 7

原创 Vuex简单使用学习四（modules）

一个项目足够大时，store（仓库）里面的state，getters，mutations，actions就会有很多，如果都放在一个store里面就感觉很混乱，使用modules可以把他们放到不同的文件中，每个modules都有自己的state，getters，mutations，actions例如 const moduleA={ ...

2019-02-12 12:31:30 307

原创 Vuex简单使用学习三（Action）

import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { debugger state.count++; }, decrease(state) { state.count-...

2019-02-12 10:46:35 632

转载 vue-cli

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。1.安装vue-cli① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），...

2019-02-11 14:01:53 378

原创 Vuex简单使用学习二（Getter）

假如Vuex定义某个数组llistconst store=new Vuex.Store({ state:{ list:[0,2,15,30,50] }, mutations:{ }, getters:{ filteredList(state){ return state.list.filter(item=>item<10) }, ...

2019-02-11 10:44:20 290

原创 Vuex简单使用学习一（State，Mutations）

最近在做一个vue项目发现一些组件间的存储有些混乱，抽了1.2天时间学习了Vuex做下学习记录介绍Vuex几个参数State 储存初始化数据Getters 对State 里面的数据二次处理（对数据进行过滤类似filter的作用）比如State返回的为一个对象，我们想取对象中一个键的值用这个方法Mutations 对数据进行计算的方法全部写在里面（类似c...

2019-02-11 10:02:47 361

原创 vue router-link点击事件无效解决方法

在router-link上使用@click无效是因为router-link的作用是单纯的路由跳转会影响阻止点击事件，使用@click.native就可以了

2019-01-22 10:26:39 6718

原创 vue定义全局Url

首先创建一个vue文件然后在main引用在挂载到实例上就可以使用的时候直接this.Api就等于https://blog.csdn.net/weixin_41916005，在更改测试url和发布url很方便...

2019-01-22 09:34:32 3837

原创 vue改变一个变量值关联的变量也变换解决方法（引用和传值）

最近公司项目做多订单下单是遇到一个问题，有一个公共变量的dataForm1用来记录单条订单信息，这时候有个变量dataForm2用于记录总订单信息，遍历方法每加一条dataForm1的时候push到dataForm2，发现dataForm2中的每条订单信息都和最后添加的数据是重复的，这里是因为涉及了一个值的引用和传递的问题首先说下引用和传值的条件区别引用：object（对象...

2019-01-07 16:16:56 5296 3

原创 vue单页传值params 与 query两种方式的区别

params和query最主要的区别是url上是否有参数，如图paramsthis.$router.push({ name: 'Pay', params:{ orderOms: data.OmsNo, Amount:data.Amount }})query this.$router.push({ ...

2018-12-25 11:03:30 617

原创 vue 二维码制作三步上篮

一安装qrcodejs2npm install qrcodejs2 --save二引用qrcodejs2import QRCode from 'qrcodejs2'三使用走起<div id="canvas"></div>var qrcode = new QRCode('canvas', { wid...

2018-12-17 15:13:19 147

原创 split,splice,slice 三者的用法

一.splitsplit主要用于字符串的分割，可以根据某个字符把字符串拆分成多个数组 var str = “Front-end-bully” Arr = str.slite(“-”); //[‘Front’,’end’,’bully’]二.splicesplice可根据坐标位置进行删除数组并返回长度splice(index,num,item1)3个...

2018-12-11 09:56:11 12063 1

原创 vue watch用法及场景

这两天在做一个公司项目，遇到一个问题，一个子组件要改变父组件的data值，并且需要把这个值传给其他兄弟组件，这时候发现其他兄弟组件的data值没有变换还是最初父组件传的值，如下图这时候就用到watch来进行监听了props: ['moneys'], data() { return { money:this.moneys, ...

2018-12-05 16:41:20 2417 1

原创 vue子组件调用父组件方法

父组件：<div><Design @MLdata="getML"></Design></div>Design是子组件MLdata是自定义调用名称getML是父组件的方法子组件：this.$emit('MLdata', { code: data.Code, });MLdata父组件自定义的调用名称...

2018-12-03 10:13:38 822

原创 vue axios CORS错误

如果data包含数组这可能会出现问题解决方法一var qs = require('qs');var that=this that.axios.post("" + that.APi + "/diy/GetTechUnit", qs.stringify(dataForm)).then(function(res){ ...

2018-11-30 10:55:45 16487

原创 Vue路由跳转新窗口打开

let Logistics= this.$router.resolve({ path:'/Logistics', query:{ Amount:10 } }) window.open(Logistics.hr...

2018-11-19 15:30:19 7021

原创 vue父级组件调用子级组件方法

父页面<Category ref="mychild"/>在父级周期定义事件比如点击执行子组件方法this.$refs.mychild.parentHandleclick(this.msgSty);上边的parentHandleclick就是子组件里的方法...

2018-11-08 14:05:05 5684

原创 vue子父组件数据互相传递

一父传子：父页面： <Category :message="msg" :mesageSty="msgSty"/>Category是子组件，msg和msgSty是父组件data的值，需要传给Category子组件子组件：接收父组件消息<div>{{mesageSty}}</div>export default { pro...

2018-11-08 13:59:58 166

原创 js拷贝与变量赋值

Js的深拷贝与浅拷贝浅拷贝：var arr1=[{name:zhang}]var arr2=[]arr2=arr1这时候arr2的数据和arr1是一样的，这时如果把arr2中的name改变，这arr1的也会发生改变深拷贝： //深拷贝 function copy(obj) { let objcopy = ...

2018-10-22 15:02:02 2191

原创 Js数组对比

最近做了一个功能，结算对比表，要求的是历史版本与现在的版本进行对比，如果在新版本数据变更要标红，新版本新加的数据老数据要空出来，同理老数据原本存在新数据删除的也要空出来思路：既然是双向对象肯定不能拿两个数据进行来回比较，容易出差错也比较麻烦不灵活，这时候应该定义一个新的数组，把两个数组拼成一个并进行排重，用这俩数组和新的这个进行比对； var dataArr =...

2018-10-22 11:33:51 11362 1

原创 JS禁止右键和F12查看

$(document).bind("contextmenu", function () { return false; });//禁止右键 document.oncontextmenu = function () { return false; }; document.onkeydown = function () { ...

2018-10-16 10:11:36 4780

原创如何判断对象为空

var data={}if(JSON.stringify(data) == "{}"){alert("data为空")}else{alert("data为空")}

2018-10-09 14:42:46 930

原创处理新建与更新数据重复添加问题

最近公司有个项目需要做一个配码表类似下图开始时处理更新的问题是直接拿取所有数据进行提交，没有更新的数据也提交了导致效率大大折扣，后来是只提交修改过的数据和新建的数据进行提交，因为最后提交的是一个数组，新建的数据还好，更新的数据会导致重复添加到数组，即使遍历数组进行if和else判断，if里面判断是否存在数据id进行特定处理是没有问题的但是在else里面也会随着遍历添加一些没用的数据 ...

2018-09-29 10:59:27 1028

原创 Js判断当前打开页面是手机端还是Pc端

var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUs...

2018-09-12 11:26:22 3166

原创自定义页面滚动条样式

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 13px; height: 16px; background-color: #F5F5F5; } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit...

2018-09-03 13:47:20 1152

原创关闭页面或浏览器弹窗提示

window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4...

2018-08-29 15:18:42 11081 4

翻译 zTree刷新当前节点和父节点

/** * 刷新当前节点 */ function refreshNode() { /*根据 treeId 获取 zTree 对象*/ var zTree = $.fn.zTree.getZTreeObj("treeDemo"), type = "refresh", ...

2018-08-01 10:36:35 4759

原创简单cookie时效设置

首先需要引用两个js，一个是jquery，另一个是jquery.cookie.js <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.cookie.js" type="te

2018-05-31 13:44:56 5280

原创解决新添加标签事件无法触发问题

之前在写商城项目时候遇到一个坑，原本页面没有的标签，通过事件添加标签后无法进行事件触发。写一个简单例子方便理解<button class="capy">生成按钮</button> <div class="div"></div>比如点击生成按钮时添加一个button，然后点击这个button进行alert（1）下面是错误写法！！$(".bt

2018-05-29 17:25:47 1571

原创 js简单复制功能

之前休息时候写了一个分享功能模块,里面有一个复制按钮分享一下。html：<div style="position: fixed;top: 50%;left: 50%;margin:-100px 0 0 -100px"> <input type="text" name="" id="text" value="" class="share

2018-05-29 16:59:26 994

前端恶霸