html - 在 Vue 3 中使用 Tilt.js

Question

我正在使用 Vue3 + Typescript 构建一个应用程序，并发现了tilt.js。 我读到了将其包含在元素中的多种方法，但在将 data-tilt 添加到 HTML 元素时，我尝试的所有方法似乎都不起作用

<强>1。 index.html 引用

我开始使用 cdn 在我的 index.html 文件中引用tilt.js，如下所示:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js" integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<强>2。下载文件本身

cdn方法不行后，我尝试下载文件here并将其添加到我的 src 文件夹中，然后使用引用它

<script type="text/javascript" src="/src/vanilla-tilt.min.js"></script>

<强>3。使用 npm 安装

我最终尝试使用 npm 安装tilt.js，如下所示:

npm install vanilla-tilt

...并将其导入到我想要的.vue文件中，如下所示

import VanillaTilt from 'vanilla-tilt';

我想我尝试过的所有解决方案一定缺少一些步骤，但我在网上找不到任何有关它的信息。 那么如何在我的 Vue3 元素中包含 vanilla-tilt 呢？

Answer 1

我尝试使用 vanilla-tilt-vue ，但效果不佳，而且它弄乱了我的 html 元素，所以我切换到 vanilla-tilt ，它为我工作。

在 Vue 3 中设置 vanilla-tilt 可以通过以下方式完成:

1. 安装 Vanilla 倾斜

   npm i vanilla-tilt

2. 复制此代码段并进行相应修改

<script scope>
import VanillaTilt from 'vanilla-tilt'
import { onMounted, ref } from 'vue'

const element = ref(null)

onMounted(() => {
  VanillaTilt.init(element.value, { max: 20, speed:400 })
})
</script>

<template>
   <div class="cardBox" ref="element"></div>
</template>

<style scoped>
.cardBox {
   width: 200px;
   height: 100px;
   background: blue;
   border-radius: 5px;
}
</style>

在 Mounted 中调用 vanillatilt，然后将 ref 传递到 init 中。