ProButton 按钮

TIP

• 基于 Shineout Button 增强，内置二次确认、自动 Loading、权限控制和提示能力，减少重复逻辑。

// 设置全局的按钮权限
import { setConfig } from "@lite-code/pro-shineout";

setConfig({
  btnAuthList: ["component.user.add", "component.user.edit"],
});

异步扩展

增加异步等待处理

tsx

import { ProButton } from "@lite-code/pro-shineout";

const sleep = () => new Promise((res) => setTimeout(res, 1000));

export default () => {
  return (
    <ProButton type="primary" onClick={sleep}>
      提交
    </ProButton>
  );
};

是否展示

设置是否展示，在配置化场景比较有用

tsx

import { useState } from "react";
import { Gap, Button } from "shineout";
import { ProButton } from "@lite-code/pro-shineout";

export default () => {
  const [visible, setVisible] = useState(true);
  return (
    <Gap>
      <Button
        onClick={() => {
          setVisible(!visible);
        }}
      >
        {visible ? "隐藏" : "展示"}
      </Button>
      <ProButton visible={visible} type="primary">
        按钮
      </ProButton>
    </Gap>
  );
};

二次确认和悬浮提示

扩展二次确认等场景

tsx

import { Gap } from "shineout";
import { ProButton } from "@lite-code/pro-shineout";

const sleep = () => new Promise((res) => setTimeout(res, 1000));

export default () => {
  return (
    <Gap>
      <ProButton onClick={sleep} confirm="是否确认删除?">
        二次确认 Modal
      </ProButton>
      <ProButton onClick={sleep} confirm="是否确认删除?" confirmType="popover">
        二次确认 Popover
      </ProButton>
      <ProButton tooltip="这里是提示信息" onClick={sleep}>
        提示信息
      </ProButton>
    </Gap>
  );
};

设置鉴权

权限控制等场景

tsx

import { Checkbox, Divider, Gap } from "shineout";
import { ProButton, setConfig, useRefresh } from "@lite-code/pro-shineout";

// 系统入口，先查询用户按钮权限
const btnAuthList = ["component.user.add", "component.user.edit"];

setConfig({
  btnAuthList,
});

export default () => {
  const refresh = useRefresh();
  return (
    <>
      <Checkbox
        onClick={(e: any) => {
          if (e.target.checked) {
            btnAuthList.push("component.user.remove");
          } else {
            btnAuthList.splice(2, 1);
          }
          setConfig({
            btnAuthList,
          });
          refresh();
        }}
      >
        是否允许删除
      </Checkbox>
      <Divider />
      <Gap>
        <ProButton auth="component.user.add">添加</ProButton>
        <ProButton type="primary" auth="component.user.edit">
          编辑
        </ProButton>
        {/* 这里是没有删除按钮的权限 */}
        <ProButton type="danger" auth="component.user.remove">
          删除
        </ProButton>
      </Gap>
    </>
  );
};

API

属性名	描述	类型	默认值	是否必需
confirm	二次提示内容	string	无	否
confirmType	二次提示类型	popover ｜ modal	modal	否
label	内容	string	空	否
visible	是否渲染	boolean	true	否
tooltip	悬浮提示	string	空	否
auth	权限标识	string	空	否