sociology_app/components/barrage/BarrageInput.nvue

<template>
	<view
	v-if="showFixedFooter"
	class="fixed-footer"
	:class="[isFullScreen ? 'full-screen' : '', NotchClass]">
		<view class="place-holder" @click="handleToggleFixedFooter"></view>
		<view
		class="barrage-input-bar">
			<image
			v-if="pickColorMode"
			class="color-btn"
			src="@/static/barrage/color_active@2x.png"
			@click="togglePickColorMode"></image>
			<image
			v-else
			class="color-btn"
			:src="isFullScreen ? require('@/static/barrage/color_white@2x.png') : require('@/static/barrage/color_gray@2x.png')"
			@click="togglePickColorMode"></image>
			<view class="input-wrapper">
				<input
				ref="barrageFormInput"
				class="input"
				type="text"
				v-model="barrageText"
				adjust-position="false"
				placeholder="弹幕走一波"
				placeholder-style="font-size:13px;color:#999;"
				cursor-spacing="10px"
				maxlength="30"
				@focus="handleFocus"
				@blur="handleBlur"
				@keyboardheightchange="handleKeyboardHeightChange">
				<text class="total-label">{{ restLength }}</text>
			</view>
			<text
			class="send-btn"
			@click="handleBarrageSend"
			>发送</text>
		</view>
		<view
		v-if="keyboardHeight"
		class="barrage-color-bar"
		:style="{height: keyboardHeight + 'px'}">
				<text class="title">弹幕颜色</text>
				<view class="lists">
					<view
					class="color-item"
					:class="activeColorIndex === index ? 'active' : ''"
					v-for="(color, index) in barrageColors">
						<view
						class="color-box"
						:style="{backgroundColor: color}"
						@click="handleColorPick(index)"></view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	const { platform, safeArea, screenHeight, screenWidth } = uni.getSystemInfoSync();
	//const hasNotchInScreen = plus.navigator.hasNotchInScreen();
	export default {
		data () {
			return {
				hasNotchInScreen,
				barrageText: '' ,// 弹幕输入框文字
				keyboardHeight: 0 // 软键盘高度
			}
		},
		props: {
			isFullScreen: {
				type: Boolean,
				default: false
			},
			showFixedFooter: {
				type: Boolean
			},
			pickColorMode: {
				type: Boolean,
				default: false
			},
			barrageColors: {
				type: Array,
				default: []
			},
			activeColorIndex: {
				type: Number,
				default: 0
			}
		},
		computed: {
			restLength () {
				return this.barrageText.length < 30 ? (30 - this.barrageText.length) : 0
			},
			NotchClass () {
				return this.hasNotchInScreen ? 'notch' : '';
			}
		},
		watch: {
			showFixedFooter: function(val) {
				if (!val) {
					this.keyboardHeight = 0;
				}
			},
			// fix: 安卓横屏不触发keyboardheightchange
			isFullScreen: function(val) {
				if (val) {
					this.handleKeyboardHeightChange();
				}
			}
		},
		methods: {
			focusAction () {
				console.log('弹幕输入框focus');
				let tag = false;
				this.$refs.barrageFormInput.focus();
				// 重新计算软键盘高度
				this.handleKeyboardHeightChange();
			},
			blurAction () {
				console.log('弹幕输入框blur');
				this.$refs.barrageFormInput.blur();
			},
			cleanTextAction () {
				this.barrageText = '';
			},
			handleFocus () {
				this.$emit('handleFocus');
			},
			handleBlur () {
				this.$emit('handleBlur');
			},
			handleKeyboardHeightChange (e) {
				console.log('KeyboardHeightChange', e);
				if (e && e.detail && !e.detail.height) return;
				if (platform === 'ios') {
					this.keyboardHeight =  this.isFullScreen ? e.detail.height : (e.detail.height - safeArea.top + 15);
				} else {
					this.keyboardHeight =  this.isFullScreen ? 207 : e.detail.height;
				}
				console.log('keyboradHeihgt:', this.keyboardHeight);
			},
			togglePickColorMode () {
				// 安卓横屏禁用
				if (platform === 'android' && this.isFullScreen) return;
				this.$emit('togglePickColorMode');
			},
			handleBarrageSend () {
				this.$emit('handleBarrageSend', this.barrageText);
			},
			handleColorPick (index) {
				this.$emit('handleColorPick', index);
			},
			handleToggleFixedFooter () {
				this.$emit('handleToggleFixedFooter');
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.fixed-footer
		position: fixed
		top: 0
		bottom: 0
		left: 0
		right: 0
		&.full-screen
			&.notch
				.barrage-input-bar
					padding: 0 88rpx
				.barrage-color-bar
					padding: 40rpx 88rpx
			.barrage-input-bar
				background-color: #27282A
				.input-wrapper
					background-color: #FFFFFF
			.barrage-color-bar
				background-color: #3D3D3F
				.title
					color: #FFFFFF
			.place-holder
				border-bottom: 1px solid #444;
		.place-holder
			flex: 1;
			border-bottom: 1px solid #DDD;
	.barrage-input-bar
		padding: 0 30rpx
		height: 90rpx
		flex-direction: row
		align-items: center
		background-color: #FFF
		box-shadow: 0px 1px 0px 0rpx #DDDDDD, 0px -1px 0px 0px #DDDDDD;
		.color-btn
			width: 60rpx
			height: 60rpx
		.input-wrapper
			flex 1
			flex-direction: row
			align-items: center
			margin: 0 20rpx
			padding: 0 30rpx
			height: 70rpx
			background-color: #f5f5f5
			border-radius: 100rpx
			.input
				flex 1
				font-size: 26rpx
			.total-label
				font-size: 24rpx
				color #999
		.send-btn
			width: 112rpx;
			height: 60rpx;
			line-height: 60rpx
			background: #FF9520;
			border-radius: 32rpx;
			font-size: 30rpx
			color: #fff
			text-align: center
	.barrage-color-bar
		padding: 40rpx 60rpx
		background-color: #F5F5F5
		.title
			font-size: 24rpx
			color: #666
		.lists
			padding: 25rpx 9rpx
			flex-direction: row
			flex-wrap: wrap
			.color-item
				justify-content: center
				align-items: center
				margin: 15rpx 21rpx
				padding: 5rpx
				border-radius: 100%
				&.active
					border: 2rpx solid #FF920A;
				.color-box
					width: 44rpx
					height: 44rpx
					border-radius: 100%
</style>