vue 模态框组件_具有单个组件的Vue模态

vue 模态框组件

Vuedals (Vuedals)

VueJS (2.x) Plugin for multiple modals windows with a single component instance.

VueJS(2.x)插件，用于具有单个组件实例的多个模态窗口。

View demo 查看演示 Download Source 下载源

这是什么？ (What is this?)

A plugin to open stocked modals windows, event based, with just one component in your DOM.

一个插件，用于基于事件打开库存的模态窗口，而DOM中只有一个组件。

“仅一个组件”是什么意思？ (What do you mean with "just one component"?)

e.g. if you want to have 3 modals, you don't need to add the component 3 times, just one (preferably in the root of your app) and open as many modals as you want by using an Event Bus

例如，如果您想拥有3个模态，则不需要添加3次组件，只需添加一次(最好在应用程序的根目录中)，并使用事件总线打开所需数量的模态

安装 (Install)

Install with npm:

使用npm安装：

npm install --save vuedals

例 (Example)

import Vue from 'vue';
import {default as Vuedals, Component as Vuedal, Bus as VuedalsBus} from 'vuedals';

Vue.use(Vuedals);

var myComp = Vue.extend({
    template: `<div>
            <h1>Hello World!</h1>
            <button @click="showIt()">Show me the money</button>
        </div>`,

    methods: {
        showIt() {
            VuedalsBus.$emit('new', {
                name: 'showing-the-money',

                component: {
                    name: 'the-money',

                    template: `
                        <div>
                            <h1>THE MONEY!</h1>
                            <p>Money, money, money, moooneeyyy $ $ $ $</p>
                        </div>
                    `