Nuxt js中计算的Bootstrap断点

在Nuxt.js项目中，您可以使用计算属性来动态获取Bootstrap的断点

首先，确保您已经在项目中安装并引入了Bootstrap。您可以通过以下命令安装Bootstrap：

npm install bootstrap

在nuxt.config.js文件中，添加Bootstrap CSS的链接：

export default {
  css: [
    'bootstrap/dist/css/bootstrap.min.css'
  ],
  // ...
}

在您的Vue组件中，创建一个计算属性来获取Bootstrap的断点。Bootstrap的断点定义在_variables.scss文件中，如下所示：

// _variables.scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

在Vue组件中，创建一个计算属性来获取这些断点：

export default {
  computed: {
    bootstrapBreakpoints() {
      return {
        xs: 576,
        sm: 768,
        md: 992,
        lg: 1200,
        xl: 1400
      };
    }
  }
}

现在，您可以在组件的模板中使用这些断点。例如，您可以使用v-if指令根据屏幕宽度显示不同的内容：

<template>
  <div>
    <p v-if="$mq === 'xs'">Extra small screen</p>
    <p v-else-if="$mq === 'sm'">Small screen</p>
    <p v-else-if="$mq === 'md'">Medium screen</p>
    <p v-else-if="$mq === 'lg'">Large screen</p>
    <p v-else-if="$mq === 'xl'">Extra large screen</p>
  </div>
</template>

<script>
export default {
  computed: {
    bootstrapBreakpoints() {
      return {
        xs: 576,
        sm: 768,
        md: 992,
        lg: 1200,
        xl: 1400
      };
    },
    $mq() {
      const width = window.innerWidth;
      if (width < this.bootstrapBreakpoints.sm) {
        return 'xs';
      } else if (width < this.bootstrapBreak基points.md) {
        return 'sm';
      } else if (width < this.bootstrapBreakpoints.lg) {
        return 'md';
      }  else if (width < this.bootstrapBreakpoints.xl) {
        return 'lg';
      } else {
        return 'xl';
      }
    }
  }
}
</script>

这样，您就可以根据屏幕宽度动态地获取Bootstrap的断点并在组件中使用它们。