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

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

/* eslint-disable */
import react from 'react';
import { Toast, Form, FormItem, Uploader } from '@antmjs/vantui';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default function Demo() {
  var formIt = react.useRef(null);
  var valueFormatUpload = function valueFormatUpload(event, formName, instance) {
    Toast.loading('上传中...');
    var file = event.detail.file;
    var fileList = instance.getFieldValue(formName) || [];
    fileList = fileList.concat(file);
    // 异步更新
    return new Promise(function (resolve) {
      setTimeout(function () {
        Toast.clear();
        resolve(fileList);
      }, 3000);
    });
  };
  var deleteFile = function deleteFile(event) {
    var _formIt$current;
    var _event$detail = event.detail,
      index = _event$detail.index,
      fileList = _event$detail.fileList;
    fileList.splice(index, 1);
    (_formIt$current = formIt.current) === null || _formIt$current === void 0 ? void 0 : _formIt$current.setFieldsValue('file', fileList);
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Toast, {
      id: "form-demo2-loading"
    }), /*#__PURE__*/_jsx(Form, {
      ref: formIt,
      children: /*#__PURE__*/_jsx(FormItem, {
        name: "file",
        mutiLevel: true,
        required: true,
        layout: "vertical",
        label: "\u4E0A\u4F20\u56FE\u7247(\u56FE\u7247\u5927\u5C0F\u4E0D\u5F97\u5927\u4E8E 0.1M)",
        valueKey: "fileList",
        valueFormat: valueFormatUpload,
        trigger: "onAfterRead",
        validateTrigger: "onAfterRead",
        rules: {
          rule: function rule(values, call) {
            values.forEach(function (item, index) {
              if (item.size > 0.1 * 1024 * 1024) {
                return call("\u56FE\u7247(".concat(index + 1, ")\u5927\u5C0F\u4E0D\u5F97\u5927\u4E8E 0.1M"));
              }
              call('');
            });
          }
        },
        children: /*#__PURE__*/_jsx(Uploader, {
          name: "file1",
          onDelete: deleteFile
        })
      })
    })]
  });
}