javascript 无法在Quasar中使用图标

rekjcdws  于 2023-05-12  发布在  Java
关注(0)|答案(1)|浏览(122)

我试图使用一些图标与q-btn,但无济于事。
我尝试在我的测试项目中使用mdi-v7图标。为了安装图标,我已经按照official documentation。在我的./quasar.config.js中,我添加了以下内容

extras: [
  "mdi-v7",
  "roboto-font", // optional, you are not bound to it
  "material-icons", // optional, you are not bound to it
],
framework: {
  config: {},
  iconSet: "mdi-v7",
  plugins: [],
},

现在,在我的vue元素中,我尝试使用如下图标

<div class="q-ml-sm row no-wrap items-center">
    <q-btn
      type="a"
      flat
      round
      :icon="mdiDeskLamp"
      @click="$q.dark.toggle()"/>
</div>

我还导入了图标

import { mdiDeskLamp } from "@quasar/extras/mdi-v7";

但这给了我警告,在控制台和没有图标显示。

[Vue warn]: Property "mdiDeskLamp" was accessed during render but is not defined on instance.

此外,如果我使用icon="mdiDeskLamp(而不是:icon),我不会显示任何图标,但会显示一个奇怪的D

我很确定这是一个新手的错误,对框架来说是非常新的。任何帮助将不胜感激。
谢谢

vptzau2j

vptzau2j1#

您可以将q-icon标记包含在q-button内,例如:
<q-btn> <q-icon name="mdiDeskLamp"/> </q-btn>使用上面的代码添加图标并相应地设置样式。
更好的参考访问:https://quasar.dev/vue-components/button/

相关问题