baiyuApp/pages_live/components/liveCommentInput.vue

<template>
	<view
		v-if="visible || focused"
		class="live-comment-input"
		:class="[
			'live-comment-input--' + variant,
			'live-comment-input--' + theme,
			{ 'live-comment-input--focused': focused }
		]">
		<!-- 未聚焦：点击唤起键盘 -->
		<view v-if="!focused" class="live-comment-input__bar">
			<view class="live-comment-input__trigger" @click="openInput">
				<text class="live-comment-input__trigger-text">{{ displayText }}</text>
			</view>
			<view v-if="showActions" class="live-comment-input__actions">
				<slot name="actions" />
			</view>
		</view>

		<!-- 聚焦：键盘上方输入框 + 发送 -->
		<view
			v-if="focused"
			class="live-comment-input__keyboard-panel"
			:style="keyboardPanelStyle">
			<view class="live-comment-input__editor">
				<input
					ref="commentInput"
					class="live-comment-input__field"
					type="text"
					:value="value"
					:placeholder="placeholder"
					:placeholder-style="placeholderStyle"
					placeholder-class="live-comment-input__placeholder-class"
					:focus="focused"
					:disabled="disabled"
					:adjust-position="false"
					cursor-spacing="100"
					:confirm-type="value ? 'send' : 'done'"
					@input="onInput"
					@focus="onFocus"
					@blur="onBlur"
					@confirm="handleSend" />
				<view
					class="live-comment-input__send"
					:class="{ 'live-comment-input__send--horizontal': showType === 1 }"
					@click.stop="handleSend">
					发送
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'LiveCommentInput',
		props: {
			value: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '说点什么...'
			},
			showType: {
				type: Number,
				default: 2
			},
			variant: {
				type: String,
				default: 'inline'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			focused: {
				type: Boolean,
				default: false
			},
			keyboardHeight: {
				type: Number,
				default: 0
			},
			visible: {
				type: Boolean,
				default: true
			},
			showActions: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			theme() {
				return this.showType === 1 ? 'light' : 'dark';
			},
			displayText() {
				return this.value || this.placeholder;
			},
			placeholderStyle() {
				return this.theme === 'light' ? 'color:#999999;' : 'color:#e7e7e7;';
			},
			keyboardPanelStyle() {
				const offset = this.keyboardHeight > 0 ? this.keyboardHeight : 0;
				return {
					transform: offset ? `translateY(-${offset}rpx)` : 'none'
				};
			}
		},
		watch: {
			focused(val) {
				if (val) {
					this.$nextTick(() => this.focusInput());
				}
			}
		},
		methods: {
			openInput() {
				if (this.disabled) return;
				this.$emit('focus');
				this.$nextTick(() => this.focusInput());
			},
			focusInput() {
				const input = this.$refs.commentInput;
				if (input && typeof input.focus === 'function') {
					input.focus();
				}
			},
			onInput(e) {
				this.$emit('input', e.detail.value);
			},
			onFocus() {
				this.$emit('focus');
			},
			onBlur() {
				this.$emit('blur');
			},
			handleSend() {
				if (this.disabled) return;
				this.$emit('send');
			},
			clearInput() {
				this.$emit('input', '');
			}
		}
	};
</script>

<style scoped lang="scss">
	.live-comment-input {
		width: 100%;
		box-sizing: border-box;
	}

	.live-comment-input--overlay {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 24rpx;
		z-index: 99999;
	}

	.live-comment-input__bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-width: 0;
	}

	.live-comment-input__trigger {
		flex: 1;
		min-width: 0;
		border-radius: 36rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
	}

	.live-comment-input--dark .live-comment-input__trigger {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.live-comment-input--light .live-comment-input__trigger {
		background: var(--input-bg, #f5f7fa);
	}

	.live-comment-input__trigger-text {
		font-size: 28rpx;
		line-height: 1.4;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.live-comment-input--dark .live-comment-input__trigger-text {
		color: #e7e7e7;
	}

	.live-comment-input--light .live-comment-input__trigger-text {
		color: #999999;
	}

	.live-comment-input__actions {
		flex-shrink: 0;
		margin-left: 16rpx;
		display: flex;
		align-items: center;
	}

	.live-comment-input__keyboard-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10001;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: var(--bottom-color, #ffffff);
		transform: translateZ(0);
	}

	.live-comment-input--dark .live-comment-input__keyboard-panel {
		background-color: transparent;
	}

	.live-comment-input__editor {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 36rpx;
		padding: 10rpx 10rpx 10rpx 20rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.live-comment-input--dark .live-comment-input__editor {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.live-comment-input--light .live-comment-input__editor {
		background: var(--input-bg, #f5f7fa);
	}

	.live-comment-input__field {
		flex: 1;
		min-width: 0;
		border: none;
		background: transparent;
		font-size: 32rpx;
		color: var(--text-color, #333333);
	}

	.live-comment-input--dark .live-comment-input__field {
		color: #ffffff;
	}

	.live-comment-input__send {
		flex-shrink: 0;
		background-color: #ffffff;
		border-radius: 28rpx;
		padding: 14rpx 16rpx;
		color: #181818;
		font-weight: 500;
		font-size: 28rpx;
		min-width: 80rpx;
		text-align: center;
		margin-left: 16rpx;
	}

	.live-comment-input__send--horizontal {
		background-color: #FF233C;
		color: #ffffff;
	}

	.live-comment-input--dark .live-comment-input__send {
		background-color: transparent;
		color: #02b176;
		padding: 14rpx 8rpx;
	}
</style>