2019年01月_csu_zipple

11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 Vue全家桶基础设施环境搭建

vue preset一个Vue项目的初始化其实代码结构都挺大同小异的，为了方便起见把相同的代码部分抽取出来。github地址： https://github.com/csuZipple/Vue-cli-templatevue-cli: v2.9.3Function这一套基础设施实现了以下基础功能：reset.css项目路由路由鉴权axios全局配置api统一异常处理api超...

2019-01-27 21:03:43 499

原创 mysql 计算多张表的总数据量

SELECT sum(c) from ( select count(*) as c from table1 UNION ALL select count(*) as c from table2 UNION ALL select count(*) as c from table3 UNION ALL select count(*) as c from table4) a...

2019-01-25 22:48:31 5277

原创 animation操作transform:translate3d没有动画效果

bug无往不利的animation突然就没有了往日的效果，吓坏我了–solution仔细看了看自己写的代码 @keyframes move { 0% { transform: translate3d(0,-8px); } 50% { transform: translate3d(0,8px); } 100% { t...

2019-01-24 20:05:52 3595

原创 vux Tab组件当tabitem动态加载时底部bar不动态居中

bug图解决办法只能修改组件源码才能解决这个问题了。在他tabItem的mixins的childMixin中修改： mounted () { this.$nextTick(() =&amp;gt; { this.$parent.updateIndex() }) }, updated () { this.$nextTick(() =&amp;gt; { ...

2019-01-24 19:37:59 977 4

原创取消axios请求的正确姿势

bug直接使用source的token来cancel请求，会导致这样的问题：所有的请求都被cancel掉了！这很明显不符合我们的要求：跳转路由的时候清除掉上一个页面的请求，当前页面的请求应保留。解决办法在拦截器中为每一个请求new一个token，然后存在store里面。在路由钩子中调用相应的cancel方法就好了。 interceptors (instance) { instan...

2019-01-16 20:19:48 1422 3

原创移动端img加载过程中样式会被挤扁

使用了flex布局的情况下，单独将Img置于flex子项中会在样式完全渲染前重置img的样式。<div> <img/>  <div> <div></div> <div></div> </div&

2019-01-16 20:14:01 1094 1

原创 Array.fill一个空对象会存在引用问题

背景为了让一个对象数组按照某个属性分成几份，很快的会写出来这样的代码：// arr 是对象数组 filterProductsByType () { let container = new Array(productType.length).fill([]) return arr.reduce((t, c) => { switch (c.type...

2019-01-16 20:08:51 751

原创移动端修改host

常常在想本地开发的时候使用pc端测试移动端，由于有安全域名限制，因此在本地修改了机器的host。将域名映射到本地局域网。这个做法是很正常的也很常见。但是现在新的需求是我需要在手机上也能够正常测试啊！怎么办！手机又不能随便修改host曲线救国那么，我们换一种思路。用手机也连接上局域网，然后用pc代理手机的流量呗！确保手机和pc在同一局域网下pc下载fiddler，设置connection...

2019-01-16 11:16:14 4152

原创异步加载Baidu地图失败error isTrusted:true

为什么会加载失败为了用户体验，在用户使用地址组件之前不加载地图。因此我们采用官网的例子异步加载百度地图，这里做了一点改进：export function baiduMapInit () {const url = `https://api.map.baidu.com/api?v=2.0&ak=${BaiduMapAK}&s=1&callback=onBMapCallba...

2019-01-16 11:07:22 4411

原创判断对象数组是否含有某个属性

常规解法arr.filter(item => item['key']==='yourValue').length !== 0黑科技JSON.stringify(arr).indexOf('"type":2') !== -1

2019-01-16 10:59:31 8377

原创微信支付偶尔成功偶尔失败

日常有的Bug在测试的时候遇到了这样神奇的问题，有时候能够成功支付，而有时候就支付失败。别慌，虽然花了我很多时间debug，最后终于找到原因了。也许你也是这个原因呢？看看吧。解决办法吐槽：微信支付的错误信息真的无语，只给了一个failed能看出啥嘛…直接说解决办法：我是在用户一进入页面的使用wx.config进而获取用户地址，然后在支付的时候微信授权登录，再进行支付。偶尔成功的原因...

2019-01-16 10:52:50 2391

原创 Vuex 自动化缓存store到localStorage

api介绍https://vuex.vuejs.org/zh/api/#replacestatevuex支持subscribe方法，只要你的state是通过mutation修改的，那么这里可以监听到store的所有变化。相比于watch方法，这个方法可以针对某些特定的修改执行特定的操作。index.js参考代码store.subscribe((mutation, state) =&gt...

2019-01-14 15:17:55 2285

原创 position:fixed 在filter下失效！

如果父元素中存在filter属性，子元素使用position:fixed 将会相对于父元素定位。ps: 目前应该解决不了相关链接：https://github.com/chokcoco/iCSS/issues/24

2019-01-14 15:07:25 1646

原创 Vue - 实现消息通知组件及插件

效果图功能分解动画计算高度组件源码<template> <div class="ys-message-wrapper animated fadeInDown"> <div class="ys-message-toast"> <img :src="currentType" alt="&quot

2019-01-14 15:04:41 12106

原创 Vue - 实现验证码输入组件

效果图功能分解输入效果自动换焦如何删除接收paste事件数据先行确定验证码位数 amout储存验证码的数组 code当前输入项的索引 currentIndex布局<template> <div class="ys-verification"> <div class="input-wrapper" v-for="item in...

2019-01-14 14:52:37 4125 5