sf-vue-animated-cursor

vue 3的可参数化的动画光标。

预览

安装

npm install sf-vue-animated-cursor

使用方法

有两个东西可以从该插件中调用。

• 基本光标，它可以很容易地被参数化，你可以根据自己的喜好来建立它。
• 默认光标，它是一个内置的光标，只能设置目标、传送到、观察属性。

选项

• basic：如果你想使用内置游标而不是基本游标，你只需要在选项中指定'basic: false'。

main.js

import { createApp } from 'vue'
import App from './App.vue'
import SfVueAnimatedCursor from 'sf-vue-animated-cursor'

const app = createApp(App)

app

然后它就可以放在任何地方，但要确保目标值（默认为#app）是有效的。

例如

App.vue

<

提示：通过teleport属性，你可以设置光标在html中的位置。

道具

所有的属性都只能在基本光标中使用。 对于默认的光标，你只能设置target, teleportTo, 和watch属性。

名称	类型	类型	可能的值	默认值
传送到	String	将光标传送到指定的选择器上。	任何html元素	body
目标	String	光标在指定的选择器中工作	任何 html 元素	#app
显示	Boolean	光标的可见性	true, false	true
观察	Boolean	如果不需要发出的值，将其设置为false	true, false	true
宽度	Number	游标宽度	任何数字	6px
高度	Number	游标高度	任何数字	6px
bgColor	String	游标的背景颜色	任何颜色	#657786
边框颜色	String	游标边框颜色	任何颜色	#657786
边框宽度	Number	游标的边界宽度	任何数字	1px
边框半径	Number	游标的边界半径	任何数字	50%
减速	Number	减慢动画光标的速度	任何数字	0s
可悬停	String	激活悬停效果的类名	任何HTML元素	hoverable
悬停动画	Boolean	悬停动画开/关	真，假	true
点击动画	Boolean	点击动画开/关	true, false	true
混合混合模式	String	混合混合模式	任何有效的css值	difference
点击时的比例	Number	点击事件的比例值	任何数字	2
悬停点击时的比例	Number	悬停时，点击事件的比例值	任何数字	2
悬停时	Number	悬停事件的比例值	任何数字	3
悬停时的不透明度	Number	悬停事件的不透明度值	任何数字	0.5

发出

事件	发出的值
移动	位置x，位置y，光标可见度
点击	true, false
悬停	真, 假

许可证

由Schön Ferenc在MIT下发布。

GitHub

查看Github