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
| <template>
| <div class="chartBox">
| <div class="ChartBox">
| <JwChat-index :taleList="list" @enter="bindEnter" v-model="inputMsg" :toolConfig="tool">
|
| </JwChat-index>
| </div>
| </div>
| <!-- -->
| </template>
|
| <script>
| export default {
| name: 'jwChat',
| data() {
| return {
| inputMsg: '',
| list: [
|
| ],
| tool: {
| show: ['file', 'history', 'img'],
| callback: this.toolEvent
| },
|
|
|
| config: {
| img: '/image/cover.png',
| name: 'JwChat',
| dept: '最简单、最便捷',
| callback: this.bindCover
| },
| }
| },
| methods: {
| bindEnter() {
| const msg = this.inputMsg
| if (!msg) return;
| const msgObj = {
| "date": this.getDate(),
| "text": { "text": msg },
| "mine": true,
| "name": "JwChat",
| "img": "/image/three.jpeg"
| }
| this.list.push(msgObj)
| this.list.push({
| "date": this.getDate(),
| "text": { "text": "<img data-src='/image/three.jpg'/>" },
| "mine": false,
| "name": "只盼流星不盼雨",
| "img": "/image/two.jpeg"
| })
| },
| getDate() {
| var now = new Date();
| var year = now.getFullYear(); //获取完整的年份(4位,1970-????)
| var month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
| var day = now.getDate(); //获取当前日(1-31)
| var hour = now.getHours(); //获取当前小时数(0-23)
| var minute = now.getMinutes(); //获取当前分钟数(0-59)
| var second = now.getSeconds(); //获取当前秒数(0-59)
| return year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;
| },
| toolEvent(type) {
| console.log('tools', type)
| },
| bindCover(type) {
| console.log('header', type)
| },
| rightClick(type) {
| console.log('rigth', type)
| },
| bindTalk(play) {
| console.log('talk', play)
| },
|
| }
| }
| </script>
| <style scoped>
| /* .rightSlot {
| width: 100%;
| height: 100%;
| overflow: hidden;
| flex-direction: column;
| } */
| .chartBox {
| width: 100%;
| height: 100vh;
| background: black;
| position: relative;
|
| }
| </style>
| <style>
| .divboder {
| display: flex;
|
| }
|
| .tabel_border {
| border: 1px solid gray;
| width:100%;
| }
|
| .tabel_border th {
| padding: 5px;
| font-size: 14px;
| text-align: center;
| border: 1px solid gray;
| }
|
|
| </style>
|
|
|
