yuebeilian-c/src/components/ShowModal/ShowModal.vue

<template>
	<uni-popup ref="popup" type="center">
		<view class="show-modal">
			<IconText class="close" @click.native="close" :code="`\ue847`" color="#999" size="10"></IconText>
			<view class="title">{{title}}</view>
			<view class="content" v-html="content"></view>
			<view class="btn-box" :class="{'btn-styl': leftBtnText}">
				<view class="btn cancel-btn" @click="close" v-if="leftBtnText">{{leftBtnText}}</view>
				<view class="btn" @click="submit">{{btnText}}</view>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue,
		Emit,
		Ref,
		Watch
	} from 'vue-property-decorator';
	@Component({})
	export default class ShowModal extends Vue {
		@Prop({
			default: ''
		})
		private title ? : string; //

		@Prop({
			default: ''
		})
		private content ? : string; //

		@Prop({
			default: ''
		})
		private btnText ? : string; //

		@Prop({
			default: ""
		})
		private leftBtnText ? : string; //

		open() {
			(this.$refs.popup as any).open();
		}

		close() {
			(this.$refs.popup as any).close();
		}

		// emit---------------------------
		@Emit('submit')
		submit() { //弹窗点击确认按钮
			this.close();
			return '点击确认'
		}
	}
</script>

<style lang="scss" scoped>
	.show-modal {
		background: #fff;
		width: vw(300);
		@include flex-y();
		border-radius: vw(10);
		position: relative;

		.close {
			position: absolute;
			right: vw(5);
			top: vw(5);
			padding: vw(5);
		}

		.title {
			@include word-vw(16, #333);
			margin-top: vw(25);
		}

		.content {
			@include word-vw(14, #666);
			margin-top: vw(12);
			text-align: center;
		}

		.btn {
			width: vw(65);
			height: vw(35);
			line-height: vw(35);
			text-align: center;
			background: $btn-color;
			@include word-vw(14, #fff);
			border-radius: vw(5);
			margin-top: vw(16);
			margin-bottom: vw(20);
		}

		.cancel-btn {
			margin-right: 32px;
			background: #EBEBEB;
			@include word-vw(14, #333);
		}

		.btn-cancel {
			width: vw(150);
			height: vw(35);
			line-height: vw(35);
			text-align: center;
			background: #1A1A1A;
			@include word-vw(14, #fff);
			border-radius: vw(4);
			margin-top: vw(28);
			margin-bottom: vw(15);
		}

		.btn-box {
			border-top: vw(1) solid #F5F5F5;
			margin-top: vw(10);
			width: vw(200);
			@include flex-x(center);
		}

		.btn-styl {
			@include flex-x(center);

			.btn {
				width: vw(90);
			}

			.btn-cancel {
				width: vw(90);
				margin-right: vw(20);
			}
		}

	}
</style>