2019年06月_qq_35321405

原创微信小程序适配方案

一. 概述习惯了写pc端项目，会经常考虑到适配的问题，写响应式布局。拿到微信小程序的设计图时候，有点懵，不知道px和rpx是如何规则转换的，写的很慢，感觉没有找到法门，不顺手。又仔细阅读了文档规则，大彻大悟，很简单。二. 名词物理分辨率 = 设备像素 = 物理像素逻辑分辨率 = 逻辑像素 = css像素 = 独立像素，肉眼感知尺寸设备像素比 = 物理分辨率 / 逻辑分辨率...

2019-06-27 11:10:52 8271

原创 echarts图表横屏展示

一. 概述项目环境：vue + vuex + echarts实现图表的横屏效果。二. 效果图横屏效果三. 方案废弃方案：在图表的外层添加一个div，添加css旋转属性，宽/高=100%，设置图表的高=屏幕高，图表的高=屏幕宽废弃方案的结果：效果同样能达到横屏效果，但是提示文本有问题，有些区域点击无法弹出提示文本，pass了这个写法。也琢磨了一下为什么部分区域点击无效呢，...

2019-06-21 18:06:14 6737 11

一. 概述vue+echarts 开发环境，echarts API提供默认了点击事件，但是有一些需求，要求我们改良一下点击事件。比如：柱状图，默认事件只有点击图表柱子，才可以触发点击事件。有时候数据比较小，柱子不容易点击，但是我们还想看点击后的效果，只能扩大触发点击区域的方法。 this.line = this.$echarts.init(document.getElementById(th...

2019-06-20 18:03:58 5711

原创 css实现元素不可见的5种方法

概述用纯css方式控制一个元素的隐藏，不可见。<div class="disappear"></div>方法1. display注意：设置none后，不占据页面空间。.disappear{ display:none;}方法2. z-index 层级注意：z-index属性需要搭配positon属性一块使用，不然设置了不起作用。.disappear{...

2019-06-20 15:36:56 10132

转载分析vue双向绑定原理（MVVM）

Vue的响应式原理，也可以叫双向绑定原理，MVVM模式原理。一、MVVM 理解MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；Model 和 View 并无直接关联，而是通过 V...

2019-06-18 16:55:46 530

原创 vue项目升级

一、需要升级的依赖包项目中使用的依赖包版本比较旧，在新的版本中一些指令被废弃了，也添加了一些新的指令用法，修复了之前版本存在的局限性。如果不定期升级版本，后期维护起来会很麻烦。依赖包旧版本号新版本号升级命令vue2.5.162.6.10npm update vuevue-router3.0.13.0.3npm update vue-routerv...

2019-06-06 18:13:36 6105

转载 vue-小知识

一、Vue中给data中的对象添加一个新的属性时会发生什么，如何解决。// 假如data中有一个obj对象，申明方式如下。obj={name:'xudanfeng'}// 通过这种方法添加age属性，属性添加成功，但是视图并未立马更新。this.obj.age = 12// 这种方法添加的属性，在视图中会立马刷新。this.$set(this.obj,'sex','女')原因在于在...

2019-06-05 14:37:07 174

原创 vue-计算属性和侦听属性

一、计算属性computed计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。对比普通函数方式，每次访问都需要执行一遍函数。计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。例子<script>// @ is an alias to /srce...

2019-06-04 18:14:55 385

是一座岛