TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

新增表情包组件

Browse Source
This commit is contained in:
唐明明
2022-02-25 14:50:02 +08:00
parent 31846e54a7
commit 92d43c50bc
10 changed files with 966 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
pages/im/components/sentMessageBar.vue
View File

@@ -7,18 +7,27 @@
<image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix" />
</view>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
<view class="msg-type msg-popups" @click="showPopups = !showPopups"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
<sent-text ref="textView" v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" @blur="onBlur" />
<view class="msg-type msg-popups" @click="onShowEmoji">
<image class="icon" src="@/static/icon/emoji-icon.png" />
<!-- 考虑唤起键盘，暂时保留v-show -->
<!-- <image v-show="!showEmoji" class="icon" src="@/static/icon/emoji-icon.png" /> -->
<!-- <image v-show="showEmoji" class="icon" src="@/static/icon/key-icon.png" /> -->
</view>
<view class="msg-type msg-popups" @click="() => {showPopups = !showPopups, showEmoji = false}"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
</view>
<!-- 弹出层 -->
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
<!-- 表情包 -->
<sent-emoji :show="showEmoji" @onEmoji="onEmoji" @delete="onDelete" @sent="onSent"></sent-emoji>
</view>
</template>
<script>
import sentText from './sent/sentText'
import sentVoice from './sent/sentVoice'
import sentPopups from './sent/sentPopups'
import sentPopups from './sent/sentPopups'
import sentEmoji from './sent/sentEmoji'
export default {
props: {
@@ -34,18 +43,26 @@
components: {
sentText,
sentVoice,
sentPopups
sentPopups,
sentEmoji
},
data() {
return {
chatType: 1, // 0 语音，1 文本
showPopups: false
chatType : 1, // 0 语音，1 文本
showPopups : false,
showEmoji : false,
chatText : {
value : "",
cursor : 0
}
}
},
methods: {
// 切换聊天类型，语音/文本
changeMessageType() {
this.chatType = this.chatType === 1 ? 0 : 1
this.chatType = this.chatType === 1 ? 0 : 1
if(this.showEmoji) this.showEmoji = false
if(this.showPopups) this.showPopups = false
},
onSuccess() {
this.$emit('onSuccess')
@@ -55,6 +72,39 @@
if(this.showPopups){
this.showPopups = false
}
},
// 输入表情
onEmoji(e){
let atMsg = this.chatText
let newMsg = () => {
return atMsg.value.slice(0, atMsg.cursor) + e.emoji + atMsg.value.slice(atMsg.cursor)
}
atMsg.value = newMsg()
atMsg.cursor += 2
// 全局通讯
uni.$emit('emojiValue', atMsg)
},
// 删除表情
onDelete(){
console.log('删除')
},
// 发送消息
onSent(){
this.$refs.textView.sent()
this.chatText = {
value : "",
cursor : 0
}
},
// 获取输入框文字最新状态
onBlur(e){
this.chatText = e
},
// 显示emoji表情
onShowEmoji(){
this.showEmoji = !this.showEmoji
this.chatType = 1
if(this.showPopups) this.showPopups = false
}
}
}