Describe

js 跟随鼠标自由移动vue2指令

Installation

$ npm i vue-directive-freevisual

在vue文件中使用

<template>
	<!--元素位置被更新时的回调函数并不是必须的-->
	<div style="width: 500px; height: 500px" v-freeVisual="freeVisualCallback">
		<div style="width: 1500px; height: 1500px"></div>
	</div>
</template>

<script>
import freeVisual from 'vue-directive-freeVisual';

export default {
	directives: { freeVisual },
	methods: {
		freeVisualCallback({ scrollTop, scrollLeft, clientWidth, clientHeight }, evt) {}
	}
}
</script>

在vue的jsx中使用

import freeVisual from 'vue-directive-freeVisual';

export default {
	directives: { freeVisual },
	render(h) {
		const directives = [{ 
			name: 'freeVisual'
		}];
		return (
			<div {...{directives}} style="width: 500px; height: 500px">
				<div style="width: 1500px; height: 1500px;"></div>
			</div>
		);
	}
}

License

MIT