Modals

<button class="btn btn-success" @click="showModal()">
    Open Modal
</button>

<modal :show.sync="show" v-bind:small="true" v-bind:force="true" ref="modal" :cancelClass="'none'" :okText="'CLOSE'">
  <div slot="title">Static Modal</div>
  <div>
    Modal Content
  </div>
</modal>

import Modal from '/vuestic-components/vuestic-modal/VuesticModal'
export default {
  name: 'modals',
  components: {
    Modal
  },
  methods: {
    showModal () {
      this.$refs.modal.open() // $refs property name same as in ref="modal"
    }
  }
  // ...
}

Props

• transition - String (default: 'modal')
• small - Boolean (default: false') - use v-bind:small="true" to set small size of modal
• large - Boolean (default: false') - use v-bind:large="true" to set large size of modal
• force - Boolean (default: false') - use v-bind:force="true" to disallow backdrop click
• okText - String (default: 'CONFIRM') - use :okText="'Some Text Here'" to set text in confirm button
• cancelText - String (default: 'CANCEL') - use :cancelText="'Some Text Here'" to set text in cancel button
• okClass - String (default: 'btn btn-primary') - use :okClass="'custom-class'" to add prefered class to submit button
• cancelClass - String (default: 'btn btn-secondary') - use :cancelClass="'custom-class'" to add prefered class to cancel button

Find DEMOs here!