UPDATE
This commit is contained in:
fan
@@ -0,0 +1,178 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "lemonMessageBasic",
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
timeFormat: {
|
||||
type: Function,
|
||||
default: () => ""
|
||||
},
|
||||
reverse: Boolean,
|
||||
hiddenTitle: Boolean
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
render() {
|
||||
const { fromUser, status, sendTime } = this.message;
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
"lemon-message",
|
||||
{
|
||||
"lemon-message--reverse": this.reverse,
|
||||
"lemon-message--hidden-title": this.hiddenTitle
|
||||
}
|
||||
]}
|
||||
>
|
||||
<div class="lemon-message__avatar">
|
||||
<lemon-avatar
|
||||
size={36}
|
||||
shape="square"
|
||||
src={fromUser.avatar}
|
||||
on-click={() => {
|
||||
console.log("message avatar click");
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="lemon-message__inner">
|
||||
<div class="lemon-message__title">
|
||||
<span
|
||||
on-click={() => {
|
||||
console.log("message displayname click");
|
||||
}}
|
||||
>
|
||||
{fromUser.displayName}
|
||||
</span>
|
||||
<span class="lemon-message__time">{this.timeFormat(sendTime)}</span>
|
||||
</div>
|
||||
<div
|
||||
class="lemon-message__content"
|
||||
on-click={() => {
|
||||
console.log("message content click");
|
||||
}}
|
||||
>
|
||||
{this.useScopedSlots("content", this.message)}
|
||||
</div>
|
||||
<div class="lemon-message__status">{this._renderStatue(status)}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
computed: {},
|
||||
watch: {},
|
||||
methods: {
|
||||
_renderStatue(status) {
|
||||
if (status == "going") {
|
||||
return <i class="lemon-icon-loading lemonani-spin" />;
|
||||
} else if (status == "failed") {
|
||||
return (
|
||||
<i
|
||||
class="lemon-icon-prompt"
|
||||
title="重发消息"
|
||||
style={{
|
||||
color: "#ff2525",
|
||||
cursor: "pointer"
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return;
|
||||
},
|
||||
useScopedSlots(name, params, defVnode = "", context = this) {
|
||||
return context.$scopedSlots[name]
|
||||
? context.$scopedSlots[name](params)
|
||||
: defVnode;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
@import '~styles/utils/index'
|
||||
arrow()
|
||||
content ' '
|
||||
position absolute
|
||||
top 6px
|
||||
width 0
|
||||
height 0
|
||||
border 4px solid transparent
|
||||
+b(lemon-message)
|
||||
display flex
|
||||
padding 10px 0
|
||||
+e(time)
|
||||
color #bbb
|
||||
padding 0 4px
|
||||
+e(inner)
|
||||
position relative
|
||||
+e(avatar)
|
||||
padding-right 10px
|
||||
user-select none
|
||||
.lemon-avatar
|
||||
cursor pointer
|
||||
+e(title)
|
||||
display flex
|
||||
font-size 12px
|
||||
line-height 14px
|
||||
padding-bottom 6px
|
||||
user-select none
|
||||
color #999
|
||||
+e(content)
|
||||
font-size 14px
|
||||
line-height 20px
|
||||
padding 8px 10px
|
||||
background #fff
|
||||
border-radius 4px
|
||||
position relative
|
||||
margin 0 46px 0 0
|
||||
img
|
||||
video
|
||||
background #e9e9e9
|
||||
height 100px
|
||||
&:before
|
||||
arrow()
|
||||
left -4px
|
||||
border-left none
|
||||
border-right-color #fff
|
||||
+e(status)
|
||||
position absolute
|
||||
top 23px
|
||||
right 20px
|
||||
color #aaa
|
||||
font-size 20px
|
||||
+m(reverse)
|
||||
flex-direction row-reverse
|
||||
+e(title)
|
||||
flex-direction row-reverse
|
||||
+e(status)
|
||||
left 20px
|
||||
right auto
|
||||
+e(content)
|
||||
background #35d863
|
||||
margin 0 0 0 46px
|
||||
&:before
|
||||
arrow()
|
||||
left auto
|
||||
right -4px
|
||||
border-right none
|
||||
border-left-color #35d863
|
||||
+e(title)
|
||||
text-align right
|
||||
+e(avatar)
|
||||
padding-right 0
|
||||
padding-left 10px
|
||||
+m(hidden-title)
|
||||
+e(status)
|
||||
top 7px
|
||||
+e(title)
|
||||
display none
|
||||
+e(content)
|
||||
&:before
|
||||
top 14px
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "lemonMessageEvent",
|
||||
inheritAttrs: false,
|
||||
render() {
|
||||
const { content } = this.$attrs.message;
|
||||
return (
|
||||
<div class="lemon-message lemon-message-event">
|
||||
<span class="lemon-message-event__content">{content}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
@import '~styles/utils/index'
|
||||
+b(lemon-message-event)
|
||||
+e(content)
|
||||
user-select none
|
||||
display inline-block
|
||||
background #e9e9e9
|
||||
color #aaa
|
||||
font-size 12px
|
||||
margin 0 auto
|
||||
padding 5px 10px
|
||||
border-radius 4px
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script>
|
||||
import { formatByte } from "utils";
|
||||
export default {
|
||||
name: "lemonMessageFile",
|
||||
inheritAttrs: false,
|
||||
render() {
|
||||
return (
|
||||
<lemon-message-basic
|
||||
class="lemon-message-file"
|
||||
props={{ ...this.$attrs }}
|
||||
scopedSlots={{
|
||||
content: props => [
|
||||
<div class="lemon-message-file__inner">
|
||||
<p class="lemon-message-file__name">{props.fileName}</p>
|
||||
<p class="lemon-message-file__byte">
|
||||
{formatByte(props.fileSize)}
|
||||
</p>
|
||||
</div>,
|
||||
<div class="lemon-message-file__sfx">
|
||||
<i class="lemon-icon-attah" />
|
||||
</div>
|
||||
]
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
@import '~styles/utils/index'
|
||||
+b(lemon-message-file)
|
||||
+b(lemon-message)
|
||||
+e(content)
|
||||
display flex
|
||||
cursor pointer
|
||||
width 200px
|
||||
background #fff
|
||||
padding 12px 18px
|
||||
overflow hidden
|
||||
p
|
||||
margin 0
|
||||
+e(tip)
|
||||
display none
|
||||
+e(inner)
|
||||
flex 1
|
||||
+e(name)
|
||||
font-size 14px
|
||||
+e(byte)
|
||||
font-size 12px
|
||||
color #aaa
|
||||
+e(sfx)
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
font-weight bold
|
||||
user-select none
|
||||
font-size 34px
|
||||
color #ccc
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "lemonMessageImage",
|
||||
inheritAttrs: false,
|
||||
render() {
|
||||
return (
|
||||
<lemon-message-basic
|
||||
class="lemon-message-image"
|
||||
props={{ ...this.$attrs }}
|
||||
scopedSlots={{
|
||||
content: props => <img src={props.content} />
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
@import '~styles/utils/index'
|
||||
+b(lemon-message-image)
|
||||
+b(lemon-message)
|
||||
+e(content)
|
||||
padding 0
|
||||
cursor pointer
|
||||
overflow hidden
|
||||
img
|
||||
max-width 100%
|
||||
min-width 100px
|
||||
display block
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script>
|
||||
import IMUIProxy from "mixins/IMUIProxy";
|
||||
export default {
|
||||
name: "lemonMessageText",
|
||||
inheritAttrs: false,
|
||||
mixins: [IMUIProxy],
|
||||
render() {
|
||||
return (
|
||||
<lemon-message-basic
|
||||
class="lemon-message-text"
|
||||
props={{ ...this.$attrs }}
|
||||
scopedSlots={{
|
||||
content: props => {
|
||||
const content = this.IMUI.replaceEmojiName(props.content);
|
||||
return <span domProps={{ innerHTML: content }} />;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
@import '~styles/utils/index'
|
||||
+b(lemon-message-text)
|
||||
+b(lemon-message)
|
||||
+e(content)
|
||||
img
|
||||
width 18px
|
||||
height 18px
|
||||
display inline-block
|
||||
background transparent
|
||||
padding 0 2px
|
||||
vertical-align middle
|
||||
</style>
|
||||
Reference in New Issue
Block a user