0.0.11 • Published 4 years ago

test-taro-dom-align v0.0.11

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

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'],
  });

  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>
  );
};

TODO

  • 设置 source 的偏移值,与原版的 alignConfig offset 效果一致
  • 设置 target 的偏移值,与原版的 alignConfig -- targetOffset
  • 支持 taro3
  • 支持 taro1
  • 多端?

许可

MIT © John60676