188 lines
3.2 KiB
Vue
188 lines
3.2 KiB
Vue
<template>
|
|
<view :class="`dialog ${show ? 'delog-show' :'delog-hidden'} `" :style="`z-index:${zIndex}`"
|
|
mut-bind:touchmove="true">
|
|
<view @touchmove.stop="" class="dialog-mask" @click="handleClose()"></view>
|
|
<view :class="`dialog-content ${type} pos-${closePosType}`"
|
|
:style="`padding: 20rpx 0rpx;background-color:${bgColor};`">
|
|
<view v-if="title" style="margin-bottom: 30rpx;" >
|
|
<u-row @touchmove.stop="" justify="between" custom-style="padding: 0 30rpx 20rpx; 30rpx;">
|
|
<view class="lgd-title">{{title}}</view>
|
|
<view @click="handleClose()">
|
|
<u-icon name="close" size="32" color="#999"></u-icon>
|
|
</view>
|
|
</u-row>
|
|
<view style="height: 1rpx;background-color: rgb(214, 215, 217);position: absolute;left: 0rpx;right: 0rpx;;"></view>
|
|
</view>
|
|
<view class="lgd-body" :style="`padding: 0rpx 30rpx;${contentStyle}`">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
show: {
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
closePosType: {
|
|
default () {
|
|
return 'right'
|
|
}
|
|
},
|
|
title: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
maskClosable: {
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
type: {
|
|
default () {
|
|
return 'type-sheet' // type-dialog | type-sheet
|
|
}
|
|
},
|
|
bgColor: {
|
|
default () {
|
|
return '#fff'
|
|
}
|
|
},
|
|
contentStyle: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
zIndex: {
|
|
default () {
|
|
return 990
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
unmounted() {},
|
|
|
|
methods: {
|
|
handleClose() {
|
|
this.$emit('update:show', false)
|
|
this.$emit('onClose')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dialog {
|
|
z-index: 990;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.dialog-mask {
|
|
background-color: #3e3e3e;
|
|
opacity: 0.6;
|
|
height: 100%;
|
|
transition: all .3s;
|
|
}
|
|
|
|
.dialog-content {
|
|
position: fixed;
|
|
transition: all .3s;
|
|
}
|
|
|
|
.type-dialog {
|
|
border-radius: 30rpx;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: center center !important;
|
|
transform-origin: 0 0 !important;
|
|
}
|
|
.type-dialog {
|
|
.lgd-title{
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.type-sheet {
|
|
z-index: 990;
|
|
line-height: 1.4;
|
|
background-color: #fff;
|
|
border-top-left-radius: 30rpx;
|
|
border-top-right-radius: 30rpx;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
max-height:calc(85vh);
|
|
min-height: 60%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.type-sheet .lgd-body {
|
|
position: relative;
|
|
flex: 1;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.lgd-title{
|
|
font-size: 30rpx;font-weight: 600;
|
|
}
|
|
|
|
.type-sheet .lgd-body::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
color: transparent;
|
|
}
|
|
|
|
.type-sheet.pos-right {}
|
|
|
|
.delog-hidden {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
.delog-show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.delog-hidden .type-dialog {
|
|
transform: scale(0) translate(-50%, -50%);
|
|
}
|
|
|
|
.delog-show .type-dialog {
|
|
transform: scale(1) translate(-50%, -50%);
|
|
}
|
|
|
|
.delog-hidden .type-sheet {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.delog-show .type-sheet {
|
|
transform: translateY(0%);
|
|
}
|
|
|
|
</style> |