Commit 3dbe9cff authored by JingChao's avatar JingChao

Update Modal.vue

parent db068377
<template>
<!--<transition :name="transition">-->
<div v-show="showModal" :class="active" class="modal-backdrop" @touchstart="hideModal">
<div v-show="showModal" :class="active" class="modal-backdrop" @click.capture="hideModal">
<div class="modal-backdrop-bg"/>
<div
:class="[modalClass,cusClass]"
class="modal slide-in-up"
:class="[modalClass,transition]"
class="modal"
@touchstart="start"
@mousedown="start">
<slot/>
......@@ -19,7 +19,7 @@ export default {
value: Boolean, // eslint-disable-line
position: {
type: String,
default: 'bottom',
default: 'top',
},
cusClass: {
type: String,
......@@ -34,7 +34,12 @@ export default {
},
computed: {
transition () {
return this.position === 'bottom' ? 'slide-in-up' : 'slide-in-down'
return {
'slide-in-up': this.position === 'top',
'slide-in-down': this.position === 'bottom',
'slide-in-left': this.position === 'left',
'slide-in-right': this.position === 'right',
}
},
active () {
return this.showModal ? 'active' : 'hide'
......@@ -59,7 +64,7 @@ export default {
this.state = 2
setTimeout(() => {
}, 400)
}, 50)
}, 100)
},
showModal (val) {
// 标签用法时需要发射一个input事件,修改v-model绑定的属性值
......@@ -72,14 +77,16 @@ export default {
},
start (e) {
e.stopPropagation()
// e.stopPropagation()
},
hideModal () {
this.state = 3
setTimeout(() => {
this.state = 0
this.showModal = false
}, 250)
hideModal (e) {
if(e.target.className.indexOf('modal-backdrop') === 0){
this.state = 3
setTimeout(() => {
this.state = 0
this.showModal = false
}, 250)
}
},
},
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment