taro-dom-align
v1.2.0
Published
taro dom-align
Downloads
71
Maintainers
Readme
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>
);
};
⚠ 注意
- 由于小程序的限制,target元素 不能设置position定位,否则将会导致target的定位计算出现错误
TODO
- [ ] 支持 taro3
- [ ] 支持 taro1
许可
MIT © John60676