禁止选中

src/components/Tube.vue

@@ -1,24 +1,37 @@
 <template>
   <div class="tube_container" id="tube_container">
+    <div v-for="item in 50" :key="item">
       <div
         :class="isActive(item) ? 'tube_wrap active' : 'tube_wrap'"
-      v-for="item in 50"
-      :key="item"
         :data-index="item"
+        v-if="!disabledArr.includes(item + '')"
         @click="e => handleTubeClick(e, item)"
       >
         {{ `A${formatTubeNumber(item)}` }}
       </div>
+      <div class="tube_wrap disable" :data-index="item" v-else>
+        <img class="error_img" :src="Error" alt="" />
+        {{ `A${formatTubeNumber(item)}` }}
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import Error from '@/assets/img/error.png'
 import { formatTubeNumber } from '@/utils'
 
 const resultArr = ref([])
+const disabledArr = ref(['32'])
 const preEle = ref(null)
 
+const getSelectedTube = () => {
+  const arr = resultArr.value.filter(item => item.checked)
+  const result = arr.map(item => item.index)
+  return result
+}
+
 const isActive = number => {
   if (resultArr.value.length == 0) {
     return false
@@ -47,6 +60,12 @@ const handleTubeClick = (e, number) => {
 }
 
 const move = currEle => {
+  if (
+    disabledArr.value.includes(currEle.dataset.index) ||
+    !currEle.dataset.index
+  ) {
+    return
+  }
   const checkContainer = document.querySelector('#tube_container')
   if (!currEle || currEle == checkContainer || currEle == preEle.value) {
     return
@@ -133,5 +152,18 @@ onMounted(() => {
     border: 3px solid #53dd79;
     color: #ffffff;
   }
+  .disable {
+    background: #d6d6d6;
+    border: 3px solid #d2d2d2;
+    color: #ffffff;
+    position: relative;
+    .error_img {
+      position: absolute;
+      width: 28px;
+      height: 28px;
+      right: -7px;
+      top: -7px;
+    }
+  }
 }
 </style>