Vuetify:v-ripple仅可用于块级元素

时间:2019-04-22 17:37:30

标签: vue.js vuetify.js

我今天才刚开始遇到此错误,它破坏了我的整个网站(因为像个傻瓜,我正在页面加载时加载Vuetify)。

有人知道这意味着什么或如何解决吗?谷歌搜索并没有发现任何有用的信息。

编辑:

对于那些因为其站点也已损坏而发现此问题的人,可能是由于您从何处加载vuetify.min.css。对我来说,页面加载就像这样:

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

并通过从已安装的软件包中导入而不是使用

解决了该问题
import 'vuetify/dist/vuetify.min.css'

app.js中。

不过,我仍然对了解这项v-ripple业务很感兴趣。

3 个答案:

答案 0 :(得分:2)

今天我遇到了同样的问题,并注意到上面提到的标题时,开始按照上面的建议进行导入:

@charset "UTF-8";
/*!
* Vuetify v2.0.0-alpha.14
* Forged by John Leider
* Released under the MIT License.

好像他们碰到了dist版本(我正在使用1.5.12)。我已将链接href更新为:

https://cdn.jsdelivr.net/npm/vuetify@1.5.12/dist/vuetify.min.css

...然后我的网站又重新放在一起了。最好将其作为模块引入,但这将是积压的事情。希望这对某人有帮助。

答案 1 :(得分:0)

我遇到了同样的问题,并通过安装

解决了
  

material-design-icons-iconfont

运行以下命令进行安装:

npm install material-design-icons-iconfont

或者,如果您是用yarn来运行的,则:

yarn install material-design-icons-iconfont

现在导入main.js文件:

import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

您可以阅读vuetify文档以获取更多信息: scope

答案 2 :(得分:0)

对我来说,问题是我同时安装了tslint和eslint。在禁用eslint之后,它起作用了。