# 基本使用

该组件使用时需要加上ref注册引用信息,通过ref进行调用组件内的方法。

<template>
	<view>
		<unify-popup ref="popup" direction="center">
			<view class="bg-white column-middle-center" style="height: 400rpx;">
				<unify-button @click="close" text="关闭" width="200"></unify-button>
			</view>
		</unify-popup>
		
		<view class="row-center">
			<unify-button @click="open" text="打开" width="200"></unify-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			//打开
			open:function(){
				this.$refs.popup.open();
			},
			//关闭
			close:function(){
				this.$refs.popup.close();
			}
		}
	}
</script>
<style lang="scss">
	
</style>

# Attributes

参数 说明 类型 可选值 默认值
mask-close 控制点击遮罩层是否可关闭 Boolean true/false false
direction 弹出层方向 String 顶部:top
底部:bottom
左侧:left
右侧:right
中间:center
center
width 弹出层宽度(限左、右、中生效) String/Number - 550

# ref

方法 说明
open 打开遮罩层
close 关闭遮罩层