插件名称 | vue-modal-wizard |
---|---|
发布时间 | 2021年4月28日 |
插件作者 | leodd |
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')}
}
})