Skip to content

Commit c2b218e

Browse files
ADKcodeXDADKcodeXD
committed
fix: resolve scrollbar style pollution issue (close #19)
1 parent 673ac36 commit c2b218e

File tree

3 files changed

+153
-135
lines changed

3 files changed

+153
-135
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"private": false,
44
"author": "ADKCodeXD",
55
"description": "一个简单的Emoji表情选择组件",
6-
"version": "3.0.2",
6+
"version": "3.0.4",
77
"license": "MIT",
88
"main": "./dist/Vue3Emoji.umd.js",
99
"module": "./dist/Vue3Emoji.es.js",

‎src/App.vue‎

Lines changed: 134 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -3,150 +3,166 @@ import V3Emoji from './components/V3Emoji.vue'
33
import { Emoji } from './types/type'
44
import { ref } from 'vue'
55
const clickEmoji = (val: any) => {
6-
clickEvent.value = val
7-
console.log(val)
6+
clickEvent.value = val
7+
console.log(val)
88
}
99
const optionsName = {
10-
'Smileys & Emotion': '笑脸&表情',
11-
'Food & Drink': '食物&饮料',
12-
'Animals & Nature': '动物&自然',
13-
'Travel & Places': '旅行&地点',
14-
'People & Body': '人物&身体',
15-
Objects: '物品',
16-
Symbols: '符号',
17-
Flags: '旗帜',
18-
Activities: '活动'
10+
'Smileys & Emotion': '笑脸&表情',
11+
'Food & Drink': '食物&饮料',
12+
'Animals & Nature': '动物&自然',
13+
'Travel & Places': '旅行&地点',
14+
'People & Body': '人物&身体',
15+
Objects: '物品',
16+
Symbols: '符号',
17+
Flags: '旗帜',
18+
Activities: '活动',
1919
}
2020
const disableGroup = ['食物&饮料']
2121
const abc = ref('这里是双向绑定的值')
2222
const clickEvent = ref('')
2323
const customIcon: Emoji.JsonData = {
24-
'Smileys & Emotion': '😚',
25-
'Food & Drink': '🍔',
26-
'Animals & Nature': '🐶',
27-
Activities: '🎉',
28-
'Travel & Places': '🚗',
29-
Objects: '💰'
24+
'Smileys & Emotion': '😚',
25+
'Food & Drink': '🍔',
26+
'Animals & Nature': '🐶',
27+
Activities: '🎉',
28+
'Travel & Places': '🚗',
29+
Objects: '💰',
3030
}
3131
const customTab: Emoji.ObjectItem = {
32-
我的自定义板块: [
33-
{
34-
emoji: '🍔',
35-
name: '汉堡包'
36-
},
37-
{
38-
emoji: '🍟',
39-
name: '薯条'
40-
}
41-
]
32+
我的自定义板块: [
33+
{
34+
emoji: '🍔',
35+
name: '汉堡包',
36+
},
37+
{
38+
emoji: '🍟',
39+
name: '薯条',
40+
},
41+
],
4242
}
4343
const customSize: Emoji.CustomSize = {
44-
'V3Emoji-width': '300px',
45-
'V3Emoji-height': '20rem',
46-
'V3Emoji-fontSize': '1rem',
47-
'V3Emoji-itemSize': '50px'
44+
'V3Emoji-width': '300px',
45+
'V3Emoji-height': '20rem',
46+
'V3Emoji-fontSize': '1rem',
47+
'V3Emoji-itemSize': '50px',
4848
}
4949
const customTheme: Emoji.CustomTheme = {
50-
'V3Emoji-hoverColor': '#ff5500',
51-
'V3Emoji-activeColor': '#99ff77',
52-
'V3Emoji-shadowColor': 'rgba(255,255,0,0.5)',
53-
'V3Emoji-backgroundColor': '#000000',
54-
'V3Emoji-fontColor': '#ffffff'
50+
'V3Emoji-hoverColor': '#ff5500',
51+
'V3Emoji-activeColor': '#99ff77',
52+
'V3Emoji-shadowColor': 'rgba(255,255,0,0.5)',
53+
'V3Emoji-backgroundColor': '#000000',
54+
'V3Emoji-fontColor': '#ffffff',
5555
}
5656
const disableGroup2 = [
57-
'Smileys & Emotion',
58-
'Food & Drink',
59-
'Animals & Nature',
60-
'Travel & Places',
61-
'People & Body',
62-
'Objects',
63-
'Symbols',
64-
'Flags',
65-
'Activities'
57+
'Smileys & Emotion',
58+
'Food & Drink',
59+
'Animals & Nature',
60+
'Travel & Places',
61+
'People & Body',
62+
'Objects',
63+
'Symbols',
64+
'Flags',
65+
'Activities',
6666
]
6767
</script>
6868

6969
<template>
70-
<div class="container">
71-
<div class="test">
72-
<V3Emoji :customIcon="customIcon" size="small" default-select="recent" />
73-
<p>small</p>
74-
</div>
75-
<div class="test">
76-
<V3Emoji :customIcon="customIcon" size="mid" default-select="Objects" />
77-
<p>mid</p>
78-
</div>
79-
<div class="test">
80-
<V3Emoji size="big" />
81-
<p>big</p>
82-
</div>
83-
<div class="test">
84-
<V3Emoji size="big" :custom-size="customSize" />
85-
<p>customSize</p>
86-
</div>
87-
<div class="test">
88-
<V3Emoji size="mid" :custom-theme="customTheme" />
89-
<p>customTheme</p>
90-
</div>
91-
<div class="test">
92-
<V3Emoji size="mid" :custom-icon="customIcon" />
93-
<p>customIcon</p>
94-
</div>
95-
<div class="test">
96-
<V3Emoji size="mid" :custom-tab="customTab" :disable-group="disableGroup2" />
97-
<p>customTab</p>
98-
</div>
99-
</div>
100-
<div id="app">
101-
<div>
102-
<h1>输入你的emoji</h1>
103-
<div class="text-area">
104-
<V3Emoji
105-
:disable-group="disableGroup"
106-
@click-emoji="clickEmoji"
107-
:options-name="optionsName"
108-
:recent="true"
109-
default-select="我的自定义板块"
110-
:fulldata="true"
111-
:textArea="true"
112-
:keep="false"
113-
:manual-close="true"
114-
inputType="textarea"
115-
:customIcon="customIcon"
116-
size="small"
117-
fix-pos="upcenter"
118-
:customTab="customTab"
119-
v-model="abc"
120-
/>
121-
</div>
122-
</div>
123-
<h2>你当前点击的是</h2>
124-
{{ clickEvent }}
125-
</div>
70+
<div class="container">
71+
<div class="test">
72+
<V3Emoji :customIcon="customIcon" size="small" default-select="recent" />
73+
<p>small</p>
74+
</div>
75+
<div class="test">
76+
<V3Emoji :customIcon="customIcon" size="mid" default-select="Objects" />
77+
<p>mid</p>
78+
</div>
79+
<div class="test">
80+
<V3Emoji size="big" />
81+
<p>big</p>
82+
</div>
83+
<div class="test">
84+
<V3Emoji size="big" :custom-size="customSize" />
85+
<p>customSize</p>
86+
</div>
87+
<div class="test">
88+
<V3Emoji size="mid" :custom-theme="customTheme" />
89+
<p>customTheme</p>
90+
</div>
91+
<div class="test">
92+
<V3Emoji size="mid" :custom-icon="customIcon" />
93+
<p>customIcon</p>
94+
</div>
95+
<div class="test">
96+
<V3Emoji size="mid" :custom-tab="customTab" :disable-group="disableGroup2" />
97+
<p>customTab</p>
98+
</div>
99+
</div>
100+
<div id="app">
101+
<div>
102+
<h1>输入你的emoji</h1>
103+
<div class="text-area">
104+
<V3Emoji
105+
:disable-group="disableGroup"
106+
@click-emoji="clickEmoji"
107+
:options-name="optionsName"
108+
:recent="true"
109+
default-select="我的自定义板块"
110+
:fulldata="true"
111+
:textArea="true"
112+
:keep="false"
113+
:manual-close="true"
114+
inputType="textarea"
115+
:customIcon="customIcon"
116+
size="small"
117+
fix-pos="upcenter"
118+
:customTab="customTab"
119+
v-model="abc"
120+
/>
121+
</div>
122+
</div>
123+
<h2>你当前点击的是</h2>
124+
{{ clickEvent }}
125+
<h2>你当前点击的是</h2>
126+
{{ clickEvent }}
127+
<h2>你当前点击的是</h2>
128+
{{ clickEvent }}
129+
<h2>你当前点击的是</h2>
130+
{{ clickEvent }}
131+
<h2>你当前点击的是</h2>
132+
{{ clickEvent }}
133+
<h2>你当前点击的是</h2>
134+
{{ clickEvent }}
135+
<h2>你当前点击的是</h2>
136+
{{ clickEvent }}
137+
<h2>你当前点击的是</h2>
138+
{{ clickEvent }}
139+
<h2>你当前点击的是</h2>
140+
{{ clickEvent }}
141+
</div>
126142
</template>
127143

128144
<style scoped>
129145
#app {
130-
display: flex;
131-
width: 100%;
132-
justify-content: center;
133-
align-items: center;
134-
flex-direction: column;
146+
display: flex;
147+
width: 100%;
148+
justify-content: center;
149+
align-items: center;
150+
flex-direction: column;
135151
}
136152
.text-area {
137-
width: 800px;
138-
height: 300px;
153+
width: 800px;
154+
height: 300px;
139155
}
140156
.container {
141-
display: flex;
142-
justify-content: space-between;
143-
margin: 20px;
144-
flex-wrap: wrap;
145-
.test {
146-
display: flex;
147-
justify-content: center;
148-
align-items: center;
149-
flex-direction: column;
150-
}
157+
display: flex;
158+
justify-content: space-between;
159+
margin: 20px;
160+
flex-wrap: wrap;
161+
.test {
162+
display: flex;
163+
justify-content: center;
164+
align-items: center;
165+
flex-direction: column;
166+
}
151167
}
152168
</style>

‎src/assets/styles/V3Emoji.scss‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
@import "./variable.scss";
2-
p {
3-
margin: 0;
4-
}
5-
::-webkit-scrollbar {
6-
/*高宽分别对应横竖滚动条的尺寸*/
7-
width: 6px;
8-
height: 6px;
9-
}
10-
::-webkit-scrollbar-thumb {
11-
border-radius: 10px !important;
12-
background-color: rgb(216, 216, 216);
13-
}
14-
::-webkit-scrollbar-track {
15-
border-radius: 10px !important;
16-
background: #ededed !important;
1+
@import './variable.scss';
2+
#EmojiItem {
3+
p {
4+
margin: 0;
5+
}
6+
::-webkit-scrollbar {
7+
/*高宽分别对应横竖滚动条的尺寸*/
8+
width: 6px;
9+
height: 6px;
10+
}
11+
::-webkit-scrollbar-thumb {
12+
border-radius: 10px !important;
13+
background-color: rgb(216, 216, 216);
14+
}
15+
::-webkit-scrollbar-track {
16+
border-radius: 10px !important;
17+
background: #ededed !important;
18+
}
1719
}

0 commit comments

Comments
 (0)