亲宝软件园·资讯

展开

Vue2.x Picker全局调用 移动端Vue2.x Picker的全局调用实现

我在曾经眺望彼岸 人气:0
想了解移动端Vue2.x Picker的全局调用实现的相关内容吗,我在曾经眺望彼岸在本文为您仔细讲解Vue2.x Picker全局调用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue2.x,Picker全局调用,Vue2.x,Picker,下面大家一起来学习吧。

什么是Picker组件

对标PC端的Select标签, 移动端的选择框一般是在viewPort底部弹出

Picker组件存在的问题

解决思路

利用声明式编程将Picker放置在Body下去使用, 可以较好的规避以上的两个问题,例如利用以下方式调用picker的显示与隐藏

 this.$picker(组件选项, {
 wrapper: {
  props: {},
  on: {}
 },
 props: {},
 on: {}
 })

选项解释

解决方案

目录划分

 - Components
  - BaseUsedComponents
   - Picker
    - Picker.vue
    - index.js
 - main.js

描绘Picker容器

Picker.vue文件作用:

代码如下:

 <transition name="slideup">
 <div class="picker" v-if="show">
  <slot></slot>
  <div class="mask"></div>
 </div>
 </transition>

创建Picker

思路大纲

Picker函数

create

为什么需要在requestAnimationFrame里去取动画时间, 而不是在mounted直接可以获取?

组件的mounted函数是在初始化渲染后就会调用,而Toast组件通过设置showStatus去触发transition的enter函数(虽然Toast组件mounted在之前就会被调用,但此时toast dom上不存在transition class),此时由于触发的是data.setter函数,从而对Watcher进行派发更新,导致所有的操作都在nextTick(也就是微任务)里执行, 所以调用顺序是这样的:

Toast组件Mounted -> 父组件Mounted(也就是现在所处的Mounted函数, 注意此时因为toast里的transition没有携带appear属性,导致transition enter函数不会触发,从而transition class不会被添加) -> nextTick() -> Toast组件update(v-show) -> transition(v-show触发enter函数) -> toast dom增加了transition类名 -> window.getComputedStyle(toast)获取toastDuration,我们也可以在nextTick里获取,介于transition active在动画全过程都会有,并且requestAnimationFrame属于浏览器重绘(painter)钩子函数,比微任务还要靠后执行,所以在这里获取

show

hide

为什么采用setTimeout去删除

使用监听transtionend会有一个问题:

 Vue本身在transition组件子节点里监听了transitionend(或者animationend)
 动画完成后就会删除掉transition class, 那么此时transition-property就会消失掉
 根据文档显示, transition-property消失后将不触发transition钩子函数,继而无法触发
 transitionend函数,导致remove可能会无法调用,留下之前的ToastConainer

remove

remove函数作用是删除真实DOM、清除延时器、将timer以及Picker实例置为null, 调用GC

updateChildrenComponent

Picker组件完成后,发现更改传入组件的里的props没有重新,所以这里写了一个手动触发更新组件的函数,组件vnode有4个钩子函数,prepatch是做为update时调用,值有两个,第一个是上一次的vnode,而第二个就是更改后的vnode,所以我们在PickerCommand函数里预暂了原先vnode以及Component,做为diff的旧vnode,调用此函数既可以更新组件

结束语

Picker组件只是一个例子,还可以使用更多方法去实现。到此这篇关于移动端Vue2.x Picker的全局调用实现的文章就介绍到这了,更多相关Vue2.x Picker全局调用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持! 

加载全部内容

相关教程
猜你喜欢
用户评论