@antmjs/vantui/es/area/demo/demo3.js

一套适用于Taro3及React的vantui组件库

import { areaList } from '@vant/area-data';
import { View } from '@tarojs/components';
import { Button, Area, Form, FormItem } from '@antmjs/vantui';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default function Demo() {
  var formIt = Form.useForm();
  var showFormFields = function showFormFields() {
    formIt.validateFields(function (_, res) {
      alert(JSON.stringify(res));
    });
  };
  return /*#__PURE__*/_jsxs(View, {
    children: [/*#__PURE__*/_jsxs(Form, {
      initialValues: {
        area1: ['120000', '120100', '120106']
      },
      form: formIt,
      children: [/*#__PURE__*/_jsx(FormItem, {
        mutiLevel: true,
        valueFormat: function valueFormat(e) {
          return e.detail.value;
        },
        trigger: "onInput",
        label: "\u7701\u5E02\u533A",
        name: "area1",
        controllFlexEnd: true,
        borderBottom: true,
        children: /*#__PURE__*/_jsx(Area, {
          showArrowRight: true,
          columnsPlaceholder: ['请选择', '请选择', '请选择'],
          mode: "content",
          areaList: areaList
        })
      }), /*#__PURE__*/_jsx(FormItem, {
        mutiLevel: true,
        valueFormat: function valueFormat(e) {
          return e.detail.value;
        },
        trigger: "onInput",
        label: "\u7701\u5E02",
        name: "area2",
        controllFlexEnd: true,
        borderBottom: true,
        children: /*#__PURE__*/_jsx(Area, {
          showArrowRight: true,
          columnsPlaceholder: ['请选择', '请选择', '请选择'],
          mode: "content",
          areaList: areaList,
          columnsNum: 2
        })
      })]
    }), /*#__PURE__*/_jsx(Button, {
      type: "primary",
      block: true,
      style: {
        marginTop: '20px'
      },
      onClick: showFormFields,
      children: "\u786E\u5B9A"
    })]
  });
}