npm 包 @anomen/react-tether 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在 Web 开发中，有时需要给页面的某个元素添加一个浮动窗口或下拉菜单。但是这些浮动窗口可能会被内容溢出或屏幕边界等问题所困扰。在这种情况下，@anomen/react-tether 这个 npm 包解决了这个问题。它是一个轻量级、易于使用、高度可定制且可重用的模块。

安装

在项目根目录下运行以下命令：

npm install @anomen/react-tether

使用

初始化

首先，在组件中导入 @anomen/react-tether 模块：

import TetherComponent from 'react-tether'

然后，定义一个 TetherComponent 实例并在 render 函数中使用：

render() {
  return (
    <TetherComponent attachment="top center" targetAttachment="bottom center">
      <div className="CardBody">Card Body Content</div>
      <div className="CardFooter">Card Footer Content</div>
    </TetherComponent>
  )
}

Props

TetherComponent 支持如下 props：

attachment / targetAttachment

通过 attachment 和 targetAttachment 两个属性可以指定附着点和目标点的定位。可以传递以下值：

top left
top center
top right
right top
right middle
right bottom
bottom left
bottom center
bottom right
left top
left middle
left bottom

offset

通过 offset 属性可以指定浮动窗口的偏移量。

<TetherComponent attachment="top center" targetAttachment="bottom center" offset="0 10px">

targetOffset / targetModifier

通过 targetOffset 和 targetModifier 可以对目标点进行微调。

<TetherComponent attachment="top center" targetAttachment="bottom center" targetOffset="0px 10px" targetModifier="visible">

renderElement

通过 renderElement 可以替换默认渲染函数。

<TetherComponent attachment="top center" targetAttachment="bottom center" renderElement={(ref) => <MyComponent ref={ref}/>}>

示例

常规使用

-- -------------------- ---- -------
------ --------------- ---- --------------

-------- ------------- -
  ------ -
    ---------------- --------------- ------- ------------------------ --------
      ---- ------------------------- ---- -------------
      ---- --------------------------- ------ -------------
    ------------------
  -
-

更改附着点

-- -------------------- ---- -------
------ --------------- ---- --------------

-------- ------------- -
  ------ -
    ---------------- ------------------ ------- --------------------- --------
      ---- ------------------------- ---- -------------
      ---- --------------------------- ------ -------------
    ------------------
  -
-

微调

-- -------------------- ---- -------
------ --------------- ---- --------------

-------- ------------- -
  ------ -
    ---------------- ------------------ ------- --------------------- ------- --------- -------
      ---- ------------------------- ---- -------------
      ---- --------------------------- ------ -------------
    ------------------
  -
-

总结

借助 npm 包 @anomen/react-tether，我们可以轻松部署一个定制化浮动窗口，并避免与屏幕的边界冲突。学习本篇文章后，你将明确如何使用 TetherComponent 的各种选项来实现自定义定位效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600558d381e8991b448d6241