滑动选择

src/components/Count.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="bg">
-    <span>当前数值{{ countComputed }}</span>
-    <br />
-    <span>双倍数值{{ doubleCount }}</span>
-    <br />
-    <button type="primary" size="default" @click="countStore.countAdd">
-      +1
-    </button>
-    <button type="primary" size="default" @click="countStore.countReduce">
-      -1
-    </button>
-  </div>
-</template>
-<script setup>
-import { computed, onMounted } from 'vue'
-import { get15DaysWeatherByArea } from '@/api'
-import { useCountStore } from '@/store'
-import { storeToRefs } from 'pinia'
-const countStore = useCountStore()
-// 通过计算属性
-const countComputed = computed(() => countStore.count)
-// 通过 storeToRefs api 结构
-const { doubleCount } = storeToRefs(countStore)
-onMounted(() => {
-  get15DaysWeatherByArea()
-})
-</script>
-<style scoped lang="scss">
-.bg {
-  background: $bg-color;
-}
-</style>

src/components/Tube.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="tube_container" id="tube_container">
+    <div
+      :class="isActive(item) ? 'tube_wrap active' : 'tube_wrap'"
+      v-for="item in 50"
+      :key="item"
+      :data-index="item"
+      @click="e => handleTubeClick(e, item)"
+    >
+      A01
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const resultArr = ref([])
+const preEle = ref(null)
+
+const isActive = number => {
+  if (resultArr.value.length == 0) {
+    return false
+  }
+  const arr = resultArr.value.filter(item => item.index == number)
+  if (arr?.length > 0) {
+    return arr[0].checked
+  }
+  return false
+}
+
+const handleTubeClick = (e, number) => {
+  let flag = true
+  for (let i = 0; i < resultArr.value.length; i++) {
+    if (resultArr.value[i].index == number) {
+      resultArr.value[i].checked = !resultArr.value[i].checked
+      flag = false
+    }
+  }
+  flag &&
+    resultArr.value.push({
+      ele: e.target,
+      index: number,
+      checked: true,
+    })
+}
+
+const move = currEle => {
+  const checkContainer = document.querySelector('#tube_container')
+  if (!currEle || currEle == checkContainer || currEle == preEle.value) {
+    return
+  }
+  preEle.value = currEle
+  let flag = true
+  for (let i = 0; i < resultArr.value.length; i++) {
+    if (resultArr.value[i].ele == currEle) {
+      resultArr.value[i].checked = !resultArr.value[i].checked
+      flag = false
+    }
+  }
+  flag &&
+    resultArr.value.push({
+      ele: currEle,
+      index: currEle.dataset.index,
+      checked: true,
+    })
+}
+
+const render = () => {}
+
+const touch = event => {
+  var event = event || window.event
+  switch (event.type) {
+    case 'touchstart':
+      break
+    case 'touchend':
+      render()
+    case 'touchmove':
+      if (event.touches[0]?.clientX && event.touches[0]?.clientY) {
+        const currentEle = document.elementFromPoint(
+          event.touches[0]?.clientX,
+          event.touches[0]?.clientY,
+        )
+        move(currentEle)
+        render()
+      }
+      break
+  }
+}
+
+onMounted(() => {
+  const checkContainer = document.querySelector('#tube_container')
+  checkContainer.addEventListener('touchstart', touch, false)
+  checkContainer.addEventListener('touchmove', touch, false)
+  checkContainer.addEventListener('touchend', touch, false)
+})
+</script>
+
+<style lang="scss" scoped>
+.tube_container {
+  width: 720px;
+  height: 365px;
+  border-radius: 14px;
+  background: #f6f8fa;
+  box-sizing: border-box;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  column-gap: 10px;
+  row-gap: 10px;
+  .tube_wrap {
+    width: 61px;
+    height: 61px;
+    opacity: 1;
+    background: #d6d6d6;
+    box-sizing: border-box;
+    border: 3px solid #d2d2d2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: Source Han Sans CN;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: normal;
+    letter-spacing: 0.02em;
+    color: #ffffff;
+    border-radius: 50%;
+  }
+  .active {
+    background: #5f82ec;
+    border: 3px solid #5779e0;
+  }
+}
+</style>

src/pages/Home.vue

@@ -1,7 +1,21 @@
 <template>
-  <div>home</div>
+  <div class="home_container">
+    <Tube />
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Tube from 'cpns/Tube'
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home_container {
+  width: 800px;
+  height: 1280px;
+  opacity: 1;
+  background: #f5f7fb;
+  overflow: hidden;
+  padding: 20px;
+  box-sizing: border-box;
+}
+</style>