在 VuetifyJS 中控制 v-treeview 中标签的样式

Question

我有以下 HTML

<div id="app">
  <v-app id="inspire">
    <v-treeview :items="items"></v-treeview>
  </v-app>
</div>

以及以下 Javascript：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      {
        id: 1,
        name: 'Applications :',
        children: [
          { id: 2, name: 'Calendar : app' },
        ],
      },
      {
        id: 15,
        name: 'Downloads :',
        children: [
          { id: 16, name: 'October : pdf' },
        ],
      }
    ],
  }),
})

假设我想将 Downloads 标签的 font-size 放大或加粗。

这可以用 Vuetify 和它的 v-treeview 实现吗？如果是这样，怎么做？似乎没有办法控制标签的样式。

Answer 1

一切都可以在 Vuetify 中进行控制。有些事情比较容易，有些事情比较难：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [{
        id: 1,
        name: 'Applications :',
        children: [{
          id: 2,
          name: 'Calendar : app'
        }, ],
      },
      {
        id: 15,
        name: 'Downloads :',
        children: [{
          id: 16,
          name: 'October : pdf'
        }, ],
      }
    ],
  }),
})

.large {
  font-size: 20px;
  font-weight: 700;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-treeview :items="items">
      <template v-slot:label="{ item }">
        <span
          :class="{ large: !!(item.id === 15) }"
        >
          {{ item.name }}
        </span>
      </template>
    </v-treeview>
  </v-app>
</div>

查看 Vuetify 组件页面上的 API 描述，并查找 slots - 如果组件具有您要查找的插槽，那么您可以非常轻松地使用它。如果没有，那么您可能需要调整类甚至组件。

v-treeview 的文档：https://vuetifyjs.com/en/components/treeview/

VTreeview 有一个名为label 的slot。您可以通过以下方式“调用”该插槽：

<v-treeview :items="items">
  <template v-slot:label="{ item, leaf, selected, indeterminate, active, open }">
    <!-- your code comes here --->
  </template>
</v-treeview>

您可以传入item、leaf、selected、indetermintae、active 或open 属性，您可以在<template></template> 的范围内使用它们。在我的 sn-p 中，我们只需要 item，这就是为什么我只传递了它。

我的 sn-p 仅适用于，如果您有一个带有 id: 15 的项目 - 但您可以在那里放置任何逻辑：调用方法、计算属性等。

有关更多信息，您可以查看Vue scoped slots 和destructuring slot props。

Answer 2

您必须使用插槽label。试试这样的：

<v-treeview :items="items">
  <template v-slot:label="{ item }">
    <span style="font-weight: bold">{{ item.name }}</span>
  </template>
</v-treeview>