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-25 21:59:25 +08:00
parent 2ddf2c1e06
commit 58fdba17a0
8 changed files with 151 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/App.vue
+138 -34
View File
@@ -1,35 +1,78 @@
<template>
<div id="app">
<lemon-imui
:user="user"
class="imui-center"
ref="IMUI"
@change-menu="handleChangeMenu"
@change-contact="handleChangeContact"
@pull-messages="handlePullMessages"
@send="handleSend"
>
<template #cover>
<h1 style="text-indent:20px">自定义封面内容</h1>
</template>
<!-- <template #contact-info="contact">
<div class="imui-center">
<lemon-imui
:user="user"
ref="IMUI"
@change-menu="handleChangeMenu"
@change-contact="handleChangeContact"
@pull-messages="handlePullMessages"
@send="handleSend"
>
<template #cover>
<h1 style="text-indent:20px">自定义封面内容</h1>
</template>
<!-- <template #contact-info="contact">
<span style="color:blue">contact-info {{ contact }}</span>
</template> -->
<!--
<!--
<template #drawer="contact">
<h1>自定义抽屉内容</h1>
<p>{{ contact }}</p>
</template>
-->
<template #contact-title="contact">
<span>{{ contact.displayName }}</span>
<small class="more" @click="changeDrawer(contact)">&#8230;</small>
</template>
</lemon-imui>
<template #contact-title="contact">
<span>{{ contact.displayName }}</span>
<small class="more" @click="changeDrawer(contact)">&#8230;</small>
</template>
</lemon-imui>
<div class="action">
<lemon-button @click="currentAppendMessage"
>在当前窗口发送消息</lemon-button
>
<lemon-button @click="appendMessage">指定联系人发送消息</lemon-button>
<lemon-button @click="updateContact">修改联系人信息</lemon-button>
</div>
</div>
</div>
</template>
<script>
const getTime = () => {
return new Date().getTime();
};
const generateRandId = () => {
return Number(
Math.random()
.toString()
.substr(3, length) + Date.now()
).toString(36);
};
const generateRandWord = () => {
return Math.random()
.toString(36)
.substr(2);
};
const generateMessage = () => {
return {
id: generateRandId(),
status: "succeed",
type: "text",
sendTime: getTime(),
content: "随机回复：" + generateRandWord(),
toContactId: "123",
//fileSize: 1231,
//fileName: "asdasd.doc",
fromUser: {
id: "222",
displayName: "系统测试",
avatar:
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1820523987,3798556096&fm=26&gp=0.jpg"
}
};
};
export default {
name: "app",
data() {
@@ -56,7 +99,7 @@ export default {
};
const contactData2 = {
id: "2",
displayName: "马林",
displayName: "狗蛋Li。",
avatar: "https://img.ivsky.com/img/tupian/li/201902/27/yanjing_meinv.jpg",
type: "single",
index: "B",
@@ -72,12 +115,14 @@ export default {
};
const contactData3 = {
id: "3",
displayName: "范君",
displayName: "铁牛",
avatar:
"https://img.ivsky.com/img/tupian/li/201903/21/huahuan_xiaonvhai.jpg",
type: "many",
index: "C",
lastSendTime: 3
unread: 32,
lastSendTime: 3,
lastContent: "你好123"
};
const { IMUI } = this.$refs;
@@ -117,6 +162,25 @@ export default {
];
IMUI.initContacts(data);
IMUI.initMenus([
{
name: "lastMessages"
},
{
name: "contacts"
},
{
title: "自定义按钮",
unread: 0,
click: () => {
alert("点击了自定义按钮");
},
render: menu => {
return <span>T</span>;
},
isBottom: true
}
]);
IMUI.initEmoji([
{
label: "表情",
@@ -403,23 +467,53 @@ export default {
]
}
]);
setTimeout(() => {
IMUI.updateContact("3", {
unread: 100,
//displayName: "123",
lastSendTime: 3,
lastContent: "你好123"
});
}, 2000);
},
methods: {
_addUnread(id, message) {
const { IMUI } = this.$refs;
IMUI.updateContact(id, {
unread: "+1",
lastSendTime: getTime(),
lastContent: IMUI.lastContentRender(message)
});
},
appendMessage() {
const id = "3";
const { IMUI } = this.$refs;
const message = generateMessage();
IMUI.appendMessage(message, id);
this._addUnread(id, message);
},
currentAppendMessage() {
const { IMUI } = this.$refs;
const message = generateMessage();
IMUI.appendMessage(message);
this._addUnread(IMUI.currentContact.id, message);
},
updateContact() {
this.$refs.IMUI.updateContact("3", {
unread: 10,
displayName: generateRandWord(),
lastSendTime: getTime(),
lastContent: "修改昵称为随机字母"
});
},
changeDrawer(contact) {
this.$refs.IMUI.changeDrawer(() => {
return [<h2>自定义抽屉</h2>, contact.displayName];
return (
<div class="drawer-content">
<p>
<b>自定义抽屉</b>
</p>
<p>{contact.displayName}</p>
</div>
);
});
},
handleChangeContact(contact) {
console.log("Event:change-contact");
this.$refs.IMUI.updateContact(contact.id, {
//displayName: "123",
unread: 0
@@ -427,11 +521,13 @@ export default {
this.$refs.IMUI.closeDrawer();
},
handleSend(message, next, file) {
console.log("Event:send");
setTimeout(() => {
next();
}, 1000);
},
handlePullMessages(contact, next) {
console.log("Event:pull-messages");
const messages = [
{
id: "8ad7e98e-5225-4892-8131-4b2ee7797599",
@@ -520,7 +616,9 @@ export default {
];
next(messages);
},
handleChangeMenu() {},
handleChangeMenu() {
console.log("Event:change-menu");
},
openCustomContainer() {}
}
};
@@ -528,12 +626,18 @@ export default {
<style lang="stylus">
body
background #384558 !important
background #3d495c !important
.action
margin-top 30px
button
margin-right 10px
.imui-center
position absolute
top 50%
left 50%
transform translate(-50%,-50%)
.drawer-content
padding 15px
.more
font-size 32px
line-height 18px
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.f11a88a4.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.f11a88a4.css rel=preload as=style><link href=js/chunk-vendors.99d7e0a4.js rel=preload as=script><link href=js/index.8f19e614.js rel=preload as=script><link href=css/index.f11a88a4.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.8f19e614.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.2750e9e8.css rel=preload as=style><link href=js/chunk-vendors.99d7e0a4.js rel=preload as=script><link href=js/index.5f6fc069.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.5f6fc069.js></script></body></html>
examples/dist/js/index.5f6fc069.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
examples/dist/js/index.8f19e614.js
Vendored
-1
View File
File diff suppressed because one or more lines are too long
package.json
+1 -1
View File
@@ -3,9 +3,9 @@
"version": "1.0.2",
"main": "dist/index.umd.min.js",
"scripts": {
"build-examples": "vue-cli-service build --dest examples/dist examples/main.js",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --target lib --name index packages/index.js",
"build-examples": "vue-cli-service build --dest examples/dist examples/main.js",
"lint": "vue-cli-service lint"
},
"dependencies": {
packages/components/index.vue
+9 -7
View File
@@ -164,7 +164,7 @@ export default {
this.appendMessage(message);
this._emitSend(message, () => {
this.updateContact(message.toContactId, {
lastContent: lastContentRender[message.type].call(this, message),
lastContent: this.lastContentRender(message),
lastSendTime: message.sendTime
});
});
@@ -191,7 +191,7 @@ export default {
message,
() => {
this.updateContact(message.toContactId, {
lastContent: lastContentRender[message.type].call(this, message),
lastContent: this.lastContentRender(message),
lastSendTime: message.sendTime
});
},
@@ -493,6 +493,9 @@ export default {
setLastContentRender(messageType, render) {
lastContentRender[messageType] = render;
},
lastContentRender(message) {
return lastContentRender[message.type].call(this, message);
},
/**
* 将字符串内的 EmojiItem.name 替换为 img
* @param {String} str 被替换的字符串
@@ -789,11 +792,10 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
height 580px
display flex
font-size 14px
border-radius 5px
//mask-image radial-gradient(circle, white 100%, black 100%)
background #efefef
transition all .4s bezier
border-radius 4px
position relative
p
margin 0
img
@@ -866,13 +868,13 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
top 0
right 0
overflow hidden
width drawer-width
background #f4f4f4
transition width .4s bezier
height 100%
z-index 1
//border-left 1px solid #e9e9e9
width drawer-width
height 100%
box-sizing border-box
//border-left 1px solid #e9e9e9
+b(lemon-wrapper)
+m(drawer-show)
+b(lemon-drawer)