siweiyishu/src/components/MyPhoto.vue

<template>
  <div class='myphoto'>

    <div class="top">
      <img src="@/assets/img/MyPhoto/back.png" alt="" @click="goBack()">
      <img src="@/assets/img/MyPhoto/mypic.png" alt="">
    </div>
    <div class="tips">
      最多存20张，长按图片保存<br />
    </div>

    <div v-if="myPhoto.length == 0" class="noImg">
      暂无相片
    </div>
    <div v-else class="imgList">
      <div class="imgItem" v-for="(item, index) in myPhoto" :key="index">
        <img :src="item.msg" alt="">
        <img @click="deletePic(index)" class="close" src="@/assets/img/MyPhoto/close-icon.png" alt="">
      </div>
    </div>

  </div>
</template>

<script>

export default {
  components: {},
  data() {
    return {
      myPhoto: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    goBack() {
      this.$emit('sonBack')
    },
    deletePic(data) {
      this.$dialog
        .confirm({
          title: '四维艺术',
          message: '删除后无法恢复，是否删除？',
        })
        .then(() => {
          // on confirm
          console.log(data.msg)
          console.log(this.myPhoto)
          // this.myPhoto = this.myPhoto.filter((item) => {
          //   return item.msg === data.msg
          // })
          this.myPhoto.splice(data, 1)

          localStorage.setItem('myPhoto', JSON.stringify(this.myPhoto))
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  created() {

  },
  mounted() {
    //从store中获取我的相片列表
    this.myPhoto = localStorage.getItem('myPhoto') ? JSON.parse(localStorage.getItem('myPhoto')) : []
  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.myphoto {
  width: 100%;
  height: 100%;

  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;

    img {
      height: 2.2rem;
    }
  }

  .tips {
    color: #00b3ec;
    font-size: 10px;
    text-align: right;
    padding-right: 10px;
    margin-top: -10px;
  }

  .noImg {
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
  }

  .imgList {
    width: 100%;
    // max-height: 80vh;
    overflow: auto;
    padding: 10px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: auto;

    .imgItem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .close {
        width: 35px;
        height: 35px;
        // margin-top: 3px;
      }
    }


    img {
      width: 100%;
      // height: 20vh;
      object-fit: cover;
    }

  }

  ::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
  }
}
</style>