@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
205 lines (204 loc) • 6.84 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/* eslint-disable */
import react from 'react';
import { Input } from '@tarojs/components';
import { Form, FormItem, Icon, Switch, RadioGroup, Radio, CheckboxGroup, Checkbox, Slider, Rate, Stepper, Button, Dialog } from '@antmjs/vantui';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export default function Demo() {
var formIt = Form.useForm();
var _react$useState = react.useState({}),
_react$useState2 = _slicedToArray(_react$useState, 2),
forceUpdate = _react$useState2[1];
// 注册不能回调函数设置必填的提示文案
react.useEffect(function () {
formIt.registerRequiredMessageCallback(function (label) {
return "".concat(label, "\u771F\u7684\u4E0D\u80FD\u4E3A\u7A7A\u554A");
});
// setTimeout(() => {
formIt.setErrorMessage('userName', '这是自定义错误xxxxx');
// }, 1000)
}, []);
var handleClick = function handleClick() {
formIt.validateFields(function (errorMessage, fieldValues) {
if (errorMessage && errorMessage.length) {
Dialog.alert({
message: "errorMessage: ".concat(JSON.stringify(errorMessage)),
selector: '#form-demo11'
});
return console.info('errorMessage', errorMessage);
}
Dialog.alert({
message: "result: ".concat(JSON.stringify(fieldValues)),
selector: '#form-demo11'
});
});
};
// @ts-ignore
var dynamicRule = react.useMemo(function () {
if (formIt.getFieldValue('singleSelect') === '1') {
return {
rule: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
message: '输入正确的身份证'
};
}
if (formIt.getFieldValue('singleSelect') === '2') {
return {
rule: /^[0-9]{6}$/,
message: '请输入6位数的驾驶证'
};
}
}, [formIt.getFieldValue('singleSelect')]);
var dynamicPlaceHolder = react.useMemo(function () {
if (formIt.getFieldValue('singleSelect') === '1') {
return '请输入身份证';
}
if (formIt.getFieldValue('singleSelect') === '2') {
return '请输入驾驶证';
}
return '';
}, [formIt.getFieldValue('singleSelect')]);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(Form, {
initialValues: {
userName: '我是初始值',
singleSelect: '1',
rate: 2,
slider: '50'
},
form: formIt,
onFinish: function onFinish(errs, res) {
return console.info(errs, res);
},
children: [/*#__PURE__*/_jsx(FormItem, {
label: "\u7528\u6237\u540D",
name: "userName",
required: true,
rules: {
rule: /[\u4e00-\u9fa5]/,
message: '用户名仅支持中文'
},
trigger: "onInput",
validateTrigger: "onBlur"
// taro的input的onInput事件返回对应表单的最终值为e.detail.value
,
valueFormat: function valueFormat(e) {
return e.detail.value;
},
renderRight: /*#__PURE__*/_jsx(Icon, {
name: "user-o"
}),
children: /*#__PURE__*/_jsx(Input, {
placeholder: "\u8BF7\u8F93\u5165\u7528\u6237\u540D\uFF08\u4E2D\u6587\uFF09"
})
}), /*#__PURE__*/_jsx(FormItem, {
label: "\u662F\u5426\u6253\u5F00",
name: "opened",
valueKey: "checked",
children: /*#__PURE__*/_jsx(Switch, {
activeColor: "#07c160",
inactiveColor: "#07c160"
})
}), /*#__PURE__*/_jsx(FormItem, {
label: "\u8BC1\u4EF6\u7C7B\u578B",
name: "singleSelect",
children: /*#__PURE__*/_jsxs(RadioGroup, {
direction: "horizontal",
onChange: function onChange(e) {
formIt.setFieldsValue('cardId', '');
forceUpdate(e);
},
children: [/*#__PURE__*/_jsx(Radio, {
name: "1",
checkedColor: "#07c160",
children: "\u8EAB\u4EFD\u8BC1"
}), /*#__PURE__*/_jsx(Radio, {
name: "2",
checkedColor: "#07c160",
children: "\u9A7E\u9A76\u8BC1"
})]
})
}), /*#__PURE__*/_jsx(FormItem, {
label: "\u8BC1\u4EF6\u53F7",
name: "cardId",
required: true,
valueFormat: function valueFormat(e) {
return e.detail.value;
},
rules: dynamicRule,
trigger: "onInput",
children: /*#__PURE__*/_jsx(Input, {
placeholder: dynamicPlaceHolder
})
}), /*#__PURE__*/_jsx(FormItem, {
label: "\u590D\u9009\u6846",
name: "muiltSelect",
children: /*#__PURE__*/_jsxs(CheckboxGroup, {
direction: "horizontal",
children: [/*#__PURE__*/_jsx(Checkbox, {
name: "1",
shape: "square",
checkedColor: "#07c160",
children: "\u590D\u9009\u6846 1"
}), /*#__PURE__*/_jsx(Checkbox, {
name: "2",
shape: "square",
checkedColor: "#07c160",
children: "\u590D\u9009\u6846 2"
})]
})
}), /*#__PURE__*/_jsx(FormItem, {
label: "\u6ED1\u5757\u9009\u62E9",
name: "slider",
children: /*#__PURE__*/_jsx(Slider, {
activeColor: "#07c160",
style: {
width: '200px',
marginTop: '10px'
}
})
}), /*#__PURE__*/_jsx(FormItem, {
label: "\u8BC4\u5206",
name: "rate",
children: /*#__PURE__*/_jsx(Rate, {})
}), /*#__PURE__*/_jsx(FormItem, {
label: "\u6B65\u8FDB\u5668",
name: "stepper",
children: /*#__PURE__*/_jsx(Stepper, {})
}), /*#__PURE__*/_jsx(FormItem, {
label: "\u5F02\u6B65\u6821\u9A8C",
name: "asyncValidate"
// required
,
valueFormat: function valueFormat(e) {
return e.detail.value;
},
validateTrigger: "onBlur",
rules: [{
rule: function rule(value) {
return new Promise(function (resolve) {
console.log('value', value);
setTimeout(function () {
resolve('异步校验');
}, 1000);
});
}
}],
trigger: "onInput",
children: /*#__PURE__*/_jsx(Input, {
placeholder: "\u8BF7\u8F93\u5165"
})
}), /*#__PURE__*/_jsx(Button, {
type: "primary",
className: "van-button-submit",
onClick: handleClick
// formType="submit"
,
children: "\u63D0\u4EA4"
})]
}), /*#__PURE__*/_jsx(Dialog, {
id: "form-demo11"
})]
});
}