Skip to content

Commit 1d20e63

Browse files
wenlngwenlng
committed
update README.md
1 parent 6f8305d commit 1d20e63

File tree

21 files changed

+1065
-1365
lines changed

21 files changed

+1065
-1365
lines changed

‎README.md‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Go Captcha Vue Package
22

3+
## vue2
4+
Greater than or equal to 2.7.14 and less than 3.0
35
```shell
46
yarn add go-captcha-vue
57
# or
@@ -8,7 +10,7 @@ npm install go-captcha-vue
810
pnpm install go-captcha-vue
911
```
1012

11-
## Use Go Captcha
13+
Use Go Captcha
1214
```vue
1315
1416
import "go-captcha-vue/dist/style.css"
@@ -17,6 +19,25 @@ import GoCaptcha from "go-captcha-vue"
1719
Vue.use(GoCaptcha)
1820
```
1921

22+
## vue3
23+
Greater than 3.0
24+
```shell
25+
yarn add go-captcha-vue3
26+
# or
27+
npm install go-captcha-vue3
28+
# or
29+
pnpm install go-captcha-vue3
30+
```
31+
32+
Use Go Captcha
33+
```vue
34+
35+
import "go-captcha-vue3/dist/style.css"
36+
import GoCaptcha from "go-captcha-vue3"
37+
38+
Vue.use(GoCaptcha)
39+
```
40+
2041

2142
## 🖖 Click Mode Captcha
2243
```vue

‎example/main.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
import Vue from 'vue'
1+
import { createApp } from 'vue'
22

33
import App from './App.vue'
44
// import "../dist/style.css"
55
// @ts-ignore
66
// import GoCaptcha from "../dist/go-captcha-vue.es"
77
import GoCaptcha from "../packages";
88

9+
const app = createApp(App)
910
// use go captcha
10-
Vue.use(GoCaptcha)
11+
app.use(GoCaptcha)
1112

12-
const app = new Vue({
13-
render: (h) => h(App)
14-
})
15-
16-
app.$mount('#app')
13+
app.mount('#app')

‎favicon.ico‎

4.19 KB
Binary file not shown.

‎package.json‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
{
2-
"name": "go-captcha-vue",
3-
"version": "2.0.0",
2+
"name": "go-captcha-vue3",
3+
"version": "2.0.0-beta.1",
44
"private": false,
55
"type": "module",
66
"license": "MIT",
77
"description": "This is the vue package for go-captcha",
88
"keywords": [
99
"go-captcha-vue",
10+
"go-captcha-vue3",
1011
"go-captcha",
1112
"gocaptcha",
1213
"captcha-vue",
14+
"captcha-vue3",
1315
"vue-captcha",
16+
"vue3-captcha",
1417
"capts",
1518
"gocapts"
1619
],
@@ -32,31 +35,25 @@
3235
"scripts": {
3336
"dev": "vite",
3437
"build": "run-p type-check \"build-only {@}\" --",
35-
"build2": "run-p type-check \"build-only {@}\" --",
3638
"build-only": "vite build && run-p tsd",
3739
"tsd": "vue-tsc --rootDir ./packages --declaration --emitDeclarationOnly --noEmit false --outDir ./dist",
3840
"preview": "vite preview --port 5050",
3941
"type-check": "vue-tsc --noEmit -p tsconfig.json"
4042
},
4143
"dependencies": {
42-
"vue": "^2.7.14"
44+
"vue": "^3.0.1"
4345
},
4446
"devDependencies": {
4547
"@types/node": "^16.11.10",
46-
"@vitejs/plugin-legacy": "^1.6.3",
47-
"@vue/compiler-sfc": "^3.4.27",
48-
"@vue/runtime-dom": "^3.2.22",
48+
"@vitejs/plugin-vue": "4.4.0",
49+
"@vitejs/plugin-vue-jsx": "^3.1.0",
4950
"fast-glob": "^3.3.2",
5051
"less": "^4.2.0",
5152
"less-loader": "^12.2.0",
5253
"npm-run-all2": "^6.2.0",
5354
"ts-morph": "^22.0.0",
54-
"typescript": "~4.4.4",
55-
"unplugin-vue2-script-setup": "^0.7.1",
56-
"vite": "^2.6.14",
57-
"vite-plugin-vue2": "^1.9.0",
58-
"vue-demi": "^0.13.11",
59-
"vue-template-compiler": "^2.7.14",
60-
"vue-tsc": "^1.8.27"
55+
"typescript": "~5.4.0",
56+
"vite": "4.4.11",
57+
"vue-tsc": "^2.0.11"
6158
}
6259
}

‎packages/components/button/index.vue‎

Lines changed: 113 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import BtnSuccessIcon from "../../assets/icons/btn-success-icon.vue";
2323
2424
import {CaptchaConfig, defaultConfig} from "./meta/config";
2525
26+
// @ts-ignore
2627
const props = withDefaults(
2728
defineProps<{
2829
config?: CaptchaConfig;
@@ -43,7 +44,7 @@ const { config } = props;
4344
const { type, title, disabled } = toRefs(props);
4445
4546
const btnClass = computed(() => {
46-
return ["btnBlock", type.value, disabled.value && "disabled"]
47+
return ["go-captcha", "btnBlock", type.value, disabled.value && "disabled"]
4748
})
4849
4950
const btnStyle = computed(() => {
@@ -64,125 +65,127 @@ function emitClickEvent(e: any) {
6465
6566
</script>
6667

67-
<style lang="less" scoped>
68-
.btnBlock {
69-
position: relative;
70-
box-sizing: border-box;
71-
72-
display: block;
73-
font-size: 13px;
74-
75-
-webkit-border-radius: 5px;
76-
-moz-border-radius: 5px;
77-
letter-spacing: 1px;
78-
border-radius: 5px;
79-
line-height: 1;
80-
white-space: nowrap;
81-
-webkit-appearance: none;
82-
outline: none;
83-
margin: 0;
84-
transition: .1s;
85-
font-weight: 500;
86-
-moz-user-select: none;
87-
-webkit-user-select: none;
88-
89-
display:-webkit-box;
90-
display:-webkit-flex;
91-
display:-ms-flexbox;
92-
display:flex;
93-
-webkit-box-align:center;
94-
-webkit-align-items:center;
95-
-ms-flex-align:center;
96-
align-items: center;
97-
justify-content: center;
98-
justify-items: center;
99-
100-
box-shadow: 0 0 20px rgba(62, 124, 255, 0.1);
101-
-webkit-box-shadow: 0 0 20px rgba(62, 124, 255, 0.1);
102-
-moz-box-shadow: 0 0 20px rgba(62, 124, 255, 0.1);
103-
104-
span{
105-
padding-left: 8px;
68+
<style lang="less">
69+
.go-captcha {
70+
&.btnBlock {
71+
position: relative;
72+
box-sizing: border-box;
73+
74+
display: block;
75+
font-size: 13px;
76+
77+
-webkit-border-radius: 5px;
78+
-moz-border-radius: 5px;
79+
letter-spacing: 1px;
80+
border-radius: 5px;
81+
line-height: 1;
82+
white-space: nowrap;
83+
-webkit-appearance: none;
84+
outline: none;
85+
margin: 0;
86+
transition: .1s;
87+
font-weight: 500;
88+
-moz-user-select: none;
89+
-webkit-user-select: none;
90+
91+
display:-webkit-box;
92+
display:-webkit-flex;
93+
display:-ms-flexbox;
94+
display:flex;
95+
-webkit-box-align:center;
96+
-webkit-align-items:center;
97+
-ms-flex-align:center;
98+
align-items: center;
99+
justify-content: center;
100+
justify-items: center;
101+
102+
box-shadow: 0 0 20px rgba(62, 124, 255, 0.1);
103+
-webkit-box-shadow: 0 0 20px rgba(62, 124, 255, 0.1);
104+
-moz-box-shadow: 0 0 20px rgba(62, 124, 255, 0.1);
105+
106+
span{
107+
padding-left: 8px;
108+
}
106109
}
107-
}
108110
109-
.disabled{
110-
pointer-events: none;
111-
}
111+
&.disabled{
112+
pointer-events: none;
113+
}
112114
113-
.default{
114-
color: #3e7cff;
115-
border: 1px solid #50a1ff;
116-
background: #ecf5ff;
117-
cursor: pointer;
115+
&.default{
116+
color: #3e7cff;
117+
border: 1px solid #50a1ff;
118+
background: #ecf5ff;
119+
cursor: pointer;
118120
119-
&:hover{
120-
background: #e0efff !important;
121+
&:hover{
122+
background: #e0efff !important;
123+
}
121124
}
122-
}
123-
124-
.error{
125-
cursor: pointer;
126-
color: #ed4630;
127-
background: #fef0f0;
128-
border: 1px solid #ff5a34;
129-
}
130125
131-
.warn{
132-
cursor: pointer;
133-
color: #ffa000;
134-
background: #fdf6ec;
135-
border: 1px solid #ffbe09;
136-
}
126+
&.error{
127+
cursor: pointer;
128+
color: #ed4630;
129+
background: #fef0f0;
130+
border: 1px solid #ff5a34;
131+
}
137132
138-
.success{
139-
color: #5eaa2f;
140-
background: #f0f9eb;
141-
border: 1px solid #8bc640;
142-
pointer-events: none;
143-
}
133+
&.warn{
134+
cursor: pointer;
135+
color: #ffa000;
136+
background: #fdf6ec;
137+
border: 1px solid #ffbe09;
138+
}
144139
145-
.ripple{
146-
position: relative;
147-
display:-webkit-box;
148-
display:-webkit-flex;
149-
display:-ms-flexbox;
150-
display:flex;
151-
-webkit-box-align:center;
152-
-webkit-align-items:center;
153-
-ms-flex-align:center;
154-
align-items: center;
155-
justify-content: center;
156-
justify-items: center;
157-
158-
svg {
159-
position: relative;
160-
z-index: 10;
140+
&.success{
141+
color: #5eaa2f;
142+
background: #f0f9eb;
143+
border: 1px solid #8bc640;
144+
pointer-events: none;
161145
}
162146
163-
&::after {
164-
background: #409eff;
165-
-webkit-border-radius: 50px;
166-
-moz-border-radius: 50px;
167-
border-radius: 50px;
168-
content: "";
169-
display: block;
170-
width: 20px;
171-
height: 20px;
172-
opacity: 0;
173-
position: absolute;
174-
top: 50%;
175-
left: 50%;
176-
margin-top: -10px;
177-
margin-left: -10px;
178-
z-index: 1;
179-
180-
animation: ripple 1.3s infinite;
181-
-moz-animation: ripple 1.3s infinite;
182-
-webkit-animation: ripple 1.3s infinite;
183-
animation-delay: 2s;
184-
-moz-animation-delay: 2s;
185-
-webkit-animation-delay: 2s;
147+
.ripple{
148+
position: relative;
149+
display:-webkit-box;
150+
display:-webkit-flex;
151+
display:-ms-flexbox;
152+
display:flex;
153+
-webkit-box-align:center;
154+
-webkit-align-items:center;
155+
-ms-flex-align:center;
156+
align-items: center;
157+
justify-content: center;
158+
justify-items: center;
159+
160+
svg {
161+
position: relative;
162+
z-index: 10;
163+
}
164+
165+
&::after {
166+
background: #409eff;
167+
-webkit-border-radius: 50px;
168+
-moz-border-radius: 50px;
169+
border-radius: 50px;
170+
content: "";
171+
display: block;
172+
width: 20px;
173+
height: 20px;
174+
opacity: 0;
175+
position: absolute;
176+
top: 50%;
177+
left: 50%;
178+
margin-top: -10px;
179+
margin-left: -10px;
180+
z-index: 1;
181+
182+
animation: ripple 1.3s infinite;
183+
-moz-animation: ripple 1.3s infinite;
184+
-webkit-animation: ripple 1.3s infinite;
185+
animation-delay: 2s;
186+
-moz-animation-delay: 2s;
187+
-webkit-animation-delay: 2s;
188+
}
186189
}
187190
}
188191

0 commit comments

Comments
 (0)