Vue2Popup

Vue Component for Vue 2.x

Install

    npm install vue2-popup --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2Popup from 'vue2-popup';

2.1 Use it globally

Vue.use(Vue2Popup);

// OR with options

Vue.use(Vue2Popup, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

*3. Access it locally

<template>
    <vue2-popup ref="http" v-model="data" :error-fn="onError"></vue2-popup>
</template>

components: {
    'vue2-popup': Vue2Popup
},

Properties

• title: String

• size: String

• static: Boolean

• saveBtn: Boolean (default: 1)

• cancelBtn: Boolean (default: 1)

• mini: Boolean

• closeBtnLabel: String (default: Close)

• cancelBtnLabel: String (default: Cancel)

• saveBtnLabel: String (default: Save)

• forceFooter: Boolean

Example

<template>
    <div id="app">
        <div>
            <vue2-popup ref="popup" :save-btn="true" :mini="true">
                <input-box v-model="data"></input-box>
            </vue2-popup>

            <vue2-popup size="sm" ref="popup2" :save-btn="true" :mini="true" :modal="true">
                just static modal
            </vue2-popup>

            <p>Data only changes if the user presses save!</p>
            <p><code>this.$parent.$on('save', () => ...)</code> in &lt;input-box&gt; or child component</p>
            <p v-for="i in 10">&nbsp;</p>
            <pre>{{data}}</pre>

            <button class="btn btn-primary btn-sm" type="button" @click="$refs.popup.show()">Test</button>

        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Vue2Popup from '../src/index'
    import InputBox from "./InputBox";

    Vue.use(Vue2Popup, {});

    export default {
        name: 'app',
        components: {InputBox},
        data() {
            return {
                data: {keyword: 123},
            }
        },
        mounted(){
            this.$refs.popup.show();
            setTimeout(() => this.$refs.popup2.show(), 2000);
        },
        methods: {
            test() {
                // code
            }
        },
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build