hsy-vue-dialog

vue-dialog

This is yet another vue dialog component.

Install

Use npm to download code:

npm install hsy-vue-dialog -S

then import it into your project, add below code into your main.js:

import Dialog from 'hsy-vue-dialog'

Vue.use(Dialog)

Usage

<button @click="visible = true">remove</button>

<hsy-dialog class="confirm" v-model="visible">
  <div slot="title">Remove</div>
  <div slot="body">
    <div>This operation is irreversible, are you sure?</div>
    <div>
      <button @click="handleYes">Yes</button>
      <button>No</button>
    </div>
  </div>
</hsy-dialog>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    handleYes() {
      alert('Yes')
      this.visible = false
    }
  }
}
</script>

Props

Prop	Description	Type	Accepted Values	Default
value	whether dialog is visible or not	Boolean	--	false
closeButton	whether close button is visible or not	Boolean	--	true
clickMask2Close	if dialog should be closed when mask is clicked	Boolean	--	true

Screenshot