modal-fullscreen-vue v0.1.4

modal-fullscreen-vue

Project setup

npm install modal-fullscreen-vue

How to import

Import globally in main.js:

import ModalFullScreenVue from 'modal-fullscreen-vue'

Vue.use(ModalFullScreenVue)

// or custom use name
Vue.use('my-custom-name', ModalFullScreenVue)

Or import in component context:

<script>
  import ModalFullScreenVue from 'modal-fullscreen-vue'

  export default {
    components: {
      'modal-fullscreen-vue': ModalFullScreenVue
    }
  }
</script>

How to use

<template>
  <div>
    <button @click="show = true">Show</button>
    <ModalFullScreen :show="show" v-on:show="handleShow">
      <template slot="header">
        header
      </template>

      <template slot="body">
        <div v-for="n in 1000" :key="n">
          Body {{ n }}
        </div>
      </template>

      <template slot="footer">
        <button @click="show = false">Close</button>
      </template>
    </ModalFullScreen>
  </div>
</template>

<script>
  import ModalFullScreen from '../App.vue'

  export default {
    components: {
      // without custom name
      ModalFullScreen
    },

    data () {
      return {
        bodyText: 'Lorem Ipsum',
        show: true
      }
    },

    methods: {
      handleShow (show) {
        alert(`show: ${show}`)
      }
    }
  }
</script>

Props

Slots

Events