vuetify: рассчитать ширину сетки по пропущенным подпоркам - PullRequest
Новая
       18

vuetify: рассчитать ширину сетки по пропущенным подпоркам

0 голосов
/ 03 мая 2018

Я хочу создать компонент меню, который создает кнопки одинакового размера на основе количества элементов меню, переданных в качестве реквизита.

похож на https://stackoverflow.com/a/47215040/6066886 Я хочу дать V-Flex условный атрибут. (xs6 для двух предметов, xs4 для трех и т. д.)

(что-то вроде <v-flex v-for="item in menuItems" xs[12 / menuItems.length]>)

В связанном вопросе идея состоит в том, чтобы передать "xs10" или нет, в зависимости от условия.

Я хочу посчитать, КАКОЕ из них будет добавлено в мой v-flex, но я понятия не имею, как это будет сделано ... поскольку я ничего не могу v-bind ... может кто-нибудь мне помочь?

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Хорошо, теперь я вижу вашу проблему. Я немного покопался, и это нелегко решить, потому что v-flex не поддерживает params, он должен быть объявлен как атрибут, а не как класс (как говорится в этом ответе https://stackoverflow.com/a/47215040/6058255).

Поскольку нет способа создать атрибут без значения, как я сказал в комментарии, и выполнить некоторые тесты, я сделаю следующее: 

<v-flex v-bind:class="'xs'+12/menuItems.length" v-for="menuItem in menuItems">
            {{menuItem}}
</v-flex>

Это должно отобразить элемент v-flex с классом вроде: "xs12","xs6","xs4" ..

Тогда вам нужно только copy стиль класса для этих элементов, для которых есть v-flex, что-то вроде: 

.xs12{ max-width:100%; }
.xs6{ max-width: 50%; }
.xs4{ max-width: 25%; }
.xs3{ max-width: 33.333333333%;  }
...

Возможно, это не решение more elegant, но оно простое и оно работает для вас, я думаю.

Надеюсь, это поможет!

РЕДАКТИРОВАТЬ:

Отзыв stdob-- ответить Теперь я вижу, что только с выражением: 

<v-flex v-bind:class="'xs'+12/menuItems.length" v-for="menuItem in menuItems">
            {{menuItem}}
</v-flex>

Должно работать. Компонент flex будет отображаться как flex xs12 (например).

0 голосов
/ 03 мая 2018

Вы можете связать вычисляемое свойство как объект класса: 

<v-flex :class="xsComputed" v-for="(item,i) in items" :key="i">{{item}}</v-flex>


...

new Vue({
  el: '#app',
  data: function() {
    return {
      items: [1, 2, 3, 4]
    }
  },
  computed: {
    xsComputed: function() {
      var step = Math.floor(10 / this.items.length)
      var xsc = {}
      xsc['xs' + step] = true
      console.log(xsc)
      return xsc
    }
  }
})

https://jsfiddle.net/26zfLn8j/

...