Tilt.js在Vue 3中的应用

Question

我正在使用Vue3 +类型记录构建一个应用程序，并且已经找到了关于tilt.js的内容。我读到了将它包含在项目中的多种方法，但是当我将data-tilt添加到HTML元素时，我尝试过的任何一种方法似乎都不起作用。

1. index.html references

首先，我使用cdn在我的tilt.js文件中引用index.html文件，如下所示：

    <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方法不起作用后，我尝试下载文件这里并将其添加到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项目中包括香草倾斜呢？

Answer 1

如果您想使用data-tilt属性，它确实可以使用CDN链接。请参阅下面的片段。

​

.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方法。有一个名为香草倾斜的库(我还没有试过)。如果这不是你的茶，那就看看作者是如何制作它们的成分的：

<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>

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