vue-directive-freevisual

跟随鼠标自由移动vue2指令

Usage no npm install needed!

<script type="module">
  import vueDirectiveFreevisual from 'https://cdn.skypack.dev/vue-directive-freevisual';
</script>

README

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