Vue.js的简单直观，高度可定制的模式组件。

安装

npm i vue-modal-wizard

import ModalWizard from 'vue-modal-wizard'
Vue.use(ModalWizard)

//use it in your vue component
this.$modal.open(modalComponent, opts)

//or
ModalWizard.open(modalComponent, opts)

/*
The default plugin name is 'modal'.
You can manually define it by giving a name option.
e.g.
Vue.use(ModalWizard, {name: 'coolModal'})
this.$coolModal.open(modalComponent, opts)
*/

用法

有三种创建模态的方法。

内联模板定义：

this.$modal.open(`
  <div>
    {{ message }}
    <button :click="onOk" }>ok</button>
  </div>
`, {
  props: {
      message: 'here is a message',
      onOk: () => {console.log('ok')}
    }
})

定义内联渲染功能：

// 另外，为了简单起见，我在这里使用JSX。你可以使用正常的渲染功能，如果你喜欢。
this.$modal.open((h, props) => {
  return (
    <div>
      { props.message }
      <button onClick={ props.onOk }>ok</button>
    </div>
  )
}, {
  props: {
    message: 'here is a message',
    onOk: () => {console.log('ok')}
  }
})

在组件中定义（推荐）：

// 使用vue组件定义模态
<template>
  <div>
    {{ message }}
    <button :click="onOk" }>ok</button>
  </div>
</template>

<script>
  export default {
    props: ['message', 'onOk']
  }
</script>

// 使用组件作为模态
import modal from 'component.vue'
this.$modal.open(modal /* 或'componentName' */, {
  props: {
    message: 'here is a message',
    onOk: () => {console.log('ok')}
  }
})

---

官网：https://github.com/leodd/vue-modal-wizard

演示：https://www.vue365.cn/code_demo.php?id=4552

GitHub下载：https://github.com/leodd/vue-modal-wizard/archive/refs/heads/master.zip