Taro-dom-align NPM

taro-dom-align

在 Taro 中使用 dom-align，部分代码的实现参考了 dom-align。

安装

Taro 2

# yarn
yarn add taro-dom-align

# npm
npm i taro-dom-align --save

使用

import useDomAlign from 'taro-dom-align'

// 与原版 dom-align 不同， 
// sourceStyle 绑定在 source 元素上
// doAlign 计算 source 的定位
// setSourceStyle 自定义 source 的样式
const alignConfig = {
  points: ['tl', 'br']
}
const [sourceStyle, doAlign, setSourceStyle] = useDomAlign('.source', '.target', alignConfig)

alignConfig 参数详解

Demo

import { View, Button } from '@tarojs/components';
import useDomAlign from 'taro-dom-align';

function Page (){
  const [sourceStyle, doAlign, setSourceStyle] = useDomAlign('.source', '.target', {
    points: ['tl', 'br'],   // source 节点的 top-left(左上角) 对齐 target 节点的 bottom-right(右下角)
    offset: ['10%', '20%'], // 使得 source 节点的X轴偏移自身宽度的10%，Y轴偏移自身高度的20%
    targetOffset: [10, 20], // 使得 target 节点的X轴偏移10px，Y轴偏移20px
  });

  const handleClick = () => {
    if (sourceStyle.display === 'none') {
      doAlign();
    } else {
      setSourceStyle({
        display: 'none',
      });
    }
  };
  return (
    <View>
      <View className='target'>
        <Button onClick={handleClick}>
          target
        </Button>
      </View>
      <View className='source' style={sourceStyle}>
        source
      </View>
    </View>
  );
};