@antmjs/vantui/es/signature/demo/demo2.js

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

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
/* eslint-disable */
import react from 'react';
import { View } from '@tarojs/components';
import { Signature, Button, Image } from '@antmjs/vantui';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default function Demo() {
  var instance = react.useRef();
  var _react$useState = react.useState(''),
    _react$useState2 = _slicedToArray(_react$useState, 2),
    img = _react$useState2[0],
    setImage = _react$useState2[1];
  var getImageAction = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _instance$current;
      var res;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return (_instance$current = instance.current) === null || _instance$current === void 0 ? void 0 : _instance$current.getImage();
          case 2:
            res = _context.sent;
            if (res !== null && res !== void 0 && res.tempFilePath) {
              setImage(res.tempFilePath);
            }
          case 4:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function getImageAction() {
      return _ref.apply(this, arguments);
    };
  }();
  var clear = function clear() {
    var _instance$current2;
    (_instance$current2 = instance.current) === null || _instance$current2 === void 0 ? void 0 : _instance$current2.clear();
    setImage('');
  };
  return /*#__PURE__*/_jsxs(View, {
    children: [/*#__PURE__*/_jsx(Signature, {
      ref: instance,
      lineWidth: 4,
      strokeStyle: "green"
    }), /*#__PURE__*/_jsxs(View, {
      style: {
        marginTop: 20,
        display: 'flex'
      },
      children: [/*#__PURE__*/_jsx(Button, {
        onClick: getImageAction,
        type: "primary",
        children: "\u622A\u56FE"
      }), /*#__PURE__*/_jsx(Button, {
        onClick: clear,
        type: "danger",
        children: "\u91CD\u7ED8"
      })]
    }), /*#__PURE__*/_jsx(Image, {
      src: img,
      style: {
        backgroundColor: '#fff',
        border: '1px solid #ddd',
        marginTop: '20px'
      },
      width: "100%",
      height: "150px",
      fit: "widthFix"
    })]
  });
}