Vuejs 如何实现 select 范围内的按钮

Question

我有一个问题，

我在 v-for 中有一些按钮，我需要允许用户 select 从 A 到 C，例如，如图所示。此外，用户可以按下按钮，例如 D。我的 v-for 看起来像这样

<menu-item 
   v-for="(item, index) in menu"
   :key="`item_${index}`"
   @click="setMenuItem(index, item.name)"
/>

然后我有数据属性 selectedItems 当用户点击 setMenuItem().

时我在其中添加所有项目

当用户只点击一个项目时，这个选项工作正常，但是当用户select从 A 到 C 时，我无法让它工作。

通常，我需要的是，例如，当单击从 A 到 C 的一系列按钮时，我想将每个 item.name 推入我的 selectedItems 数据属性我将第二个参数传递到 setMenuItem()

图形 graphic

Answer 1

要做到这一点，您首先必须有一种方法来检查 index 是否属于 range。

您可以像这样创建常量：

const RangeSelection = [0,1,2] // 你也可以添加名字。我正在取指数

现在开始 setMenuItem 函数只需添加此检查即可。

setMenuItem(index,name) {
    if(RangeSelection.includes(index)) {
        // this is range selection
         

    } else {
         // this is single selection
         this.selectedItems = [];
         this.selectedItems.push(name)
    }

}

Answer 2

在setMenuItem方法中，你有参数index可以用来设置选择的值，例如：

options = [{name: 'a'},{name: 'b'},{name: 'c'}]
selectedValue = [];
setMenuItem(index, name) {
  this.selectedValue = [...options].slice(0, index)
}

例如，我单击菜单 b，selectedValue 将包含 [{name: 'a'},{name: 'b'}]

上面代码的问题是它会从索引0开始，因此你需要添加一个验证来计算它是否是起始索引，你可以使用这个逻辑（注意，你必须通过整个组件中的项目 @click="setMenuItem(index, item)")

setMenuItem(index, item) {
  const start = this.selectedValue.findIndex((selected) => item.name === selected.name)
  this.selectedValue = [...options].slice(start || 0, index + 1)
}

Vuejs 如何实现 select 范围内的按钮

Vuejs How the select range of button

javascript

range

vue.js

vuejs3