# dankePop

**Repository Path**: dankebibi/danke-pop

## Basic Information

- **Project Name**: dankePop
- **Description**: 一个好用的自定义弹窗组件

- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-05-23
- **Last Updated**: 2023-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dankePop

#### 介绍
{**dankePop**
一个自定义Pop,}


#### 安装教程

1.  下载压缩包，与通常的自定义组件导入方式相同
2.  导入
3.  导入

#### 使用说明

1.  组件参数说明
- position    //弹出的开始位置     类型: String,   可选 right、left、top、bottom、middle（默认返回middle）	
- shows       //控制弹出层的显示   类型: Boolean,  必填
- mask        //遮罩层时间         类型: Number,   1 点击遮罩隐藏弹出层,0 遮罩层点击没反应  
- change      //控制动画的样式     类型: Boolean,  必填
- @lows       //点击遮罩事件
2. 组件使用示例
```
<template>
	<view class="content">
		<pops position="bottom" mask="1" @lows="closeTopPop" :change="move" :shows="popTopShow">
			<view class="pops">
				<image src="../../static/icon1.png"></image>
				<view>{{pop}}</view>
				<view>{{email}}</view>
			</view>
		</pops>
		<view class="body " >
			<button @click="closeTopPop(1)">点我打开</button>
		</view>
	</view>
</template>	
<script>
	import pops from '../component/pop.vue'
	export default {
		components: {
			pops,
		},
		data() {
			return {
				pop: '这是一个弹窗',
				email:'问题反馈 ： danke0526@163.com',
				popTopShow: false,
				move: true
			}
		},
		methods: {
			closeTopPop(id) { //关闭弹窗
				if (id == 1) {
					this.move = true
					this.popTopShow = true
				} else {
					this.move = false
					setTimeout(() => {
						this.popTopShow = false
					}, 300)
				}
			},
		}
	}
</script>

<style>
	.content,.body ,.pops{
		display: flex;
		flex-direction: column;
		
	}
	.content,.body {
		height: 100vh;
		width: 100vw;
	}
	.body{
		justify-content: center;
		align-items: center;
	}
	.pops {
		width: 400rpx;
		height: 600rpx;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
	}
	.pops image{
		width: 200rpx;
		height: 200rpx;
		margin: 20rpx 0 50rpx 0;
		box-shadow: #333333 0 0 10rpx; 
	}
	.pops{
		font-size: 20rpx;
		font-weight: 600;
	}

</style>


```			





#### 2022-05-23
#### danke0526@163.com
#### Copyright©2017-2022.暴风蛋壳DANKEBIBI  Rights Reserved