Skip to content

Commit 1e3255a

Browse files
hy916hy916
committed
fix(VerificationCode):优化VerificationCode验证码组件
1 parent 095b140 commit 1e3255a

File tree

2 files changed

+15
-30
lines changed
  • example/examples/src/routes/VerificationCode
  • packages/core/src/VerificationCode

2 files changed

+15
-30
lines changed

‎example/examples/src/routes/VerificationCode/index.tsx‎

Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const {Header, Body, Card, Footer} = Layout;
88
export interface VerificationCodeProps extends ComProps {
99
onBefore?: () => Promise<boolean>;
1010
onSend?: () => Promise<boolean> | boolean;
11+
inputBorder?: boolean;
1112
}
1213

1314
const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
@@ -40,13 +41,14 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
4041
<Header title={title} description={description} />
4142
<Body style={{paddingLeft: 16, paddingRight: 16}}>
4243
<Card title="基础实例">
43-
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
44+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
4445
</Card>
4546
<Card title="无边框">
4647
<VerificationCode
4748
bordered={false}
4849
label="我没框框哦"
4950
count={3}
51+
inputBorder={false}
5052
onChange={(text: string) => onChange(text)}
5153
outerStyle={{backgroundColor: '#FFF'}}
5254
buttonStyle={{backgroundColor: '#fff'}}
@@ -59,48 +61,30 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
5961
value={value}
6062
count={3}
6163
onChange={(text: string) => onChange(text)}
62-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
64+
outerStyle={{borderColor: '#ccc'}}
6365
/>
6466
</Card>
6567
<Card title="自定义倒计时时长">
66-
<VerificationCode count={10} value={value} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
68+
<VerificationCode count={10} value={value} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
6769
</Card>
6870
<Card title="输入改变事件">
69-
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
71+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
7072
</Card>
7173
<Card title="发验证码之前的回调">
72-
<VerificationCode
73-
value={value}
74-
count={3}
75-
onChange={(text: string) => onChange(text)}
76-
onBefore={onBefore}
77-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
78-
/>
74+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onBefore={onBefore} outerStyle={{borderColor: '#ccc'}} />
7975
</Card>
8076
<Card title="发送验证码">
81-
<VerificationCode
82-
value={value}
83-
count={3}
84-
onChange={(text: string) => onChange(text)}
85-
onSend={onSend}
86-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
87-
/>
77+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onSend={onSend} outerStyle={{borderColor: '#ccc'}} />
8878
</Card>
8979
<Card title="倒计时结束后的回调">
90-
<VerificationCode
91-
value={value}
92-
count={3}
93-
onChange={(text: string) => onChange(text)}
94-
onEnd={onEnd}
95-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
96-
/>
80+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onEnd={onEnd} outerStyle={{borderColor: '#ccc'}} />
9781
</Card>
9882
<Card title="自定义外层输入框样式">
9983
<VerificationCode
10084
value={value}
10185
count={3}
10286
onChange={(text: string) => onChange(text)}
103-
outerStyle={{backgroundColor: '#FFD21D', borderWidth: 1, borderColor: '#ccc'}}
87+
outerStyle={{backgroundColor: '#FFD21D', borderColor: '#ccc'}}
10488
/>
10589
</Card>
10690
<Card title="自定义内层按钮样式">
@@ -110,11 +94,11 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
11094
count={3}
11195
onChange={(text: string) => onChange(text)}
11296
buttonStyle={{backgroundColor: '#F86E21'}}
113-
outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
97+
outerStyle={{borderColor: '#ccc'}}
11498
/>
11599
</Card>
116100
<Card title="自定义按钮文字样式">
117-
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
101+
<VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
118102
</Card>
119103
<Card title="自定义输入框提示文字">
120104
<VerificationCode
@@ -123,7 +107,7 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
123107
count={3}
124108
onChange={(text: string) => onChange(text)}
125109
placeholder="请输入112233....."
126-
outerStyle={{borderBottomWidth: 1, borderBottomColor: '#CCC'}}
110+
outerStyle={{borderBottomColor: '#CCC'}}
127111
/>
128112
</Card>
129113
</Body>

‎packages/core/src/VerificationCode/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function Demo() {
1919
value={value}
2020
count={60}
2121
onChange={(text) => onChange(text)}
22-
outerStyle={{ backgroundColor: '#FFF', borderWidth: 1, borderColor: "#ccc" }}
22+
outerStyle={{ backgroundColor: '#FFF' }}
2323
/>
2424
</View>
2525
);
@@ -43,3 +43,4 @@ export default Demo
4343
| `outerStyle` | 输入框外层自定义样式 | `StyleProp<ViewStyle>` | - |
4444
| `buttonStyle` | 按钮自定义样式 | `StyleProp<ViewStyle>` | - |
4545
| `placeholder` | 输入框空白时自定义展示 | string | `请输入验证码` |
46+
| `inputBorder` | 是否展示输入框边框 | boolean | true |

0 commit comments

Comments
 (0)