• v-transfer-dom 指令
    • 使用
      • 注册局部指令
      • 注册全局指令
      • 模板使用

    v-transfer-dom 指令

    在移动端应用里,为了便于代码组织,通常我们要将组件放在各个路由的 .vue 文件里,但是因为此时组件并不在 body 下,加上定位,overflowscrolling 设置等原因,会出现遮罩在弹层之上,z-index 失效等问题。

    因此我们推荐在纯弹窗类组件比如 Alert Popup XDialog 等组件上使用 v-transfer-dom 实现自动移动到 body 下,解决以上问题。

    必须有一个 div 作为占位元素否则会出错

    使用

    注册局部指令

    1. import { TransferDom } from 'vux'
    2. export default {
    3. directives: {
    4. TransferDom
    5. }
    6. }

    注册全局指令

    1. import { TransferDom } from 'vux'
    2. Vue.directive('transfer-dom', TransferDom)

    模板使用

    1. <div v-transfer-dom>
    2. <popup v-model="show"></popup>
    3. <div>