https://github.com/2214962083/vue-teleport-pro

use teleport component like a pro, supports vue2 and vue3
https://github.com/2214962083/vue-teleport-pro

Last synced: 22 days ago
JSON representation

use teleport component like a pro, supports vue2 and vue3

• Host: GitHub
• URL: https://github.com/2214962083/vue-teleport-pro
• Owner: 2214962083
• Created: 2022-02-09T09:33:11.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-09-22T10:06:33.000Z (over 2 years ago)
• Last Synced: 2024-11-22T16:52:32.286Z (about 1 month ago)
• Language: JavaScript
• Size: 85.9 KB
• Stars: 5
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue Teleport Pro

1) 类似 vue3 的 teleport 组件，不过不受生命周期限制，可以套在 v-if 内。

2) 兼容 vue2 和 vue3

3) 代码少，小巧灵活，性能不减

## Installation

执行以下命令安装:

```bash

npm i vue-teleport-pro

```

## Usage

### props

```js

{

  to: string // 目标 element selector

}

```

### example

```vue

  


    

      

        我是teleport内容，统计: {{ count }}

      

    

    


      我是目标盒子 {{ count }}

      


    

    

      显示或隐藏teleport内容

    

    点击更新teleport内容

  


import TeleportPro from "vue-teleport-pro";

export default {

  components: {

    TeleportPro,

  },

  data() {

    return {

      count: 0,

      showTeleport: true,

    };

  },

};

```

例子效果请看: [https://codesandbox.io/s/vue-teleport-pro-example-o19vq?file=/src/App.vue](https://codesandbox.io/s/vue-teleport-pro-example-o19vq?file=/src/App.vue)

### Downloading directly from CDN

```html

  const TeleportPro = window.TeleportPro

  // write your code here

```