基于uniapp的弹出

本文转自https://ext.dcloud.net.cn/plugin?id=254#

仅用于个人学习

本人用于弹出评论

该插件源码popup-layer.vue

<template>
	<view>
		<view v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer" >
			
		</view>
		<view ref="popRef"  class="popup-content"   @tap.stop="stopEvent" :style="_location">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'popup-layer',
		model: {
			prop: "showPop",
			event: "change"
		},
		props: {
			showPop:{
				type:Boolean,
				default:false,
			},
			direction: {
				type: String,
				default: 'top', // 方向  top，bottom，left，right 
			},
			autoClose: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				ifshow: false, // 是否展示,
				translateValue: -100, // 位移距离
				site:-100,
				timer: null,
				iftoggle: false,

			};
		},
		computed: {
			_translate() {
				const transformObj = {
					'top': `transform:translateY(${-this.translateValue}%)`,
					'bottom': `transform:translateY(${this.translateValue}%)`,
					'left': `transform:translateX(${-this.translateValue}%)`,
					'right': `transform:translateX(${this.translateValue}%)`
				};
				return transformObj[this.direction]
			},
			_location() {
				const positionValue = {
					'top': `bottom:${this.site}%;width:100%;`,
					'bottom': `top:${this.site}%;width:100%;`,
					'left': `right:0px;top:0;height:100%;`,
					'right': `left:0px;top:0;height:100%;`,
				};
				return positionValue[this.direction]+ this._translate;
			}
		},
		mounted(){
			if(this.showPop){
				// console.log(222);
				this.show();
			}
		},
		watch:{
			showPop(value){
				console.log(value)
				if(value){
					this.show();
				}else{
					this.close();
				}
			}	
		},
		methods: {
			stopMove(event){
				return;
			},
			show(events) {
				this.ifshow = true;
				this.site=0;
				let _open = setTimeout(() => {
					this.translateValue = 0;
					_open = null;
				}, 100)
				let _toggle = setTimeout(() => {
					this.iftoggle = true;
					_toggle = null;
				}, 300);
			},
			close() {
				if (this.timer !== null || !this.iftoggle) {
					return;
				}
				this.translateValue = -100;
				this.timer = setTimeout(() => {
					this.ifshow = false;
					this.timer = null;
					this.iftoggle = false;
					this.$emit('closeCallBack', null);
					this.$emit('change',false)
				}, 300);
			},
			ableClose() {
				if (this.autoClose) {
					this.close();
				}
			},
			stopEvent(event) {},
			doSome(){
			}

		}
	}
</script>

<style lang="scss">
	.popup-layer {
		position: fixed;
		z-index: 999999;
		background: rgba(0, 0, 0, .3);
		height: 100%;
		width: 100%;
		top: 0px;
		left: 0px;
		overflow: hidden;
	}

	.popup-content {
		position: fixed;
		z-index: 1000000;
		background: #FFFFFF;
		transition: transform .3s ease;
		overflow: hidden;
		// border:1px solid red;
	}
</style>

属性

• v-model：控制 弹窗的显示/隐藏（true/false）目前有两种方式，1.通过ref 2.通过v-model
• direction： 组件弹出方向。 默认为 "top" // 方向 top，bottom，left，right
• autoClose： 击弹出遮罩层是否关闭，默认为true, 可设置为false则不手动关闭

方法

• show(): 弹出
• close():关闭
• @closeCallBack：弹窗关闭后的回调事件（响应客户需求，尽量满足）

使用方法

1. 首先download包，将下载下来的popup-layer.vue文件拷贝到你自己的项目中。

2. 在需要的地方引入组件并声明。

复制代码<script>
    import popupLayer from '../../components/popup-layer.vue';
    export default {
        components:{
            popupLayer
        }
    }
</script>

1. 使用组件

复制代码<popup-layer ref="popupRef" :direction="'top'" v-model="boolShow">
  <view class="zidingyiBox">
  </view>
</popup-layer>

1. 弹出与关闭

复制代码this.$refs.popupRef.show() // 弹出
this.$refs.popupRef.close() // 关闭

1. Demo用例

复制代码<template>
  <view class="test">
    <button type="primary" @tap="show">弹出</button>
      <popup-layer ref="popupRef" :direction="'top'">
        <view class="box" >
          <button type="primary" @tap="close">关闭</button>
        </view>
      </popup-layer>
  </view>
</template>

<script>
    import popupLayer from '../../components/popup-layer.vue';
    export default {
        components:{
            popupLayer
        },
    data(){
      return {
         boolShow:false
      }
    },
        methods:{
            show(){
                this.$refs.popupRef.show(); // 或者 boolShow = rue
            },
            close(){
                this.$refs.popupRef.close();// 或者 boolShow = false
            }
        }
    }
</script>

个人案例弹出评论

 并且通过close和open方法完成显示与关闭