panshao
我想在没有选中任何文字的情况下，改变font-size,发现报错。  用的是项目中给出的demo [demo](http://tai.coding.me/vue-html5-editor/basic.html) ps: 我这样做是想设置我之后要写的文字。
今天看`vue-router` 遇到了一个问题 在`vue-router`中，有一个`query`和`params`，并不是很理解它们的区别，然后就各种谷歌， 最终终于明白了区别。 `query` 是正常的`get` 请求的参数传递 举例说明： `http://blog.panshao.xyz?userId=123&appId=456` 在这个`url`中`query`指的是 `userId=123&appId=456` 转换成`json`对象的话就是`{userId: 123}` `params`是`restful`中的参数，可以理解为后台的参数。 举例说明： 很多路由都支持这样的格式，比如`express` ``` js var express = require('express') var app = express() app.get('/home/:userId/app/:appId', () => {...
### 这是我自己项目中用的移动端布局的适配方案： 主要采用了 `rem` + `sass` 假设设计图给的是 750 x 1334 即 `iphone6` 的尺寸, 并且有一个宽高都为`200px`的正方形 首先在`html`中注入一段`js`脚本。 ``` html // 我喜欢简单粗暴的做法 // 思路： 将html元素的font-size设置为屏幕宽度的1/20 // ！警告 不要将 document.documentElement.clientWidth // 换成 window.innerWidth, 在魅族手机下会出问题...
`localStorage` 和 `sessionStorage` 是比较好的存储方式， 当存到这里面的时候页面刷新是不会丢失数据的，除非手动清楚。 `sessionStorage`是当页面关闭后就会自动清空的。 由于该存储方式只能存字符串，所以每次调用的时候就必须使用`JSON.stringify()` 函数来 把对象转换成字符串，挺麻烦的。 我就封装成了一个模块。 代码如下： `localStorage`: 的封装 `local.js` ``` js const {localStorage, JSON} = window const storage = { set (key, val = {})...
以前这种下载都是后端弄好的，我只要去请求一个地址链接就可以下载文件了。 不过前端有了`download`属性后也可以下载`csv`文件了。 ```js function generateAndDownloadCsv (str) { str = encodeURIComponent(str) var link = document.createElement('a') link.setAttribute('href', `data:text/csvcharset=utf-8,${str}`) link.setAttribute('download', 'name.csv') document.body.appendChild(link) link.click() document.body.removeChild(link) } ```` 代码也没什么可解释的。主要是`download`这个属性的[兼容性](http://caniuse.com/#search=download). 当然，将`href`直接指向服务器的一个资源也是可以点击下载的。
当使用`vuex`的时候，对于表单的处理方面，需要实时的更新到store， 即将表单的的`v-model`关联到`store`. 官方文档给出的方法是这样的。 [传送门](https://vuex.vuejs.org/zh-cn/forms.html) 我采用的是第二种。利用`computed`属性的`set`方法提交`mutations` 但是当字段过多时，感觉重复的就会很多，于是就封装了下。 ``` js import store from './{store_path}' import get from 'lodash.get' import set from 'lodash.set' // 表单数据同步到vuex的state中 // fields: 为一个数组，里面是要同步字段的组合 // namespace: 表示子模块 即store中一级对象的属性名 如果没有则不用写...
今天我才知道原来 `margin-right` 和 `margin-left` 还有 `auto` 这个值，可能之前没怎么仔细看文档 文档的解释为 `auto：水平（默认）书写模式下，其计算值取决于可用空间` 也就是说它能取多少就取多少 在一个`flex` 布局中， 会出现这样一种情况，如下图  每次这种布局， 我一般是把左右看成两部分，左边包含两个`div` 右边包含一个`div` 然后父元素`display:flex; justify-content: space-between;` 或者中间再加一个`div`元素设置`flex-grow:1`来占据空白，这样就达到了效果，但是总感觉有些美中不足。 下面介绍一种新的方法： html 代码： ``` html ``` css 代码： ```...
在手机端经常见到那种让输入密码的，比如手机支付的时候输入的支付密码， 相信这样的效果应该很常见，如何用web技术模拟一个呢？ 我用vue简单的写了一个demo 先展示效果图：  html 代码： ``` html {{numbers[i-1]}} ``` css 代码： ``` css body { display: flex; height: 100vh; } .container { position: relative; margin: auto; height: 80px;...
### 主要是为了解决组件间通信得问题。 代码: ``` js import Vue from 'vue' var bus = new Vue() function emitEvent(payload) { bus.$emit('component-communicate', payload) } function handleEmit() { bus.$on('component-communicate', ({key, value}) => { this[key] =...