2018-06-11 11:08:35来自分类 前端
目录
1. [React 相关](#react)
2. [Vue 相关](#vue)
- [Vue 组件库](#vue-components)
- [Vue 表单](#vue-form)
- [Vue 操作](#vue-handle)
- [Vue 图片](#vue-image)
- [Vue 通知](#vue-notice)
- [Vue 其他](#vue-other)
3. [小程序相关](#weapp)
4. [前端 UI 框架](#ui)
5. [CSS 相关](#css)
6. [单页](#spa)
7. [表单相关](#form)
8. [弹出相关](#dialog)
9. [开发工具](#devtools)
10. [移动端相关](#mobile)
11. [鼠标相关](#mouse)
12. [数据处理](#data)
13. [图片相关](#image)
14. [动画相关](#animation)
15. [项目资料](#information)
16. [其他相关](#other)
# react
React 相关
===实例===
https://...
2018-06-07 14:33:03来自分类 前端
`Optional Chaining`是个好东西, 可惜现在还处于`Stage 1`阶段, 虽然 babel 已经实现了该功能, 但是编辑器, eslint 之类还是不支持, 想用还是遥遥无期
`Optional Chaining`的作用, 主要是让开发者告别一堆的`&&`:
```javascript
const obj = {
abc: {
def: {
ghi: '123'
}
}
}
```
上面的对象, 如果想取最后的`123`, 在不确定前面 abc, def 是否为 null, undefined 的情况下, 我们就得这么写:
```javascript
const str = obj && obj.abc && obj.abc.def && obj.abc.def.ghi
```
天长地久的一串, 但是有`Optional Chaining`之后, 你只需要这么写:
```javascript
const str = obj?.abc?.def?.ghi
```
是不是简单了很多...
既...
2018-05-31 15:08:02来自分类 Webpack
###Q1: display: inline-block 布局时, 间距消失了
A1: 在 vue-loader 15版本之前, 是不会删除元素之间空格的(至少会保留1个空格), 但是在 vue-loader 15之后, 如果你不小心这么设置了:
```javascript
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
}
```
那么元素之间的空格就不保留了, 如果你需要保留一个空格, 请将`preserveWhitespace`设置成`true`, 或者干脆删除
###Q2: ccs 压缩后, z-index 被重写
A2: webpack4 已经不支持用`extract-text-webpack-plugin`来优化 css, 需要改成`optimize-css-assets-webpack-plugin`和`mini-css-extr...
2018-05-23 18:06:12来自分类 Vue
本来想前面写点什么的, 还是算了, 直接说思路吧.
从 Vue2.3 版本后, SSR 的 cookies, 就变成一个无比麻烦的问题, 具体请访问官网文档: https://ssr.vuejs.org/zh/api.html#runinnewcontext
之前也说不少的思路, 可是都觉得不怎么好用, 虽然都能解决问题, 今天再说一种思路
因为 Vue2.3 以后, bundle 代码将与服务器进程在同一个 global 上下文中运行, 所以不能再将 cookies 丢到 global 给 api 使用, 否则就会出现 cookies 污染
Vue2.3 以后, 我们需要为每个请求创建一个新的根 Vue 实例, 同样的, router、store 也需要, 所以, 我们的思路也在此, 将封装后的 api 注入到这 3 个实例当中去, 保证每个请求的 api 都是独立, 那么就剩一个问题, 注入到哪个实例里面去!?
api 请求用到最多的两个地方就是: 组件和 vuex 的 actions 里, 这两个地方都有 store 的影子, 所以, 注入到 store 中, 毫无疑问...
2018-04-04 11:13:04来自分类 其他
github仓库:
https://github.com/lincenying/wepy-mmf-blog
欢迎加星讨论
用的是`wepy`框架, 页面不多, 只有 2 个列表页, 1 个详情页, 1 个介绍页,
功能也只有点赞, 加不了评论, 有评论功能就通不过审核
...
2018-01-15 16:19:04来自分类 Vue
一个网站一旦涉及到多用户, 就很难从 Cookies 中逃脱, Vue SSR 的 cookies 也真算是遇到的一个不小的问题, 从开始玩 SSR 开始到现在, 一共想出了3种方案, 从最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到现在的将 Cookies 注入到组件的 asyncData 方法.
随着 Vue 的升级, 第一种方案已经不再适用, 第二种也有不少的限制, 于是想到第三种方案, 下来就说说具体实现的方法:
### 第一种方案
第一种方案已经不再适用, 这里不再细说
### 第二种方案
思路: 将 cookies 注入到 ssr 的 context里, 然后在请求 api 时读取, 再追加到 axios 的header 里
1, 首先在 server.js 里将 cookies 加到 context里
```javascript
const context = {
title: 'M.M.F 小屋',
description: 'M.M.F 小屋',
url: req.url,
...
2018-01-03 16:34:01来自分类 Vue
### 1. v-model
在 jsx 中支持 v-model 指令
github: https://github.com/nickmessing/babel-plugin-jsx-v-model
```bash
npm i babel-plugin-jsx-v-model -D
# or
yarn add babel-plugin-jsx-v-model --dev
```
.babelrc:
```
{
"presets": ["es2015"],
"plugins": ["jsx-v-model", "transform-vue-jsx"]
}
```
```
Vue.component('hello-world', {
data: () => ({
text: 'Hello World!'
}),
render () {
return (
<div>
<input type="text" v-model={this.text} />
{this.text}
</div>
)...
2018-01-02 11:10:23来自分类 Vue
```
<template>
<div class="el-textarea">
<textarea v-model="content" id="textarea" type="textarea" rows="2" autocomplete="off"></textarea>
<button @click="insertAtCursor('<张三>')" type="button">插入会员名</button>
</div>
</template>
<script>
/* eslint-disable no-inline-comments */
export default {
data() {
return {
content: ''
}
},
methods: {
async insertAtCursor(myValue) {
const myField = document.querySelector('#textarea')
if (my...
2017-12-18 15:07:55来自分类 前端
### nvm 使用淘宝镜像
```bash
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
export NVM_IOJS_ORG_MIRROR=https://npm.taobao.org/mirrors/iojs
```
### npm 使用淘宝镜像安装包
相关文件: ~/.npmrc
```bash
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
```
### yarn 使用淘宝镜像安装包
相关...
2017-12-01 10:08:59来自分类 Vue
.sync 在 .vue 文件中写法很简单,
```
<comp :foo.sync="bar"></comp>
```
但是在 jsx 语法中, 这类指令, 双向绑定, 修饰符写起来, 确是麻烦的很, 有的时候不得不用 jsx 语法时, .sync 修饰符该怎么写呢?
首先 .sync 只是个语法糖, 真实语法是:
```
<comp :foo="bar" @update:foo="val => bar = val"></comp>
```
以 element 的 dialog 组件为例, 那么 jsx 的写法就可以这么写:
```
render(h) { // eslint-disable-line
const listeners = { // 关键代码 - 1
'update:visible': val => {
this.show.dialog = val
}
}
const content = this.show.dialog ?
...
