uni-app，弹窗输入框，vue

uni-app，弹窗输入框，vue

changelog

• 2022-07-09 修复bug

功能

使用

html

	<xz-popup ref="xzPopup"/>

js

	this.$refs.xzPopup.show({
		title: "",
		dialog: {
			content: ""
		}
	}).then(res=>{
		console.log({res});
	}).catch(err=>{
		console.log({err});
	});

说明

• 依赖 uni-pupup 组件，而该组件的动画效果时长为300ms

代码（vue）

<template>
	<uni-popup ref="popup">
		<view class="xz_popup_wrap" v-if="isShow">
			<view class="xz_popup_wrap_head">
				<view v-if="popup.title" class="xz_popup_wrap_head_title">{{ popup.title }}</view>
				<view class="xz_popup_wrap_head_content">
					<view v-if="popup.mode == 'dialog'" class="xz_popup_wrap_head_content_dialog" :style="{ 'text-align': dialog.align }">{{ dialog.content }}</view>
					<view v-if="popup.mode == 'input'" class="xz_popup_wrap_head_content_input">
						<uni-easyinput v-model="input.value" :placeholder="input.placeholder" :type="input.type" :focus="input.focus" clearable @input="inputFun" />
						<view class="xz_popup_wrap_head_content_input_prompt">
							<view class="xz_popup_wrap_head_content_input_prompt_err" v-if="input.prompt.err">{{ input.prompt.err }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="xz_popup_wrap_footer x_fle_cen">
				<template v-if="popup.showCancelButton">
					<view class="xz_popup_wrap_footer_cancel x_active_opacity x_fle_cen" @click="leftClick">取消</view>
					<text />
				</template>
				<view class="xz_popup_wrap_footer_confirm x_active_opacity x_fle_cen" @click="rightClick">确定</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	name: 'xz_popup',
	props: {},
	data() {
		return {
			isShow: false,
			popup: null,
			input: null,
			dialog: null
			// origin: {
			// 	popup:{
			// 		mode: "dialog",
			// 		title: "",
			// 		showCancelButton: true,
			// 		promise: {
			// 			resolve:()=>{},
			// 			reject:()=>{}
			// 		}
			// 	},
			// 	input:{
			// 		value: "",
			// 		focus: false,
			// 		type: "text",
			// 	},
			// 	dialog:{
			// 		align: "center",
			// 		content: "",
			// 	}
			// },
			// popup:{
			// 	mode: "dialog",
			// 	title: "",
			// 	showCancelButton: true,
			// 	promise: {
			// 		resolve:()=>{},
			// 		reject:()=>{}
			// 	}
			// },
			// input:{
			// 	value: "",
			// 	focus: false,
			// 	type: "text",
			// },
			// dialog:{
			// 	align: "center",
			// 	content: "",
			// }
		};
	},
	methods: {
		show({
			mode = 'dialog', // input
			title = '',
			showCancelButton = true,
			dialog = {},
			input = {}
		} = {}) {
			return new Promise((resolve, reject) => {
				if (mode == 'dialog') {
					if (!title) title = '提示';
					let { content = '这里显示内容', align = 'center' } = dialog;
					this.dialog = {
						content,
						align
					};
				} else if (mode == 'input') {
					let { type = 'text', clearable = true, focus = true, value = '', placeholder = '请输入', number = {} } = input;
					let inputData = {
						type,
						clearable,
						focus,
						value,
						placeholder,
						prompt: {
							err: null,
							label: null
						}
					};
					if (type == 'number') {
						let { max = -1, min = -1 } = number;
						inputData.number = number;
					}
					this.input = inputData;
				}
				this.popup = {
					mode,
					title,
					showCancelButton,
					promise: {
						resolve,
						reject
					}
				};
				this.isShow = true;
				this.$refs.popup.open();
				console.log(this.popup, this.input, this.dialog);
			});
		},
		inputFun(e) {
			if (this.input.prompt.err) this.input.prompt.err = null;
		},
		close() {
			return new Promise(resolve => {
				this.$refs.popup.close();
				setTimeout(() => {
					this.isShow = false;

					resolve();
				}, 301); // 动画时长为300ms
			});
		},
		reset() {
			// 恢复初始值
			this.input = null;
			this.dialog = null;
			this.popup = null;
		},
		leftClick() {
			console.log(this.popup);
			this.close().then(() => {
				// 最后返回结果
				this.popup.promise.reject();
				this.reset();
			});
		},
		rightClick() {
			setTimeout(() => {
				let result;
				if (this.popup.mode == 'input') {
					let { value, type } = this.input;
					if (type == 'number') {
						let { number } = this.input;
						value = Number(value);
						if (~number.min && value < number.min) return (this.input.prompt.err = `最小值为${number.min}`);
						if (~number.max && value > number.max) return (this.input.prompt.err = `最大值为${number.max}`);
					}
					result = value;
				}
				this.close().then(() => {
					// 最后返回结果
					console.log({ result });
					this.popup.promise.resolve(result);
					this.reset();
				});
			}, 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.xz_popup_wrap {
	border-radius: 30rpx;
	background-color: #fff;
	width: 600rpx;
	&_head {
		padding: 25rpx;
		&_title {
			color: #707071;
			// padding: 25rpx;
			text-align: center;
			font-size: 38rpx;
		}
		&_content {
			padding: 25rpx;
			&_dialog {
				color: #707071;
				font-size: 30rpx;
			}
			&_input {
				&_prompt {
					font-size: 25rpx;
					margin-top: 10rpx;
					&_err {
						color: #dd524d;
					}
				}
			}
		}
	}
	&_footer {
		font-size: 35rpx;
		border-top: 0.1px solid #d6d5da;
		justify-content: space-evenly;
		view {
			height: 100rpx;
			width: 299rpx;
		}
		text {
			border-left: 0.1px solid #d6d5da;
			width: 0.1px;
			height: 100rpx;
		}
		&_confirm {
			color: $uni-color-primary;
		}
	}
}
</style>