uniapp/小程序实现带输入框的弹出框

<modal v-if="true" title="新增空间" confirm-text="保存" cancel-text="取消" @cancel="cancelAdd" @confirm="confirmAdd">
			<view class="row b-b">
				<text class="tit">姓名</text>
				<input class="input" type="text" v-model="addressData.name" placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">班级</text>
				<input class="input" type="text" v-model="addressData.rank" placeholder="请输入班级" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">手机号</text>
				<input class="input" type="number" v-model="addressData.mobile" placeholder="请输入手机号码" placeholder-class="placeholder" />
			</view>
			<view class="row b-b">
				<text class="tit">寝室号</text>
				<input class="input" type="text" v-model="addressData.room" placeholder="请输入寝室号" placeholder-class="placeholder" />
			</view>
		</modal>

.row {
	        display: flex;
	        align-items: center;
	        position: relative;
	        padding: 0 30upx;
	        height: 110upx;
	        background: #fff;
	    }
	 .tit {
	     flex-shrink: 0;
	     width: 120upx;
	     font-size: 30upx;
	 }
	
	 .input {
	     flex: 1;
	     font-size: 30upx;
	 	 
	 }

export default{
    data(){
        return{
            areaShow:false,
            areaTxt:'',
        }
    },
    methods: {
		cancelAdd(){
			this.areaShow = false
		},
		confirmAdd(){
			this.areaShow = false
				
		},
			
	}
}