85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<script>
|
|
import Align from '../index';
|
|
import BaseMixin from '../../_util/BaseMixin';
|
|
|
|
export default {
|
|
mixins: [BaseMixin],
|
|
data () {
|
|
return {
|
|
monitor: true,
|
|
align: {
|
|
points: ['tl', 'tc'],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
getTarget () {
|
|
const ref = this.$refs.container;
|
|
if (!ref) {
|
|
// parent ref not attached
|
|
return document.getElementById('container');
|
|
}
|
|
return ref;
|
|
},
|
|
|
|
toggleMonitor () {
|
|
this.setState({
|
|
monitor: !this.$data.monitor,
|
|
});
|
|
},
|
|
|
|
forceAlign () {
|
|
this.$refs.align.forceAlign();
|
|
},
|
|
},
|
|
|
|
render () {
|
|
return (
|
|
<div
|
|
style={{
|
|
margin: '50px',
|
|
}}
|
|
>
|
|
<p>
|
|
<button onClick={this.forceAlign}>Force align</button>
|
|
|
|
<label>
|
|
<input type='checkbox' checked={this.monitor} onInput={this.toggleMonitor} />
|
|
|
|
Monitor window resize
|
|
</label>
|
|
</p>
|
|
<div
|
|
ref='container'
|
|
id='container'
|
|
style={{
|
|
width: '80%',
|
|
height: '500px',
|
|
border: '1px solid red',
|
|
}}
|
|
>
|
|
<Align
|
|
ref='align'
|
|
target={this.getTarget}
|
|
monitorWindowResize={this.$data.monitor}
|
|
align={this.$data.align}
|
|
>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
width: '50px',
|
|
height: '50px',
|
|
background: 'yellow',
|
|
}}
|
|
>
|
|
source
|
|
</div>
|
|
</Align>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
</script>
|