vue2如何實現(xiàn)vue3的teleport
更新時間：2022年04月18日 15:48:14 作者：最有才的河南大漢
這篇文章主要介紹了vue2如何實現(xiàn)vue3的teleport，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue2實現(xiàn)vue3的teleport
不支持同一目標上使用多個teleport（代碼通過v-if就能實現(xiàn)）
組件
<script>
?? ?export default {
?? ??? ?name: 'teleport',
?? ??? ?props: {
?? ??? ??? ?/* 移動至哪個標簽內(nèi)，最好使用id */
?? ??? ??? ?to: {
?? ??? ??? ??? ?type: String,
?? ??? ??? ??? ?required: true
?? ??? ??? ?}
?? ??? ?},
?? ??? ?mounted() {
?? ??? ??? ?document.querySelector(this.to).appendChild(this.$el)
?? ??? ?},
?? ??? ?destroyed() {
?? ??? ??? ?document.querySelector(this.to).removeChild(this.$el)
?? ??? ?},
?? ??? ?render() {
?? ??? ??? ?return <div>{this.$scopedSlots.default()}</div>
?? ??? ?}
?? ?}
</script>使用
<teleport to="#header__left">
?? ?<div>
?? ??? ?當前組件引用{{msg}}
?? ?</div>
</teleport>vue3新特性teleport介紹
teleport是什么
Teleport 是一種能夠?qū)⑽覀兊哪０逡苿拥?DOM 中 Vue app 之外的其他位置的技術(shù)。
如果我們嵌套在 Vue 的某個組件內(nèi)部，那么處理嵌套組件的定位、z-index 和樣式就會變得很困難。
使用Teleport 就可以方便的解決組件間 css 層級問題
teleport怎么使用
要使用teleport，首先要在頁面上添加一個元素，我們要將模態(tài)內(nèi)容移動到該頁面
下面舉個例子
// index.html <body> ? ... ? <div id="app"></div><!--Vue mounting element--> ? <div id="modal-wrapper"> ? ? <!--modal should get moved here--> ? </div> </body>
我們將模態(tài)內(nèi)容包裝在 teleport 組件中，還需要指定一個 to 屬性，為該屬性分配一個查詢選擇器，以標識目標元素，在本例中為 #modal-wrapper
// App.vue <template> ? <button @click="toggleModalState">Open modal</button> ? <teleport to="#modal-wrapper"> ? ? <modal v-if="modalOpen"> ? ? ? <p>Hello, I'm a modal window.</p> ? ? </modal> ? </teleport> </template>
teleport 中的任何內(nèi)容都將渲染在目標元素中
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue.js和Element-UI做一個簡單登錄頁面的實例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個簡單登錄頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了詳解mpvue開發(fā)小程序小總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
關(guān)于net?6+vue?插件axios?后端接收參數(shù)問題
接到這樣一個項目需求是這樣的，前端vue?必須對象傳遞后端也必須對象接收，接下來通過本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問題,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了解決Antd輸入框卡頓問題以及Pubsub.js的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue使用async/await來實現(xiàn)同步和異步的案例分享
近期項目中大量使用async,從服務(wù)器獲取數(shù)據(jù),解決一些并發(fā)傳參問題,代碼很簡單,在此也看了一些博客,現(xiàn)在async/await已經(jīng)大范圍讓使用,所以本文給大家介紹一下vue使用async/await來實現(xiàn)同步和異步的案例,需要的朋友可以參考下2024-01-01
本篇文章主要介紹了開發(fā)Vue樹形組件的示例代碼，它展現(xiàn)了組件的遞歸使用。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
如何使用Vue mapState快捷獲取Vuex state多個值
這篇文章主要為大家介紹了如何使用Vue mapState快捷獲取Vuex state多個值實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解
這篇文章主要為大家介紹了vue3.2自定義彈窗組件結(jié)合函數(shù)式調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題
今天小編就為大家分享一篇解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue輸入框中輸完后光標自動跳到下一個輸入框中的實現(xiàn)方法
最近在工作中遇到了些問題,總結(jié)下分享給同樣遇到這個問題的朋友,這篇文章主要給大家介紹了關(guān)于vue輸入框中輸完后光標自動跳到下一個輸入框中的實現(xiàn)方法,需要的朋友可以參考下2023-03-03