2021-10-06

自增字段以及排他思想

自增字段
首先我们要知道自增字段的目的，类型
目的：有时后台返给我们的字段可能不够多，但我们又需要这个字段来做或者显示，这时需要我们手动添加
排他思想
就是把自己以及自己的兄弟其实就是整个数组都赋值为false，统一的值
只把自己的属性赋值为true
一般都是点击事件，在模板中可以进行传实参，下面接受

<template>
  <ul class="test-container">
    <li v-for="item in list" :key="item.id" @click="toggleSelected(list,item)">
      <img :src="item.url" alt />
      <span v-if="item.selected===true">
        <img src="@/assets/logo.png" alt width="20" />
      </span>
    </li>
  </ul>
</template>

<script>
// 交互要求：点击哪一项哪一项就变成激活状态（显示vue图标）
import { ref } from 'vue'
export default {
  setup () {
    const list = ref([
      {
        id: 1,
        url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_2.jpg'
      },
      {
        id: 2,
        url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_2.jpg'
      },
      {
        id: 3,
        url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_2.jpg'
      },
      {
        id: 4,
        url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/fresh_goods_2.jpg'
      }
    ])
    list.value.forEach(item => {
      item.selected = false
    })
    function toggleSelected (all, self) {
      console.log(all, self)
      all.forEach(item => {
        item.selected = false
      })
      self.selected = true
    }
    return {
      list,
      toggleSelected
    }
  }
}
</script>

<style scoped lang='less'>
.test-container {
  display: flex;
  li {
    position: relative;
    cursor: pointer;
    > img {
      width: 200px;
      height: 200px;
    }
    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 20px;
      height: 20px;
      img {
        width: 100%;
      }
    }
  }
}
</style>