用vue做一个延时按键勾选 按键 延时做4行 运行和停止就一个，当勾选中后 按键框内的按键每一个延时按一次，4个按键同时运行，比如 第一行按1，延时100MS，第二行按2，延时200ms 第三行不选中 第四行按4延时300MS，那么每100ms按一下1，每200ms按一下2，各行不冲突，按停止就全停了

好的，我来解答你的问题。

首先，你可以使用Vue框架来实现这个延时按键勾选功能。在Vue中，你可以使用v-model来绑定勾选框的状态，使用v-for来遍历4行按键框。然后，你可以使用setTimeout函数来实现延时功能，当按键被勾选时，你可以将对应的按键信息存储到一个数组中，然后使用递归函数来实现按键的延时执行。最后，你可以使用一个按钮来控制所有按键的开始和停止。

下面是一个简单的Vue组件示例代码，你可以参考一下：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked">{{ item.value }}
      <button v-if="item.checked" @click="start(index)">开始</button>
      <button v-if="item.checked" @click="stop(index)">停止</button>
    </div>
    <button @click="stopAll">全部停止</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { value: '1', checked: false, timer: null },
        { value: '2', checked: false, timer: null },
        { value: '3', checked: false, timer: null },
        { value: '4', checked: false, timer: null }
      ]
    }
  },
  methods: {
    start(index) {
      const item = this.items[index]
      item.timer = setTimeout(() => {
        // 模拟按键按下的操作
        console.log(`按下 ${item.value}`)
        this.start(index)
      }, (index + 1) * 100)
    },
    stop(index) {
      clearTimeout(this.items[index].timer)
    },
    stopAll() {
      this.items.forEach(item => {
        if (item.timer) {
          clearTimeout(item.timer)
          item.timer = null
        }
      })
    }
  }
}
</script>

在这个示例中，我们创建了一个items数组来存储4个按键的信息。每个按键都有一个value属性表示按键的值，一个checked属性表示按键是否被勾选，一个timer属性表示按键的计时器对象。在模板中，我们使用v-for来遍历items数组，并使用v-model来绑定勾选框的状态。在每个按键框中，我们添加了一个开始按钮和一个停止按钮，只有当按键被勾选时才会显示。点击开始按钮时，我们使用setTimeout函数来实现按键的延时执行，并将计时器对象存储到item.timer中。点击停止按钮时，我们使用clearTimeout函数来停止计时器。点击全部停止按钮时，我们遍历items数组，停止所有计时器。

需要注意的是，这个示例只是一个简单的演示，实际开发中还需要处理各种异常情况，例如用户重复点击开始按钮、勾选框状态改变等。同时，按键的延时时间也应该根据实际需求进行调整。