如何让 Switch/Case 只查看特定的断点？

Question

我是运行一个查看 Vuetify 断点的 switch/case，但它不是只获取名称并给我想要的 int，它总是以最高数字结束用于“limitSize”变量。

这是我正在处理的新闻滑块，根据断点，它在滑块中显示一个、两个或三个元素。我试过给变量一个默认值，但没有用。我更喜欢 SM & down 是 1，MD 是 2，LG & Up 是 3，但我不确定实现它的正确方法是什么。任何帮助将不胜感激。

以下是位于计算属性内的 Switch/Case。我还附上了代码当前结果的图像（图像在 MD window 上，而我想要 2）

VueJS

   pageOfWhatsNews() {
      var limitSize;
      switch (this.$vuetify.breakpoint.name) {
        case "xs":
          limitSize = 1;
        case "sm":
          limitSize = 1;
        case "md":
          limitSize = 2;
        case "lg":
          limitSize = 3;
        case "xl":
          limitSize = 3;
      }
      var start = (this.currentPage - 1) * limitSize;
      var end = (this.currentPage - 1) * limitSize + limitSize;
      return this.whatsNews.slice(start, end);
    }

Answer 1

嗯，这是因为您在 switch cases 之间缺少 break 语句。查看下面 switch-case 块的正确语法：

Switch-Case 语法

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('Oranges are [=10=].59 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are .79 a pound.');
    // expected output: "Mangoes and papayas are .79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

解决方案

function pageOfWhatsNews() {
  var limitSize;
  switch (this.$vuetify.breakpoint.name) {
    case "xs":
      limitSize = 1;
      break;
    case "sm":
      limitSize = 1;
      break;
    case "md":
      limitSize = 2;
      break;
    case "lg":
      limitSize = 3;
      break;
    case "xl":
      limitSize = 3;
      break;
  }
  var start = (this.currentPage - 1) * limitSize;
  var end = (this.currentPage - 1) * limitSize + limitSize;
  
  console.log(limitSize);
  // return this.whatsNews.slice(start, end);
}

// Just for demo
this.$vuetify = {breakpoint: {name: 'md'}};
pageOfWhatsNews();

优化方案

我还建议您将 md、lg 和 xl 断点的案例和其余断点案例回退到 default 案例。

function pageOfWhatsNews() {
  var limitSize;
  switch (this.$vuetify.breakpoint.name) {
    case "md":
      limitSize = 2;
      break;
    case "lg":
      limitSize = 3;
      break;
    case "xl":
      limitSize = 3;
      break;
    default: 
      limitSize = 1;
  }
  var start = (this.currentPage - 1) * limitSize;
  var end = (this.currentPage - 1) * limitSize + limitSize;
  
  console.log(limitSize);
  // return this.whatsNews.slice(start, end);
}

// Just for demo
this.$vuetify = {breakpoint: {name: 'sm'}};
pageOfWhatsNews();

如何让 Switch/Case 只查看特定的断点？

How can I make Switch/Case only look at specific breakpoint?

switch-statement

vue.js

vuetify.js

Switch-Case 语法

解决方案

优化方案