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

我试着改变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
    )
);

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何使用javacsript动态创建一个json文件。

2022-9-8 21:49:39

未分类

当在txt文件中插入文本时,会出现'错误'。

2022-9-8 21:49:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索