Управление стилем метки в v-treeview в VuetifyJS - PullRequest
Новая
       104

Управление стилем метки в v-treeview в VuetifyJS

0 голосов
/ 14 июля 2020

У меня есть следующие 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' },
        ],
      }
    ],
  }),
})

Допустим, я хочу сделать размер шрифта ярлыка Загрузки больше или жирным.

Возможно ли это с Vuetify и v-treeview? Если да, то как? Похоже, что нет способа контролировать стиль этикеток.

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Все можно контролировать в 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>

Посмотрите на описание API на страницах компонентов Vuetify и найдите slots - если компонент имеет слот вы ищете, то с ним довольно легко можно работать. Если нет, то вам, возможно, придется настроить классы или даже компоненты.

v-treeview документация: https://vuetifyjs.com/en/components/treeview/

VTreeview имеет вызов slot label. Вы можете "вызвать" этот слот: 

<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>. В моем фрагменте нам нужен был только item, поэтому я передал только его.

Мой фрагмент работает только в том случае, если у вас есть элемент с id: 15, но вы можете указать любые logi c там: методы вызова, вычисляемые свойства и т.д. *

1 голос
/ 14 июля 2020

Необходимо использовать слот label. Попробуйте примерно так: 

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