congming_huose-apk/common/components/DeviceNameEditModal.vue

<template>
	<view v-if="visible" class="device-name-modal-mask" @tap="onMask">
		<view class="device-name-modal-sheet" @tap.stop>
			<view class="device-name-modal-head">
				<text class="device-name-modal-title">{{ title }}</text>
				<text class="device-name-modal-close" @tap="onClose">×</text>
			</view>
			<input
				class="device-name-modal-input"
				type="text"
				:value="localValue"
				:placeholder="placeholder"
				placeholder-style="color:#BFBFBF"
				maxlength="32"
				confirm-type="done"
				@input="onInput"
			/>
			<view class="device-name-modal-actions">
				<view class="device-name-modal-btn device-name-modal-cancel" @tap="onClose">{{ cancelText }}</view>
				<view class="device-name-modal-btn device-name-modal-ok" @tap="onOk">{{ confirmText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'DeviceNameEditModal',
		props: {
			visible: { type: Boolean, default: false },
			value: { type: String, default: '' },
			title: { type: String, default: '' },
			placeholder: { type: String, default: '' },
			cancelText: { type: String, default: '' },
			confirmText: { type: String, default: '' },
			closeOnMask: { type: Boolean, default: true }
		},
		data() {
			return {
				localValue: ''
			}
		},
		watch: {
			visible(v) {
				if (v) {
					this.localValue = this.value === undefined || this.value === null ? '' : String(this.value)
				}
			},
			value(v) {
				if (this.visible) {
					this.localValue = v === undefined || v === null ? '' : String(v)
				}
			}
		},
		methods: {
			onInput(e) {
				this.localValue = e.detail.value
			},
			onClose() {
				this.$emit('close')
			},
			onMask() {
				if (this.closeOnMask) this.$emit('close')
			},
			onOk() {
				this.$emit('confirm', (this.localValue || '').trim())
			}
		}
	}
</script>

<style scoped>
	/* 距顶部 500rpx 展示，不采用底部上滑 */
	.device-name-modal-mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 10050;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 500rpx 32rpx 32rpx;
		box-sizing: border-box;
	}
	.device-name-modal-sheet {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 24rpx;
		padding: 32rpx 32rpx 50rpx;
		box-sizing: border-box;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
		animation: deviceNameEditModalIn 0.28s ease;
	}
	@keyframes deviceNameEditModalIn {
		from {
			opacity: 0;
			transform: scale(0.96);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
	.device-name-modal-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}
	.device-name-modal-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #3d3d3d;
	}
	.device-name-modal-close {
		font-size: 48rpx;
		line-height: 1;
		color: #999;
		padding: 8rpx;
	}
	.device-name-modal-input {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: #f5f5f5;
		border-radius: 12rpx;
		font-size: 30rpx;
		color: #3d3d3d;
		margin-bottom: 32rpx;
	}
	.device-name-modal-actions {
		display: flex;
		gap: 24rpx;
	}
	.device-name-modal-btn {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		border-radius: 12rpx;
	}
	.device-name-modal-cancel {
		background: #f0f0f0;
		color: #666;
	}
	.device-name-modal-ok {
		background: #3d3d3d;
		color: #fff;
	}
</style>