安裝設定
安裝
Vue 3
npm install vue-final-modal@latest
yarn add vue-final-modal@latest
pnpm add vue-final-modal@latest
Vue 2
npm install vue-final-modal@legacy
yarn add vue-final-modal@legacy
pnpm add vue-final-modal@legacy
按需求引入
查看更多
- $vfm API 的使用。
- VueFinalModal 基礎 modal 的使用。
- ModalsContainer 動態 modal 的使用。
<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>