小程序弹出输入框

第一种:

<modal v-if="areaShow" title="新增空间" confirm-text="保存" cancel-text="取消" @cancel="cancelAdd" @confirm="confirmAdd">
<input type="text" v-model="areaTxt" placeholder="限填5个字" class="intxt" maxlength="5" />
</modal>

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

第二种:

<view style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;justify-content: center;align-items: center;z-index: 101;" v-if="frameShow">
			<view style="width: 100%;height: 100%;background: rgba(000, 000, 000, 0.5);position: absolute;z-index: 100;" @click="cancel"></view>
			<view style="width: 80%;background: #fff;border-radius: 15rpx;box-shadow: 0 0 5rpx #E5E5E5;position: relative;z-index: 101;padding-top: 30rpx;">
				<view style="text-align: center;font-size: 35rpx;">{{areaTxt}}</view>
				<view style="padding: 0 30rpx;">
					<input type="password" :focus="focusState" v-model="passwordTxt" placeholder="请输入密码" class="intxt" maxlength="16" 	placeholder-style="height:100rpx;line-height:100rpx;" />
				</view>
				<view class="line"></view>
				<view style="display: flex;text-align: center;font-size: 35rpx;font-weight: bold;line-height: 100rpx;">
					<view style="flex: 1;border-right: 0.5rpx solid #F3F3F3;box-sizing: border-box;color: #E19740;" @click="cancel">取消</view>
					<view style="flex: 1;color: #C64729;" @click="confirm">确认</view>
				</view>
				<view style="position: absolute;top: 20rpx;right: 20rpx;color: #000;text-align: center;line-height: 50rpx;font-size: 70rpx" @click="cancel">
					×
				</view>
			</view>
		</view>

export default {
		data() {
			return {
				
				frameShow:false,
				passwordTxt:'',
				titleTxt:'密码',
				
			}
		},
		
		methods: {
			
			
			cancel(){
				let t = this;
				t.frameShow =false;
				t.passwordTxt = '';
			},
			confirm(){
				let t = this;
				t.frameShow =false;
				let passwordTxt = t.passwordTxt;
				
			},
			
		}
	}

.intxt{
		padding: 20rpx 0;
		height:100rpx;line-height:100rpx;
	}
/*细线*/
	.line {
	  clear: both;
	  content: " ";
	  height: 1px;
	  border-top: 0.1px solid #e0e0e0;
	  color: #d9d9d9;
	  -webkit-transform-origin: 0 0;
	  transform-origin: 0 0;
	  -webkit-transform: scaleY(0.5);
	  transform: scaleY(0.5); /*缩放*/
	  box-sizing: border-box;
	}