18-11-27

189 阅读1分钟

分模块加载,iview中的全局命令,例如$Message

//加载Message组件
import { Message } from 'iview'
//在Vue原型上添加全局命令
Vue.prototype.$Message= Message

transform对span标签无效

查看CSS参考手册,transform适用于:所有块级元素及某些内联元素

//更改span样式,将其改为内联块状元素
span{
    display:inline-block;
    transform:skew(-30deg);
}

slot的一种用法,减少$emit

子组件内经常存在有类似关闭退出功能的按钮,他们往往需要向父组件$emit一次,仅仅改变父组件的一个变量,来达到关闭子组件的效果,可以将子组件中类似的按钮,以slot的方式写在父组件中

接口设计问题

返回的结果类型应该一致,返回的一个数组,即使没有数据,也应该返回 [] 而不是 null

performer/view/rank

有关于数组的操作看一下

router-view 添加 key

<router-view :key="$route.fullpath"></router-view>

three 多render情况

stackoverflow.com/questions/3…

ios滑动特殊css属性

-webkit-overflow-scrolling: touch;

eolinker, easy-mock前后端对接工具

css操作,改善动画性能

首先,在基于webkit的浏览器,我们在执行一些CSS的操作经常会看见闪烁和动画。在过去,我们通过欺骗浏览器一点点解决实现。我们会使浏览器执行3D变换,因此减轻了工作量到GPU上。这是因为3D转换是自动移到那里的。这导致我们的做一些挂羊头卖狗肉的事就像这样:
.accelerate {
  -webkit-transform: translate3d(0, 0, 0);
}

听说你动画很卡

juejin.cn/post/684490…

mpvue

www.jianshu.com/p/6f8d74be3…

transition 与 animation的区别

//transition 是可以写多个的
div{
  transition: width 1s linear 2s,background-color 1s linear 2s;
}
//animation
div:hover{
  animation:mycolor 5s linear 2s;
}

Transitions动画功能与Animations动画功能的区别:虽然它们两者都是通过改变元素的属性值来实现动画效果,但是Transitions只能通过指定属性的开始值与结束值,然后在这两者之间进行平滑过渡的方式来实现动画的效果,因此不能实现较复杂的动画效果;而Animations功能可以通过定义多个关键帧以及每个关键帧中元素的属性值来实现复杂的动画效果。

读取./modules下的所有js文件并注册模块

/**
 * 读取./modules下的所有js文件并注册模块
 */
const requireModule = require.context('./modules', false, /\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
    const moduleName = fileName.replace(/(\.\/|\.js)/g, '')  
    modules[moduleName] = {
        namespaced: true,
        ...requireModule(fileName).default
    }
})

export default modules

/* index.js */
import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'

Vue.use(Vuex)
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules
})