Блог

Я ищу изменения в точках останова Vuetify JS, первоначально выглядящие как:

Очень маленький xs от маленького до большого телефона <600 пикселей

Маленький планшет размером от малого до среднего 600 пикселей> <960 пикселей

Средний и большой планшет для ноутбука 960 пикселей> < 1264 пикселей*

Большой рабочий стол lg 1264 пикселей> < 1904 пикселей*

Очень большой xl 4k и сверхширокий > 1904 пикселей*

https://vuetifyjs.com/en/components/grids/#usage

И мне нужно изменить большой рабочий стол Lg на 1366, как это сделать? это должно позволить мне использовать классы vuetify для точек останова, подобных этому $ vuetify.breakpoint .

 {
  // Breakpoints
  xs: boolean
  sm: boolean
  md: boolean
  lg: boolean
  xl: boolean

  // Conditionals
  xsOnly: boolean
  smOnly: boolean
  smAndDown: boolean
  smAndUp: boolean
  mdOnly: boolean
  mdAndDown: boolean
  mdAndUp: boolean
  lgOnly: boolean
  lgAndDown: boolean
  lgAndUp: boolean
  xlOnly: boolean

  // true if screen width < mobileBreakpoint
  mobile: boolean
  mobileBreakpoint: number

  // Current breakpoint name (e.g. 'md')
  name: string

  // Dimensions
  height: number
  width: number

  // Thresholds
  // Configurable through options
  {
    xs: number
    sm: number
    md: number
    lg: number
  }

  // Scrollbar
  scrollBarWidth: number
}
 

Пожалуйста, помогите мне, потому что я не знаю, как это изменить, и я не хочу создавать собственную систему точек останова с помощью Vuetify…

вы можете прочитать эту часть документации vuetify, в ней есть хороший и полный пример того, как изменять точки останова сетки:

изменение точек останова vuetify

в вашем случае у вас может быть:

 // src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  breakpoint: {
    thresholds: {
      xs: 600,
      sm: 960,
      md: 1366,
      lg: 1904,
    },
  },
})
 

также вам может потребоваться реализовать эти изменения в вспомогательных классах css, для чего есть советы по ссылке, приведенной выше.