2018年12月_csu_zipple

12月 11月 08月 07月 05月 04月 03月 02月 01月

原创 Vue的.native为什么监听不到dom事件？

Vue给div的click加上.native就不起效果了！！不加反而是好的，这是什么原因呢？<template> <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}" ref="di...

2018-12-26 21:17:58 442

原创 Vue实现浮动按钮组件 - 页面滚动时自动隐藏 - 可拖拽

效果图说明本文可能有点啰嗦了…组件难点如何监听滚动完成事件移动端如何监听拖拽事件前置条件为了充分发挥vue的特性，我们不应该通过ref来直接操作dom，而是应该通过修改数据项从而让vue自动更新dom。因此，我们这样编写template。<template> <div class="ys-float-btn" :style="{'left':left+'...

2018-12-26 21:05:09 14012 7

原创 Vue 跳转路由时中断异步请求

使用导航守卫在router/index.js中增加前置守卫：router.beforeEach(function (to, from, next) { store.state.data.requests.forEach(xhr=&gt;xhr.abort());//data是我的模块名 store.state.data.requests =[]; next();});在rou...

2018-12-24 17:55:56 3006

原创 Vue实现功能齐全的地图组件 - 附效果图及源码

这是一个h5页面–效果图录图的时候网络条件不是很好，wifi卡了，所以数据加载有点慢。当网络情况不好的时候，这个组件还需要进一步的优化前置条件在你的index.html页面上加载百度地图js（获取ak）正确安装了vue使用vue-cli可以快速开发 <script type="text/javascript" src="http://api.map.baidu...

2018-12-22 22:14:07 14457 10

原创 Vue 自定义表单验证组件

先看代码<template> <div class="ys-address-input" :class="{'short':shorter}"> <span>{{label}}</span> <input type="text" :value="value" @input=&

2018-12-21 16:38:00 1972

原创 Vue Router 子路由进不去

检查一下子路由的路径是否带了根路径'/'比如 children:[ { path:"/modify/:id", name:"modifyAddress", props:true, component:ModifyDetail },{ path:/"new", ...

2018-12-21 14:43:12 4131

原创正常文档流情况下使用margin负值 img图片是最高层级？

如图所示==使用margin-top负值移动card，虽然是覆盖了img所在层。但是img渲染出来的图片依旧是最高层–这是为什么呢？

2018-12-20 22:34:33 807

原创 Vue对watch监听的v-model进行异步请求时应进行节流

throttlefunction throttle(fn,context,param=[],delay=500,mustApplyTime=1000){ fn.timer&&clearTimeout(fn.timer); fn._cur=Date.now(); fn._start =fn._start||fn._cur; if(fn._cur-fn._start&...

2018-12-19 22:53:39 4744

原创搜索框下侧提示信息等间距布局效果，自动换行

UI首先UI设计图长这样：我们经常遇到的搜索框提示大都长这样，要怎么实现呢？CSS很自然的我们会用到flex布局，乍看上去以为是等间距justify-content:space-arround，但是实际操作起来往往会有问题。如果使用了等间距，那么flex换行以后第二行如果是一个元素的话就会居中，那这样要怎么处理呢？Solution上一个办法行不通，那就只能另辟蹊径了。我们注意到要...

2018-12-19 22:23:09 583

原创 Vue: vue.esm.js?efeb:1712 Uncaught TypeError: Right-hand side of 'instanceof' is not an object

BugDebug用chrome在提示出问题的地方打上断点，发现出现下面这样的情况：回忆一下，type是自己设置props时设置的类型。而这里发现type不是一个Object，而是“订单交易中”。检查一下自己的源码： props:{ shopName:String, status:Number, state:['订单交易中','交易完成','未付...

2018-12-18 20:23:06 6162

原创 vue：子组件的内部状态是不是应该暴露给父组件？

问题不记得什么时候在哪里看到过这样的一个组件开发规范：“子组件应当自己维护自己的内部状态””，所以正常情况下子组件的内部状态由data函数初始化供自身调用。可是我在实际项目开发过程中却是经常遇到下面的情况。不同组件之间需要通信状态一个组件的状态的改变需要与另一些组件的状态保持同步举个例子示意图从图中可以看出来有这么一些状态需要这个页面维护：是否全选是否显示对话框是否显示删...

2018-12-18 17:01:04 1244

原创用vue编写带动画效果的toast

Aniamted为了方便快速的使用动画，我们可以使用现成的轮子–npm install animate.cssStartvue官方文档给我们指出了编写插件的步骤和一些参数，这里提供给一个编写toast的模板：import animated from 'animate.css'let Toast = {};Toast.install = function(Vue,options){...

2018-12-17 11:01:42 660

原创 vuex：父组件修改了state不更新子组件的原因

检查vuex有没有使用模块化之前我预定义的store没有考虑到模块化，后来增加了模块化导致子组件不更新了。（当然也要使用命名空间）分析分析了父组件之前编写的源码之后，发现是直接使用的mapState导入的state，这里就导致子组件接收到的props实际上只是store的直接子元素，所以子组件收到的props为undefined。解决办法重写一下mapState函数就行了。我们可以使用v...

2018-12-16 14:42:00 3583

原创 H5: 关于底部导航使用“fixed”会遮住网页最下面内容的解决办法！

Bug写完界面之后发现跑起来是这样的：同学和我说可以考虑加一个空的<div>占住底部导航栏的位置。这样确实可行，但是会无缘无故多出一个标签，我感觉这很罪恶！Solution果然下班走在漆黑的小路上思考，突然灵光一闪发现可以这样 <router-view style="padding-bottom: 53px"/>给有底部导航的组件的子导航加上paddi...

2018-12-16 09:25:50 17745 17

原创 Vue：关于transition-group过渡动画，别再踩这个坑了！

使用transition-group踩到的坑按照vue的文档和UI图开开心心的噼里啪啦的敲代码： <transition-group class="ys-notices" tag="ul" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight" > ...

2018-12-15 17:24:49 19815 5

原创修改Vux组件中预先定义的样式变量（组件颜色）

样式变量在vux文档里我们看到过这样的表名字默认值@tabbar-text-active-color#09BB07如何修改修改build/webpack.base.conf.jsmodule.exports = vuxLoader.merge(webpackConfig, { plugins:[ {name: 'vux-ui'}, {name...

2018-12-14 11:27:08 3472 6

原创工作中遇到的“坏味道的代码”

Redundant今天写项目的时候虽然IDE没有提示项目有重复代码，但是需要向后台get请求很多数据，很自然的，噼里啪啦根据需求写出来了下面这样的代码。/** * Get nearby stores based on latitude and longitude * @param lat * @param lnt * @param callback */function getNe...

2018-12-13 21:54:08 450

原创 config:fail,Error: invalid signature

与此同时出现的error:getlocation:the permission value is offline verifying fetch(httpConfig.signature, {// signature:domain+'/wechat/jssdk/signature?url=***.com', method: 'GET' }).then(res => { ...

2018-12-13 17:13:11 4015