54 lines
984 B
Vue
54 lines
984 B
Vue
<script>
|
|
import Align from '../index';
|
|
|
|
const align = {
|
|
points: ['cc', 'cc'],
|
|
};
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
point: null,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
onClick({ pageX, pageY }) {
|
|
this.point = { pageX, pageY };
|
|
},
|
|
},
|
|
|
|
render() {
|
|
return (
|
|
<div style={{ marginBottom: '170px' }}>
|
|
<div
|
|
style={{
|
|
margin: '20px',
|
|
border: '1px solid red',
|
|
padding: '100px 0',
|
|
textAlign: 'center',
|
|
}}
|
|
onClick={this.onClick}
|
|
>
|
|
Click this region please : )
|
|
</div>
|
|
|
|
<Align target={this.point} align={align}>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
width: '100px',
|
|
height: '100px',
|
|
background: 'rgba(0, 255, 0, 0.5)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
>
|
|
Align
|
|
</div>
|
|
</Align>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
</script>
|