vue 实现图片上传单选功能

最新推荐文章于 2024-01-24 15:05:44 发布

原创最新推荐文章于 2024-01-24 15:05:44 发布 · 739 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

本文详细介绍使用Vue和Element UI实现图片上传功能，包括图片预览、单选切换及样式设置。通过index改变图片的显示状态，实现点击选择图片的交互效果。

vue实现图片上传，点击选择图片，单选功能

1.效果展示 👇

在这里插入图片描述

2.HTML部分 👇

这里用的是element的card组件展示的图片效果

 <div class="activity_detail_diatan_zuopin">
    <el-row class="activity_detail_diatan_zuopinsuch" :gutter="12">
      <el-col v-for="(item,index) in check" :key="index" :span="8">
        <el-card class="activity_detail_diatan_zuopin_card">
          <img  :title="item.worksName" @click="changeList(item,index)" :src="item.checkUrl" alt />
          <img
            :style="idx==index?'display:block':'display:none'"
            class="activity_detail_diatan_shade"
            src="../../assets/img/activity/activity_check.png"
            style="width: 20px;height: 20px;"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>

3. css样式 👇

.activity_detail_diatan .el-dialog--center .activity_detail_diatan_zuopin {
  height: 600px;
  overflow: hidden;
  overflow-y: scroll;
  margin-bottom: 30px;
}
.activity_detail_diatan_zuopin
  .activity_detail_diatan_zuopinsuch
  .activity_detail_diatan_zuopin_card {
  height: 276px;
  margin-bottom: 20px;
  cursor: pointer;
}
.activity_detail_diatan_zuopin
  .activity_detail_diatan_zuopinsuch
  .activity_detail_diatan_zuopin_card
  .el-card__body {
  padding: 0;
  position: relative;
}
.activity_detail_diatan_zuopinsuch
  .activity_detail_diatan_zuopin_card
  .el-card__body
  img {
  width: 100%;
  height: 276px;
}

.activity_detail_diatan .activity_detail_diatan_dialog-footer {
  padding-bottom: 40px;
  padding-top: 0;
}
.activity_detail_diatan .activity_detail_diatan_dialog-footer .el-button {
  width: 120px;
}

.activity_detail_diatan
  .el-dialog--center
  .activity_detail_diatan_zuopin
  .activity_detail_diatan_shade {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}

4.js方法 👇

思路大概，就是通过index，改变点击的图片style样式，将display：none；变成display：block；

话不多说，come on

在这里插入图片描述

methods

changeList(item,index) {
      this.idx = index
      console.log(this.idx);     
    },