API 參考

Usage

$vfm 是一個存放 VueFinalModal 資料與方法的物件

直接引入

import { $vfm } from 'vue-final-modal'

使用 Options API

如果你全域註冊套件，可以在組件內使用 this.$vfm.

使用 Options API

如果你全域註冊套件，可以在組件內使用 this.$vfm.

使用 Composition API

如果你全域註冊套件，你可以在 setup 中使用 inject('$vfm')

import { inject } from 'vue'

export default {
  setup() {
    const $vfm = inject('$vfm')
  }
}

API

`$vfm.show(name, params)`

型別： Function
參數：
- name: String - 指定 modal 的名字。
- params: ?: object - Any data that you want to pass into the modal, checkout the guide params.
回傳： Promise<Object> | Promise<Array>

範例：

<template>
  <vue-final-modal v-model="show" name="example">
    <template v-slot:title>$vfm.show</template>
    <template v-slot="{ params }">
      Hi {{ params.userName }}
    </template>
  </vue-final-modal>
</template>

<script>
  export default {
    data: () => ({
      show: false
    })
  }
</script>

this.$vfm.show('example', { userName: 'vue-final-modal' })
  .then(() => {
    // 當 modal 開啟後，做一些事
  })

如果要使用 $vfm.show(name) 打開 modal， v-model 是必須給的。

`$vfm.hide([names])`

型別： Function
參數：
- names: String - 指定要隱藏 modal 名稱。
回傳： Promise<Object> | Promise<Array>

範例：

<template>
  <vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
  <vue-final-modal v-model="show2" name="example2">Vue Final Modal is awesome 2</vue-final-modal>
</template>

<script>
  export default {
    data: () => ({
      show: true,
      show2: true
    }),
    mounted() {
      this.$vfm.hide('example', 'example2').then(() => {
        // 當 modal 關閉後，做一些事
      })
    }
  }
</script>

`$vfm.hideAll()`

回傳： Promise<Object> | Promise<Array>

範例：

this.$vfm.hideAll().then(() => {
  // 當所有 modal 關閉後，做一些事
})

關閉所有的 modal。

this.$vfm.hideAll().then(() => {
  // 當所有 modal 關閉後，做一些事
})

`$vfm.toggle(name, show, params)`

型別： Function
參數：
- name: [String | Array] - modal 的名稱。
- show: ?: Boolean - 打開或隱藏這個 modal。
- params: ?: object - 任何你想要傳入 modal 的資料，詳閱參數（params）。
回傳： Promise<Object> | Promise<Array>

範例：

this.$vfm.toggle('myModal').then(() => {
  // 當多個 modal 被開啟或被關閉時，做一些事，開啟或關閉取決於 show 參數給的是 true 或 false
})

根據名字（name）切換 modals 的狀態。

`$vfm.get([names])`

型別： Function
參數：
- names: String - 取得傳入的名字（name）對應的 modals 實例。
回傳：
- Array: 回傳的 modals 實例

範例：

const modals = this.$vfm.get('modalName1', 'modalName2', ...)

`$vfm.openedModals`

回傳：
- Array: 回傳所有顯示中的 modal 實例。
範例：
- 取得第一個打開的 modal 實例
```
  this.$vfm.modals[0]
```
- 取得現在打開的 modal 總數
```
  this.$vfm.modals.length
```

`$vfm.modals`

回傳：
- Array: 取得所有 modal 的實例。
範例：
- 取得第一個創建的 modal 實例
```
  this.$vfm.modals[0]
```
- 取得現在創建的 modal 總數
```
  this.$vfm.modals.length
```