Inputs for phone code verification
npm install phone-code-verifyjsx
import { PhoneCodeVerify } from 'phone-code-verify'
import type { PhoneCodeVerifyProps } from 'phone-code-verify'function YourApp () {
const handleConfirm = (values) => {
console.log('Got values onConfirm: ', values)
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok')
}, 1000)
})
}
const handleChange = (values) => {
console.log('Got values onChange: ', values)
}
const customProps = {
wrapperClass: "yourCuntomClass",
tip:"手机验证码", // 展示在输入框上面的说明文字内容
maxWidth: 400, // 输入区域最大宽度
num: 4, // 几个输入框
mode: "line", // 'default'是输入框样式, 'line' 是单线样式
pattern:"[0-3]", // 输入框校验规则, 见https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
patternMessage: "请输入0-3的数字", // 校验未通过时展示的文字
button: true, // 是否展示输入框下方提交按钮
buttonText: "输入验证", // 按钮文字
onConfirm: handleConfirm, // 提交事件
onChange: handleChange // 输入事件
} as PhoneCodeVerifyProps
return (
)
}
`样式修改
样式可以使用自定义样式覆盖组件样式。
也可以使用以下方式覆盖
PCV_xxx样式。
`jsx
function YourApp () {
return (
)
}
``