162 lines
4.8 KiB
Vue
162 lines
4.8 KiB
Vue
|
<!-- z-paging聊天输入框 -->
|
|||
|
|
|||
|
<template>
|
|||
|
<view class="chat-input-bar-container">
|
|||
|
<view class="chat-input-bar">
|
|||
|
<view class="chat-input-container">
|
|||
|
<!-- :adjust-position="false"必须设置,防止键盘弹窗自动上顶,交由z-paging内部处理 -->
|
|||
|
<input :focus="focus" class="chat-input" v-model="msg" :adjust-position="false" confirm-type="send" type="text" placeholder="请输入内容" @confirm="sendClick" />
|
|||
|
</view>
|
|||
|
<!-- 表情图标(如果不需要切换表情面板则不用写) -->
|
|||
|
<view class="emoji-container">
|
|||
|
<image class="emoji-img" :src="`/static/${emojiType || 'emoji'}.png`" @click="emojiChange"></image>
|
|||
|
</view>
|
|||
|
<view class="chat-input-send" @click="sendClick">
|
|||
|
<text class="chat-input-send-text">发送</text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<!-- 表情面板,这里使用height控制隐藏显示是为了有高度变化的动画效果(如果不需要切换表情面板则不用写) -->
|
|||
|
<view class="emoji-panel-container" :style="[{height: emojiType === 'keyboard' ? '400rpx' : '0px'}]">
|
|||
|
<scroll-view scroll-y style="height: 100%;flex: 1;">
|
|||
|
<view class="emoji-panel">
|
|||
|
<text class="emoji-panel-text" v-for="(item, index) in emojisArr" :key="index" @click="emojiClick(item)">
|
|||
|
{{item}}
|
|||
|
</text>
|
|||
|
</view>
|
|||
|
</scroll-view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
export default {
|
|||
|
name:"chat-input-bar",
|
|||
|
data() {
|
|||
|
return {
|
|||
|
msg: '',
|
|||
|
|
|||
|
// 表情数组(如果不需要切换表情面板则不用写)
|
|||
|
emojisArr: ['😊','😁','😀','😃','😣','😞','😩','😫','😲','😟','😦','😜','😳','😋','😥','😰','🤠','😎','😇','😉','😭','😈','😕','😏','😘','😤','😡','😅','😬','😺','😻','😽','😼','🙈','🙉','🙊','🔥','👍','👎','👌','✌️','🙏','💪','👻'],
|
|||
|
// 当前input focus(如果不需要切换表情面板则不用写)
|
|||
|
focus: false,
|
|||
|
// 当前表情/键盘点击后的切换类型,为空字符串代表展示表情logo但是不展示不展示表情面板(如果不需要切换表情面板则不用写)
|
|||
|
emojiType: '',
|
|||
|
};
|
|||
|
},
|
|||
|
methods: {
|
|||
|
// 更新了键盘高度(如果不需要切换表情面板则不用写)
|
|||
|
updateKeyboardHeightChange(res) {
|
|||
|
if (res.height > 0) {
|
|||
|
// 键盘展开,将emojiType设置为emoji
|
|||
|
this.emojiType = 'emoji';
|
|||
|
}
|
|||
|
},
|
|||
|
// 用户尝试隐藏键盘,此时如果表情面板在展示中,应当隐藏表情面板,如果是键盘在展示中不用处理,z-paging内部已经处理(如果不需要切换表情面板则不用写)
|
|||
|
hidedKeyboard() {
|
|||
|
if (this.emojiType === 'keyboard') {
|
|||
|
this.emojiType = '';
|
|||
|
}
|
|||
|
},
|
|||
|
// 点击了切换表情面板/键盘(如果不需要切换表情面板则不用写)
|
|||
|
emojiChange() {
|
|||
|
this.$emit('emojiTypeChange', this.emojiType);
|
|||
|
if (this.emojiType === 'keyboard') {
|
|||
|
// 点击了键盘,展示键盘
|
|||
|
this.focus = true;
|
|||
|
} else {
|
|||
|
// 点击了切换表情面板
|
|||
|
this.focus = false;
|
|||
|
// 隐藏键盘
|
|||
|
uni.hideKeyboard();
|
|||
|
}
|
|||
|
this.emojiType = (!this.emojiType || this.emojiType === 'emoji') ? 'keyboard': 'emoji';
|
|||
|
},
|
|||
|
// 点击了某个表情,将其插入输入内容中(如果不需要切换表情面板则不用写)
|
|||
|
emojiClick(text) {
|
|||
|
this.msg += text;
|
|||
|
},
|
|||
|
|
|||
|
// 点击了发送按钮
|
|||
|
sendClick() {
|
|||
|
if (!this.msg.length) return;
|
|||
|
this.$emit('send', this.msg);
|
|||
|
this.msg = '';
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style scoped>
|
|||
|
.chat-input-bar {
|
|||
|
display: flex;
|
|||
|
flex-direction: row;
|
|||
|
align-items: center;
|
|||
|
border-top: solid 1px #f5f5f5;
|
|||
|
background-color: #f8f8f8;
|
|||
|
|
|||
|
padding: 10rpx 20rpx;
|
|||
|
}
|
|||
|
.chat-input-container {
|
|||
|
flex: 1;
|
|||
|
/* #ifndef APP-NVUE */
|
|||
|
display: flex;
|
|||
|
/* #endif */
|
|||
|
padding: 15rpx;
|
|||
|
background-color: white;
|
|||
|
border-radius: 10rpx;
|
|||
|
}
|
|||
|
.chat-input {
|
|||
|
flex: 1;
|
|||
|
font-size: 28rpx;
|
|||
|
}
|
|||
|
.emoji-container {
|
|||
|
width: 54rpx;
|
|||
|
height: 54rpx;
|
|||
|
margin: 10rpx 0rpx 10rpx 20rpx;
|
|||
|
}
|
|||
|
.emoji-img {
|
|||
|
width: 54rpx;
|
|||
|
height: 54rpx;
|
|||
|
}
|
|||
|
.chat-input-send {
|
|||
|
background-color: #007AFF;
|
|||
|
margin: 10rpx 10rpx 10rpx 20rpx;
|
|||
|
border-radius: 10rpx;
|
|||
|
width: 110rpx;
|
|||
|
height: 60rpx;
|
|||
|
/* #ifndef APP-NVUE */
|
|||
|
display: flex;
|
|||
|
/* #endif */
|
|||
|
justify-content: center;
|
|||
|
align-items: center;
|
|||
|
}
|
|||
|
.chat-input-send-text {
|
|||
|
color: white;
|
|||
|
font-size: 26rpx;
|
|||
|
}
|
|||
|
.emoji-panel-container {
|
|||
|
background-color: #f8f8f8;
|
|||
|
overflow: hidden;
|
|||
|
transition-property: height;
|
|||
|
transition-duration: 0.15s;
|
|||
|
/* #ifndef APP-NVUE */
|
|||
|
will-change: height;
|
|||
|
/* #endif */
|
|||
|
}
|
|||
|
.emoji-panel {
|
|||
|
font-size: 30rpx;
|
|||
|
/* #ifndef APP-NVUE */
|
|||
|
display: flex;
|
|||
|
/* #endif */
|
|||
|
flex-direction: row;
|
|||
|
flex-wrap: wrap;
|
|||
|
padding-right: 10rpx;
|
|||
|
padding-left: 15rpx;
|
|||
|
padding-bottom: 10rpx;
|
|||
|
}
|
|||
|
.emoji-panel-text {
|
|||
|
font-size: 50rpx;
|
|||
|
margin-left: 15rpx;
|
|||
|
margin-top: 20rpx;
|
|||
|
}
|
|||
|
</style>
|