2017-07-11 06:40:54 +00:00
|
|
|
<template>
|
|
|
|
<div :class="['ui', {'active': show}, 'modal']">
|
|
|
|
<i class="close icon"></i>
|
2019-12-26 10:38:26 +00:00
|
|
|
<slot v-if="show">
|
2018-03-20 22:39:23 +00:00
|
|
|
|
2017-07-11 06:40:54 +00:00
|
|
|
</slot>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import $ from 'jquery'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
show: {type: Boolean, required: true}
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
control: null
|
|
|
|
}
|
|
|
|
},
|
2018-03-20 22:39:23 +00:00
|
|
|
beforeDestroy () {
|
|
|
|
if (this.control) {
|
2019-03-25 16:02:51 +00:00
|
|
|
$(this.$el).modal('hide')
|
2018-03-20 22:39:23 +00:00
|
|
|
}
|
2019-04-18 12:37:17 +00:00
|
|
|
$(this.$el).remove()
|
2018-03-20 22:39:23 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
initModal () {
|
|
|
|
this.control = $(this.$el).modal({
|
|
|
|
duration: 100,
|
|
|
|
onApprove: function () {
|
|
|
|
this.$emit('approved')
|
|
|
|
}.bind(this),
|
|
|
|
onDeny: function () {
|
|
|
|
this.$emit('deny')
|
|
|
|
}.bind(this),
|
|
|
|
onHidden: function () {
|
|
|
|
this.$emit('update:show', false)
|
|
|
|
}.bind(this)
|
|
|
|
})
|
|
|
|
}
|
2017-07-11 06:40:54 +00:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
show: {
|
|
|
|
handler (newValue) {
|
|
|
|
if (newValue) {
|
2018-03-20 22:39:23 +00:00
|
|
|
this.initModal()
|
2019-09-02 13:21:26 +00:00
|
|
|
this.$emit('show')
|
2017-07-11 06:40:54 +00:00
|
|
|
this.control.modal('show')
|
|
|
|
} else {
|
2018-03-20 22:39:23 +00:00
|
|
|
if (this.control) {
|
2019-09-02 13:21:26 +00:00
|
|
|
this.$emit('hide')
|
2018-03-20 22:39:23 +00:00
|
|
|
this.control.modal('hide')
|
|
|
|
this.control.remove()
|
|
|
|
}
|
2017-07-11 06:40:54 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|