uni实现Popup

uni实现Popup

<template>
	<button type="primary" class="btn" @click="openPopup">弹出popup</button>
		<view>
		    <uni-popup ref="popup" type="center">
				<view >
					<view class="item">
						<input  style="width: 100%;" placeholder="请输入名称" />
					</view>
					<view class="item">
						<view style="width: 100%;text-align: center;" @click="cancel">取消</view>
						
						<view style="width: 100%;text-align: center;" @click="confirm">确定</view>
					</view>
				</view>
		    </uni-popup>
		</view>
		
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '../../components/uni-popup-message/uni-popup-message.vue';
	import uniPopupDialog from '../../components/uni-popup-dialog/uni-popup-dialog.vue';
	
	export default{
		components: {
		        uniPopup,
		        uniPopupMessage,
		        uniPopupDialog
		    },
		data(){
			return{
				
			}
		},
		
		methods:{
			confirm(){
				
			},
			
			cancel(){
				this.closePopup()
			},
			
			openPopup(){
				this.$refs.popup.open()
			},
			
			closePopup(){
				this.$refs.popup.close()
			},
			
		}
	}
</script>
	
<style>
	
</style>