70 lines
1.5 KiB
Vue
70 lines
1.5 KiB
Vue
<template>
|
|
<div class="md-modal" v-if="mdShow">
|
|
<transition name="bounce">
|
|
<div class="modal-inner">
|
|
<div class="modal-content">
|
|
<!-- <div class="modal-message">{{question}}</div> -->
|
|
<slot></slot>
|
|
</div>
|
|
<div class="mgt15 fxrow">
|
|
<button class="fxcol btn btn-disabled submit-button" @click="closeModal">取消</button>
|
|
<button class="btn btn-disabled submit-button bl1px" v-if="comfirmDisable">确认</button>
|
|
<button class="btn submit-button" v-if="!comfirmDisable" @click="comfirm">确认</button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<transition name="fade">
|
|
<div class="overlay"></div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Modal',
|
|
props: {
|
|
// question: String,
|
|
mdShow: Boolean,
|
|
comfirmDisable: Boolean,
|
|
type: String
|
|
},
|
|
methods: {
|
|
closeModal () {
|
|
this.$emit('closeModalCallback')
|
|
},
|
|
comfirm () {
|
|
this.$emit('comfirmCallback', this.type)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.modal-inner
|
|
position fixed
|
|
top 50%
|
|
left 50%
|
|
width 80%
|
|
font-size .28rem
|
|
overflow hidden
|
|
transition .3s
|
|
border-radius 4px
|
|
background-color #fff
|
|
transform translate3d(-50%, -50%, 0)
|
|
z-index 2018
|
|
.overlay
|
|
position fixed
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
height 100%
|
|
background-color rgba(0, 0, 0, .7)
|
|
z-index 11
|
|
>>>.btn
|
|
border-radius 0
|
|
>>>.submit-button
|
|
margin 0
|
|
.bl1px
|
|
border-left 1px solid #fff
|
|
</style>
|