jizhi-guide

react 用户指引组件

Usage

基础用法 默认居中

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = ['left', 'right', 'bottom', 'top'];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  return (
    <>
      {placements.map((item) => {
        return (
          <button
            type="primary"
            style={{ margin: '10px' }}
            key={item}
            onClick={() => show(item)}
          >
            show {item}
          </button>
        );
      })}
      <div>
        <span ref={targetDom}>目标高亮区域</span>
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
      >
        内容
      </Guide>
    </>
  );
};

其他位置

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = [
    'top-left',
    'top-right',
    'bottom-left',
    'bottom-right',
    'left-top',
    'left-bottom',
    'right-top',
    'right-bottom',
  ];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  return (
    <>
      {placements.map((item) => {
        return (
          <button
            type="primary"
            style={{ margin: '10px' }}
            key={item}
            onClick={() => show(item)}
          >
            show {item}
          </button>
        );
      })}
      <div>
        <span ref={targetDom}>目标高亮区域</span>
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
      >
        内容
      </Guide>
    </>
  );
};

偏移位置

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = [
    'left',
    'right',
    'bottom',
    'top',
    'top-left',
    'top-right',
    'bottom-left',
    'bottom-right',
    'left-top',
    'left-bottom',
    'right-top',
    'right-bottom',
  ];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  const targetStyle = {
    background: 'red',
    width: '200px',
    height: '100px',
  };
  return (
    <>
      {placements.map((item) => {
        return (
          <button
            type="primary"
            style={{ margin: '10px' }}
            key={item}
            onClick={() => show(item)}
          >
            show {item}
          </button>
        );
      })}
      <div style={targetStyle} ref={targetDom}>
        目标高亮区域
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
        offset={{ x: 20, y: 20 }}
      >
        内容
      </Guide>
    </>
  );
};

自定义指引箭头

不仅仅是指引箭头，还可以是任何你想要的装饰 dom

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = ['left'];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  return (
    <>
      <button
        type="primary"
        style={{ margin: '10px' }}
        onClick={() => show('right')}
      >
        show left
      </button>
      <div>
        <span ref={targetDom}>目标高亮区域</span>
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
        showArrow={false}
        margin={80}
        decorate={
          <div style={{ position: 'absolute ', left: '-75px', top: '30px' }}>
            <svg
              width="72"
              height="72"
              className="icon"
              viewBox="0 0 1267 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5355"
            >
              <path
                d="M1170.529524 73.094095L97.304381 499.809524 1170.529524 926.524952 978.236952 499.809524z"
                fill="#1296db"
                p-id="5356"
              ></path>
            </svg>
          </div>
        }
      >
        内容
      </Guide>
    </>
  );
};

主题颜色

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('left');
  const onClose = () => {
    setOpen(false);
  };
  const placements = ['left'];
  const show = (p) => {
    setPlacement(p);
    setOpen(true);
  };
  return (
    <>
      <button
        type="primary"
        style={{ margin: '10px' }}
        onClick={() => show('right')}
      >
        show left
      </button>
      <div>
        <span ref={targetDom}>目标高亮区域</span>
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        placement={placement}
        themeColor="rgb(2, 94, 51)"
      >
        内容
      </Guide>
    </>
  );
};

加入步值的例子

import { Guide } from 'jizhi-guide';
import { useRef, useState } from 'react';

export default () => {
  const targetDom = useRef();
  const targetDom2 = useRef();
  const [open, setOpen] = useState(false);
  const [open1, setOpen1] = useState(false);
  const onClose = () => {
    setOpen(false);
    setOpen1(true);
  };
  const onClose2 = () => {
    setOpen1(false);
  };
  const show = () => {
    setOpen(true);
  };
  const targetStyle = {
    background: 'red',
    width: '200px',
    height: '100px',
    marginBottom: '1000px',
  };
  const targetStyle2 = {
    background: 'green',
    width: '200px',
    height: '100px',
  };
  const spanStyle = {
    display: 'inline-block',
    lineHeight: '28px',
    marginRight: '10px',
    color: '#666',
  };
  return (
    <>
      <button type="primary" style={{ margin: '10px' }} onClick={() => show()}>
        show
      </button>
      <div style={targetStyle} ref={targetDom}>
        目标高亮区域1
      </div>
      <div style={targetStyle2} ref={targetDom2}>
        目标高亮区域2
      </div>
      <Guide
        onClose={onClose}
        dom={targetDom.current}
        open={open}
        title="Hello jizhi-guide"
        spanEle={<span style={spanStyle}>1/2</span>}
        showCancel={true}
      >
        目标高亮区域1内容
      </Guide>
      <Guide
        onClose={onClose2}
        dom={targetDom2.current}
        open={open1}
        title="Hello jizhi-guide"
        spanEle={<span style={spanStyle}>2/2</span>}
      >
        目标高亮区域2内容
      </Guide>
    </>
  );
};

api 简介

| 参数 | 说明 | 类型 | 默认值 | | ---------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | dom | 高亮 dom 元素,可以是 dom 元素和其唯一的 id 或者 class | HTMLElement ,string | | | placement | 弹层相对于高亮元素所在位置 | string , 'top','left' ,'bottom','right','top-left', 'top-right''bottom-left','bottom-right', 'left-top','left-bottom','right-top', 'right-bottom' | | | offset | 偏移参数 | {x:number,y:number} | {x:0,y:0} | | width | 弹层宽度 | number | 260 | | title | 弹框标题 | string,HTMLElement | | | radius | 高亮区域和弹层圆角 | number | 4 | | cancelText | 取消按钮文案 | string | "下一步" | | showCancel | 是否展示取消按钮 | boolean | fasle | | onCancel | 取消按钮的 click 事件 | () => void | | | showOk | 是否显示我知道了按钮 | boolean | true | | okText | ok 按钮自定义文案 | string | 我知道了 | | onClose | 关闭弹层的回调 | ()=>void | | | decorate | 弹层自定义装饰 dom 元素 | JSX.Element | | | showArrow | 是否显示默认弹层指引箭头 | boolean | true | | open | 是否显示指引 | boolean | fasle | | zIndex | 弹层显示的层级 | number | 100 | | margin | 弹层与高亮元素位置间距 | number | 20 | | footer | 弹层底部内容，当不需要默认底部按钮时，可以设为 footer={false} | HTMLElement,boolean | true | | lang | 语言 | string | zh | | themeColor | 主题颜色 | string | #1890ff | | delayTime | 延时渲染时间 | number | 100 | | spanEle | 步值标注 | string ,HTMLElement | |