robin/lemon-imui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加sidebar-message、sidebar-content插槽,修改部分插槽名字，部分插槽新增参数，增加隐藏显示聊天记录的时间

Browse Source
This commit is contained in:
fan
2021-01-23 14:41:35 +08:00
parent 8ce543260a
commit 2f4440c9de
14 changed files with 236 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/components/contact.vue
+18 -12
View File
@@ -1,6 +1,6 @@
<script>
import { isString, isToday } from "utils/validate";
import { timeFormat } from "utils";
import { timeFormat,useScopedSlot } from "utils";
export default {
name: "LemonContact",
components: {},
@@ -18,12 +18,24 @@ export default {
}
},
render() {
const { contact } = this;
return (
<div
class={["lemon-contact", { "lemon-contact--name-center": this.simple }]}
on-click={e => this._handleClick(e, contact)}
on-click={e => this._handleClick(e, this.contact)}
>
{useScopedSlot(this.$scopedSlots.default,this._renderInner(),this.contact)}
</div>
);
},
created() {},
mounted() {
},
computed: {},
watch: {},
methods: {
_renderInner(){
const { contact } = this;
return [
<lemon-badge
count={!this.simple ? contact.unread : 0}
class="lemon-contact__avatar"
@@ -34,7 +46,7 @@ export default {
native-on-click={e => this._handleAvatarClick(e, contact)}
src={contact.avatar}
/>
</lemon-badge>
</lemon-badge>,
<div class="lemon-contact__inner">
<p class="lemon-contact__label">
<span class="lemon-contact__name">{contact.displayName}</span>
@@ -54,14 +66,8 @@ export default {
</p>
)}
</div>
</div>
);
},
created() {},
mounted() {},
computed: {},
watch: {},
methods: {
];
},
_handleClick(e, data) {
this.$emit("click", data);
},
packages/components/index.vue
+39 -29
View File
@@ -1,5 +1,5 @@
<script>
import { useScopedSlot, fastDone, generateUUID } from "utils";
import { useScopedSlot, funCall, generateUUID,cloneDeep } from "utils";
import { isFunction, isString, isEmpty } from "utils/validate";
import {
DEFAULT_MENUS,
@@ -10,10 +10,6 @@ import lastContentRender from "../lastContentRender";
import MemoryCache from "utils/cache/memory";
const CacheContactContainer = new MemoryCache();
const CacheMenuContainer = new MemoryCache();
const CacheMessageLoaded = new MemoryCache();
const messages = {};
const emojiMap = {};
let renderDrawerContent = () => {};
@@ -58,14 +54,18 @@ export default {
default: true
},
/**
* 初始化时是否隐藏导航按钮上的头像
* 是否隐藏导航按钮上的头像
*/
hideMenuAvatar: Boolean,
hideMenu: Boolean,
/**
* 隐藏消息列表内的联系人名字
* 是否隐藏消息列表内的联系人名字
*/
hideMessageName:Boolean,
/**
* 是否隐藏消息列表内的发送时间
*/
hideMessageTime:Boolean,
user: {
type: Object,
default: () => {
@@ -74,6 +74,9 @@ export default {
}
},
data() {
this.CacheContactContainer = new MemoryCache();
this.CacheMenuContainer = new MemoryCache();
this.CacheMessageLoaded = new MemoryCache();
return {
drawerVisible: !this.hideDrawer,
currentContactId:null,
@@ -219,17 +222,18 @@ export default {
this.currentContact,
(messages, isEnd = false) => {
this._addMessage(messages, this.currentContactId, 0);
CacheMessageLoaded.set(this.currentContactId, isEnd);
this.CacheMessageLoaded.set(this.currentContactId, isEnd);
if (isEnd == true) this.$refs.messages.loaded();
this.updateCurrentMessages();
this._changeContactLock = false;
next(isEnd);
}
},
this,
);
},
clearCacheContainer(name) {
CacheContactContainer.remove(name);
CacheMenuContainer.remove(name);
this.CacheContactContainer.remove(name);
this.CacheMenuContainer.remove(name);
},
_renderWrapper(children) {
return (
@@ -286,7 +290,7 @@ export default {
{ "lemon-menu__item--active": this.activeSidebar == name }
]}
on-click={() => {
fastDone(click, () => {
funCall(click, () => {
if (name) this.changeMenu(name);
});
}}
@@ -305,36 +309,38 @@ export default {
_renderSidebarMessage() {
return this._renderSidebar(
[
useScopedSlot(this.$scopedSlots["message-sidebar"]),
useScopedSlot(this.$scopedSlots["sidebar-message-top"]),
this.lastMessages.map(contact => {
return this._renderContact(
{
contact,
timeFormat: this.contactTimeFormat
},
() => this.changeContact(contact.id)
() => this.changeContact(contact.id),
this.$scopedSlots["sidebar-message"],
);
})
],
DEFAULT_MENU_LASTMESSAGES
);
},
_renderContact(props, onClick) {
_renderContact(props, onClick,slot) {
const {
click: customClick,
renderContainer,
id: contactId
} = props.contact;
const click = () => {
fastDone(customClick, () => {
funCall(customClick, () => {
onClick();
this._customContainerReady(
renderContainer,
CacheContactContainer,
this.CacheContactContainer,
contactId
);
});
};
return (
<lemon-contact
class={{
@@ -342,14 +348,15 @@ export default {
}}
props={props}
on-click={click}
/>
scopedSlots={{default:slot}}
></lemon-contact>
);
},
_renderSidebarContact() {
let prevIndex;
return this._renderSidebar(
[
useScopedSlot(this.$scopedSlots["contact-sidebar"]),
useScopedSlot(this.$scopedSlots["sidebar-contact-top"]),
this.contacts.map(contact => {
if (!contact.index) return;
contact.index = contact.index.replace(/\[[0-9]*\]/, "");
@@ -364,7 +371,8 @@ export default {
},
() => {
this.changeContact(contact.id)
}
},
this.$scopedSlots["sidebar-contact"],
)
];
prevIndex = contact.index;
@@ -399,22 +407,22 @@ export default {
const cls = "lemon-container";
const curact = this.currentContact;
let defIsShow = true;
for (const name in CacheContactContainer.get()) {
for (const name in this.CacheContactContainer.get()) {
const show = curact.id == name && this.currentIsDefSidebar;
defIsShow = !show;
nodes.push(
<div class={cls} v-show={show}>
{CacheContactContainer.get(name)}
{this.CacheContactContainer.get(name)}
</div>
);
}
for (const name in CacheMenuContainer.get()) {
for (const name in this.CacheMenuContainer.get()) {
nodes.push(
<div
class={cls}
v-show={this.activeSidebar == name && !this.currentIsDefSidebar}
>
{CacheMenuContainer.get(name)}
{this.CacheMenuContainer.get(name)}
</div>
);
}
@@ -427,7 +435,7 @@ export default {
<div class="lemon-container__title">
<div class="lemon-container__displayname">
{useScopedSlot(
this.$scopedSlots["contact-title"],
this.$scopedSlots["message-title"],
curact.displayName,
curact
)}
@@ -435,6 +443,7 @@ export default {
</div>
<lemon-messages
ref="messages"
hide-time={this.hideMessageTime}
hide-name={this.hideMessageName}
time-format={this.messageTimeFormat}
reverse-user-id={this.user.id}
@@ -542,11 +551,12 @@ export default {
}
this.currentContactId = contactId;
this.$emit("change-contact", this.currentContact);
this.$emit("change-contact", this.currentContact,this);
if (isFunction(this.currentContact.renderContainer)) {
return;
}
if (CacheMessageLoaded.has(contactId)) {
if (this.CacheMessageLoaded.has(contactId)) {
this.$refs.messages.loaded();
}else{
this.$refs.messages.resetLoadState();
@@ -671,7 +681,7 @@ export default {
let menus = [];
if (Array.isArray(data)) {
const indexMap = {
lastMessages: 0,
messages: 0,
contacts: 1
};
const indexKeys = Object.keys(indexMap);
@@ -687,7 +697,7 @@ export default {
if (item.renderContainer) {
this._customContainerReady(
item.renderContainer,
CacheMenuContainer,
this.CacheMenuContainer,
item.name
);
}
packages/components/message/basic.vue
+10 -13
View File
@@ -1,4 +1,5 @@
<script>
import { useScopedSlot} from "utils";
export default {
name: "lemonMessageBasic",
inject: ["IMUI"],
@@ -14,7 +15,8 @@ export default {
default: () => ""
},
reverse: Boolean,
hideName: Boolean
hideName: Boolean,
hideTime:Boolean,
},
data() {
return {};
@@ -27,7 +29,7 @@ export default {
"lemon-message",
{
"lemon-message--reverse": this.reverse,
"lemon-message--hide-name": this.hideName
"lemon-message--hide-name": this.hideName,
}
]}
>
@@ -50,7 +52,7 @@ export default {
>
{fromUser.displayName}
</span>
<span class="lemon-message__time">{this.timeFormat(sendTime)}</span>
{this.hideTime == true && <span class="lemon-message__time">{this.timeFormat(sendTime)}</span>}
</div>
<div
class="lemon-message__content"
@@ -58,7 +60,7 @@ export default {
this._emitClick(e, "content");
}}
>
{this.useScopedSlots("content", this.message)}
{useScopedSlot(this.$scopedSlots['content'],null,this.message)}
</div>
<div
class="lemon-message__status"
@@ -78,7 +80,7 @@ export default {
watch: {},
methods: {
_emitClick(e, key) {
this.IMUI.$emit("message-click", e, key, this.message);
this.IMUI.$emit("message-click", e, key, this.message,this.IMUI);
},
_renderStatue(status) {
if (status == "going") {
@@ -97,11 +99,6 @@ export default {
}
return;
},
useScopedSlots(name, params, defVnode = "", context = this) {
return context.$scopedSlots[name]
? context.$scopedSlots[name](params)
: defVnode;
}
}
};
</script>
@@ -118,8 +115,8 @@ arrow()
display flex
padding 10px 0
+e(time)
color #bbb
padding 0 4px
color #b9b9b9
padding 0 5px
+e(inner)
position relative
+e(avatar)
@@ -133,7 +130,7 @@ arrow()
line-height 14px
padding-bottom 6px
user-select none
color #999
color #666
+e(content)
font-size 14px
line-height 20px
packages/components/messages.vue
+6 -2
View File
@@ -4,7 +4,10 @@ export default {
name: "LemonMessages",
components: {},
props: {
//是否隐藏消息发送人昵称
hideName:Boolean,
//是否隐藏显示消息时间
hideTime:Boolean,
reverseUserId: String,
timeRange: {
type: Number,
@@ -53,7 +56,7 @@ export default {
message: {
id: "__time__",
type: "event",
content: this.timeFormat(message.sendTime)
content: hoursTimeFormat(message.sendTime)
}
}}
/>
@@ -64,9 +67,10 @@ export default {
ref="message"
refInFor={true}
attrs={{
timeFormat: this.msecRange > 0 ? () => {} : this.timeFormat,
timeFormat: this.timeFormat,
message: message,
reverse: this.reverseUserId == message.fromUser.id,
hideTime:this.hideTime,
hideName: this.hideName
}}
/>
packages/utils/cache/memory.js
Vendored
-15
View File
@@ -22,18 +22,3 @@ export default class MemoryCache {
return !!this.table[key];
}
}
// export default {
// data: {},
// get(name) {
// console.log(this.data);
// }
// };
// class MemoryCache {
// constructor() {
// super();
// }
// get($name) {
// console.log(1);
// }
// }
// export default MemoryCache;
packages/utils/constant.js
+1 -1
View File
@@ -1,6 +1,6 @@
export const EMIT_AVATAR_CLICK = "avatar-click";
export const DEFAULT_MENU_LASTMESSAGES = "lastMessages";
export const DEFAULT_MENU_LASTMESSAGES = "messages";
export const DEFAULT_MENU_CONTACTS = "contacts";
export const DEFAULT_MENUS = [DEFAULT_MENU_LASTMESSAGES, DEFAULT_MENU_CONTACTS];
/**
packages/utils/index.js
+1 -1
View File
@@ -53,7 +53,7 @@ export function timeFormat(t, format) {
return format;
}
export function fastDone(event, callback) {
export function funCall(event, callback) {
if (isFunction(event)) {
event(() => {
callback();