增加width、height、theme、simple参数，修复快捷发送可以发送空消息的问题，优化文档
This commit is contained in:
fan
@@ -10,6 +10,7 @@
|
|||||||
<lemon-imui
|
<lemon-imui
|
||||||
:user="user"
|
:user="user"
|
||||||
ref="IMUI"
|
ref="IMUI"
|
||||||
|
:theme="theme"
|
||||||
:hide-menu="hideMenu"
|
:hide-menu="hideMenu"
|
||||||
:hide-menu-avatar="hideMenuAvatar"
|
:hide-menu-avatar="hideMenuAvatar"
|
||||||
:hide-message-name="hideMessageName"
|
:hide-message-name="hideMessageName"
|
||||||
@@ -57,6 +58,8 @@
|
|||||||
>切换头像显示</lemon-button
|
>切换头像显示</lemon-button
|
||||||
>
|
>
|
||||||
<lemon-button @click="changeMessageNameVisible">切换聊天窗口内联系人名字显示</lemon-button>
|
<lemon-button @click="changeMessageNameVisible">切换聊天窗口内联系人名字显示</lemon-button>
|
||||||
|
<br/>
|
||||||
|
<lemon-button @click="changeTheme">切换主题，当前主题：{{this.theme}}</lemon-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -220,6 +223,34 @@
|
|||||||
<td width="100">-</td>
|
<td width="100">-</td>
|
||||||
<td>{id: "1",displayName: "测试",avatar: "url"};</td>
|
<td>{id: "1",displayName: "测试",avatar: "url"};</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="150">width</td>
|
||||||
|
<td width="350">宽度</td>
|
||||||
|
<td width="150">String</td>
|
||||||
|
<td width="100">850px</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="150">height</td>
|
||||||
|
<td width="350">高度</td>
|
||||||
|
<td width="150">String</td>
|
||||||
|
<td width="100">580px</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="150">theme</td>
|
||||||
|
<td width="350">主题</td>
|
||||||
|
<td width="150">default | blue</td>
|
||||||
|
<td width="100">default</td>
|
||||||
|
<td>主题颜色</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width="150">simple</td>
|
||||||
|
<td width="350">精简模式</td>
|
||||||
|
<td width="150">Boolean</td>
|
||||||
|
<td width="100">false</td>
|
||||||
|
<td>精简模式下左侧的导航和联系人列表会隐藏，初始化时需要手动调用 changeContact 切换到聊天视图。</td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>messageTimeFormat</td>
|
<td>messageTimeFormat</td>
|
||||||
<td>消息列表时间格式化函数</td>
|
<td>消息列表时间格式化函数</td>
|
||||||
@@ -652,6 +683,7 @@ export default {
|
|||||||
name: "app",
|
name: "app",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
theme:'default',
|
||||||
tip:tip,
|
tip:tip,
|
||||||
packageData,
|
packageData,
|
||||||
hideMenuAvatar: false,
|
hideMenuAvatar: false,
|
||||||
@@ -705,6 +737,9 @@ export default {
|
|||||||
|
|
||||||
const { IMUI } = this.$refs;
|
const { IMUI } = this.$refs;
|
||||||
|
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// IMUI.changeContact('contact-1');
|
||||||
|
// },2000);
|
||||||
|
|
||||||
let data = [
|
let data = [
|
||||||
{ ...contactData1 },
|
{ ...contactData1 },
|
||||||
@@ -1117,6 +1152,9 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
changeTheme(){
|
||||||
|
this.theme = this.theme == 'default' ? 'blue' : 'default';
|
||||||
|
},
|
||||||
scrollToTop(){
|
scrollToTop(){
|
||||||
document.body.scrollIntoView();
|
document.body.scrollIntoView();
|
||||||
},
|
},
|
||||||
|
|||||||
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -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.895c486f.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.26d175a9.js rel=preload as=script><link href=css/index.895c486f.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.26d175a9.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.4f9dd622.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.7a6ff8e6.js rel=preload as=script><link href=css/index.4f9dd622.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.7a6ff8e6.js></script></body></html>
|
||||||
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "lemon-imui",
|
"name": "lemon-imui",
|
||||||
"version": "1.0.8",
|
"version": "1.0.9",
|
||||||
"main": "dist/index.umd.min.js",
|
"main": "dist/index.umd.min.js",
|
||||||
"description": "基于 VUE2.0 的 IM 聊天组件",
|
"description": "基于 VUE2.0 的 IM 聊天组件",
|
||||||
"homepage": "https://github.com/fanjyy/lemon-imui",
|
"homepage": "https://github.com/fanjyy/lemon-imui",
|
||||||
|
|||||||
@@ -220,7 +220,7 @@ export default {
|
|||||||
},
|
},
|
||||||
_handleKeydown(e) {
|
_handleKeydown(e) {
|
||||||
const { keyCode,ctrlKey } = e;
|
const { keyCode,ctrlKey } = e;
|
||||||
if (keyCode == 13 && ctrlKey === true) {
|
if (keyCode == 13 && ctrlKey === true && this.submitDisabled == false) {
|
||||||
this._handleSend();
|
this._handleSend();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -26,6 +26,22 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
width:{
|
||||||
|
type:String,
|
||||||
|
default:"850px",
|
||||||
|
},
|
||||||
|
height:{
|
||||||
|
type:String,
|
||||||
|
default:"580px",
|
||||||
|
},
|
||||||
|
theme:{
|
||||||
|
type:String,
|
||||||
|
default:'default',
|
||||||
|
},
|
||||||
|
simple:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false,
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 消息时间格式化规则
|
* 消息时间格式化规则
|
||||||
*/
|
*/
|
||||||
@@ -70,13 +86,17 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return this._renderWrapper([
|
const nodes = []
|
||||||
|
if(this.simple == false){
|
||||||
|
nodes.push(...[
|
||||||
this._renderMenu(),
|
this._renderMenu(),
|
||||||
this._renderSidebarMessage(),
|
this._renderSidebarMessage(),
|
||||||
this._renderSidebarContact(),
|
this._renderSidebarContact(),
|
||||||
this._renderContainer(),
|
])
|
||||||
this._renderDrawer()
|
}
|
||||||
]);
|
nodes.push(this._renderContainer())
|
||||||
|
nodes.push(this._renderDrawer())
|
||||||
|
return this._renderWrapper(nodes);
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.initMenus();
|
this.initMenus();
|
||||||
@@ -215,8 +235,13 @@ export default {
|
|||||||
_renderWrapper(children) {
|
_renderWrapper(children) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
style={{
|
||||||
|
width:this.width,
|
||||||
|
height:this.height
|
||||||
|
}}
|
||||||
class={[
|
class={[
|
||||||
"lemon-wrapper",
|
"lemon-wrapper",
|
||||||
|
`lemon-wrapper--theme-${this.theme}`,
|
||||||
this.drawerVisible && "lemon-wrapper--drawer-show"
|
this.drawerVisible && "lemon-wrapper--drawer-show"
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
@@ -764,14 +789,11 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
wrapper-width = 850px
|
|
||||||
drawer-width = 200px
|
drawer-width = 200px
|
||||||
bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
|
bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
|
||||||
@import '~styles/utils/index'
|
@import '~styles/utils/index'
|
||||||
|
|
||||||
+b(lemon-wrapper)
|
+b(lemon-wrapper)
|
||||||
width wrapper-width
|
|
||||||
height 580px
|
|
||||||
display flex
|
display flex
|
||||||
font-size 14px
|
font-size 14px
|
||||||
//mask-image radial-gradient(circle, white 100%, black 100%)
|
//mask-image radial-gradient(circle, white 100%, black 100%)
|
||||||
@@ -872,4 +894,33 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
|
|||||||
font-weight normal
|
font-weight normal
|
||||||
margin 10px 0 20px 0
|
margin 10px 0 20px 0
|
||||||
user-select none
|
user-select none
|
||||||
|
.lemon-wrapper--theme-blue
|
||||||
|
.lemon-message__content
|
||||||
|
background #f3f3f3
|
||||||
|
&::before
|
||||||
|
border-right-color #f3f3f3
|
||||||
|
.lemon-message--reverse .lemon-message__content
|
||||||
|
background #e6eeff
|
||||||
|
&::before
|
||||||
|
border-left-color #e6eeff
|
||||||
|
.lemon-container
|
||||||
|
background #fff
|
||||||
|
.lemon-sidebar
|
||||||
|
background #f9f9f9
|
||||||
|
.lemon-contact
|
||||||
|
background #f9f9f9
|
||||||
|
&:hover:not(.lemon-contact--active)
|
||||||
|
background #f1f1f1
|
||||||
|
&--active
|
||||||
|
background #e9e9e9
|
||||||
|
.lemon-menu
|
||||||
|
background #096bff
|
||||||
|
.lemon-menu__item
|
||||||
|
color rgba(255,255,255,0.4)
|
||||||
|
&:hover:not(.lemon-menu__item--active)
|
||||||
|
color rgba(255,255,255,0.6)
|
||||||
|
&--active
|
||||||
|
color #fff
|
||||||
|
text-shadow 0 0 10px rgba(2,48,118,0.4)
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user