1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| <template>
| <div class="chatPage">
| <div class="taleBox" ref="taleNode">
| <chatList :list="taleList" @load="loadDone" />
| </div>
| <div class="toolBox">
| <!-- <tools :tools="toolConfig" class="tools" @emoji="bindEmoji" /> -->
| <EnterBox @submit="enter" v-model="msg" />
| </div>
| </div>
| </template>
|
| <script>
| import EnterBox from './enterBox.vue'
| import chatList from './chatList.vue'
| import tools from './tools.vue'
| export default {
| name: "JwChat",
| components: { EnterBox, chatList, tools },
| props: {
| taleList: {
| type: Array,
| default: () => ([])
| },
| scroll: {
| type: Number,
| default: -1
| },
| height: {
| default: '500px'
| },
| width: {
| default: '550px'
| },
| value: {
| default: ''
| },
| toolConfig: {
| type: Object,
| default: () => ({
| show: ['file', 'video', 'img'],
| callback: Function
| })
| }
| },
| data() {
| return {
| msg: ''
| }
| },
| watch: {
| scroll(newVal) {
| if (typeof (newVal) === 'number') {
| this.setScroll(newVal)
| }
| },
| value: {
| handler() {
| this.msg = this.value;
| },
| immediate: true
| },
| msg: {
| handler(newVal) {
| if (newVal) {
| this.$emit('input', this.msg);
| }
| },
| immediate: true
| }
| },
| computed: {
| setStyle() {
| let height = this.height
| let width = this.width
| if (`${height}`.match(/\d$/)) {
| height += 'px'
| }
| if (`${width}`.match(/\d$/)) {
| width += 'px'
| }
| const style = { height, width }
| return style
| }
| },
| methods: {
| bindEmoji(emoji) {
| this.msg = emoji
| },
| loadDone(boolean) {
| if (boolean) {
| this.setScroll()
| }
| },
| setScroll(count = this.$refs.taleNode.scrollHeight) {
| //滚动条一直处于下方
| this.$nextTick(() => {
| this.$refs.taleNode.scrollTop = count
| })
| },
| enter(msg) {
| this.$emit('enter', msg)
| this.setScroll()
| }
| },
| }
| </script>
| <style scoped>
| .chatPage {
| width: 100% !important;
| height: 100% !important;
| position: absolute;
| }
| .taleBox {
| height: calc(100% - 140px);
| overflow: auto;
| overflow-x: hidden;
| }
|
| .toolBox {
| height: 140px;
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
| }
| </style>
|
|
