提交 c7240327 编写于 作者: DCloud_JSON's avatar DCloud_JSON

更新 小程序端消息输入框,暂不支持富文本输入(包括:@用户、图片表情包等,@用户后续会支持)

上级 0ef75402
<template> <template>
<view class="uni-im-editor-box"> <view class="uni-im-editor-box">
<div class="uni-im-editor" contenteditable="true" ></div>
<!-- #ifdef MP -->
<!-- 与rmd通讯专用 --> <textarea class="uni-im-editor-mp" v-model="textareaValue" @input="oninput" auto-height :maxlength="maxlength"
<view :change:prop="rdm.$callMethod" :prop="callRmdParam"></view> :show-confirm-bar="false" :adjust-position="false" @blur="lastCursor = $event.detail.cursor"
></textarea>
<!-- #endif -->
<!-- #ifndef MP -->
<div class="uni-im-editor" contenteditable="true" ></div>
<!-- 与rmd通讯专用 -->
<view :change:prop="rdm.$callMethod" :prop="callRmdParam"></view>
<!-- #endif -->
</view> </view>
</template> </template>
...@@ -13,7 +22,11 @@ ...@@ -13,7 +22,11 @@
emits: ["input", "confirm"], emits: ["input", "confirm"],
data() { data() {
return { return {
callRmdParam: [] callRmdParam: [],
// #ifdef MP
"textareaValue":this.modelValue,
lastCursor:this.modelValue.length
// #endif
} }
}, },
props: { props: {
...@@ -32,7 +45,24 @@ ...@@ -32,7 +45,24 @@
}, },
mounted() { mounted() {
// 与rmd通讯专用 // 与rmd通讯专用
this.callRmd = async (funcName, ...params) => { this.callRmd = async (funcName, ...params) => {
// #ifdef MP
switch (funcName){
case '$setContent':
this.textareaValue = params[0]
break;
case '$addHtmlToCursor':
// 在第lastCursor位置添加内容
setTimeout(()=>{
this.textareaValue = this.textareaValue.slice(0,this.lastCursor) + params[0] + this.textareaValue.slice(this.lastCursor)
},300)
break;
default:
console.error('小程序暂不支持与rmd通讯',funcName,params)
break;
}
return
// #endif
this.callRmdParam = [] this.callRmdParam = []
this.$nextTick(() => { this.$nextTick(() => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
...@@ -213,13 +243,26 @@ ...@@ -213,13 +243,26 @@
// #endif // #endif
}, },
methods: { methods: {
oninput(e) { oninput(e) {
// #ifdef MP
let oldValue = this.oninput.oldValue || '';
// 当前输入框的值
const value = e.detail.value
// 本次输入的数据
const data = value.replace(oldValue, '')
this.oninput.oldValue = value
e = {
data,
value
}
// #endif
// console.error('input',e)
this.$emit('input', e) this.$emit('input', e)
} }
} }
} }
</script> </script>
<!-- #ifndef MP -->
<script module="rdm" lang="renderjs"> <script module="rdm" lang="renderjs">
let uniImEditor,lastFocusNode,lastCursor; let uniImEditor,lastFocusNode,lastCursor;
// #ifdef APP // #ifdef APP
...@@ -251,6 +294,7 @@ ...@@ -251,6 +294,7 @@
}); });
uniImEditor.addEventListener('blur', e => { uniImEditor.addEventListener('blur', e => {
// console.error('###blur', e); // console.error('###blur', e);
setTimeout(this.$refreshLastCursor, 0);
}); });
// 键盘敲左右 // 键盘敲左右
uniImEditor.addEventListener('keydown', e => { uniImEditor.addEventListener('keydown', e => {
...@@ -290,9 +334,12 @@ ...@@ -290,9 +334,12 @@
methods: { methods: {
// 刷新光标信息 // 刷新光标信息
$refreshLastCursor() { $refreshLastCursor() {
// console.log('刷新光标信息');
lastCursor = this.$getCursor(); lastCursor = this.$getCursor();
lastFocusNode = window.getSelection().focusNode; lastFocusNode = window.getSelection().focusNode;
// console.log('刷新光标信息',{
// lastCursor,
// lastFocusNode
// });
}, },
$oninput(data){ $oninput(data){
...@@ -487,9 +534,16 @@ ...@@ -487,9 +534,16 @@
} }
} }
} }
</script> </script>
<!-- #endif -->
<style lang="scss" scoped> <style lang="scss" scoped>
/* #ifdef MP */
.uni-im-editor-mp {
width: 100%;
height: auto;
}
/* #endif */
.uni-im-editor { .uni-im-editor {
min-height: 26px; min-height: 26px;
max-height: 110px; max-height: 110px;
......
...@@ -774,6 +774,13 @@ ...@@ -774,6 +774,13 @@
} }
}, },
showAboutMenber(){ showAboutMenber(){
if(!this.conversation.group_id){
return // 非群聊会话无需@用户的功能
}
// #ifdef MP
return // 小程序暂不支持@用户的功能
// #endif
uni.hideKeyboard() uni.hideKeyboard()
this.aboutUserKeyword = ''; this.aboutUserKeyword = '';
console.log('showAboutMenber',this.memberList[0]); console.log('showAboutMenber',this.memberList[0]);
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册