Simple and easy to modify spring frame components

Use scenarios

Pop up components

Applicable framework vue, uniapp
Reuse uniapp Simple modification in the framework label And Unit of measure After use
px And rpx

<!-- vue -->
<template>
	<div v-show="ishide" @touchmove.stop.prevent>
		<!--  Mask  -->
		<div class="mask" :style="maskStyle"></div>
		<!--  Content  -->
		<div class="tip" :style="tipStyle">
			<slot></slot>
		</div>
	</div>
</template>
<!-- uniapp -->
<!-- <template> <view v-show="ishide" @touchmove.stop.prevent> <view class="mask" :style="maskStyle"></view> <view class="tip" :style="tipStyle"> <slot></slot> </view> </view> </template> -->

<script> export default {
       props: {
       //  Control the pop-up window  ishide: {
       type: Boolean, required: true }, //  Set popup level  zindex: {
       type: Number, default: 99 }, //  Set mask transparency  opacity: {
       type: Number, default: 0.6 }, //  Set the width of the content area  width: {
       type: String, default: '70%' }, //  Set the height of the content area  height: {
       type: String, default: '300px' }, //  Set the content area fillet  radius: {
       type: String, default: '10px' }, //  Set the bottom color of the content area  bgcolor: {
       type: String, default: '#FFFFFF' } }, computed: {
       //  Mask style  maskStyle() {
       return ` z-index:${
        this.zindex}; background:rgba(0,0,0,${
        this.opacity}); ` }, //  Content style  tipStyle() {
       return ` width:${
        this.width}; height:${
        this.height}; z-index:${
        this.zindex+1}; border-radius:${
        this.radius}; background-color:${
        this.bgcolor}; ` } } } </script>

<style scoped> .mask {
       position: fixed; bottom: 0; right: 0; left: 0; top: 0; } .tip {
       position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style>

Components use

<template>
	<div>
		<!--  Switch control  -->
		<button type="default" @click="isshow=!isshow"> Popup </button>
		<!--  Use components  -->
		<zwy-popup :ishide='isshow' width="70%" height="700rpx" radius="40rpx">
			<!--  Custom display content  -->
			<div class="content">
				<div class="image"></div>
				<div class="title"> Activity title </div>
				<div> Content </div>
				<div> Content </div>
				<div class="info"> Content </div>
				<div class="btn"> Button </div>
			</div>
			<!--  Custom close button  -->
			<div class="close" @click="isshow=false">*</div>
		</zwy-popup>
	</div>
</template>

<script> export default {
       data() {
       return {
       isshow: false } } } </script>

<style scoped> .content {
       width: 100%; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; background-color: coral; border-radius: 10px; } .image {
       width: 80px; height: 80px; border-radius: 50%; background: #4CD964; } .title {
       font-size: 18px; margin: 30px 0 20px 0; } .info {
       margin: 20px 0; font-size: 12px; text-align: center; background: #F5F5F5; border-radius: 8px; padding: 8px 10px; } .btn {
       width: 100px; height: 30px; font-size: 12px; line-height: 30px; text-align: center; border-radius: 16px; background: linear-gradient(-90deg, #FEEF43, #E9D81B); } .close {
       width: 30px; height: 30px; color: #FFFFFF; line-height: 30px; text-align: center; border-radius: 50%; border: 1px solid #FFFFFF; position: relative; bottom: -10%; left: 50%; transform: translate(-50%, -50%); } </style>