0.0.15 • Published 4 years ago
taro-dom-align-test v0.0.15
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