fix(VerificationCode):优化VerificationCode验证码组件

uiwjs · Apr 28, 2023 · 1e3255a · 1e3255a
1 parent 095b140
commit 1e3255a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 30 deletions.
diff --git a/example/examples/src/routes/VerificationCode/index.tsx b/example/examples/src/routes/VerificationCode/index.tsx
@@ -8,6 +8,7 @@ const {Header, Body, Card, Footer} = Layout;
 export interface VerificationCodeProps extends ComProps {
   onBefore?: () => Promise<boolean>;
   onSend?: () => Promise<boolean> | boolean;
+  inputBorder?: boolean;
 }
 
 const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
@@ -40,13 +41,14 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
         <Header title={title} description={description} />
         <Body style={{paddingLeft: 16, paddingRight: 16}}>
           <Card title="基础实例">
-            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
           </Card>
           <Card title="无边框">
             <VerificationCode
               bordered={false}
               label="我没框框哦"
               count={3}
+              inputBorder={false}
               onChange={(text: string) => onChange(text)}
               outerStyle={{backgroundColor: '#FFF'}}
               buttonStyle={{backgroundColor: '#fff'}}
@@ -59,48 +61,30 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
+              outerStyle={{borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义倒计时时长">
-            <VerificationCode count={10} value={value} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
+            <VerificationCode count={10} value={value} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
           </Card>
           <Card title="输入改变事件">
-            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
           </Card>
           <Card title="发验证码之前的回调">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              onBefore={onBefore}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onBefore={onBefore} outerStyle={{borderColor: '#ccc'}} />
           </Card>
           <Card title="发送验证码">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              onSend={onSend}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onSend={onSend} outerStyle={{borderColor: '#ccc'}} />
           </Card>
           <Card title="倒计时结束后的回调">
-            <VerificationCode
-              value={value}
-              count={3}
-              onChange={(text: string) => onChange(text)}
-              onEnd={onEnd}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
-            />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} onEnd={onEnd} outerStyle={{borderColor: '#ccc'}} />
           </Card>
           <Card title="自定义外层输入框样式">
             <VerificationCode
               value={value}
               count={3}
               onChange={(text: string) => onChange(text)}
-              outerStyle={{backgroundColor: '#FFD21D', borderWidth: 1, borderColor: '#ccc'}}
+              outerStyle={{backgroundColor: '#FFD21D', borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义内层按钮样式">
@@ -110,11 +94,11 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
               count={3}
               onChange={(text: string) => onChange(text)}
               buttonStyle={{backgroundColor: '#F86E21'}}
-              outerStyle={{borderWidth: 1, borderColor: '#ccc'}}
+              outerStyle={{borderColor: '#ccc'}}
             />
           </Card>
           <Card title="自定义按钮文字样式">
-            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderWidth: 1, borderColor: '#ccc'}} />
+            <VerificationCode value={value} count={3} onChange={(text: string) => onChange(text)} outerStyle={{borderColor: '#ccc'}} />
           </Card>
           <Card title="自定义输入框提示文字">
             <VerificationCode
@@ -123,7 +107,7 @@ const VerificationCodeDemo: React.FC<VerificationCodeProps> = ({route}) => {
               count={3}
               onChange={(text: string) => onChange(text)}
               placeholder="请输入112233....."
-              outerStyle={{borderBottomWidth: 1, borderBottomColor: '#CCC'}}
+              outerStyle={{borderBottomColor: '#CCC'}}
             />
           </Card>
         </Body>

diff --git a/packages/core/src/VerificationCode/README.md b/packages/core/src/VerificationCode/README.md
@@ -19,7 +19,7 @@ function Demo() {
               value={value}
               count={60}
               onChange={(text) => onChange(text)}
-              outerStyle={{ backgroundColor: '#FFF', borderWidth: 1, borderColor: "#ccc" }}
+              outerStyle={{ backgroundColor: '#FFF' }}
             />
     </View>
   );
@@ -43,3 +43,4 @@ export default Demo
 | `outerStyle` | 输入框外层自定义样式 | `StyleProp<ViewStyle>` | - |
 | `buttonStyle` | 按钮自定义样式 | `StyleProp<ViewStyle>` | - |
 | `placeholder` | 输入框空白时自定义展示 | string | `请输入验证码` |
+| `inputBorder` | 是否展示输入框边框 | boolean | true |