基于Vue & SVG 的 icon 解决方案

2017-12-27
阅读 2 分钟
9.7k
项目中图标的解决方案 一般项目中的图标解决方案有如下几种: 设计师 提供 png 格式的图标; 没有设计师提供图标, 需要我们自己从 iconfont 上面找图标. 比如在做一些 CMS后台的时候. 自己找图标的一般步骤 打开 iconfont, 查找需要的图标, 点击 加入购物车按钮. 把所有 加入购物车 的图标形成一个 项目. 下载项目 在自己...

基于 Vue 的移动端图片查看插件.

2017-11-28
阅读 1 分钟
12.2k
wc-view 移动端图片浏览插件. 演示地址 演示地址 安装 {代码...} 使用 {代码...} {代码...} img 和 背景图之间的区别: img的查看效果, 图片带一个放大效果; 而背景图不带; 为 img 设置大小的时候, 可能会显示变形, 而背景图可以通过 background-size 保持图片 显示正常; 需要额外的为 img 标签加上一个 wc-perview-img c...

基于 Vue 实现的 移动端图片轮播组件.

2017-08-22
阅读 3 分钟
16.4k
之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的.

关于API 选择的一些思考.

2017-08-22
阅读 4 分钟
2.1k
问题描述:我经常需要使用一些基础性的, 功能性函数, 比如数据去重, 对象合并等. 通常情况下,选择方向大致有3个: 自己实现 API 使用原生的 API 使用 lodash 提供的 API 首先放弃 ‘自己实现API’ 这样的方式, 因为: 工作量大 即使实现了, 没有经过测试, 不够稳定 没有意义, 因为已经存在现成的, 别人实现的. 其次,如果原生...

使用 REM 进行布局和适配.

2017-07-21
阅读 4 分钟
2.9k
屏幕是由一个一个显示单元组成的.1 每一个显示单元都是物理世界真实存在的;2 把一个显示单元的大小称为一个'物理像素';3 通常我们所说的 '分辨率', 就是指一块屏幕显示单元的个数, 比如750*1334, 表示这块屏幕由 750*1334 个显示单元组成

浏览器滚动的详细解释 & Vue 固定滚动位置的实现

2017-07-20
阅读 2 分钟
7.2k
滚动形成的条件 父子两个元素 子元素的高 > 父元素的高, 并且父元素 overflow:scroll; ok, 那么现在考虑这种情况:假设: 有父子两个元素, 子元素的高度 > 父元素的高度; 父元素没有设置 overflow 属性. 子元素的高度 > 浏览器高度 在这种情景下, 子元素会把 body 撑开, 也就是 子元素的高度, 就是body 的高度.此...

Vue 的 transition & 实现路由类 Tab 左右滑动切换的效果

2017-07-14
阅读 4 分钟
16.6k
先说下 transition 为什么可以让你定义了 v-enter, v-enter-active 之后就可以触发transition.实际过程按我的理解应该是这样:

说下性能优化

2017-07-14
阅读 3 分钟
2.4k
性能优化 追求的是什么, 是你的网页可以 以最快的速度 打开, 比如说用户点一下啪的就开了点哪里哪里开, 什么操作都是立刻有反馈. 关键字是:速度 试想未来有一天, 到了 18G 时代, 每个人的网速都是 1000M 的, 那你还优化什么你的网站就算是 100M 大小也不怕. 可是那是遥远的未来, 当下网速还没有这么快。 所以我们的问题...

Vue 中如何定义全局的变量和常量

2017-07-13
阅读 3 分钟
30.9k
Vue 中如何定义全局的变量和常量 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 global.js 并且在其中定义 {代码...} 在入口文件中引入 global.js {代码...} 在项目中使用: {代码...} 发现报错了, a 并没有定义. 为什么? 这个涉及到模块作用域:1 每一个 js 都相当于...

Vue 组件通信的解决方案

2017-07-12
阅读 2 分钟
3.6k
数据通信 首先, 我们通常说数据传递, 组件通信什么什么的, 我认为可以分成两种场景: 页面和页面之间 组件和组件之间 通信方案 不管什么场景, 在使用 Vue 的时候, 一般我们有下面 5 种选择去实现数据通信. vuex storage props event URL queryString 选择通信方案 我们在选择通信方案的时候, 比如说确定 列表页如何把每一...

基于 Vue 的 Loading 工具.

2017-07-11
阅读 1 分钟
9.6k
对于 loading 效果, 通常会存在这么一种情况:不同的项目中, 使用的 loading 效果不一致. 但是 loading 的逻辑是一致的.因此, 希望存在一种方式, 提供了一套通用的 loading 逻辑, 而 loading 效果可以由用户自己定义.

css3 新增了一些伪类选择器的解析(保证记住)

2017-07-10
阅读 1 分钟
2.6k
css3 新增了一些伪类选择器 比如: selecor:first-child {代码...} 也就是: 当前元素的父元素的第一个子元素就是它本身, 此时, selector:first-child 才会生效. 同理:selector:last-child, 需要: {代码...} 第二类 nth-child()注意这里的 n 有很大发展空间, 可以实现 奇/偶, 选择哪几个, 从哪几个开始选. nth-last-child...

JS 中 URL 编码的问题.

2017-07-03
阅读 2 分钟
3.3k
我们的 queryString 的形式是使用 ?开始, key=value 传递参数, key-value pairs 之间使用 & 连接.比如:

基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.

2017-06-08
阅读 2 分钟
32.8k
刚开始的时候想要用现成的弹窗组件来着, 但是查找一圈没有发现比较合适项目的, 所以才自己开发了一个, 包含 Alert, Comfirm, Toast, Prompt 四种, 并且可以单个引入.Vue 的组件开发实际上比较简单, 有兴趣的可以看下源码实现, 步骤很清晰. 关于样式的问题, 是直接从 MUI(魅族开发的) 中拿过来的, 仿照 iOS 的效果.

Vue 实现仿大众点评买单的自定义键盘

2017-06-06
阅读 1 分钟
12.8k
wc-keyboard 基于 vue 封装的一个自定义数字键盘 + 输入框, 仿照大众点评闪惠买单. why? 刚开始选用 input type = tel, 发现移动端没有办法输入小数 换成 input type = text, 发现唤起的键盘不是数字键盘 最终选择 input type = number, 又发现验证规则有部分实现不了 效果 更新 后来我想了下, 可以通过监听键盘点击事件...

JS 原型的解释

2017-06-02
阅读 2 分钟
1.7k
构造函数JS 中并没有在语法层面上面区分构造函数和普通函数, 唯一的区别是调用方式使用 new 调用的函数就是构造函数, 没有则是普通函数.

CSS3 新增选择器概览

2017-02-14
阅读 1 分钟
2.3k
selector :first-child 这个是后代选择器. 怪异, 注意避免而不是理解. selector:first-child {代码...} selector:last-child {代码...} 但是有问题, :last-child 不生效. 应该是:1 当前 selector 的父元素 parent2 parent所有子元素, [a,b,c]3 子元素的集合的第一个元素, 如果是 selector4 设置样式, 生效. {代码...} 所...

通俗的说下浏览器的渲染过程

2017-02-07
阅读 3 分钟
2.7k
最初的模型: 浏览器下载 html 开始解析 html 遇见外链资源, 保存起来, 并且继续解析 html 解析结束 开始下载外链 下载结束 开始处理 css 处理 js 处理 处理完毕, 开始渲染 用户看到界面 这个模型的基础是: 浏览器是单线程的. 但是实际上: 浏览器不是单线程, 是多个线程. 浏览器有如下几个线程:1 javascript引擎线程2 界...