@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
213 lines (210 loc) • 7.66 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Demo;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _components = require("@tarojs/components");
var _vantui = require("@antmjs/vantui");
var _jsxRuntime = require("react/jsx-runtime");
/* eslint-disable */
function Demo() {
var formIt = _vantui.Form.useForm();
var _react$useState = _react.default.useState({}),
_react$useState2 = (0, _slicedToArray2.default)(_react$useState, 2),
forceUpdate = _react$useState2[1];
// 注册不能回调函数设置必填的提示文案
_react.default.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) {
_vantui.Dialog.alert({
message: "errorMessage: ".concat(JSON.stringify(errorMessage)),
selector: '#form-demo11'
});
return console.info('errorMessage', errorMessage);
}
_vantui.Dialog.alert({
message: "result: ".concat(JSON.stringify(fieldValues)),
selector: '#form-demo11'
});
});
};
// @ts-ignore
var dynamicRule = _react.default.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.default.useMemo(function () {
if (formIt.getFieldValue('singleSelect') === '1') {
return '请输入身份证';
}
if (formIt.getFieldValue('singleSelect') === '2') {
return '请输入驾驶证';
}
return '';
}, [formIt.getFieldValue('singleSelect')]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_vantui.Form, {
initialValues: {
userName: '我是初始值',
singleSelect: '1',
rate: 2,
slider: '50',
muiltSelect: ['1', '2']
},
form: formIt,
onFinish: function onFinish(errs, res) {
return console.info(errs, res);
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.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__*/(0, _jsxRuntime.jsx)(_vantui.Icon, {
name: "user-o"
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input, {
placeholder: "\u8BF7\u8F93\u5165\u7528\u6237\u540D\uFF08\u4E2D\u6587\uFF09"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.FormItem, {
label: "\u662F\u5426\u6253\u5F00",
name: "opened",
valueKey: "checked",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Switch, {
activeColor: "#07c160",
inactiveColor: "#07c160"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.FormItem, {
label: "\u8BC1\u4EF6\u7C7B\u578B",
name: "singleSelect",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vantui.RadioGroup, {
direction: "horizontal",
onChange: function onChange(e) {
formIt.setFieldsValue('cardId', '');
forceUpdate(e);
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Radio, {
name: "1",
checkedColor: "#07c160",
children: "\u8EAB\u4EFD\u8BC1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Radio, {
name: "2",
checkedColor: "#07c160",
children: "\u9A7E\u9A76\u8BC1"
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.FormItem, {
label: "\u8BC1\u4EF6\u53F7",
name: "cardId",
required: true,
valueFormat: function valueFormat(e) {
return e.detail.value;
},
rules: dynamicRule,
trigger: "onInput",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input, {
placeholder: dynamicPlaceHolder
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.FormItem, {
mutiLevel: true,
label: "\u590D\u9009\u6846",
name: "muiltSelect",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vantui.CheckboxGroup, {
direction: "horizontal",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Checkbox, {
name: "1",
shape: "square",
checkedColor: "#07c160",
children: "\u590D\u9009\u6846 1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Checkbox, {
name: "2",
shape: "square",
checkedColor: "#07c160",
children: "\u590D\u9009\u6846 2"
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.FormItem, {
label: "\u6ED1\u5757\u9009\u62E9",
name: "slider",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Slider, {
activeColor: "#07c160",
style: {
width: '200px',
marginTop: '10px'
}
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.FormItem, {
label: "\u8BC4\u5206",
name: "rate",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Rate, {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.FormItem, {
label: "\u6B65\u8FDB\u5668",
name: "stepper",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Stepper, {})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.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__*/(0, _jsxRuntime.jsx)(_components.Input, {
placeholder: "\u8BF7\u8F93\u5165"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Button, {
type: "primary",
className: "van-button-submit",
onClick: handleClick
// formType="submit"
,
children: "\u63D0\u4EA4"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vantui.Dialog, {
id: "form-demo11"
})]
});
}