[英]Possible to open modal from outside the vue component
是否可以从组件外部调用方法以使组件可重用?
现在我添加我的按钮以在模板槽中打开模式:
index.php
<modal>
<template slot="button">
<button class="btn">Open modal</button>
</template>
Some modal text
</modal>
Modal.vue
<template>
<div>
<div @click="showModal"><slot name="button"></slot></div>
<div v-if="showingModal"><slot></slot></div>
</div>
</template>
<script>
export default {
data () {
return {
showingModal: false,
}
},
methods: {
showModal() {
this.showingModal = true;
},
}
}
</script>
我觉得有更好的选择,但我无法弄清楚。
是的,您可以从组件外部调用方法!
父组件
<template>
<div>
<modal ref="modal"></modal>
<button @click="openModal">Open Modal</button>
</div>
</template>
<script>
import modal from './child.vue'
export default {
components: { modal }
methods: {
openModal() { this.$refs.modal.show() }//executing the show method of child
}
}
</script>
子组件
<template>
<div v-if="showModal">
<div id="modal">
<p>Hello i am a modal
</p>
<button @click="hide">Close</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false
}
},
methods: {
show() {
this.showModal = true
},
hide(){
this.showModal = false
}
}
}
</script>
将modal
组件实例放入Vue.prototype
中,然后在可以访问Vue
实例上下文的任何地方调用show/hide
。
下面是一个演示:
let vm = null // the instance for your Vue modal let timeout = null //async/delay popup const SModal = { isActive: false, show ({ delay = 500, message = '', customClass = 'my-modal-class' } = {}) { if (this.isActive) { vm && vm.$forceUpdate() return } timeout = setTimeout(() => { timeout = null const node = document.createElement('div') document.body.appendChild(node) let staticClass = '' vm = new this.__Vue({ name: 's-modal', el: node, render (h) { // uses render() which is a closer-to-the-compiler alternative to templates return h('div', { staticClass, 'class': customClass, domProps: { innerHTML: message } }) } }) }, delay) this.isActive = true }, hide () { if (!this.isActive) { return } if (timeout) { clearTimeout(timeout) timeout = null } else { vm.$destroy() document.body.removeChild(vm.$el) vm = null } this.isActive = false }, __Vue: null, __installed: false, install ({ $my, Vue }) { if (this.__installed) { return } this.__installed = true $my.SModal = SModal // added your SModal object to $my this.__Vue = Vue //get the Vue constructor } } let installFunc = function (_Vue, opts = {}) { if (this.__installed) { return } this.__installed = true const $my = { 'memo': 'I am a plugin management.' } if (opts.plugins) { Object.keys(opts.plugins).forEach(key => { const p = opts.plugins[key] if (typeof p.install === 'function') { p.install({ $my, Vue: _Vue }) } }) } _Vue.prototype.$my = $my } Vue.use(installFunc, { plugins: [SModal] }) app = new Vue({ el: "#app", data: { 'test 1': 'Cat in Boots' }, methods: { openModal: function () { this.$my.SModal.show({'message':'test', 'delay':1000}) }, closeModal: function () { this.$my.SModal.hide() } } })
.my-modal-class { position:absolute; top:50px; left:20px; width:100px; height:100px; background-color:red; z-index:9999; }
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> <div id="app"> <button @click="openModal()">Open Modal!!!</button> <button @click="closeModal()">Close Modal!!!</button> </div>
vue-cli 项目的粗略步骤:
在 ./plugins/SModal.js 中(按照官方文档中的教程创建一个 vue 实例,然后将其添加到document.body
中):
let vm = null // the instance for your Vue modal
let timeout = null //async/delay popup
const SModal = {
isActive: false,
show ({
delay = 500,
message = '',
customClass = ''
} = {}) {
if (this.isActive) {
vm && vm.$forceUpdate()
return
}
timeout = setTimeout(() => {
timeout = null
const node = document.createElement('div')
document.body.appendChild(node)
vm = new this.__Vue({
name: 's-modal',
el: node,
render (h) { // uses render() which is a closer-to-the-compiler alternative to templates
return h('div', {
staticClass,
'class': props.customClass
})
}
})
}, delay)
this.isActive = true
},
hide () {
if (!this.isActive) {
return
}
if (timeout) {
clearTimeout(timeout)
timeout = null
} else {
vm.$destroy()
document.body.removeChild(vm.$el)
vm = null
}
this.isActive = false
},
__Vue: null,
__installed: false,
install ({ $my, Vue }) {
if (this.__installed) { return }
this.__installed = true
$my.SModal = SModal // added your SModal object to $my
this.__Vue = Vue //get the Vue constructor
}
}
export default SModal
正如官方文档所说,一个 Vue.js 插件应该暴露一个 install 方法。 该方法将使用 Vue 构造函数作为第一个参数以及可能的选项来调用
在 install.js 中(您也可以根据您的设计将此方法移动到 main.js 中):
// loop all plugins under the folder ./plugins/, then install it.
export default function (_Vue, opts = {}) {
if (this.__installed) {
return
}
this.__installed = true
const $my = {
'memo': 'I am a plugin management.'
}
if (opts.plugins) {
Object.keys(opts.plugins).forEach(key => {
const p = opts.plugins[key]
if (typeof p.install === 'function') {
p.install({ $my, Vue: _Vue })
}
})
}
_Vue.prototype.$my = $my
}
在 main.js 中(最终使用您的插件):
import install from './install'
import * as plugins from './plugins'
Vue.use({ install }, {
plugins
})
最后在您的视图/组件中,您可以像这样显示/隐藏您的模式:
this.$my.SModal.show()
this.$my.SModal.hide()
当然,接受模态组件的属性:
props: ['open']
然后传入:
<modal :open="boolToOpenModal"> ... </modal>
然后:
<div v-if="showingModal || open"><slot></slot></div>
没有(简单的,受支持的)方法来调用组件中的方法,但是您可以修改子中的属性(例如show
)(请参阅使用 Props 将数据传递给子组件)或使用事件(请参阅自定义事件, $emit和$refs )。 使用事件,您也可以使用事件总线。 基于事件的解决方案当然更适合更复杂的交互。
我只是将v-on="$listeners"
添加到子组件(modal.vue)中:
// modal.vue
<template>
<div :show="show" v-on="$listeners">
...
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
}
},
...
现在您可以轻松地从其父模式打开或关闭模式:
//parent.vue
<modal @close="showModal = false" :show="showModal" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.