zhl-button 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +274 -0
- package/Vue3/344/275/277/347/224/250/346/214/207/345/215/227.md +459 -0
- package/ZhlButton.vue +283 -0
- package/demo.js +237 -0
- package/index.d.ts +46 -0
- package/index.js +114 -0
- package/package.json +64 -0
- package/style.css +209 -0
- package/vue.js +6 -0
package/package.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "zhl-button",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "一个简单实用、高度可定制的 JavaScript 按钮组件",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"module": "index.js",
|
|
7
|
+
"types": "index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./vue.js",
|
|
11
|
+
"require": "./index.js",
|
|
12
|
+
"types": "./index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./vue": {
|
|
15
|
+
"import": "./vue.js",
|
|
16
|
+
"require": "./vue.js",
|
|
17
|
+
"types": "./index.d.ts"
|
|
18
|
+
},
|
|
19
|
+
"./style.css": "./style.css"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"index.js",
|
|
23
|
+
"style.css",
|
|
24
|
+
"ZhlButton.vue",
|
|
25
|
+
"vue.js",
|
|
26
|
+
"index.d.ts",
|
|
27
|
+
"README.md",
|
|
28
|
+
"Vue3使用指南.md",
|
|
29
|
+
"demo.js"
|
|
30
|
+
],
|
|
31
|
+
"scripts": {
|
|
32
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
33
|
+
"demo": "node demo.js",
|
|
34
|
+
"start": "node demo.js"
|
|
35
|
+
},
|
|
36
|
+
"keywords": [
|
|
37
|
+
"button",
|
|
38
|
+
"component",
|
|
39
|
+
"ui",
|
|
40
|
+
"javascript",
|
|
41
|
+
"frontend",
|
|
42
|
+
"web",
|
|
43
|
+
"interactive",
|
|
44
|
+
"customizable"
|
|
45
|
+
],
|
|
46
|
+
"author": {
|
|
47
|
+
"name": "Developer",
|
|
48
|
+
"email": "developer@example.com"
|
|
49
|
+
},
|
|
50
|
+
"license": "MIT",
|
|
51
|
+
"homepage": "https://github.com/your-username/zhl-button#readme",
|
|
52
|
+
"repository": {
|
|
53
|
+
"type": "git",
|
|
54
|
+
"url": "https://github.com/your-username/zhl-button.git"
|
|
55
|
+
},
|
|
56
|
+
"bugs": {
|
|
57
|
+
"url": "https://github.com/your-username/zhl-button/issues"
|
|
58
|
+
},
|
|
59
|
+
"dependencies": {},
|
|
60
|
+
"devDependencies": {},
|
|
61
|
+
"engines": {
|
|
62
|
+
"node": ">=12.0.0"
|
|
63
|
+
}
|
|
64
|
+
}
|
package/style.css
ADDED
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
/* ZhlButton Component Styles */
|
|
2
|
+
|
|
3
|
+
.zhl-btn {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
border: none;
|
|
6
|
+
border-radius: 6px;
|
|
7
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
8
|
+
font-weight: 500;
|
|
9
|
+
text-align: center;
|
|
10
|
+
text-decoration: none;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
transition: all 0.2s ease-in-out;
|
|
13
|
+
position: relative;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
user-select: none;
|
|
16
|
+
outline: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Button Types */
|
|
20
|
+
.zhl-btn-primary {
|
|
21
|
+
background-color: #007bff;
|
|
22
|
+
color: white;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.zhl-btn-primary:hover:not(:disabled) {
|
|
26
|
+
background-color: #0056b3;
|
|
27
|
+
transform: translateY(-1px);
|
|
28
|
+
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.zhl-btn-secondary {
|
|
32
|
+
background-color: #6c757d;
|
|
33
|
+
color: white;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.zhl-btn-secondary:hover:not(:disabled) {
|
|
37
|
+
background-color: #545b62;
|
|
38
|
+
transform: translateY(-1px);
|
|
39
|
+
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.zhl-btn-success {
|
|
43
|
+
background-color: #28a745;
|
|
44
|
+
color: white;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.zhl-btn-success:hover:not(:disabled) {
|
|
48
|
+
background-color: #1e7e34;
|
|
49
|
+
transform: translateY(-1px);
|
|
50
|
+
box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.zhl-btn-danger {
|
|
54
|
+
background-color: #dc3545;
|
|
55
|
+
color: white;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.zhl-btn-danger:hover:not(:disabled) {
|
|
59
|
+
background-color: #c82333;
|
|
60
|
+
transform: translateY(-1px);
|
|
61
|
+
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.zhl-btn-warning {
|
|
65
|
+
background-color: #ffc107;
|
|
66
|
+
color: #212529;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.zhl-btn-warning:hover:not(:disabled) {
|
|
70
|
+
background-color: #e0a800;
|
|
71
|
+
transform: translateY(-1px);
|
|
72
|
+
box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.zhl-btn-info {
|
|
76
|
+
background-color: #17a2b8;
|
|
77
|
+
color: white;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.zhl-btn-info:hover:not(:disabled) {
|
|
81
|
+
background-color: #138496;
|
|
82
|
+
transform: translateY(-1px);
|
|
83
|
+
box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.zhl-btn-light {
|
|
87
|
+
background-color: #f8f9fa;
|
|
88
|
+
color: #212529;
|
|
89
|
+
border: 1px solid #dee2e6;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.zhl-btn-light:hover:not(:disabled) {
|
|
93
|
+
background-color: #e2e6ea;
|
|
94
|
+
transform: translateY(-1px);
|
|
95
|
+
box-shadow: 0 4px 8px rgba(248, 249, 250, 0.3);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.zhl-btn-dark {
|
|
99
|
+
background-color: #343a40;
|
|
100
|
+
color: white;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.zhl-btn-dark:hover:not(:disabled) {
|
|
104
|
+
background-color: #23272b;
|
|
105
|
+
transform: translateY(-1px);
|
|
106
|
+
box-shadow: 0 4px 8px rgba(52, 58, 64, 0.3);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.zhl-btn-outline {
|
|
110
|
+
background-color: transparent;
|
|
111
|
+
border: 2px solid #007bff;
|
|
112
|
+
color: #007bff;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.zhl-btn-outline:hover:not(:disabled) {
|
|
116
|
+
background-color: #007bff;
|
|
117
|
+
color: white;
|
|
118
|
+
transform: translateY(-1px);
|
|
119
|
+
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Button Sizes */
|
|
123
|
+
.zhl-btn-small {
|
|
124
|
+
padding: 8px 16px;
|
|
125
|
+
font-size: 14px;
|
|
126
|
+
line-height: 1.5;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.zhl-btn-medium {
|
|
130
|
+
padding: 12px 24px;
|
|
131
|
+
font-size: 16px;
|
|
132
|
+
line-height: 1.5;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.zhl-btn-large {
|
|
136
|
+
padding: 16px 32px;
|
|
137
|
+
font-size: 18px;
|
|
138
|
+
line-height: 1.5;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* Disabled State */
|
|
142
|
+
.zhl-btn:disabled {
|
|
143
|
+
opacity: 0.6;
|
|
144
|
+
cursor: not-allowed;
|
|
145
|
+
transform: none !important;
|
|
146
|
+
box-shadow: none !important;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* Loading State */
|
|
150
|
+
.zhl-btn-loading {
|
|
151
|
+
color: transparent !important;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.zhl-btn-loading::after {
|
|
155
|
+
content: '';
|
|
156
|
+
position: absolute;
|
|
157
|
+
width: 20px;
|
|
158
|
+
height: 20px;
|
|
159
|
+
top: 50%;
|
|
160
|
+
left: 50%;
|
|
161
|
+
margin-left: -10px;
|
|
162
|
+
margin-top: -10px;
|
|
163
|
+
border: 2px solid transparent;
|
|
164
|
+
border-top: 2px solid currentColor;
|
|
165
|
+
border-radius: 50%;
|
|
166
|
+
animation: zhl-btn-spin 1s linear infinite;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@keyframes zhl-btn-spin {
|
|
170
|
+
0% {
|
|
171
|
+
transform: rotate(0deg);
|
|
172
|
+
}
|
|
173
|
+
100% {
|
|
174
|
+
transform: rotate(360deg);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Focus State */
|
|
179
|
+
.zhl-btn:focus {
|
|
180
|
+
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* Active State */
|
|
184
|
+
.zhl-btn:active:not(:disabled) {
|
|
185
|
+
transform: translateY(0);
|
|
186
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* Responsive Design */
|
|
190
|
+
@media (max-width: 768px) {
|
|
191
|
+
.zhl-btn {
|
|
192
|
+
min-height: 44px; /* Better touch targets on mobile */
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.zhl-btn-small {
|
|
196
|
+
padding: 10px 18px;
|
|
197
|
+
font-size: 15px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.zhl-btn-medium {
|
|
201
|
+
padding: 14px 28px;
|
|
202
|
+
font-size: 17px;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.zhl-btn-large {
|
|
206
|
+
padding: 18px 36px;
|
|
207
|
+
font-size: 19px;
|
|
208
|
+
}
|
|
209
|
+
}
|