Skip to content

Commit 7ac6bbc

Browse files
tangbctangbc
committed
Add chat-room example
1 parent 96dac4d commit 7ac6bbc

File tree

8 files changed

+412
-1
lines changed

8 files changed

+412
-1
lines changed

‎example/src/App.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<router-link to="/horizontal">horizontal</router-link>
88
<router-link to="/infinite-loading">infinite loading</router-link>
99
<router-link to="/keep-state">keep state</router-link>
10+
<router-link to="/chat-room">chat room</router-link>
1011
</div>
1112
<router-view/>
1213
</div>
@@ -57,6 +58,23 @@ body {
5758
5859
.scroll-touch {
5960
-webkit-overflow-scrolling: touch;
61+
/* width */
62+
&::-webkit-scrollbar {
63+
width: 8px;
64+
}
65+
/* Track */
66+
&::-webkit-scrollbar-track {
67+
background: #f4f4f4;
68+
}
69+
/* Handle */
70+
&::-webkit-scrollbar-thumb {
71+
border-radius: 0px;
72+
background: rgba(0, 0, 0, 0.12);
73+
}
74+
/* Handle on hover */
75+
&::-webkit-scrollbar-thumb:hover {
76+
background: #b2b2b2;
77+
}
6078
}
6179
6280
code {

‎example/src/common/gen-unique-id.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
// gen a simple unique id.
22
export default (prefix) => {
3-
return `${prefix}$${Math.random().toString(16).substr(5)}`
3+
return `${prefix}$${Math.random().toString(16).substr(9)}`
44
}

‎example/src/common/user.js

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import { Random } from './mock'
2+
3+
const topTypeArr = [
4+
'NoHair',
5+
'Eyepatch',
6+
'Hat',
7+
'Hijab',
8+
'Turban',
9+
'WinterHat1',
10+
'WinterHat2',
11+
'WinterHat3',
12+
'WinterHat4',
13+
'LongHairBigHair',
14+
'LongHairBob',
15+
'LongHairBun',
16+
'LongHairCurly',
17+
'LongHairCurvy',
18+
'LongHairDreads',
19+
'LongHairFrida',
20+
'LongHairFro',
21+
'LongHairFroBand',
22+
'LongHairNotTooLong',
23+
'LongHairShavedSides',
24+
'LongHairMiaWallace',
25+
'LongHairStraight',
26+
'LongHairStraight2',
27+
'LongHairStraightStrand',
28+
'ShortHairDreads01',
29+
'ShortHairDreads02',
30+
'ShortHairFrizzle',
31+
'ShortHairShaggyMullet',
32+
'ShortHairShortCurly',
33+
'ShortHairShortFlat',
34+
'ShortHairShortRound',
35+
'ShortHairShortWaved',
36+
'ShortHairSides',
37+
'ShortHairTheCaesar',
38+
'ShortHairTheCaesarSidePart'
39+
]
40+
const accessoriesTypeArr = [
41+
'Blank',
42+
'Kurt',
43+
'Prescription01',
44+
'Prescription02',
45+
'Round',
46+
'Sunglasses',
47+
'Wayfarers'
48+
]
49+
const facialHairTypeArr = [
50+
'Blank',
51+
'BeardMedium',
52+
'BeardLight',
53+
'BeardMagestic',
54+
'MoustacheFancy',
55+
'MoustacheMagnum'
56+
]
57+
const facialHairColor = [
58+
'Auburn',
59+
'Black',
60+
'Blonde',
61+
'BlondeGolden',
62+
'Brown',
63+
'BrownDark',
64+
'Platinum',
65+
'Red'
66+
]
67+
const clotheTypeArr = [
68+
'BlazerShirt',
69+
'BlazerSweater',
70+
'CollarSweater',
71+
'GraphicShirt',
72+
'Hoodie',
73+
'Overall',
74+
'ShirtCrewNeck',
75+
'ShirtScoopNeck',
76+
'ShirtVNeck'
77+
]
78+
const clotheColor = [
79+
'Black',
80+
'Blue01',
81+
'Blue02',
82+
'Blue03',
83+
'Gray01',
84+
'Gray02',
85+
'Heather',
86+
'PastelBlue',
87+
'PastelGreen',
88+
'PastelOrange',
89+
'PastelRed',
90+
'PastelYellow',
91+
'Pink',
92+
'Red',
93+
'White'
94+
]
95+
const graphicTypeArr = [
96+
'Bat',
97+
'Cumbia',
98+
'Deer',
99+
'Diamond',
100+
'Hola',
101+
'Pizza',
102+
'Resist',
103+
'Selena',
104+
'Bear',
105+
'SkullOutline',
106+
'Skull'
107+
]
108+
const eyeTypeArr = [
109+
'Close',
110+
'Cry',
111+
'Default',
112+
'Dizzy',
113+
'EyeRoll',
114+
'Happy',
115+
'Hearts',
116+
'Side',
117+
'Squint',
118+
'Surprised',
119+
'Wink',
120+
'WinkWacky'
121+
]
122+
const eyebrowTypeArr = [
123+
'Angry',
124+
'AngryNatural',
125+
'Default',
126+
'DefaultNatural',
127+
'FlatNatural',
128+
'RaisedExcited',
129+
'RaisedExcitedNatural',
130+
'SadConcerned',
131+
'SadConcernedNatural',
132+
'UnibrowNatural',
133+
'UpDown',
134+
'UpDownNatural'
135+
]
136+
const mouthTypeArr = [
137+
'Concerned',
138+
'Default',
139+
'Disbelief',
140+
'Eating',
141+
'Grimace',
142+
'Sad',
143+
'ScreamOpen',
144+
'Serious',
145+
'Smile',
146+
'Tongue',
147+
'Twinkle',
148+
'Vomit'
149+
]
150+
const skinColorArr = [
151+
'Tanned',
152+
'Yellow',
153+
'Pale',
154+
'Light',
155+
'Brown',
156+
'DarkBrown',
157+
'Black'
158+
]
159+
160+
const getRandomAvatar = () => {
161+
return 'https://avataaars.io/?' + [
162+
'avatarStyle=Transparent',
163+
`topType=${Random.pick(topTypeArr)}`,
164+
`accessoriesType=${Random.pick(accessoriesTypeArr)}`,
165+
`hatColor=${Random.pick(facialHairTypeArr)}`,
166+
`facialHairType=${Random.pick(facialHairTypeArr)}`,
167+
`facialHairColor=${Random.pick(facialHairColor)}`,
168+
`clotheType=${Random.pick(clotheTypeArr)}`,
169+
`clotheColor=${Random.pick(clotheColor)}`,
170+
`graphicType=${Random.pick(graphicTypeArr)}`,
171+
`eyeType=${Random.pick(eyeTypeArr)}`,
172+
`eyebrowType=${Random.pick(eyebrowTypeArr)}`,
173+
`mouthType=${Random.pick(mouthTypeArr)}`,
174+
`skinColor=${Random.pick(skinColorArr)}`
175+
].join('&')
176+
}
177+
178+
export default () => {
179+
return {
180+
name: Random.name(),
181+
avatar: getRandomAvatar()
182+
}
183+
}

‎example/src/router/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@ const routes = [
3434
path: '/keep-state',
3535
name: 'keep-state',
3636
component: () => import(/* webpackChunkName: "keep-state" */ '../views/keep-state/Main.vue')
37+
},
38+
{
39+
path: '/chat-room',
40+
name: 'chat-room',
41+
component: () => import(/* webpackChunkName: "chat-room" */ '../views/chat-room/Main.vue')
3742
}
3843
]
3944

‎example/src/views/chat-room/Editor.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="editor">
3+
<div class="rich" contenteditable="true"></div>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'editor'
10+
}
11+
</script>
12+
13+
<style lang="less" scoped>
14+
.editor {
15+
padding: 1em;
16+
border: 2px solid;
17+
border-color: dimgray;
18+
border-top: 1px solid;
19+
}
20+
.rich {
21+
outline: none;
22+
}
23+
</style>

‎example/src/views/chat-room/Item.vue

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<div class="msg">
3+
<div class="avatar">
4+
<img :src="source.user.avatar" />
5+
</div>
6+
<div class="body">
7+
<div class="name">{{ source.user.name }}</div>
8+
<div class="content">
9+
{{ source.content }}
10+
</div>
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script>
16+
17+
export default {
18+
name: 'chat-room-item',
19+
20+
props: {
21+
source: {
22+
type: Object,
23+
default () {
24+
return {
25+
sid: '',
26+
user: {},
27+
content: '',
28+
images: []
29+
}
30+
}
31+
}
32+
}
33+
}
34+
</script>
35+
36+
<style lang="less" scoped>
37+
.msg {
38+
display: flex;
39+
.avatar {
40+
width: 40px;
41+
height: 40px;
42+
border-radius: 50%;
43+
background: rgba(255, 192, 203, .2);;
44+
img {
45+
display: block;
46+
width: 100%;
47+
height: 100%;
48+
border-radius: 50%;
49+
}
50+
}
51+
.body {
52+
flex: 1;
53+
padding-left: 1em;
54+
font-size: 16px;
55+
.name {
56+
color: #9b4cca;
57+
}
58+
.content {
59+
position: relative;
60+
color: #000;
61+
background-color: aliceblue;
62+
border-radius: 15px;
63+
padding: .5em 1em;
64+
&:after{
65+
content: '';
66+
position: absolute;
67+
right: 100%;
68+
top: 10px;
69+
width: 14px;
70+
height: 14px;
71+
border-width: 0;
72+
border-style: solid;
73+
border-color: transparent;
74+
border-bottom-width: 10px;
75+
border-bottom-color: currentColor;
76+
border-radius: 0 0 0 32px;
77+
color: aliceblue;
78+
}
79+
}
80+
}
81+
}
82+
</style>

0 commit comments

Comments
 (0)