在 Vue 3 中使用 Tilt.js答案

【问题标题】：Using Tilt.js in Vue 3在 Vue 3 中使用 Tilt.js
【发布时间】：2022-10-24 23:03:19
【问题描述】：

我正在使用 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 呢？

【问题讨论】：

标签： html css vuejs3

【解决方案1】：

如果您想使用data-tilt 属性，它确实适用于 CDN 链接。请参阅以下 sn-p。

.box {
    width: 100px;
    height: 100px;
    background: rebeccapurple;
}

<div class="box" data-tilt></div>
<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>

导入 Vue 时，您不会希望使用 data-tilt 方法。有一个名为vanilla-tilt-vue 的库（我没有尝试过）。如果那不是你的一杯茶，请查看作者如何制作他们的组件：

<template>
    <div :class="parallax ? 'preserve':''" id="tiltMe" ref="tiltRef">
        <slot></slot>
    </div>
</template>
<script>
import VanillaTilt from 'vanilla-tilt';
export default {
    name: 'Tilt',
    data: function(){
        return {
        }
    },
    mounted(){
        VanillaTilt.init(this.$refs.tiltRef,this.options)
    },
    props: {
        options: Object,
        parallax: Boolean
    }
}
</script>

<style>
.preserve{
    transform-style: preserve-3d;
}
</style>

基本思想是为 HTML 元素构建一个ref 并将其传递给VanillaTilt.init。

【讨论】：