v-magnet

简介

v-magnet 指令可以让元素在鼠标移动时产生磁性效果，多个元素可以相互吸引或者排斥。

基础用法

通过配置force和pole属性，你可以设置磁铁的磁力和磁性。force越大，磁铁的吸引力就越强，pole包括positive, negative和iron，分别表示磁铁的正级、负极和铁。

它们往往遵循：

• 正级磁铁吸引正级磁铁，排斥负极磁铁
• 负极磁铁吸引负极磁铁，排斥正级磁铁
• 铁磁铁吸引所有磁铁

代码示例

<script setup lang="ts">
import Magnet from './components/Magnet.vue'
import { vMagnet, vDrag } from '@cp-vuedir/core'
</script>

<template>
  <div class="container">
    <Magnet
      v-drag
      v-magnet="{
        force: 50,
        pole: 'positive'
      }"
      name="positive"
    >
      正极
    </Magnet>
    <Magnet
      v-drag
      v-magnet="{
        force: 50,
        pole: 'negative'
      }"
      name="negative"
    >
      负极
    </Magnet>
    <Magnet
      v-drag
      v-magnet="{
        force: 100,
        pole: 'iron'
      }"
      name="iron"
    >
      铁
    </Magnet>
    <Magnet
      v-drag
      v-magnet="{
        force: 50,
        pole: 'positive'
      }"
      name="positive"
    >
      正极
    </Magnet>
    <Magnet
      v-drag
      v-magnet="{
        force: 50,
        pole: 'negative'
      }"
      name="negative"
    >
      负极
    </Magnet>
  </div>
</template>

<style scoped>
.container {
  height: 30vh;
  width: 100%;
  border: 1px solid var(--vp-c-text-1);
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>

TIP

默认情况下，磁铁仅能在其父元素内移动。

设置运动范围

你可以通过配置range属性来设置磁铁的运动范围。range是一个Ref对象。比如在下面例子中，磁铁可在整个文档移动。

代码示例

<script setup lang="ts">
import { ref } from 'vue'
import Magnet from './components/Magnet.vue'
import { vMagnet, vDrag } from '@cp-vuedir/core'
const containerRef = ref<HTMLElement | null>(window.document.body)
</script>

<template>
  <div class="container">
    <Magnet
      v-drag
      v-magnet="{
        force: 50,
        pole: 'positive',
        range: containerRef
      }"
      name="positive"
    >
      正极
    </Magnet>
    <Magnet
      v-drag
      v-magnet="{
        force: 50,
        pole: 'negative',
        range: containerRef
      }"
      name="negative"
    >
      负极
    </Magnet>
    <Magnet
      v-drag
      v-magnet="{
        force: 100,
        pole: 'iron',
        range: containerRef
      }"
      name="iron"
    >
      铁
    </Magnet>
    <Magnet
      v-drag
      v-magnet="{
        force: 50,
        pole: 'positive',
        range: containerRef
      }"
      name="positive"
    >
      正极
    </Magnet>
    <Magnet
      v-drag
      v-magnet="{
        force: 50,
        pole: 'negative',
        range: containerRef
      }"
      name="negative"
    >
      负极
    </Magnet>
  </div>
</template>

<style scoped>
.container {
  height: 30vh;
  width: 100%;
  border: 1px solid var(--vp-c-text-1);
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>

TIP

你可以尝试把这个示例中的磁铁全部移动到上面一个示例之中的磁铁周围，看看会发生什么效果。

整活

下面是一个有趣的例子，你可以尝试，看看会发生什么效果。

API

属性名	说明	类型	是否必选	默认值
force	磁铁的吸引力，其值的大小决定了磁铁的吸引力大小，值越大，磁铁的吸引力越大。	number	✓	-
pole	磁铁的极性，包括positive, negative和iron。positive表示正级磁铁，negative表示负极磁铁，iron表示铁磁铁。	string	✓	-
range	磁铁的运动范围，其值为一个Ref对象，不设置则默认为父元素。	Ref	○	-