消消乐小demo

消消乐小demo

<template>
  <div>
    <div class="demo1">
      <div
        class="item1"
        v-for="(item, index) in items"
        :key="item.id"
        :data-id="item.id"
        :data-index="index"
        @click="item_handle"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="demo2">
      <div
        class="item2"
        v-for="(item, index) in items2"
        :key="item.pre"
        :data-id="item.pre"
        :data-index="index"
        @click="demo_handle"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";

// 定义 items 和 items2 为响应式状态
let items = reactive([
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
]);

// 定义要删除的对象的 id

let items2 = ref([
  { pre: 1, name: 520 },
  { pre: 2, name: 250 },
  { pre: 3, name: 1314 },
]);
let preid = ref("");
let ids = ref("");
let clickCount = ref(0);
let rigthtCount = ref(0);
const item_handle = (e, index) => {
  clickCount.value++;
  ids.value = e.currentTarget.dataset.id;

  if (!preid.value) {
    if (clickCount.value == 2) {
      clickCount.value = 0;
      ids = ref("");
      console.log(ids.value);
    }
  } else {
    if (ids.value == preid.value) {
      items = items.filter((item) => {
        return item.id != preid.value;
      });
      items2.value = items2.value.filter((item) => item.pre != ids.value);
    } else {
      if (clickCount.value == 2) {
        clickCount.value = 0;
        ids = ref("");
      } else {
        console.log("动画");
      }
      ids = ref("");
    }
  }
};
const demo_handle = (e, index) => {
  rigthtCount.value++;
  preid.value = e.currentTarget.dataset.id;

  if (!ids.value) {
    if (rigthtCount.value == 2) {
      rigthtCount.value = 0;
      preid = ref("");
    }
  } else {
    if (preid.value == ids.value) {
      // 使用 filter 方法删除特定 id 对应的对象
      items = items.filter((item) => {
        return item.id != preid.value;
      });
      items2.value = items2.value.filter((item) => item.pre != preid.value);
    } else {
      console.log(rigthtCount);

      if (rigthtCount.value == 2) {
        console.log("222222222222");

        rigthtCount.value = 0;
        preid.value = ref("");
      } else {
        console.log("动画");
      }
      ids = ref("");
      preid = ref("");
    }
  }
};

onMounted(() => {
  // ... 这里可以添加其他逻辑 ...
});
</script>

<style lang="scss" scoped>
.demo1,
.demo2 {
  display: inline-block;
  width: 300px;
}
.item1,
.item2 {
  height: 60px;
  line-height: 60px;
  border: 1px solid #ccc;
}
</style>