46 lines
846 B
Vue
46 lines
846 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>
|
|
|