如何在Vuetify中对不同的屏幕尺寸使用断点？

Posted 2023-02-23

我试着改变Vuetify的断点，但没有成功，而是得到了这个错误。

get xs: ƒ reactiveGetter()arguments: [Exception.TypeError: 'caller': TypeError：'caller'、'callee'和'arguments'属性可能无法在Function.invokeGetter(:1:142)访问严格模式函数或调用它们的参数对象]caller：[Exception: TypeError: 'caller', 'callee', 和'arguments'属性不能在严格模式的函数或在Function.invokeGetter(:1:142)调用它们的参数对象上被访问]length: 0name: "reactiveGetter"

//vuetify.js
import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify(
    breakpoint: 
        thresholds: 
            xs: 100,
            sm: 200,
            md: 300,
            lg: 400,
            xl: 500
        ,
        scrollBarWidth: 24,
    ,
)

//vue.config.js
module.exports = 
  publicPath: process.env.VUE_APP_BASEURL,

  assetsDir: "r",
  devServer: 
    proxy: process.env.VUE_APP_SYSTEM_BASE
  ,
  css: 
    extract: false,
    loaderOptions: 
      sass: 
        prependData: `@import "~@/assets/style/sass/vuetify-defaults.scss"`,
      ,
    ,
  ,

 

/* vuetify-defaults.scss  */

@import "~vuetify/src/styles/styles.sass";

$grid-breakpoints: map-merge( ( 
"xs": 100px, 
"sm": 200px, 
"md": 300px, 
"lg": 400px, 
"xl": 500px), $grid-breakpoints); 

答案

所以首先要做的是。根据 证实文件 您要更改 vuetify 默认值的文件，必须位于 srcsassvariables.sass (或 srcscssvariables.scss)，这样 vuetify-loader 才会使用它。

安装完毕后，在你的src目录下创建一个名为sass、scss或style的文件夹，文件名为variables.scss或variables.sass。

其次，你不需要去碰vue.config.js来改变vuetify的默认值。根据我的理解，vuetify的加载器是直接应用于任何与vuetify相关的东西，而vue.config.js中的scss加载器则是在vuetify完成后应用于你的工作空间中的所有scss文件。不过你可以使用prependData来处理自己的scss globals。

第三，在你的工作空间中的 文件 注释。

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.merge($font-weights, ("extra-bold": 900));
// ("regular": 400, "medium": 500, "bold": 700, "extra-bold": 900)

如果两张地图的键值相同，那么第二张地图的值将被用于返回的地图中。

所以你要做的，是通过应用$grid-breakpoints作为第二个参数来覆盖你自己的变化。正确的方法是

$grid-breakpoints: map-deep-merge(
    $grid-breakpoints,
    (
        xs: 100,
        sm: 200,
        md: 300,
        lg: 400,
        xl: 500
    )
);