20240517
This commit is contained in:
244
components/barrage/BarrageInput.nvue
Normal file
244
components/barrage/BarrageInput.nvue
Normal file
@@ -0,0 +1,244 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user