总结vue生命周期和Mint-ui选择器插件遮罩层下页面手触滑动bug
vue的生命周期
1. beforecreate 在使用vue时都需要进行实例化，所以vue实例化时调用该函数 2. created 该函数是实例创建之后进行调用 3. beforeMount dom文档渲染之前执行的函数 4. mounted dom文档渲染完毕之后将要执行的函数 5. beforeupdate 组件更新之前 6. update 组件更新之后 7. beforeDstroy 组件销毁之前 8. destroy 组件销毁之后vuex 专门针对vue的状态管理容器
state 表示基本数据 要设置的全局访问的state对象 //初始化一个数组或者变量
...mapState //辅助函数
getters 从基本数据派生的数据 实时监听state值的变化（最新状态）
...mapGetters //辅助函数
mutations 提交更改数据的方法 同步！ 定义方法，传参为state，
...mapMutations //辅助函数
actions 像一个装饰器，包裹mutations,使之可以异步， 自定义触发mutations里的函数的方法
action函数接受一个与store实例具有相同方法和属性的context对象
...mapActions //辅助函数
moduls 模块化Vuex
通过this.$store.dispatch执行actions中的commit触发mutations里面的方法,达到更新state的值。
计算属性 computed //当一些数据需要根据其他数据变化时，这时候就需要计算属性 getter //默认 setter
Model-view viewModel Mvvm作为
Mint-ui 日期选择器插件遮罩层底部页面锁定 地址：www.jianshu.com/p/58c7c21d5… 模板：
<template>
<mt-datetime-picker ref="picker"
type="date"
:endDate="endDate"
:startDate="startDate"
v-model="pickerValue"
@confirm="handleConfirm"
@visible-change = "visbleChange">
</template>
data () {
return{
handler: function(e){
e.preventDefault()
}
}
},
mehtods: {
visbleChange (val) {
if(val) {
this.closeTouch()
} else {
this.openTouch()
}
},
/解决页面层级相互影响滑动的问题/
closeTouch () {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默认事件
},
openTouch () {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打开默认事件
},
},
watch: {
visible(val) {
this.$emit('visible-change', val);
}
},