天給大家推薦一款超美觀的pc端vue.js彈窗組件VueJsModal。

vue-js-modal 基于Vue構(gòu)建的Modal對話框組件。單獨組件，方便使用。支持拖拽、縮放、異步調(diào)用組件。

安裝

$ npm i vue-js-modal -S

引入組件

// 在main.js中引入
import Vue from 'vue'
import VModal from 'vue-js-modal'
import 'vue-js-modal/dist/styles.css'
Vue.use(VModal)

調(diào)用方式

<template>
  <modal name="example"
    :width="300"
    :height="300"
    :resizable="true"
    :draggable="true"
    :adaptive="true"
    @before-open="beforeOpen"
    @opened="Opened"
    @before-close="beforeClose"
    @closed="Closed"
  >
    Hello, VueModal!
  </modal>
</template>
<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.$modal.show('example')
  },
  methods: {
    beforeOpen(event) {
      console.log('Opening...')
    },
    Opened(event) {
      console.log('Opened...')
    },
    beforeClose(event) {
      console.log('Closing...')
    },
    Closed(event) {
      console.log('Closed...')
    }
  }
}
</script>

調(diào)用內(nèi)部 show、hide 方法顯示和隱藏彈窗

<template>
  <modal name="my-first-modal">
    This is my first modal
  </modal>
</template>

<script>
export default {
  mounted () {
    this.show()
  },
  methods: {
    show () {
      this.$modal.show('my-first-modal');
    },
    hide () {
      this.$modal.hide('my-first-modal');
    }
  }
}
</script>

另外還支持Modal動態(tài)調(diào)用組件

import MyComponent from './MyComponent.vue'
this.$modal.show(
  MyComponent,
  { text: 'This text is passed as a property' },
  { draggable: true }
)

// or

this.$modal.show(
  {
    template: `
      <div>
        <h1>This is created inline</h1>
        <p>{{ text }}</p>
      </div>
    `,
    props: ['text']
  },
  { text: 'This text is passed as a property' },
  { draggable: true, resizable: true },
  { 'before-close': event => {} }
)

附上模態(tài)框示例及倉庫地址

# demo地址
http://vue-js-modal.yev.io/

# 項目地址
https://github.com/euvl/vue-js-modal

ok，這次就分享到這里。如果大家有其它Vue彈窗組件，歡迎留言討論~

、teleport 介紹

teleport 傳送門組件，提供一種簡潔的方式，可以指定它里面的內(nèi)容的父元素。通俗易懂地講，就是 teleport 中的內(nèi)容允許我們控制在任意的 DOM 中，使用簡單。

使用語法：

<teleport to="body">
 <div>
  需要創(chuàng)建的內(nèi)容
 </div>  
</teleport>

to 屬性是指定 teleport 中的內(nèi)容加入的 DOM 元素。可以是標簽名，也可以是 id 或類名。

//標簽名  。上述實例就是加入body元素內(nèi)，使用的是標簽名。
<teleport to="body"></teleport>

//類名。如：to=".className"
<teleport to=".className"></teleport>

//id名
<teleport to="#idName"></teleport>

1.1、多個 teleport 使用

多個 teleport 傳送門組件可以將內(nèi)容都掛載到一個目標上，多個 teleport 組件內(nèi)容就是兄弟節(jié)點，先掛載的在前面，后掛載的在后面。

使用如下：

<teleport to="body">
 <div class="first">
  第一個掛載元素
 </div>  
</teleport>
<teleport to="body">
 <div class="second">
  第二個掛載元素
 </div>  
</teleport>

運行結(jié)果如圖：

上邊的實例等價于：

<teleport to="body">
 <div class="first">
  第一個掛載元素
 </div>
 <div class="second">
  第二個掛載元素
 </div>
</teleport>

二、為什么使用 teleport

使用 vue 開發(fā)時，都是多個組件之間不斷地嵌套，處理元素的樣式或者層級的時候就會變得困難。如我們需要添加一個 modal 模態(tài)框或 toast 提示框，如果我們把這樣的框可以從 vue 組件中剝離出來，我們樣式和層級設(shè)置起來會更加簡便。

有些同學會想，這直接放到 index.html 中不就好了嗎？另外 modal 、toast 元素需要使用 vue 組件的狀態(tài)值，通過狀態(tài)控制 modal、toast 的隱藏顯示。如果直接放入 index.html 則狀態(tài)控制就復雜了。

所以 teleport 傳送門組件就派上用場了。有點像“哆啦A夢”的任意門，可以把元素傳送到任意的元素內(nèi)。同時還可以使用 vue 組件內(nèi)的狀態(tài)值控制它。

三、teleport 應(yīng)用

使用 vite + vue 3 創(chuàng)建的項目，具體如何創(chuàng)建項目請查看《什么，你還使用 webpack？別人都在用 vite 搭建項目了》文章。

vue 3 的項目創(chuàng)建完成之后，找到 index.htm 文件，添加：

<div id="newModal"></div>	

組件文件內(nèi)，添加 teleport 組件：

<button @click="showModal" class="btn">打開 modal </button>
<!-- to 屬性就是目標位置 -->
<teleport to="#newModal">
 <div v-if="visible">
  <div >我是一個 Modal 框</div>
  </div>
</teleport>

運行結(jié)果，我們發(fā)現(xiàn)使用的 teleport 組件，通過 to 屬性，將內(nèi)容傳送到<div id="newModal"></div>內(nèi)，該元素與<div id="app"></div>同級。此時 teleport 中的元素隱藏顯示完全由 vue 組件內(nèi)的狀態(tài)值決定。

四、初學者容易遇到的坑

有些同學在自己的項目內(nèi)，直接引入了 teleport 傳送門組件，運行以后發(fā)現(xiàn)該組件原樣輸出了，并沒有被解析，同時還會報錯。

錯誤信息如下：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <teleport> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

然后就在網(wǎng)上各種查解決辦法，最后發(fā)現(xiàn)壓根找不到！

根本原因是你使用的還是 vue2，不是 vue3。有些同學會把 腳手架 vue-cli 3 創(chuàng)建的項目，當作是 vue3 。vue-cli 2 和 vue-cli 3 創(chuàng)建項目與是否是 vue3 沒有必然聯(lián)系的。