Jizhi-guide NPM

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