前端 | Mgso

vue拖拽表格单元格指令

Vue中以指令方式 1 2 3 import Vue from 'vue' import dragCellResize from 'drag-cell-resize' Vue.use(dragCellResize); Vue中以 new DragCellResize()来调用 1 2 3 4 5 6 7 8 import {DragCellResize} from 'drag-cell-resize' export default { mounted(){ new DragCellResize(this.$refs['table'],()=>{},false) // DragCellResize三个参数，第一个是要绑定的dom对象， // 第二个为回调函数，第三个为是否自定义拖拽行为 } } Demo 1 默认拖拽行为仅仅只需要在table上绑定v-drag-cell-resize,指令会自动完成拖拽列宽操作 ::: demo 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 <template> <div> <table v-drag-cell-resize> <colgroup> <col v-for="item in 5" width="120px"> </colgroup> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> <th>Age</th> <th>Sec</th> </tr> </thead> <tbody> <tr v-for="item in 5"> <td>Jill</td> <td>Smith</td> <td>50</td> <td>18</td> <td>Man</td> </tr> </tbody> </table> <table v-drag-cell-resize> <colgroup> <col v-for="item in 6" width="100px"> </colgroup> <thead> <tr> <th colspan="2">A</th> <th colspan="3">B</th> <th>C</th> </tr> <tr> <th>A1</th> <th>A2</th> <th>B1</th> <th>B2</th> <th>B3</th> <th>C</th> </tr> </thead> <tbody> <tr v-for="item in 6"> <td>Jill</td> <td>Smith</td> <td>50</td> <td>18</td> <td>Man</td> <td>Man</td> </tr> </tbody> </table> </div> </template> <style> th,td{ box-sizing: border-box; } </style> :::...

d3.js的捆图

目前对于d3.js的捆图(bundle),网上的资料都是d3(v3)版本的.但是介于现在d3.js已经是5.x版本了,所以针对v4改版后对捆图升级. 效果图与v3版本的不同 d3.layout.cluster() => d3.cluster() cluster.nodes() => cluster(d3.hierarchy(cities)).leaves() 其中leaves() 作用是返回叶节点数组，叶节点是没有孩子节点的节点。 d3.layout.bundle() => node.path(target) d3.scale.category10c() => d3.scaleOrdinal(d3.schemeCategory10) 文档参考 d3js.org.cn/api v3 与 v4 代码示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 <html> <head> <meta charset="utf-8"> <title>捆图</title> <style> ....

js压缩图片

最近做私单遇到一个问题.客户觉得上传一张手机上的图片速度很慢.有时候甚至慢到timeout.于是要求前端做压缩寻找了很多解决方案,大多数都是以舍弃高宽为基础从而实现压缩.但是这种做法无疑让图片受损.且若是身份证之类的证件图片用这种压缩方式更不可取.于是乎找到一个近乎完美的解决方案.压缩图片质量而不是高宽 1 图片压缩 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 /** * @param path 文件路径 * @param options 包含宽,高,质量 * @param callback 图片压缩后执行的回调函数 */ function canvasDataURL(path, options, callback) { var img = new Image(); img.src = path; img....

js正则表达式分组() 不捕获(?:) 断言

分组分组在正则中用()表示，分组的作用有两个： 1.将某些规律看成是一组，然后进行组级别的重复，可以得到意想不到的效果。 2.分组之后，可以通过后向引用简化表达式（\1 或者$1）。 eg: 先来看第一个作用，对于IP地址的匹配，简单的可以写为如下形式： 1 /\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}/ 但仔细观察，我们可以发现一定的规律，可以把.\d{1,3}看成一个整体，也就是把他们看成一组，再把这个组重复3次即可。表达式如下： 1 /\d{1,3}(.\d{1,3}){3}/ 再来看第二个作用，就拿匹配<title>xxx</title>标签来说，简单的正则可以这样写： 1 /<title>.*<\/title>/ 可以看出，上边表达式中有两个title，完全一样，其实可以通过分组简写。表达式如下： 1 /<(title)>.*<\/\1>/ 对于分组而言，整个表达式永远算作第0组在上述例中，第0组是<(title)>.*</\1>，然后从左到右，依次为分组编号，因此，(title)是第1组 :::warning 注意用\1这种语法，可以引用某组的文本内容，但不能引用正则表达式。 ::: 例如刚刚的IP地址正则表达式为\d{1,3}(.\d{1,3}){3}，里边的\d{1,3}重复了两次，如果利用后向引用简化，表达式如下 1 /(\d{1,3})(.\1){3}/ 经过实际测试，会发现这样写是错误的，为什么呢？后向引用，引用的仅仅是文本内容，而不是正则表达式！也就是说，组中的内容一旦匹配成功，后向引用，引用的就是匹配成功后的内容，引用的是结果，而不是表达式。因此，(\d{1,3})(.\1){3}这个表达式实际上匹配的是四个数都相同的IP地址，比如：123.123.123.123。不捕获不捕获其实就是在分组的前边加上?:，可以在不需要捕获分组的表达式中使用，加快表达式执行速度。就拿匹配xxx标签来说，通过分组可以简写为 1 /<(title)>.*<\/\1> / 但是如果是(?:title),则\1就不能捕获到这个子组了，只能捕获第一个出现的非?:的分组作为\1 ::: tip 提示 (?:title)本身会在完整匹配中，只是不在子组中，注意和断言的区别 ::: 断言所谓断言，就是指明某个字符串前边或者后边，将会出现满足某种规律的字符串就拿匹配<title>xxx</title>标签来说我们想要的是xxx，它没有规律，但是它前边肯定会有<title>,后边肯定会有</title>，这就足够了想指定xxx前肯定会出现<title>，就用正后发断言，表达式： 1 /(?<=<title>).*/ 想指定xxx后边肯定会出现，就用正先行断言，表达式： 1 /.*(?=<\/title>)/ 两个加在一起，就是 1 /(?<=<title>).*(?=<\/title>)/ 对正后发和正先行的解释：其实掌握了规律，就很简单了，无论是先行还是后发，都是相对于xxx而言的，也就是相对于目标字符串而言。假如目标字符串后边有条件，可以理解为目标字符串在前，就用先行断言，放在目标字符串之后。假如目标字符串前边有条件，可以理解为目标字符串在后，就用后发断言，放在目标字符串之前。假如指定满足某个条件，就是正。假如指定不满足某个条件，就是负。断言只是条件，帮你找到真正需要的字符串，本身并不会匹配！！表示正好相反的意思，就是把=换成了！，看表格解释，X代表字符表达式释义 (?=X ) 零宽度正先行断言。仅当子表达式 X 在此位置的右侧匹配时才继续匹配。例如，\w+(?...

js中的for in for of

js中遍历的方法有很多,例如普通的for(;;),for in,while,forEach,some,map….等等. 本文主要介绍js中的for in循环和for of循环 for in for in的常见用法主要是用来遍历一个对象.例如 1 2 3 4 5 var obj = {a:1,b:2,c:3}; for(var k in obj){ console.log(k) } //a b c 上述代码中for in通过遍历对象的键来实现输出对应value.也就是说for in 其实是遍历对象键我们来试试遍历数组 1 2 3 4 5 var arr = [1,2,3]; for(var k in arr){ console.log(k) } //0 1 2 其实这里和for(;;)循环挺像的.我们因为数组的索引在这里被看成了键. 我们还是可以通过这个键去获取值例如这样 1 2 3 4 5 var arr = [1,2,3]; for(var k in arr){ console.log(arr[k]) } //1 2 3 其实熟悉for in的同学都知道....

移动端自适应.px转rem

在移动端开发中,不同分辨率的设备所展示的样式也会不同.为了解决这一问题,我们用rem单位替换掉原来的px单位. 已达到移动端自适应的效果 rem 先来简单了解一下rem. rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。 1 2 3 4 5 6 7 8 9 html{ font-size:20px; } .btn { width: 6rem; height: 3rem; line-height: 3rem; font-size: 1.2rem; } 如上述代码, html中设置了font-size为20px. 那么根据rem计算规则, .btn中的width:6rem 其实等价于width:120px; 也就是说现在的1rem = 20px. 那么之后我们在开发过程中只需使用rem作为基本单位即可. 这里就会有个问题.我要如何知道根节点中font-size应该设置多少呢? 设置根节点font-size 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //设置根节点font-size (function (doc, win) { var docEl = doc....