uni-popup基本使用方法

<template>
	<view>
        //触发popup的事件
		<button @click="open">打开popup</button>
        //popup弹窗
        //type属性显示弹窗弹出位置上下左右，background-color设置背景颜色，safe-area用于设置底部安全区域，mask-click为true可以点击遮罩层隐藏popup....可以参照官网使用
		<uni-popup ref="popup" type="bottom" background-color="#fff" safe-area  mask-click>
            <button @click="close">关闭popup</button>
		    <uni-steps
				:options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]"
				direction="column" 
				:active="0"
				active-color="#fe3c39" //设置当前选中颜色
				></uni-steps>
		</uni-popup>
	</view>
</template>
<script>
export default {
   methods:{
      open(){
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('top')
      }，
      close(){
         this.$refs.popup.close()
   }
}
</script>