This is yet another vue dialog component.
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)
<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>
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 |