安裝設定
安裝
Vue 3
npm install vue-final-modal@3
yarn add vue-final-modal@3
pnpm add vue-final-modal@3
按需求引入
查看更多
- $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 3 中註冊套件
main.js
import { vfmPlugin } from 'vue-final-modal'
App.use(vfmPlugin)
CDN
- jsDelivr
<script src="https://cdn.jsdelivr.net/npm/vue-final-modal@3"></script>
- Unpkg
<script src="https://unpkg.com/vue-final-modal@3"></script>