Vue.js的动画自定义光标效果 - vue-cursor-fx

Vue.js的动画自定义光标效果 - vue-cursor-fx
插件名称 vue-cursor-fx
版本号 1.6.1
发布时间 2021年2月25日
插件作者 LuXDAmore

一个与SSR兼容的Vue组件,用于为交互式元素(如导航)创建动画自定义光标效果。

安装和下载:

# NPM
$ npm i @luxdamore/vue-cursor-fx

使用:

1.导入并注册cursor-fx安装后的内容。

// Globally
import { CursorFx } from '@luxdamore/vue-cursor-fx';
import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';
Vue.component(
  CursorFx.name,
  CursorFx
);
// Locally
import { CursorFx } from '@luxdamore/vue-cursor-fx';
  export default {
    components: {
      'cursor-fx': CursorFx,
    },
};
<style src="@luxdamore/vue-cursor-fx/dist/CursorFx.css"></style>
// As a plugin
import CursorFx from '@luxdamore/vue-cursor-fx';
import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';
Vue.use(
  CursorFx
);

2.可用props。

<cursor-fx></cursor-fx>
disabled: {
  type: Boolean,
  default: false,
},
id: {
  type: String,
  default: 'cursor-fx',
},
config: {
  type: Object,
  default: () => {},
},
mixBlendMode: {
  type: String,
  default: null,
},
color: {
  type: String,
  default: '#333333',
},
colorHover: {
  type: String,
  default: '#333333',
},
outsideSize: {
  type: String,
  default: null,
},
insideSize: {
  type: String,
  default: null,
},
shape: {
  type: String,
  default: null,
},
delay: {
  type: [
    Number,
    String,
  ],
  default: 60,
},
forceCustomSlot: {
  type: Boolean,
  default: false,
},
allowOnMobile: {
  type: Boolean,
  default: false,
},
hideOutside: {
  type: Boolean,
  default: false,
},
hideInside: {
  type: Boolean,
  default: false,
},

3.事件

@before-start="onBeforeStart"
@after-start="onAfterStart"
@ready="onReady"
@before-destroy="onBeforeDestroy"
@after-destroy="onAfterDestroy"

4. API方法。

// 开始
this.$refs.cursor.start();

// 销毁
this.$refs.cursor.destroy();

// 刷新
this.$refs.cursor.refresh();