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>