UPDATE
This commit is contained in:
fan
+1
-4
@@ -1,6 +1,3 @@
|
||||
import "./plugins";
|
||||
//import "./element-ui";
|
||||
|
||||
import LemonTabs from "./components/tabs";
|
||||
import LemonPopover from "./components/popover";
|
||||
import LemonButton from "./components/button";
|
||||
@@ -32,7 +29,7 @@ const components = [
|
||||
LemonMessageText,
|
||||
lemonMessageImage,
|
||||
lemonMessageFile,
|
||||
lemonMessageEvent,
|
||||
lemonMessageEvent
|
||||
];
|
||||
const install = (Vue, opts = {}) => {
|
||||
components.forEach(component => {
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
/**
|
||||
*
|
||||
textMessage = {
|
||||
msgId: "msgid",
|
||||
status: "send_going",
|
||||
type: "text",
|
||||
isOutgoing: true,
|
||||
text: "text",
|
||||
fromUser: {},
|
||||
extras: {}// option
|
||||
}
|
||||
|
||||
imageMessage = {
|
||||
msgId: "msgid",
|
||||
type: "image",
|
||||
isOutGoing: true,
|
||||
mediaPath: "image path",
|
||||
fromUser: {}，
|
||||
extras: {}// option
|
||||
}
|
||||
|
||||
videoMessage = { // video message
|
||||
msgId: "msgid",
|
||||
status: "send_failed",
|
||||
type: "video",
|
||||
isOutGoing: true,
|
||||
druation: number,
|
||||
mediaPath: "voice path",
|
||||
fromUser: {},
|
||||
extras: {}// option
|
||||
}
|
||||
customMessage = { // custom message
|
||||
msgId: "msgid",
|
||||
type: "custom",
|
||||
status: "send_failed",
|
||||
isOutgoing: true,
|
||||
contentSize: {height: 100, width: 100},
|
||||
content: "<h1>custom message will render html string</h1>", // content is html format, avoid to use <script>
|
||||
fromUser: {},
|
||||
extras: {}// option
|
||||
}
|
||||
eventMessage = { // event message
|
||||
msgId: "msgid",
|
||||
type: "event",
|
||||
text: "the event text"
|
||||
}
|
||||
|
||||
*/
|
||||
@@ -1,92 +0,0 @@
|
||||
Data
|
||||
# 联系人数据
|
||||
contact:{
|
||||
// 联系人唯一ID
|
||||
id: "1",
|
||||
// 名字
|
||||
displayName: "范佳奕",
|
||||
// 头像
|
||||
avatar:
|
||||
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4259300811,497831842&fm=26&gp=0.jpg",
|
||||
// 类型 single | many
|
||||
type: "single",
|
||||
// 联系人索引， 默认按照 localeCompare 排序， 指定顺序 '[1]群组'
|
||||
index: "B",
|
||||
// 最近一条消息
|
||||
message: {
|
||||
// 未读数量 , true 显示红点
|
||||
unread: 0,
|
||||
// 发送时间
|
||||
sendTime: 1,
|
||||
// 内容
|
||||
content: "2",
|
||||
// 类型 voice | file | video | image | text
|
||||
type: "image"
|
||||
}
|
||||
}
|
||||
# 消息数据
|
||||
message:{
|
||||
// 消息唯一ID
|
||||
id: "123",
|
||||
// 消息状态 going | succeed | failed
|
||||
status: "succeed",
|
||||
// 消息类型 voice | file | video | image | text
|
||||
type: "image",
|
||||
// 发送时间
|
||||
sendTime: 12312312312,
|
||||
// 消息内容 | 消息链接
|
||||
content: "asdas",
|
||||
// 接收方 ID 单人聊天(联系人ID) | 多人聊天(群ID)
|
||||
toContactId: "123",
|
||||
// type = file 文件大小
|
||||
fileSize: 1231,
|
||||
// type = file 文件名称
|
||||
fileName: 'asdasd.doc'
|
||||
// 发送消息的联系人
|
||||
fromUser: { id: "123", displayName: "123", avatar: "123", type: "single" }
|
||||
}
|
||||
# 左侧按钮配置
|
||||
menu:[{
|
||||
# 指定 menu 唯一名称，保留字段 contacts(通讯录) lastMessages(最近消息)
|
||||
name: "123",
|
||||
# 鼠标停留显示文字
|
||||
title: "通讯录",
|
||||
# 标记未读数, 数字显示具体值， true 显示红点
|
||||
unread: 0,
|
||||
# 按钮的DOM元素
|
||||
render: menu => {
|
||||
return <span>T</span>;
|
||||
},
|
||||
# 点击按钮打开的页面，如果 name 为保留字段，该属性失效
|
||||
renderContainer: () => {
|
||||
return <lemon-contact contact={this.lastMessages[0]} />;
|
||||
},
|
||||
# 按钮点击事件，会阻止默认的行为，调用 next() 进入下一步
|
||||
click: next => {
|
||||
next();
|
||||
},
|
||||
# 是否为底部按钮
|
||||
isBottom: false
|
||||
}]
|
||||
emoji:[{
|
||||
label: "表情",
|
||||
children: [
|
||||
{
|
||||
name: "1f600",
|
||||
title: "微笑",
|
||||
src: "https://twemoji.maxcdn.com/2/72x72/1f600.png"
|
||||
},
|
||||
]
|
||||
}]
|
||||
|
||||
Methods
|
||||
# 初始化左侧 menu 数据
|
||||
initMenus(data:[menu])
|
||||
# 初始化联系人数据
|
||||
initContacts(data:[contact])
|
||||
# 修改联系人数据
|
||||
updateContact(contactId:联系人ID,data:联系人数据，会与现有的数据合并)
|
||||
# 切换 menu
|
||||
changeMenu(menuName)
|
||||
# 打开一个聊天窗口 传入 contactId 或 contact(如果当前不存在这个联系人，根据此数据新建一个)
|
||||
openMessage(contactId | contact)
|
||||
@@ -1,58 +1,3 @@
|
||||
//@import './normalize';
|
||||
@import './animate';
|
||||
@import './icons';
|
||||
|
||||
// .lemon-tabs.ant-tabs-small.ant-tabs-card
|
||||
// .ant-tabs-card-bar
|
||||
// .ant-tabs-nav-container
|
||||
// height 30px
|
||||
// .ant-tabs-tab
|
||||
// line-height 28px
|
||||
// font-size 12px
|
||||
// .ant-tabs-content
|
||||
// .ant-tabs-tabpane
|
||||
// padding 10px
|
||||
|
||||
|
||||
// .lemon-tabs.ant-tabs-card
|
||||
// background #eee
|
||||
// overflow hidden
|
||||
// >.ant-tabs-content
|
||||
// height 120px
|
||||
// margin-top -16px
|
||||
// background #f6f6f6
|
||||
// >.ant-tabs-tabpane
|
||||
// background #f6f6f6
|
||||
// padding 16px
|
||||
// >.ant-tabs-bar
|
||||
// border-color #f6f6f6
|
||||
// user-select none
|
||||
// .ant-tabs-tab
|
||||
// border-color transparent
|
||||
// background transparent
|
||||
// border none
|
||||
// border-radius 0
|
||||
// margin 0
|
||||
// .ant-tabs-tab-active
|
||||
// border-color #f6f6f6
|
||||
// background #f6f6f6
|
||||
// .ant-tabs-tab-arrow-show
|
||||
// top -2px
|
||||
.lemon-tabs.ant-tabs-card
|
||||
background #eee
|
||||
border-radius 4px
|
||||
overflow hidden
|
||||
.ant-tabs-content
|
||||
background #f6f6f6
|
||||
.ant-tabs-bottom-bar
|
||||
margin-top 0
|
||||
border 0
|
||||
.ant-tabs-card-bar
|
||||
.ant-tabs-tab
|
||||
border-color transparent
|
||||
background transparent
|
||||
border none
|
||||
border-radius 0
|
||||
margin-right 0
|
||||
.ant-tabs-tab-active
|
||||
background #f6f6f6
|
||||
@import './icons';
|
||||
Reference in New Issue
Block a user