first

components/my-components/my-model.vue

@@ -0,0 +1,232 @@
+<template>
+	<view class="model u-text-center"  v-if="show" @tap="modelTap">
+		<div @tap.stop="" class="box u-font-32 tranistion" :class="[returnBoxClass]" :style="[computeBoxStyle,computeStyle()]" >
+			<view class="u-relative">
+				<view class=" color-333 font-bold">{{props.title||'提示'}}</view>
+				<template v-if="showIcon">
+					<slot name="icon">
+						<view class="close" @tap="close">
+							<uni-icons :size="iconSize" :color="iconColor" type="clear"></uni-icons>
+						</view>
+					</slot>
+				</template>
+				
+			</view>
+			
+			<slot name="desc">
+				<view class=" color-666 u-p-30">{{props.desc}}</view>
+			</slot>
+			<slot name="btn" v-if="showBtn">
+				<view class="btns u-flex">
+					<view class="cancel btn" @tap="cancel">{{props.cancelText}}</view>
+					<view class="confirm btn" @tap="confirm">{{props.confirmText}}</view>
+				</view>
+			</slot>
+		</div>
+	</view>
+</template>
+
+<script setup>
+	import {
+		computed,
+		ref
+	} from 'vue';
+	
+	const emits = defineEmits(['cancel', 'confirm', 'close', 'open'])
+	
+	
+	function isNumber(value) {
+	    return Number(value)==value && !isNaN(value);
+	}
+
+	const props = defineProps({
+		confirmClickClose:{
+			type:Boolean,
+			default:true
+		},
+		isClickMaskHide:{
+			type:Boolean,
+			default:true
+		},
+		iconSize:{
+			type: Number,
+			default: 26
+		},
+		iconColor:{
+			type: String,
+			default: '#999'
+		},
+		mode:{
+			//center bottom
+			type: String,
+			default: 'center'
+		},
+		//单位rpx
+		borderRadius:{
+			type:[String,Number],
+			default:36
+		},
+		showIcon:{
+			type:Boolean,
+			default:true
+		},
+		showBtn:{
+			type:Boolean,
+			default:true
+		},
+		cancelText: {
+			type: String,
+			default: '取消'
+		},
+		confirmText: {
+			type: String,
+			default: '确定'
+		},
+		title: {
+			type: String,
+			default: '提示'
+		},
+		desc: {
+			type: String,
+			default: ''
+		},
+		width:{
+			type:[Number,String],
+			default:''
+		}
+	})
+	
+	
+	function computeStyle(){
+		const width=props.width?props.width:''
+		const bottomBorderRadius=`${props.borderRadius}rpx ${props.borderRadius}rpx 0 0`
+		const centerBorderRadius=`${props.borderRadius}rpx`
+		const borderRadius=isNumber(props.borderRadius)?(props.mode==='bottom'?bottomBorderRadius:centerBorderRadius):props.borderRadius
+		return `
+		width:${width?width:''};
+		borderRadius:${borderRadius};
+		`
+	}
+	
+	const computedClass=computed(()=>{
+		return show.value?'show':'none'
+	})
+	const returnBoxClass=computed(()=>{
+		if(props.mode==='center'){
+			return ''
+		}
+		return  'bottom-box'
+	})
+	const computeBoxStyle=computed(()=>{
+		if(props.mode==='center'){
+			return ''
+		}
+	})
+	function getComputeClass() {
+
+	}
+	let show = ref(false)
+
+	function open() {
+		show.value = true
+		emits('open')
+	}
+
+	function close() {
+		show.value = false
+		emits('close')
+	}
+	function modelTap(){
+		if(props.isClickMaskHide){
+			close()
+		}
+	}
+	function cancel() {
+		show.value = false
+		emits('cancel')
+		emits('close')
+	}
+
+	function confirm() {
+		emits('confirm')
+		if(props.confirmClickClose){
+			close()
+		}
+	}
+
+
+	defineExpose({
+		open,
+		close,
+		cancel,
+		confirm
+	})
+</script>
+
+<style lang="scss" scoped>
+	.show{
+		transform: scale(1);
+	}
+	.none{
+		transform: scale(0);
+	}
+	.close {
+		position: absolute;
+		right: 30rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		// background: #999999;
+		// border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.model {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		top: 0;
+		background: rgba(51, 51, 51, 0.5);
+		z-index: 980;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0 46rpx;
+		
+		.box {
+			width: 100%;
+			background-color: #fff;
+			border-radius: 36rpx 36rpx 36rpx 36rpx;
+			padding-top: 32rpx;
+			overflow: hidden;
+			max-width: 50vw;
+			.btns {
+				border-top: 2rpx solid #E5E5E5;
+
+				.cancel {
+					color: #666;
+				}
+
+				.confirm {
+					color: $my-main-color;
+				}
+
+				&>.btn {
+					padding: 30rpx;
+					flex: 1;
+				}
+			}
+		}
+		.bottom-box{
+			position: absolute;left: 0;
+			right: 0;
+			bottom: 0;
+			border-radius: 0;
+			padding-bottom: 100rpx;
+			border-radius: 36rpx 36rpx 0 0;
+		}
+
+	}
+</style>