|  | @@ -1,123 +1,106 @@
 | 
											
												
													
														|  | -<template>
 |  | 
 | 
											
												
													
														|  | -	<view class="grace-dialog-shade" @tap.stop="closeDialogByShade" @touchmove.stop.prevent="stopFun" 
 |  | 
 | 
											
												
													
														|  | -	:style="{backgroundColor:background, zIndex:zIndex, height:showIn ?'100%':'0px'}">
 |  | 
 | 
											
												
													
														|  | -		<view class="grace-dialog"  :class="[showIn ? 'grace-shade-in' : 'grace-shade-out']" @tap.stop="stopFun" 
 |  | 
 | 
											
												
													
														|  | -		:style="{width:width, borderRadius:borderRadius}">
 |  | 
 | 
											
												
													
														|  | -			<view class="grace-dialog-title" v-if="isTitle" 
 |  | 
 | 
											
												
													
														|  | -			:style="{
 |  | 
 | 
											
												
													
														|  | -				fontSize:titleSize, color:titleColor, fontWeight:titleWeight?'bold':'', 
 |  | 
 | 
											
												
													
														|  | -				background:titleBg, lineHeight:titleHeight}">{{title}}</view>
 |  | 
 | 
											
												
													
														|  | -			<view class="grace-dialog-content" @tap.stop="stopFun"><slot name="content"></slot></view>
 |  | 
 | 
											
												
													
														|  | -			<view class="grace-dialog-close-btn" 
 |  | 
 | 
											
												
													
														|  | -			:style="{color:closeBtnColor, zIndex:zIndex+1}" v-if="isCloseBtn" @tap.stop="closeDialog"></view>
 |  | 
 | 
											
												
													
														|  | -			<view v-if="isBtns"><slot name="btns"></slot></view>
 |  | 
 | 
											
												
													
														|  | -		</view>
 |  | 
 | 
											
												
													
														|  | -	</view>
 |  | 
 | 
											
												
													
														|  | -</template>
 |  | 
 | 
											
												
													
														|  | -<script>
 |  | 
 | 
											
												
													
														|  | -export default {
 |  | 
 | 
											
												
													
														|  | -	name: "graceDialog",
 |  | 
 | 
											
												
													
														|  | -	props: {
 |  | 
 | 
											
												
													
														|  | -		show : {
 |  | 
 | 
											
												
													
														|  | -			type : Boolean,
 |  | 
 | 
											
												
													
														|  | -			default : false
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		width : {
 |  | 
 | 
											
												
													
														|  | -			type : String,
 |  | 
 | 
											
												
													
														|  | -			default : '580rpx'
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		isCloseBtn: {
 |  | 
 | 
											
												
													
														|  | -			type : Boolean,
 |  | 
 | 
											
												
													
														|  | -			default : true
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		closeBtnColor : {
 |  | 
 | 
											
												
													
														|  | -			type : String,
 |  | 
 | 
											
												
													
														|  | -			default : '#FF0036'
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		isTitle : {
 |  | 
 | 
											
												
													
														|  | -			type : Boolean,
 |  | 
 | 
											
												
													
														|  | -			default : true
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		title : {
 |  | 
 | 
											
												
													
														|  | -			type : String,
 |  | 
 | 
											
												
													
														|  | -			default : ''
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		titleBg : {
 |  | 
 | 
											
												
													
														|  | -			type : String,
 |  | 
 | 
											
												
													
														|  | -			default : ''
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		titleHeight : {
 |  | 
 | 
											
												
													
														|  | -			type : String,
 |  | 
 | 
											
												
													
														|  | -			default : '100rpx'
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		titleWeight : {
 |  | 
 | 
											
												
													
														|  | -			type : Boolean,
 |  | 
 | 
											
												
													
														|  | -			default : true
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		titleSize : {
 |  | 
 | 
											
												
													
														|  | -			type : String,
 |  | 
 | 
											
												
													
														|  | -			default : '28rpx'
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		titleColor : {
 |  | 
 | 
											
												
													
														|  | -			type : String,
 |  | 
 | 
											
												
													
														|  | -			default : '#333333'
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		isBtns : {
 |  | 
 | 
											
												
													
														|  | -			type : Boolean,
 |  | 
 | 
											
												
													
														|  | -			default : true
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		background:{
 |  | 
 | 
											
												
													
														|  | -			type : String,
 |  | 
 | 
											
												
													
														|  | -			default : 'rgba(0, 0, 0, 0.5)'
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		borderRadius : {
 |  | 
 | 
											
												
													
														|  | -			type : String,
 |  | 
 | 
											
												
													
														|  | -			default : '6rpx'
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		zIndex : {
 |  | 
 | 
											
												
													
														|  | -			type : Number,
 |  | 
 | 
											
												
													
														|  | -			default : 99
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		canCloseByShade:{
 |  | 
 | 
											
												
													
														|  | -			type : Boolean,
 |  | 
 | 
											
												
													
														|  | -			default : true
 |  | 
 | 
											
												
													
														|  | -		}
 |  | 
 | 
											
												
													
														|  | -	},
 |  | 
 | 
											
												
													
														|  | -	data() {
 |  | 
 | 
											
												
													
														|  | -		return {
 |  | 
 | 
											
												
													
														|  | -			showIn : false
 |  | 
 | 
											
												
													
														|  | -		}
 |  | 
 | 
											
												
													
														|  | -	},
 |  | 
 | 
											
												
													
														|  | -	created:function(){
 |  | 
 | 
											
												
													
														|  | -		this.showIn = this.show;
 |  | 
 | 
											
												
													
														|  | -	},
 |  | 
 | 
											
												
													
														|  | -	watch:{
 |  | 
 | 
											
												
													
														|  | -		show:function (val) {
 |  | 
 | 
											
												
													
														|  | -			if(val){this.open();}else{this.hide();}
 |  | 
 | 
											
												
													
														|  | -		}
 |  | 
 | 
											
												
													
														|  | -	},
 |  | 
 | 
											
												
													
														|  | -	methods:{
 |  | 
 | 
											
												
													
														|  | -		closeDialogByShade:function(){
 |  | 
 | 
											
												
													
														|  | -			if(this.canCloseByShade){this.closeDialog();}
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		closeDialog : function(){
 |  | 
 | 
											
												
													
														|  | -			this.$emit('closeDialog');
 |  | 
 | 
											
												
													
														|  | -		},
 |  | 
 | 
											
												
													
														|  | -		stopFun : function(){},
 |  | 
 | 
											
												
													
														|  | -		open:function () {this.showIn = true;},
 |  | 
 | 
											
												
													
														|  | -		hide:function () {this.showIn = false;}
 |  | 
 | 
											
												
													
														|  | -	}
 |  | 
 | 
											
												
													
														|  | -}
 |  | 
 | 
											
												
													
														|  | -</script>
 |  | 
 | 
											
												
													
														|  | -<style scoped>
 |  | 
 | 
											
												
													
														|  | -.grace-dialog-shade{position:fixed; width:100%; height:100%; overflow:hidden; left:0; top:0; bottom:0; z-index:9991; display:flex; justify-content:center; align-items:center;}
 |  | 
 | 
											
												
													
														|  | -.grace-dialog{width:580rpx; background:#FFFFFF; position:relative; transition:all 200ms linear 0s;}
 |  | 
 | 
											
												
													
														|  | -.grace-dialog-title{line-height:100rpx; font-size:30rpx; text-align:center;}
 |  | 
 | 
											
												
													
														|  | -.grace-dialog-content{transition:all 200ms linear 0s;}
 |  | 
 | 
											
												
													
														|  | -.grace-dialog-close-btn{position:absolute; z-index:9993; right:0px; top:0px; font-size:30rpx; width:80rpx; height:80rpx; line-height:80rpx; text-align:center; font-family:"grace-iconfont";}
 |  | 
 | 
											
												
													
														|  | -.grace-dialog-close-btn:before{content:"\e632";}
 |  | 
 | 
											
												
													
														|  | -.grace-shade-in{animation:grace-shade-in-a 200ms linear forwards;}
 |  | 
 | 
											
												
													
														|  | -@keyframes grace-shade-in-a{0%{transform: scale(0.1); opacity:0;} 100%{transform: scale(1); opacity:1;}}
 |  | 
 | 
											
												
													
														|  | -.grace-shade-out{animation:grace-shade-out-a 200ms ease-out forwards;}
 |  | 
 | 
											
												
													
														|  | -@keyframes grace-shade-out-a{0%{transform: scale(1); opacity:1;} 100%{transform: scale(0.1); opacity:0;}}
 |  | 
 | 
											
												
													
														|  | 
 |  | +<template>
 | 
											
												
													
														|  | 
 |  | +	<view class="grace-dialog-shade" v-if="show" @tap.stop="closeDialogByShade" @touchmove.stop.prevent="stopFun" :style="{backgroundColor:background, zIndex:zIndex}">
 | 
											
												
													
														|  | 
 |  | +		<view class="grace-dialog gdFadeIn" @tap.stop="stopFun" :style="{width:width, borderRadius:borderRadius}">
 | 
											
												
													
														|  | 
 |  | +			<view class="grace-dialog-title" v-if="isTitle" 
 | 
											
												
													
														|  | 
 |  | +			:style="{fontSize:titleSize, color:titleColor, fontWeight:titleWeight?'bold':'', background:titleBg, lineHeight:titleHeight}">{{title}}</view>
 | 
											
												
													
														|  | 
 |  | +			<view class="grace-dialog-content" @tap.stop="stopFun"><slot name="content"></slot></view>
 | 
											
												
													
														|  | 
 |  | +			<view class="grace-dialog-close-btn" :style="{color:closeBtnColor, zIndex:zIndex+1}" v-if="isCloseBtn" @tap.stop="closeDialog"></view>
 | 
											
												
													
														|  | 
 |  | +			<view v-if="isBtns"><slot name="btns"></slot></view>
 | 
											
												
													
														|  | 
 |  | +		</view>
 | 
											
												
													
														|  | 
 |  | +	</view>
 | 
											
												
													
														|  | 
 |  | +</template>
 | 
											
												
													
														|  | 
 |  | +<script>
 | 
											
												
													
														|  | 
 |  | +export default {
 | 
											
												
													
														|  | 
 |  | +	name: "graceDialog",
 | 
											
												
													
														|  | 
 |  | +	props: {
 | 
											
												
													
														|  | 
 |  | +		show : {
 | 
											
												
													
														|  | 
 |  | +			type : Boolean,
 | 
											
												
													
														|  | 
 |  | +			default : false
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		width : {
 | 
											
												
													
														|  | 
 |  | +			type : String,
 | 
											
												
													
														|  | 
 |  | +			default : '580rpx'
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		isCloseBtn: {
 | 
											
												
													
														|  | 
 |  | +			type : Boolean,
 | 
											
												
													
														|  | 
 |  | +			default : true
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		closeBtnColor : {
 | 
											
												
													
														|  | 
 |  | +			type : String,
 | 
											
												
													
														|  | 
 |  | +			default : '#FF0036'
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		isTitle : {
 | 
											
												
													
														|  | 
 |  | +			type : Boolean,
 | 
											
												
													
														|  | 
 |  | +			default : true
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		title : {
 | 
											
												
													
														|  | 
 |  | +			type : String,
 | 
											
												
													
														|  | 
 |  | +			default : ''
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		titleBg : {
 | 
											
												
													
														|  | 
 |  | +			type : String,
 | 
											
												
													
														|  | 
 |  | +			default : ''
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		titleHeight : {
 | 
											
												
													
														|  | 
 |  | +			type : String,
 | 
											
												
													
														|  | 
 |  | +			default : '100rpx'
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		titleWeight : {
 | 
											
												
													
														|  | 
 |  | +			type : Boolean,
 | 
											
												
													
														|  | 
 |  | +			default : true
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		titleSize : {
 | 
											
												
													
														|  | 
 |  | +			type : String,
 | 
											
												
													
														|  | 
 |  | +			default : '28rpx'
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		titleColor : {
 | 
											
												
													
														|  | 
 |  | +			type : String,
 | 
											
												
													
														|  | 
 |  | +			default : '#333333'
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		isBtns : {
 | 
											
												
													
														|  | 
 |  | +			type : Boolean,
 | 
											
												
													
														|  | 
 |  | +			default : true
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		background:{
 | 
											
												
													
														|  | 
 |  | +			type : String,
 | 
											
												
													
														|  | 
 |  | +			default : 'rgba(0, 0, 0, 0.5)'
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		borderRadius : {
 | 
											
												
													
														|  | 
 |  | +			type : String,
 | 
											
												
													
														|  | 
 |  | +			default : '6rpx'
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		zIndex : {
 | 
											
												
													
														|  | 
 |  | +			type : Number,
 | 
											
												
													
														|  | 
 |  | +			default : 999
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		canCloseByShade:{
 | 
											
												
													
														|  | 
 |  | +			type : Boolean,
 | 
											
												
													
														|  | 
 |  | +			default : true
 | 
											
												
													
														|  | 
 |  | +		}
 | 
											
												
													
														|  | 
 |  | +	},
 | 
											
												
													
														|  | 
 |  | +	data() {
 | 
											
												
													
														|  | 
 |  | +		return {
 | 
											
												
													
														|  | 
 |  | +			
 | 
											
												
													
														|  | 
 |  | +		}
 | 
											
												
													
														|  | 
 |  | +	},
 | 
											
												
													
														|  | 
 |  | +	methods:{
 | 
											
												
													
														|  | 
 |  | +		closeDialogByShade:function(){
 | 
											
												
													
														|  | 
 |  | +			if(this.canCloseByShade){this.closeDialog();}
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		closeDialog : function(){
 | 
											
												
													
														|  | 
 |  | +			this.$emit('closeDialog');
 | 
											
												
													
														|  | 
 |  | +		},
 | 
											
												
													
														|  | 
 |  | +		stopFun : function(){}
 | 
											
												
													
														|  | 
 |  | +	}
 | 
											
												
													
														|  | 
 |  | +}
 | 
											
												
													
														|  | 
 |  | +</script>
 | 
											
												
													
														|  | 
 |  | +<style scoped>
 | 
											
												
													
														|  | 
 |  | +@keyframes gdFadeIn{ from { opacity: 0; } 100% { opacity: 1; }}
 | 
											
												
													
														|  | 
 |  | +.gdFadeIn {animation:gdFadeIn 200ms linear;}
 | 
											
												
													
														|  | 
 |  | +.grace-dialog-shade{position:fixed; width:100%; height:100%; left:0; top:0; bottom:0; z-index:9991; display:flex; justify-content:center; align-items:center;}
 | 
											
												
													
														|  | 
 |  | +.grace-dialog{width:580rpx; background:#FFFFFF; position:relative;}
 | 
											
												
													
														|  | 
 |  | +.grace-dialog-title{line-height:100rpx; font-size:30rpx; text-align:center;}
 | 
											
												
													
														|  | 
 |  | +.grace-dialog-content{}
 | 
											
												
													
														|  | 
 |  | +.grace-dialog-close-btn{position:absolute; z-index:9993; right:0px; top:0px; font-size:30rpx; width:80rpx; height:80rpx; line-height:80rpx; text-align:center; font-family:"grace-iconfont";}
 | 
											
												
													
														|  | 
 |  | +.grace-dialog-close-btn:before{content:"\e632";}
 | 
											
												
													
														|  |  </style>
 |  |  </style>
 |