示例

本节提供常见用例的实际示例。

在线体验

在浏览器中直接体验 vue-mount-plugin：

⚡

Vue 3 在线演示

体验 Vue 3 + 组合式 API

🔧

Vue 2 在线演示

体验 Vue 2 + 选项式 API

可用示例

示例	描述
模态框	基础弹窗组件
确认对话框	基于 Promise 的确认框
消息提示	单例消息通知
上下文继承	正确传递上下文

快速示例

基础弹窗

import { mount } from 'vue-mount-plugin'
import Modal from './Modal.vue'

mount(Modal, {
  props: { title: 'Hello World' }
})

确认对话框

const confirmed = await mount(ConfirmDialog, {
  props: { message: '确定吗？' }
})

if (confirmed) {
  // 用户确认
}

消息提示

mount(Toast, {
  singleton: true,
  props: { message: '成功!' }
})

带上下文

// Vue 3
import { getCurrentInstance } from 'vue'

const { appContext } = getCurrentInstance()!

mount(MyComponent, {
  app: appContext.app
})

// Vue 2
mount(MyComponent, {
  parent: this
})

本地运行示例

克隆仓库并运行示例应用：

git clone https://github.com/saqqdy/vue-mount-plugin.git
cd vue-mount-plugin

# 安装依赖
pnpm install

# 运行 Vue 3 示例
cd examples/vue3
pnpm dev

# 运行 Vue 2 示例
cd examples/vue2
pnpm dev