是一座岛

努力,挑战

echarts图表横屏展示

一. 概述 项目环境:vue + vuex + echarts 实现图表的横屏效果。 二. 效果图 横屏效果 三. 方案 废弃方案: 在图表的外层添加一个div,添加css旋转属性,宽/高=100%, 设置图表的高=屏幕高,图表的高=屏幕宽 废弃方案的结果:效果同样能达到横屏效果,但是提示...

2019-06-21 18:06:14

阅读数 17

评论数 0

设置echarts图表(饼图,折线图,柱状图)点击事件

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

2019-06-20 18:03:58

阅读数 22

评论数 0

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

概述 用纯css方式控制一个元素的隐藏,不可见。 <div class="disappear"></div> 方法1. display 注意:设置none后,不占据页面空间。 .disappear{ display:n...

2019-06-20 15:36:56

阅读数 20

评论数 0

分析vue双向绑定原理(MVVM)

Vue的响应式原理,也可以叫双向绑定原理,MVVM模式原理。 一、MVVM 理解 MVVM分为Model、View、ViewModel三者。 Model 代表数据模型,数据和业务逻辑都在Model层中定义; View 代表UI视图,负责数据的展示; ViewModel 负责监听 Model 中数...

2019-06-18 16:55:46

阅读数 11

评论数 0

vue项目升级

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

2019-06-06 18:13:36

阅读数 20

评论数 0

vue-小知识

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

2019-06-05 14:37:07

阅读数 3

评论数 0

vue-计算属性和侦听属性

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

2019-06-04 18:14:55

阅读数 12

评论数 0

Vue Cli下环境变量和模式

一. 模式 Vue Cli 项目中有三种模式:development(开发模式)、production(生产模式)、test(测试模式)。注意模式不同于NODE_ENV,一个模式可以包含多个环境变量。 1. 通过pageage.json下scripts配置打包命令。 development: 对...

2019-05-31 17:59:07

阅读数 14

评论数 0

vue-插槽使用

一. 概述 项目开发中想封装一个好用的列表组件,思考到怎么在一个组件中实现不同的样式和细微差别呢,想到了vue插槽功能符合我的预想。遇到了一个问题入坑了

2019-05-30 18:31:31

阅读数 11

评论数 0

正则表达式使用(判断是否符合规则和提取满足规则数据)

一. 正则表达式规则 符号 描述 () 标记一个子表达式的开始和结尾位置,要匹配(、),前面加转义字符 \ [] 标记一个中括号表达式的开始和结束,要匹配[、],前面加转义字符 \ [字符集] 比配单个字符 {n} n 是一个非负整数。匹配确定的 n 次 {n,m}...

2019-05-29 15:22:42

阅读数 60

评论数 0

ES6-数组

一. 数组创建 概述 Array.of(x,…) :将参数中所有值作为元素形成数组 Array.from(x,fn) :将类数组对象或可迭代对象转化为数组 类数组对象:必须含有lenght属性,且元素属性名必须是数值或者可转换数值的字符 使用方法 // 1.创建数组 let arr1 = Ar...

2019-05-16 16:43:07

阅读数 10

评论数 0

ES6-字符串扩展新方法

一. 字符串重复repeat函数 概述 repeat(s,n):表示将字符串重复指定次数返回新的字符串。 基本用法 let a = 'xu'.repeat(2) let b = 'dan'.repeat(2.6) // -0.2会进行取整运算,等同重复次数0,返回"" let ...

2019-05-15 18:06:52

阅读数 11

评论数 0

Math对象中常用几个函数ceil,floor,max,min,trunc,

一. Math.trunc(x) 概述 用于返回数字的整数部分,数字符号位也会返回。函数参数分为两大种类:能转化为数值,返回数字的整数部分;无法转化为数值的返回NaN 基本用法 let a = Math.trunc(12.2) let b = Math.trunc('13.1') let c = ...

2019-05-15 14:44:55

阅读数 19

评论数 0

ES6-Symbol

Es6 Symbol概述基本用法使用场景函数 概述 原始数据类型,表示独一无二的值。 基本用法 let sy = Symbol(‘name’) 相同参数的symbol()返回的值也不相等 不能使用new命令创建变量,因是原始数据类型,不是对象。 使用场景 作为对象属性名,保证对象属性名不重复...

2019-05-15 13:33:00

阅读数 11

评论数 0

js某时间戳距离当前时间转化成几分钟前几天前几月前几年前

一. 效果 刚刚,1秒前,1分钟前,1天前,1周前,4周前,1月前,1年前,2年前。 二. 展示逻辑 公式:n < 60秒,结果:n秒前 公式:1分钟 <= n < 60分钟,结果:n分钟前 公式:1天<= n < 7...

2019-05-10 18:43:52

阅读数 52

评论数 0

vue--封装日历,周历,月历,季历组件

一. 效果图 二. 实现功能 时间快捷键对应的时间段获取方法封装,需要注意本周,上周,采用的是周一到周日日历模版去的间隔。 日历网上找的一个demo,改装成自己项目中要求的样子。限制了未来月份不能切换,最小切换月份2018年1月。 日历展示样子有两种模版:周一到周日,周...

2019-05-07 10:19:47

阅读数 142

评论数 2

vue-按需加载引用echarts中组件

目录 第一步:引用echarts组件库 第二步:main.js中全局配置主模版 第三步:封装echarts折线图line组件 第四步:在需要使用页面中引用line组件。 项目中我们一般会全局引用echarts组件库,开发起来方便。发现项目文件体积过大,首屏加载也会慢。为了解决首屏加载速度...

2019-04-28 19:13:19

阅读数 215

评论数 0

Vue-cli3 + webpack搭建vue项目流程以及打包发布流程

目录 1.命令行初始化项目 2. 分析项目目录 3. vue.config.js多环境打包配置 4. 发布项目 5.参考文章 1.命令行初始化项目 bogon:vue xudanfeng$ vue create vue-cli-project Vue CLI v3.0.2 ? ...

2019-04-26 14:31:10

阅读数 291

评论数 0

Vue-cli2 + webpack搭建vue项目流程以及打包发布流程

目录 1.1 命令行初始化项目 1.2 分析项目目录 1.3 运行项目 1.4 多环境配置打包发布 一. vue-cli2 + webpack搭建项目流程以及打包发布流程 最近升级到vue-cli3,发现vue-cli2搭建项目命令不能用了,两者搭建开发环境项目内容也发生了变化。 v...

2019-04-25 18:41:28

阅读数 48

评论数 0

vue-路由篇页面跳转和页面参数传递

简介:路由文件内容介绍 目录 简介:路由文件内容介绍 一 . 页面跳转 二. 页面传参,获取页面传递过参数 三. 路由导航待整理 定义了需要跳转的文件位置映射关系,每一个路由对应一个组件。 /** * @file 主路由配置页 */ import Vue from 'vue' ...

2019-04-19 18:50:51

阅读数 24

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭