安裝設定

安裝

Vue 3

npm install vue-final-modal@next
yarn add vue-final-modal@next
pnpm add vue-final-modal@next

Vue 2

npm install vue-final-modal@latest
yarn add vue-final-modal@latest
pnpm add vue-final-modal@latest

按需求引入

查看更多

<script>
import { $vfm, VueFinalModal, ModalsContainer } from 'vue-final-modal'

export default {
  components: {
    VueFinalModal,
    ModalsContainer
  }
}
</script>

全域註冊套件

引入套件 vfmPlugin

  • 型別:Function | PluginObject
  • 參數:Object
    • 預設:
    {
      key: '$vfm',
      componentName: 'VueFinalModal',
      dynamicContainerName: 'ModalsContainer'
    }
    
  • 回傳:PluginObject
  • 範例:
import { vfmPlugin } from 'vue-final-modal'
// 或
import vfmPlugin from 'vue-final-modal'

在 Vue 2 中註冊套件

main.js
import { vfmPlugin } from 'vue-final-modal'

Vue.use(vfmPlugin)

在 Nuxt 中註冊套件

  • 新增一個 plugin vue-final-modal.js
plugins/vue-final-modal.js
import { vfmPlugin } from 'vue-final-modal/lib'

Vue.use(vfmPlugin)
  • nuxt.config.js 的 plugin 與 build 中加入
nuxt.config.js
export default {
  plugins: ['~plugins/vue-final-modal.js'],
  build: {
    transpile: ['vue-final-modal']
  }
}

CDN

  • jsDelivr
<script src="https://cdn.jsdelivr.net/npm/vue-final-modal"></script>
  • Unpkg
<script src="https://unpkg.com/vue-final-modal"></script>
在 GitHub 上编辑此页面 Updated at Fri, Jun 25, 2021