匆匆那年

element-ui合并单元格使用详解

最近做的一个叫组合商品的项目，里面需要用到饿了么的合并单元格。 看了看官方的示例，发现所谓的单元格跟我之前的认知不一样，比如有两个组合A、B，其中A是由a1和a2组合在一起(即A = [a1, a2])，B是由b1、b2和b3组合在一起(即B = [b1, b2, b3])，我之前一直以为饿了么的table的结构也是这样的，起初我还在想如果这个table组件让我写，我一定是写不出来的，感觉太难了。 饿了么的前端技术就是牛，他们是这样实现的。上面的两个组合在table里面的数据其实还是a1、a2、b1、b2和b3，啊！跟正常的五条数据没有区别？没错，但是在table上有一个控制合并单元的方法。 控制单元格是否合并就是靠objectSpanMethod，根据官方文档可知，这个函数是Function({ row, column, rowIndex, columnIndex })，上面table是要求第一列bundleName和第二列bundlePrice合并。 所以objectSpanMethod可以这样写 // 控制合并单元格 objectSpanMethod({ row, column, rowIndex, columnIndex }) { if ([0,1].includes(columnIndex)) { const _row = this.combineRowSpan[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; Read more…

By 匆匆那年, ago

小米路由器3+Google Home mini+Shadowsocks还是不行？

根据网上的教程安装了开通了小米路由器的ssh功能，并且安装了路由器层面的shadowsocks，通过 /etc/init.d/shadowsocks start启动shadowsocks，如果此时已经在可以科学上网了，但是Google Home mini还是提示didn’t setup，那就得进行下面的设置了 打开 /etc/dnsmasq.d/dnsmasq_list.conf，再最上面加上一下两行 server=8.8.8.8 server=8.8.4.4 保存并退出后，再设置iptables规则 iptables -t nat -A PREROUTING -s 192.168.0.1/24 -p udp –dport 53 -j DNAT –to 192.168.0.1 iptables -t nat -A PREROUTING -s 192.168.0.1/24 -p tcp –dport 53 -j DNAT –to 192.168.0.1 iptables -I PREROUTING -t nat -p udp -d 8.8.4.4 Read more…

By 匆匆那年, ago

nginx开启https parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf

安装nginx，一般是安装在/usr/local/nginx nginx基本操作 cd /usr/local/nginx/sbin 启动 ./nginx 关闭 ./nginx -s quit 开机自动启动 vim /etc/rc.d/rc.local 在里面添加一行 usr/local/nginx/sbin/nginx 开启SSL 这样你的网站就可以使用https访问了，还会有绿色的代表安全的锁哦 依然是在西部数码申请证书，申请一年只需要8元 配置nginx /usr/local/nginx/conf/nginx.conf 要正确填证书的位置，同时可以开启https和http共存 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80 default backlog=2048; listen 443 ssl; server_name www.daozhao.com.cn; ssl_certificate Read more…

By 匆匆那年, ago

nodejs dgram模块广播+组播

本机IP地址是10.8.93.80， 具体信息如上图所示 根据计算得知我的广播地址应该是10.8.93.255，不是10.8.93.254哦。 其它内容就直接上代码 server.js const dgram = require(‘dgram’); const server = dgram.createSocket(‘udp4’); const multicastAddr = ‘224.100.100.100’; server.on(‘close’, () => { console.log(‘socket已关闭’); }); server.on(‘error’, (err) => { console.log(err); }); server.on(‘listening’, () => { console.log(‘socket正在监听中…’); server.addMembership(multicastAddr); // 不写也行 server.setBroadcast(true); server.setMulticastTTL(128); setInterval(() => { sendMsg(); }, 1500); }); server.on(‘message’, (msg, rinfo) => Read more…

By 匆匆那年, ago

修改页面的element-ui级联菜单使用

根据官方给的例子我们可以知道，在级联菜单被选择时，我们获取的是一个数组，已选择流程id为例，类似 [1, 11, 112] 但是很多情况下，我们在传递选择结果给后端接口的时候，我们只是传112而已，这一般是后端给的每个id是不会重复，传递一个最后的子节点即可。 就常规的CRUD业务而已，在新增时这不算什么问题，而在修改时，接口肯定会只返回112（因为当初你新增的时候只传递了112而已），这个时候你可能就得根据112寻找到11，再根据11寻找到1，一般来说我们的数据格式是类似这样的 { id: 1, parentId: 0, children: [{ id: 11, parentId: 1, children: [{ id: 111, parentId: 11 }, { id: 112, parentId: 11 }] }, { id: 12, parentId: 1 }] } 顶级的id的parentId为0，这是我们根据112的parentId递归向上查找，知道该节点的parentId = 0为止。这样我们就得到了数组[1, 11, 112]。 直接上代码，里面额dataForm就是接口当前的详细信息 <el-form-item label=”流程” prop=”procedureId”> <el-cascader :options=”proceduresArrayed” ref=”proceduresCasader” Read more…

By 匆匆那年, ago

element-ui动态表单async-validate校验 please transfer a valid prop path to form item!

现在很多库，比如饿了么的element-ui的表单就是用的async-validate实现的表单校验，一般我们是这样的（以vue+element-ui为例） template <el -form :model=”dataForm” ref=”dataForm” :rules=”dataFormRules”> </el><el -form-item label=”名称” prop=”name”> </el><el -input v-model=”dataForm.name”></el> <el -form-item label=”版本” prop=”version”> </el><el -input v-model=”dataForm.version”></el> javascript dataFormRules: { name: [ { required: true, message: ‘请输入名称’, trigger: ‘blur’ }, { min: 1, max: 50, message: ‘长度在 3 到 5 个字符’, trigger: ‘blur’ } ], version: Read more…

By 匆匆那年, ago

vue实现自定义组件的v-model双向数据绑定

一般来说我们用v-model是在input中 常见用法如下 <input type=”text” v-model=”username”> 用户名：{{username}} 其实v-model是一种语法糖，我们要知道它完整的写法才能更好的利用自己vue的理解来深刻理解v-model 上面的语句其本质是下面的： <input type=”text” :value=”username” @input=”username = $event.target.value”> 用户名：{{username}} 其实我们的自定义组件也是可以实现v-model的，它默认用的属性就是value，事件名为input Vue.component(‘child’, { templage: ` <input :value=”myName” @input=”$emit(‘input’, $event.target.value)”/> `, props:[‘value’] //这个必然是需要的吗 }) 在父组件中我们就这么用 <child v-model=”userName”></child> 这样的用法适合了解v-model的原理，但是其实一般我们用的不多。怎么说呢，我们一般做项目的时候为用的第三方UI库，一些双向数据绑定什么的做的好好的，但是我们还是经常需要基于这些UI库的组件进行二次封装，那样才能更好的满足自己项目的需要嘛，这时候我们可能需要自己封装组件，把UI库的组件包一下，以element-ui为例(此示例只是用于演示) Vue.component(‘child’, { templage: ` <el -cascader :placeholder=”placeholder” :options=”options” :show-all-levels=”false” @change=”handleChangeToInput”> </el> `, props: { options: { type: Array, Read more…

By 匆匆那年, ago

前端面试题 小明早餐午餐晚餐

题目为：有如下js语句 Human(‘小明’).sleep(2).eat(‘早餐’).sleep(3).eat(‘午餐’).sleep(4).eat(‘晚餐’).sleepFirst(1); 需要让它输出如下内容 开始等待1秒 你好，小明 休息2秒 小明吃了早餐 休息3秒 小明吃了午餐 休息4秒 小明吃了晚餐 请编写Human的javascript代码 提示说明： Human(‘aa’) 输出：你好，aa sleepFirst(n);在所有方法执行前之前等待n秒 sleep(n) 在等待n秒之后，执行后面的方法 eat(‘xx’) 输出 aa吃了xx function Human(name) { if (this && this instanceof Human) { this.name = name; this.callStack = [function() { console.log(‘你好，’ + this.name); }]; } else { return new Human(name); } } Read more…

By 匆匆那年, ago

iframe跨域传输数据

我们一般在A域名的a.html用iframe内嵌B域名的proxy.html，达到将从a.html传输数据值proxy.html并且在proxy.html还可以执行a.html的函数。 a.html <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>A域中的a.html</title> </head> <body> <script> function cb(data) { console.log(‘成功接收数据 ‘, data); } </script> <iframe name=”proxyIframe” hidden=””></iframe> <form action=”http://b.com/proxy.html?callback=cb&args=data” target=”proxyIframe” method=”post”> <input type=”submit” value=”提交”> </form> </body> </html> 这里用简单的用url传递几个参数给proxy.html proxy.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” Read more…

By 匆匆那年, ago

javascript数组降维

网上有不少提供数组降维的方法，但是一般是二维数组，并且对多维数组的处理不好。降维自然会想到用concat方法，如果只是全部循环用push的话，那样写起来更麻烦，必要时该用concat的就用concat。 function dist(arr) { var res = []; for (var i = 0; i < arr.length; i++) { if (Object.prototype.toString.call(arr[i]) === ‘[object Array]’) { res = res.concat(dist(arr[i])); } else { res.push(arr[i]); } } return res; } var re = dist([1, 2, [3, 4, [5, 6, [7, 8]]]]); console.log(‘re’, re); //输出[1,2,3,4,5,6,7,8] Read more…

By 匆匆那年, ago