muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-input/mu-input.vue

@@ -0,0 +1,570 @@
+<template>
+	<view class="mu-input" :class="[
+		`mu-input--${shape}`,
+		`mu-input--label-${computedLabelPosition}`,
+		type === 'textarea' && 'mu-input--textarea-type',
+		disabled && 'mu-input--disabled',
+		error && 'mu-input--error',
+		filled && 'mu-input--filled'
+	]">
+		<!-- 标题 Label (包含必填红星与位置布局) -->
+		<view v-if="label || $slots.label" class="mu-input__label-box" :style="labelBoxStyle">
+			<text v-if="required" class="mu-input__required">*</text>
+			<slot name="label">
+				<text class="mu-input__label-text">{{ label }}</text>
+			</slot>
+		</view>
+
+		<!-- 输入框主容器 Main Box -->
+		<view class="mu-input__main">
+			<!-- 输入框围栏 Wrap -->
+			<view class="mu-input__wrap" @tap="handleWrapTap">
+				<!-- 前缀图标与插槽 -->
+				<view v-if="prefixIcon || $slots.prefix" class="mu-input__prefix">
+					<slot name="prefix">
+						<mu-icon :name="prefixIcon" :size="16" color="#94A3B8" />
+					</slot>
+				</view>
+
+				<!-- 手机号国家/地区固定前缀 (当 type === 'tel' 或 phonePrefix 开启时) -->
+				<view v-if="phonePrefix || type === 'tel'" class="mu-input__phone-prefix">
+					<text class="mu-input__phone-code">+86</text>
+					<view class="mu-input__phone-divider"></view>
+				</view>
+
+				<!-- Textarea 文本域 -->
+				<textarea v-if="type === 'textarea'" class="mu-input__textarea"
+					:value="innerValue" :placeholder="placeholder" :disabled="disabled" :maxlength="maxlength"
+					:auto-height="autoHeight" @input="onInput" @focus="onFocus" @blur="onBlur" />
+
+				<!-- 普通 / 数字 / 手机 / 密码 / 验证码 / 虚拟键盘 Input -->
+				<view v-else-if="isVirtualKeyboardActive" class="mu-input__virtual-box">
+					<text v-if="innerValue" class="mu-input__virtual-text">{{ innerValue }}</text>
+					<text v-else class="mu-input__virtual-placeholder">{{ placeholder }}</text>
+					<!-- 虚拟键盘激活时的打字闪烁光标 -->
+					<view v-if="showVirtualKeyboard" class="mu-input__cursor"></view>
+				</view>
+
+				<input v-else class="mu-input__inner"
+					:type="computedNativeType"
+					:value="innerValue"
+					:placeholder="placeholder"
+					:disabled="disabled"
+					:maxlength="computedMaxlength"
+					:password="isPasswordMasked"
+					@input="onInput"
+					@focus="onFocus"
+					@blur="onBlur"
+				/>
+
+				<!-- 清除按钮 -->
+				<view v-if="clearable && innerValue" class="mu-input__clear" @tap.stop="onClear">
+					<mu-icon name="close" :size="12" color="#94A3B8" />
+				</view>
+
+				<!-- 密码显隐切换按钮 -->
+				<view v-if="type === 'password' || showPasswordToggle" class="mu-input__password-toggle" @tap.stop="togglePasswordVisible">
+					<mu-icon :name="showPassword ? 'eye' : 'eye_off'" :size="16" color="#94A3B8" />
+				</view>
+
+				<!-- 验证码发送倒计时微型小胶囊按键 -->
+				<view v-if="sendCode || type === 'code'" class="mu-input__code-btn-wrap">
+					<view class="mu-input__code-btn" :class="{ 'mu-input__code-btn--disabled': counting }" @tap.stop="handleSendCode">
+						<text class="mu-input__code-text">{{ counting ? `${seconds}s 后重试` : codeText }}</text>
+					</view>
+				</view>
+
+				<!-- 后缀图标与插槽 -->
+				<view v-if="suffixIcon || $slots.suffix" class="mu-input__suffix">
+					<slot name="suffix">
+						<mu-icon :name="suffixIcon" :size="16" color="#94A3B8" />
+					</slot>
+				</view>
+			</view>
+
+			<!-- 错误提示文本与计数器 -->
+			<text v-if="error" class="mu-input__error">{{ errorMessage }}</text>
+			<text v-if="counter && maxlength > 0" class="mu-input__counter">{{ (innerValue || '').length }}/{{ maxlength }}</text>
+		</view>
+
+		<!-- 联动自动弹出的虚拟键盘 -->
+		<mu-keyboard
+			v-if="isVirtualKeyboardActive"
+			v-model:show="showVirtualKeyboard"
+			v-model:value="innerValue"
+			:mode="computedKeyboardMode"
+			:title="keyboardTitle || label || '虚拟键盘'"
+			@change="onVirtualInputChange"
+		/>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch, computed, inject, onUnmounted } from 'vue'
+
+const muForm = inject('muForm', null) || inject('mu-form', null)
+
+const props = defineProps({
+	modelValue: { type: [String, Number], default: '' },
+	type: { type: String, default: 'text' },               // text | number | digit | tel | password | code | textarea | car
+	shape: { type: String, default: 'radius' },           // square (微直角) | radius (圆角) | round (全圆胶囊)
+	filled: { type: Boolean, default: false },             // 是否背景纯底色填充模式
+	label: { type: String, default: '' },
+	labelPosition: { type: String, default: '' },         // top (独占顶置) | left (左侧同行同行)
+	labelWidth: { type: String, default: '' },            // 如 '160rpx'
+	required: { type: Boolean, default: false },          // 是否显示必填红星 *
+	placeholder: { type: String, default: '请输入' },
+	disabled: { type: Boolean, default: false },
+	clearable: { type: Boolean, default: false },
+	maxlength: { type: Number, default: -1 },
+	counter: { type: Boolean, default: false },
+	autoHeight: { type: Boolean, default: false },
+	error: { type: Boolean, default: false },
+	errorMessage: { type: String, default: '' },
+	prefixIcon: { type: String, default: '' },
+	suffixIcon: { type: String, default: '' },
+	phonePrefix: { type: Boolean, default: false },
+	showPasswordToggle: { type: Boolean, default: false },
+	sendCode: { type: Boolean, default: false },
+	codeText: { type: String, default: '获取验证码' },
+	codeSeconds: { type: Number, default: 60 },
+	useKeyboard: { type: Boolean, default: false },       // 是否启用关联弹出虚拟键盘
+	keyboardMode: { type: String, default: 'number' },    // number | idcard | car
+	keyboardTitle: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'clear', 'input', 'send-code'])
+
+// 计算继承自 mu-form 的 Label 布局
+const computedLabelPosition = computed(() => {
+	if (props.labelPosition) return props.labelPosition
+	if (muForm && muForm.labelPosition) return muForm.labelPosition
+	return 'top'
+})
+
+const computedLabelWidth = computed(() => {
+	if (props.labelWidth) return props.labelWidth
+	if (muForm && muForm.labelWidth) return muForm.labelWidth
+	return '160rpx'
+})
+
+// 内部双向绑定代理
+const innerValue = ref((props.modelValue !== undefined ? String(props.modelValue) : ''))
+watch(() => props.modelValue, (val) => {
+	innerValue.value = (val !== undefined && val !== null ? String(val) : '')
+})
+
+const labelBoxStyle = computed(() => {
+	if (computedLabelPosition.value === 'left' && computedLabelWidth.value) {
+		return { width: computedLabelWidth.value }
+	}
+	return {}
+})
+
+// 虚拟键盘联动控制
+const showVirtualKeyboard = ref(false)
+const isVirtualKeyboardActive = computed(() => {
+	return props.useKeyboard || props.type === 'car'
+})
+
+const computedKeyboardMode = computed(() => {
+	if (props.type === 'car') return 'car'
+	return props.keyboardMode || 'number'
+})
+
+function handleWrapTap() {
+	if (props.disabled) return
+	if (isVirtualKeyboardActive.value) {
+		showVirtualKeyboard.value = true
+		emit('focus')
+	}
+}
+
+function onVirtualInputChange(val) {
+	innerValue.value = val
+	emit('update:modelValue', val)
+	emit('input', val)
+}
+
+// 密码显示隐藏控制
+const showPassword = ref(false)
+const isPasswordMasked = computed(() => {
+	if (props.type === 'password') {
+		return !showPassword.value
+	}
+	return false
+})
+
+function togglePasswordVisible() {
+	showPassword.value = !showPassword.value
+}
+
+// 原生键盘类型计算
+const computedNativeType = computed(() => {
+	if (props.type === 'number' || props.type === 'tel' || props.type === 'code') {
+		return 'number'
+	}
+	if (props.type === 'digit') {
+		return 'digit'
+	}
+	return 'text'
+})
+
+// 最大长度计算
+const computedMaxlength = computed(() => {
+	if (props.maxlength > 0) return props.maxlength
+	if (props.type === 'tel') return 11
+	if (props.type === 'code') return 6
+	if (props.type === 'car') return 8
+	return -1
+})
+
+// 验证码倒计时逻辑
+const counting = ref(false)
+const seconds = ref(props.codeSeconds)
+let timer = null
+
+function handleSendCode() {
+	if (counting.value || props.disabled) return
+	emit('send-code')
+	startCountdown()
+}
+
+function startCountdown() {
+	counting.value = true
+	seconds.value = props.codeSeconds
+	if (timer) clearInterval(timer)
+	timer = setInterval(() => {
+		seconds.value--
+		if (seconds.value <= 0) {
+			clearInterval(timer)
+			timer = null
+			counting.value = false
+		}
+	}, 1000)
+}
+
+function onInput(e) {
+	const val = e.detail.value
+	innerValue.value = val
+	emit('update:modelValue', val)
+	emit('input', val)
+}
+
+function onFocus(e) { emit('focus', e) }
+function onBlur(e) { emit('blur', e) }
+function onClear() {
+	innerValue.value = ''
+	emit('update:modelValue', '')
+	emit('clear')
+}
+
+onUnmounted(() => {
+	if (timer) clearInterval(timer)
+})
+
+defineExpose({
+	startCountdown
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-input {
+	margin-bottom: 24rpx;
+
+	&--disabled { opacity: $mu-opacity-disabled; }
+	&--error {
+		.mu-input__wrap {
+			border-color: $mu-error;
+			box-shadow: 0 0 14rpx rgba(244, 63, 94, 0.2);
+		}
+	}
+
+	/* Label 布局配置 */
+	&--label-top {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&--label-left {
+		display: flex;
+		align-items: center;
+		.mu-input__label-box {
+			margin-bottom: 0;
+			margin-right: 20rpx;
+			flex-shrink: 0;
+			width: 140rpx;
+		}
+		.mu-input__main {
+			flex: 1;
+			min-width: 0;
+		}
+	}
+
+	&--textarea-type#{&}--label-left {
+		align-items: flex-start;
+		.mu-input__label-box {
+			margin-top: 18rpx;
+		}
+	}
+
+	&__label-box {
+		display: flex;
+		align-items: center;
+		margin-bottom: 12rpx;
+	}
+
+	&__required {
+		color: #F43F5E;
+		font-size: 26rpx;
+		font-weight: 800;
+		margin-right: 6rpx;
+		line-height: 1;
+	}
+
+	&__label-text {
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		font-weight: 700;
+		line-height: 1.4;
+	}
+
+	&__main {
+		width: 100%;
+	}
+
+	&__wrap {
+		display: flex;
+		align-items: center;
+		border: 1rpx solid $mu-border;
+		padding: 0 20rpx;
+		background: #ffffff;
+		transition: all $mu-duration $mu-ease;
+
+		&:focus-within {
+			border-color: $mu-primary;
+			box-shadow: 0 0 16rpx rgba(99, 102, 241, 0.2);
+		}
+	}
+
+	/* 虚拟键盘绑定文本框 */
+	&__virtual-box {
+		flex: 1;
+		height: 68rpx;
+		display: flex;
+		align-items: center;
+		position: relative;
+	}
+
+	&__virtual-text {
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		font-weight: 600;
+		letter-spacing: 2rpx;
+	}
+
+	&__virtual-placeholder {
+		font-size: 26rpx;
+		color: #94A3B8;
+	}
+
+	&__cursor {
+		width: 3rpx;
+		height: 30rpx;
+		background: $mu-primary;
+		margin-left: 4rpx;
+		animation: mu-blink 1s infinite;
+	}
+
+	@keyframes mu-blink {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0; }
+	}
+
+	/* 多行文本域形态 (align-items 顶端对齐) */
+	&--textarea-type &__wrap {
+		align-items: flex-start;
+		padding: 12rpx 20rpx;
+	}
+
+	/* 填充背景模式 (:filled="true") */
+	&--filled &__wrap {
+		background: rgba(241, 245, 249, 0.6);
+		border-color: transparent;
+	}
+
+	/* 形态定义 (方形 / 柔和圆角 / 全圆胶囊) */
+	&--square &__wrap {
+		border-radius: 6rpx;
+	}
+	&--radius &__wrap {
+		border-radius: 12rpx;
+	}
+	&--round &__wrap {
+		border-radius: 999rpx;
+		padding: 0 28rpx;
+	}
+
+	&__inner {
+		flex: 1;
+		height: 68rpx;
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		background: transparent;
+		border: none;
+		outline: none;
+	}
+
+	&__textarea {
+		flex: 1;
+		min-height: 140rpx;
+		font-size: 28rpx;
+		color: $mu-text-primary;
+		background: transparent;
+		border: none;
+		outline: none;
+		padding: 6rpx 0;
+		line-height: 1.5;
+	}
+
+	&__prefix {
+		margin-right: 16rpx;
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		margin-top: 4rpx;
+	}
+
+	&__suffix {
+		margin-left: 16rpx;
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		margin-top: 4rpx;
+	}
+
+	/* 手机号区号前缀 */
+	&__phone-prefix {
+		display: flex;
+		align-items: center;
+		margin-right: 16rpx;
+		flex-shrink: 0;
+	}
+
+	&__phone-code {
+		font-size: 28rpx;
+		font-weight: 700;
+		color: $mu-text-primary;
+	}
+
+	&__phone-divider {
+		width: 1rpx;
+		height: 24rpx;
+		background: $mu-border;
+		margin-left: 16rpx;
+	}
+
+	&__clear {
+		width: 32rpx;
+		height: 32rpx;
+		border-radius: 50%;
+		background: rgba(148, 163, 184, 0.15);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		margin-left: 12rpx;
+		flex-shrink: 0;
+	}
+
+	&__password-toggle {
+		padding: 8rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		margin-left: 12rpx;
+		flex-shrink: 0;
+	}
+
+	/* 精致微型验证码胶囊按钮 */
+	&__code-btn-wrap {
+		margin-left: 12rpx;
+		flex-shrink: 0;
+	}
+
+	&__code-btn {
+		height: 48rpx;
+		padding: 0 18rpx;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 24rpx;
+		background: rgba(99, 102, 241, 0.08);
+		border: 1rpx solid rgba(99, 102, 241, 0.18);
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&--disabled {
+			background: rgba(148, 163, 184, 0.1);
+			border-color: transparent;
+			cursor: not-allowed;
+			.mu-input__code-text {
+				color: $mu-text-tertiary;
+			}
+		}
+	}
+
+	&__code-text {
+		font-size: 20rpx;
+		font-weight: 700;
+		color: $mu-primary;
+		line-height: 1;
+	}
+
+	&__error {
+		font-size: 22rpx;
+		color: $mu-error;
+		margin-top: 8rpx;
+		display: block;
+	}
+
+	&__counter {
+		font-size: 22rpx;
+		color: $mu-text-tertiary;
+		text-align: right;
+		margin-top: 8rpx;
+		display: block;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-input {
+		&__label-text { color: $mu-dark-text-primary; }
+		&__wrap {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__inner, &__textarea, &__virtual-text { color: $mu-dark-text-primary; }
+		&__phone-code { color: $mu-dark-text-primary; }
+		&__phone-divider { background: $mu-dark-border; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-input {
+		&__label-text { color: $mu-dark-text-primary; }
+		&__wrap {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__inner, &__textarea, &__virtual-text { color: $mu-dark-text-primary; }
+		&__phone-code { color: $mu-dark-text-primary; }
+		&__phone-divider { background: $mu-dark-border; }
+	}
+}
+</style>