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

UPDATE

Browse Source
This commit is contained in:
fan
2019-10-28 12:14:44 +08:00
parent aa10592b07
commit 6f01dcf94e
12 changed files with 257 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/App.vue
+158 -133
View File
@@ -4,13 +4,19 @@
<lemon-imui
:user="user"
ref="IMUI"
:hide-menu="hideMenu"
:hide-menu-avatar="hideMenuAvatar"
@change-menu="handleChangeMenu"
@change-contact="handleChangeContact"
@pull-messages="handlePullMessages"
@message-click="handleMessageClick"
@send="handleSend"
>
<template #cover>
<h1 style="text-indent:20px">自定义封面内容</h1>
<div class="cover">
<i class="lemon-icon-message"></i>
<p><b>Lemon</b> IMUI</p>
</div>
</template>
<!-- <template #contact-info="contact">
<span style="color:blue">contact-info {{ contact }}</span>
@@ -25,11 +31,24 @@
<span>{{ contact.displayName }}</span>
<small class="more" @click="changeDrawer(contact)">&#8230;</small>
</template>
<template #contact-info="contact">
自定义联系人信息 {{ contact.displayName }}
</template>
<template #message-sidebar>
<div class="bar">自定义消息顶部</div>
</template>
<template #contact-sidebar>
<div class="bar">自定义联系人顶部</div>
</template>
</lemon-imui>
<div class="action">
<lemon-button @click="appendMessage">发送消息</lemon-button>
<lemon-button @click="updateContact">修改联系人信息</lemon-button>
<lemon-button @click="changeMenuVisible">切换导航显示</lemon-button>
<lemon-button @click="changeMenuAvatarVisible"
>切换头像显示</lemon-button
>
</div>
</div>
</div>
@@ -40,32 +59,33 @@ const getTime = () => {
return new Date().getTime();
};
const generateRandId = () => {
return Number(
Math.random()
.toString()
.substr(3, length) + Date.now()
).toString(36);
return Math.random()
.toString(36)
.substr(-8);
};
const generateRandWord = () => {
return Math.random()
.toString(36)
.substr(2);
};
const generateMessage = () => {
const generateMessage = (toContactId = "", fromUser) => {
if (!fromUser) {
fromUser = {
id: "system",
displayName: "系统测试",
avatar: "http://upload.qqbodys.com/allimg/1710/1035512943-0.jpg"
};
}
return {
id: generateRandId(),
status: "succeed",
type: "text",
sendTime: getTime(),
content: generateRandWord(),
toContactId: "123",
//fileSize: 1231,
//fileName: "asdasd.doc",
fromUser: {
id: "222",
displayName: "系统测试",
avatar: "http://upload.qqbodys.com/allimg/1710/1035512943-0.jpg"
}
toContactId,
fromUser
};
};
@@ -73,17 +93,19 @@ export default {
name: "app",
data() {
return {
hideMenuAvatar: false,
hideMenu: false,
user: {
id: "superadmin",
displayName: "IMUI super",
displayName: "June",
avatar:
"http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg"
"https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=69e1a1a4b78f8c54e3d3c22902124ac8/060828381f30e9247e29fb7b4f086e061c95f7ef.jpg"
}
};
},
mounted() {
const contactData1 = {
id: "1",
id: "contact-1",
displayName: "工作协作群",
avatar: "http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg",
type: "single",
@@ -93,11 +115,11 @@ export default {
lastContent: "2"
};
const contactData2 = {
id: "2",
displayName: "狗蛋Li。",
id: "contact-2",
displayName: "自定义内容",
avatar: "http://upload.qqbodys.com/img/weixin/20170807/jibfvfd00npin.jpg",
type: "single",
index: "B",
//index: "Z",
click(next) {
next();
},
@@ -109,7 +131,7 @@ export default {
unread: 2
};
const contactData3 = {
id: "3",
id: "contact-3",
displayName: "铁牛",
avatar: "http://upload.qqbodys.com/img/weixin/20170803/jiq4nzrkrnd0e.jpg",
type: "many",
@@ -121,33 +143,6 @@ export default {
const { IMUI } = this.$refs;
setTimeout(() => {
//IMUI.openDrawer();
// IMUI.openDrawer(() => {
// return [
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>,
// <h1>123</h1>
// ];
// });
// setTimeout(() => {
// IMUI.openDrawer(() => {
// return <h1>124563</h1>;
// });
// }, 2000);
}, 2000);
//[contactData1, contactData2, contactData3]
let data = [
{ ...contactData1 },
{ ...contactData2 },
@@ -164,13 +159,54 @@ export default {
name: "contacts"
},
{
title: "自定义按钮",
name: "custom1",
title: "自定义按钮1",
unread: 0,
render: menu => {
return <i class="lemon-icon-attah" />;
},
renderContainer: () => {
return (
<div class="article">
<ul>
<li class="article-item">
<h2>人民日报谈网红带货：产品真的值得买吗？</h2>
</li>
<li class="article-item">
甘肃夏河县发生5.7级地震 暂未接到人员伤亡报告
</li>
<li class="article-item">
北方多地风力仍强沙尘相伴,东北内蒙古等地迎雨雪
</li>
<li class="article-item">
英货车案：越南警方采集疑死者家属DNA作比对
</li>
<li class="article-item">
知名连锁咖啡店的蛋糕吃出活虫 曝光内幕太震惊
</li>
</ul>
<lemon-contact
props={{ contact: contactData1 }}
style="margin:20px"
/>
<lemon-contact
props={{ contact: contactData3 }}
style="margin:20px"
/>
</div>
);
},
isBottom: true
},
{
name: "custom2",
title: "自定义按钮2",
unread: 0,
click: () => {
alert("点击了自定义按钮");
alert("拦截导航点击事件");
},
render: menu => {
return <span>T</span>;
return <i class="lemon-icon-group" />;
},
isBottom: true
}
@@ -463,6 +499,28 @@ export default {
]);
},
methods: {
handleMessageClick(e, key, message) {
const { IMUI } = this.$refs;
if (key == "status") {
IMUI.updateMessage(message.id, message.toContactId, {
status: "going",
content: "正在重新发送消息..."
});
setTimeout(() => {
IMUI.updateMessage(message.id, message.toContactId, {
status: "succeed",
content: "发送成功"
});
}, 2000);
}
},
changeMenuAvatarVisible() {
this.hideMenuAvatar = !this.hideMenuAvatar;
},
changeMenuVisible() {
this.hideMenu = !this.hideMenu;
},
appendMessage() {
const { IMUI } = this.$refs;
const contact = IMUI.currentContact;
@@ -513,94 +571,33 @@ export default {
}, 1000);
},
handlePullMessages(contact, next) {
const { IMUI } = this.$refs;
const otheruser = {
id: "hehe",
displayName: "I KNOEW",
avatar:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
};
console.log("Event:pull-messages");
const messages = [
generateMessage(IMUI.currentContactId, this.user),
generateMessage(IMUI.currentContactId, otheruser),
generateMessage(IMUI.currentContactId, this.user),
generateMessage(IMUI.currentContactId, otheruser),
generateMessage(IMUI.currentContactId, this.user),
generateMessage(IMUI.currentContactId, this.user),
generateMessage(IMUI.currentContactId, otheruser),
{
id: "8ad7e98e-5225-4892-8131-4b2ee7797599",
type: "text",
status: "succeed",
sendTime: 1564926674646,
fromContactId: "superadmin",
fromUser: {
id: "hehe",
displayName: "I KNOEW",
avatar:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
},
content: "测试消息哦..."
},
{
id: "8ad7e98e-5225-4892-8131-4b2ee7797599",
type: "text",
status: "succeed",
sendTime: 1564926674646,
fromContactId: "superadmin",
fromUser: {
id: "superadmin",
displayName: "超级飞机",
avatar:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
},
content: "测试消息哦..."
},
{
id: "8ad7e98e-5225-4892-8131-4b2ee7797599",
type: "text",
status: "succeed",
sendTime: 1564926674646,
fromContactId: "superadmin",
fromUser: {
id: "hehe",
displayName: "I KNOEW",
avatar:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
},
content: "测试消息哦..."
},
{
id: "8ad7e98e-5225-4892-8131-4b2ee7797599",
type: "text",
status: "succeed",
sendTime: 1564926674646,
fromContactId: "superadmin",
fromUser: {
id: "superadmin",
displayName: "超级飞机",
avatar:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
},
content: "测试消息哦..."
},
{
id: "8ad7e98e-5225-4892-8131-4b2ee7797599",
type: "text",
status: "succeed",
sendTime: 1564926674646,
fromContactId: "superadmin",
fromUser: {
id: "hehe",
displayName: "I KNOEW",
avatar:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
},
content: "测试消息哦..."
},
{
id: "8ad7e98e-5225-4892-8131-4b2ee7797599",
type: "text",
status: "succeed",
sendTime: 1564926674646,
fromContactId: "superadmin",
fromUser: {
id: "superadmin",
displayName: "超级飞机",
avatar:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
},
content: "测试消息哦..."
...generateMessage(IMUI.currentContactId, this.user),
...{ status: "failed" }
}
];
next(messages);
console.log(messages);
let isEnd = false;
if (IMUI.getMessages(IMUI.currentContactId).length > 20) isEnd = true;
next(messages, isEnd);
},
handleChangeMenu() {
console.log("Event:change-menu");
@@ -636,4 +633,32 @@ body
color #999
&:active
color #000
.bar
text-align center
line-height 30px
background #fff
margin 15px
color #666
user-select none
font-size 12px
.cover
text-align center
user-select none
position absolute
top 50%
left 50%
transform translate(-50%,-50%)
i
font-size 84px
color #e6e6e6
p
font-size 18px
color #ddd
line-height 50px
.article-item
line-height 34px
cursor pointer
&:hover
text-decoration underline
color #318efd
</style>
examples/dist/css/index.2750e9e8.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
examples/dist/css/index.e7f71477.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
examples/dist/index.html
Vendored
+1 -1
View File
@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon-IMUI</title><link href=css/index.2750e9e8.css rel=preload as=style><link href=js/chunk-vendors.99d7e0a4.js rel=preload as=script><link href=js/index.e213c5da.js rel=preload as=script><link href=css/index.2750e9e8.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.99d7e0a4.js></script><script src=js/index.e213c5da.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon-IMUI</title><link href=css/index.e7f71477.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.f29ec4b1.js rel=preload as=script><link href=css/index.e7f71477.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.f29ec4b1.js></script></body></html>
examples/dist/js/chunk-vendors.99d7e0a4.js → examples/dist/js/chunk-vendors.e4810482.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/dist/js/index.e213c5da.js
Vendored
-1
View File
File diff suppressed because one or more lines are too long
examples/dist/js/index.f29ec4b1.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
packages/components/index.vue
+57 -72
View File
@@ -50,6 +50,7 @@ export default {
* 初始化时是否隐藏导航按钮上的头像
*/
hideMenuAvatar: Boolean,
hideMenu: Boolean,
user: {
type: Object,
default: () => {
@@ -198,37 +199,17 @@ export default {
file
);
},
_handleReachTop(next) {
// const messages = {
// id: "8ad7e98e-5225-4892-8131-4b2ee7797599",
// type: "text",
// status: "succeed",
// sendTime: 1564926674646,
// fromContactId: "superadmin",
// fromUser: {
// id: "hehe",
// displayName: "I KNOEW",
// avatar:
// "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4085009425,1005454674&fm=26&gp=0.jpg"
// },
// content: "测试消息哦..."
// };
_emitPullMessages(next) {
this.$emit(
"pull-messages",
this.currentContact,
(messages, isEnd = false) => {
this._addMessage(
Array(10).fill(messages[1]),
this.currentContactId,
0
);
this._addMessage(messages, this.currentContactId, 0);
CacheMessageLoaded.set(this.currentContactId, isEnd);
if (isEnd == true) this.$refs.messages.loaded();
next(isEnd);
}
);
// setTimeout(() => {
// CacheMessageLoaded.set(this.currentContactId, isEnd);
// }, 2000);
},
clearCacheContainer(name) {
CacheContactContainer.remove(name);
@@ -249,16 +230,17 @@ export default {
_renderMenu() {
const menuItem = this._renderMenuItem();
return (
<div class="lemon-menu">
{this.hideMenuAvatar == false && (
<div class="lemon-menu" v-show={!this.hideMenu}>
{
<lemon-avatar
v-show={!this.hideMenuAvatar}
on-click={e => {
console.log("menu avatar click");
}}
class="lemon-menu__avatar"
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=400062461,2874561526&fm=26&gp=0.jpg"
src={this.user.avatar}
/>
)}
}
{menuItem.top}
{this.$slots.menu}
<div class="lemon-menu__bottom">
@@ -301,15 +283,18 @@ export default {
},
_renderSidebarMessage() {
return this._renderSidebar(
this.lastMessages.map(contact => {
return this._renderContact(
{
contact,
timeFormat: this.contactTimeFormat
},
() => this.changeContact(contact.id)
);
}),
[
useScopedSlot(this.$scopedSlots["message-sidebar"]),
this.lastMessages.map(contact => {
return this._renderContact(
{
contact,
timeFormat: this.contactTimeFormat
},
() => this.changeContact(contact.id)
);
})
],
DEFAULT_MENU_LASTMESSAGES
);
},
@@ -342,23 +327,27 @@ export default {
_renderSidebarContact() {
let prevIndex;
return this._renderSidebar(
this.contacts.map(contact => {
contact.index = contact.index.replace(/\[[0-9]*\]/, "");
const node = [
contact.index !== prevIndex && (
<p class="lemon-sidebar__label">{contact.index}</p>
),
this._renderContact(
{
contact: contact,
simple: true
},
() => this.changeContact(contact.id)
)
];
prevIndex = contact.index;
return node;
}),
[
useScopedSlot(this.$scopedSlots["contact-sidebar"]),
this.contacts.map(contact => {
if (!contact.index) return;
contact.index = contact.index.replace(/\[[0-9]*\]/, "");
const node = [
contact.index !== prevIndex && (
<p class="lemon-sidebar__label">{contact.index}</p>
),
this._renderContact(
{
contact: contact,
simple: true
},
() => this.changeContact(contact.id)
)
];
prevIndex = contact.index;
return node;
})
],
DEFAULT_MENU_CONTACTS
);
},
@@ -425,7 +414,7 @@ export default {
ref="messages"
time-format={this.messageTimeFormat}
reverse-user-id={this.user.id}
on-reach-top={this._handleReachTop}
on-reach-top={this._emitPullMessages}
messages={this.currentMessages}
/>
<lemon-editor
@@ -436,7 +425,7 @@ export default {
</div>
);
nodes.push(
<div class={cls} v-show={!curact.id}>
<div class={cls} v-show={!curact.id && this.currentIsDefSidebar}>
{this.$slots.cover}
</div>
);
@@ -455,8 +444,7 @@ export default {
this.changeContact(curact.id, DEFAULT_MENU_LASTMESSAGES);
}}
>
{" "}
发送消息{" "}
发送消息
</lemon-button>
</div>,
curact
@@ -537,16 +525,11 @@ export default {
this.$refs.messages.resetLoadState();
}
if (!messages[contactId]) {
this.$emit(
"pull-messages",
this.currentContact,
(messages, isEnd) => {
this._addMessage(messages, contactId, 0);
this.messageViewToBottom();
}
);
this._emitPullMessages(isEnd => this.messageViewToBottom());
} else {
this.messageViewToBottom();
setTimeout(() => {
this.messageViewToBottom();
}, 0);
}
}
},
@@ -570,10 +553,11 @@ export default {
updateMessage(messageId, contactId, data) {
const index = this.findMessageIndexById(messageId, contactId);
if (index !== -1) {
messages[contactId][index] = {
...messages[contactId][index],
...data
};
messages[contactId][index] = Object.assign(
messages[contactId][index],
data
);
console.log('--------',messages[contactId][index]);
this.forceUpdateMessage(messageId);
}
},
@@ -684,6 +668,7 @@ export default {
*/
sortContacts() {
this.contacts.sort((a, b) => {
if (!a.index) return;
return a.index.localeCompare(b.index);
});
},
@@ -740,8 +725,8 @@ export default {
* 返回所有消息
* @return {Object<Contact.id,Message>}
*/
getMessages() {
return messages;
getMessages(contactId) {
return (contactId ? messages[contactId] : messages) || [];
},
// appendContact(data) {
// this._addContact(data, 0);
packages/components/message/basic.vue
+18 -7
View File
@@ -1,6 +1,7 @@
<script>
export default {
name: "lemonMessageBasic",
inject: ["IMUI"],
props: {
message: {
type: Object,
@@ -35,16 +36,16 @@ export default {
size={36}
shape="square"
src={fromUser.avatar}
on-click={() => {
console.log("message avatar click");
on-click={e => {
this._emitClick(e, "avatar");
}}
/>
</div>
<div class="lemon-message__inner">
<div class="lemon-message__title">
<span
on-click={() => {
console.log("message displayname click");
on-click={e => {
this._emitClick(e, "displayName");
}}
>
{fromUser.displayName}
@@ -53,13 +54,20 @@ export default {
</div>
<div
class="lemon-message__content"
on-click={() => {
console.log("message content click");
on-click={e => {
this._emitClick(e, "content");
}}
>
{this.useScopedSlots("content", this.message)}
</div>
<div class="lemon-message__status">{this._renderStatue(status)}</div>
<div
class="lemon-message__status"
on-click={e => {
this._emitClick(e, "status");
}}
>
{this._renderStatue(status)}
</div>
</div>
</div>
);
@@ -69,6 +77,9 @@ export default {
computed: {},
watch: {},
methods: {
_emitClick(e, key) {
this.IMUI.$emit("message-click", e, key, this.message);
},
_renderStatue(status) {
if (status == "going") {
return <i class="lemon-icon-loading lemonani-spin" />;
packages/components/message/text.vue
+1 -2
View File
@@ -1,9 +1,8 @@
<script>
import IMUIProxy from "mixins/IMUIProxy";
export default {
name: "lemonMessageText",
inheritAttrs: false,
mixins: [IMUIProxy],
inject: ["IMUI"],
render() {
return (
<lemon-message-basic
packages/components/messages.vue
+19 -13
View File
@@ -22,8 +22,8 @@ export default {
},
data() {
return {
loading: false,
loadend: false
_loading: false,
_loadend: false
};
},
render() {
@@ -32,10 +32,10 @@ export default {
<div
class={[
"lemon-messages__load",
`lemon-messages__load--${this.loadend ? "end" : "ing"}`
`lemon-messages__load--${this._loadend ? "end" : "ing"}`
]}
>
{this.loadend ? this._renderLoadEnd() : this._renderLoading()}
{this._loadend ? this._renderLoadEnd() : this._renderLoading()}
</div>
{this.messages.map((message, index) => {
const node = [];
@@ -86,35 +86,40 @@ export default {
return <i class="lemon-icon-loading lemonani-spin" />;
},
_renderLoadEnd() {
return <span>暂无消息</span>;
return <span>暂无更多消息</span>;
},
loaded() {
this._loadend = true;
},
resetLoadState() {
this.loading = false;
this.loadend = false;
this._loading = false;
this._loadend = false;
},
async _handleScroll(e) {
const { target } = e;
if (
target.scrollTop == 0 &&
this.loading == false &&
this.loadend == false
this._loading == false &&
this._loadend == false
) {
this.loading = true;
this._loading = true;
await this.$nextTick();
const hst = target.scrollHeight;
this.$emit("reach-top", async isEnd => {
await this.$nextTick();
target.scrollTop = target.scrollHeight - hst;
this.loading = false;
this.loadend = !!isEnd;
this._loading = false;
this._loadend = !!isEnd;
});
}
},
async scrollToBottom() {
await this.$nextTick();
const { wrap } = this.$refs;
if (wrap) wrap.scrollTop = wrap.scrollHeight;
if (wrap) {
wrap.scrollTop = wrap.scrollHeight;
}
}
},
created() {},
@@ -133,6 +138,7 @@ export default {
text-align center
font-size 12px
+e(load)
user-select none
font-size 12px
text-align center
color #999
packages/mixins/IMUIProxy.js
-4
View File
@@ -1,4 +0,0 @@
export default {
inject: ["IMUI"],
methods: {}
};