创建相册，批量删除，图片预览，上传图片

子组件

<template>
  <div>
    <li
      class="list-group-item list-group-item-action d-flex"
      style="cursor: pointer;"
      @click.stop="$emit('change', index)"
      :class="{ 'active sum-active': active }"
    >
      {{ item.name }}
      <el-dropdown class="ml-auto">
        <span class=" btn btn-light btn-sm border">
          {{ item.num }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.stop.native="$emit('edit', { item, index })"
            >修改</el-dropdown-item
          >
          <el-dropdown-item @click.stop.native="$emit('del', index)"
            >删除</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </li>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false
    },
    item: Object,
    index: Number
  }
}
</script>

<style lang="scss" scoped>
.sum-active {
  color: #67c23a !important;
  background-color: #f0f9eb !important;
  border-color: #c2e7b0 !important;
}
</style>

父组件

<template>
  <div>
    <el-container style="position:absolute;top:130px;bottom:0;left:0;right:0;">
      <!-- 相册头部 -->
      <el-header class="d-flex align-items-center border-bottom">
        <div class="d-flex mr-auto">
          <el-select placeholder="请选择图片排序方式"
                     v-model="searchForm.order"
                     size="mini"
                     style="width: 160px;"
                     class="mr-2">
            <el-option label="区域一"
                       value="shanghai"></el-option>
            <el-option label="区域二"
                       value="beijing"></el-option>
          </el-select>
          <el-input size="mini"
                    class="mr-2"
                    placeholder="请输入相册名称"
                    v-model="searchForm.keyword"
                    style="width: 150px;"></el-input>
          <el-button type="success"
                     size="mini">搜索</el-button>
        </div>
        <el-button type="danger"
                   size="mini"
                   @click="imageDelAll">批量删除</el-button>
        <el-button type="success"
                   size="mini"
                   @click="openAlbumModel(false)">创建相册</el-button>
        <el-button type="warning"
                   size="mini"
                   @click="uploadModel = true">上传图片</el-button>
      </el-header>
      <!-- 相册侧边 -->
      <el-container>
        <el-aside width="200px"
                  style="position:absolute; top:60px;bottom:60px;left:0;"
                  class="bg-white border-right">
          <ul class="list-group list-group-flush">
            <album-item :item="item"
                        :index="index"
                        v-for="(item, index) in albums"
                        :key="index"
                        :active="albumIndex === index"
                        @change="albumChange"
                        @edit="openAlbumModel"
                        @del="albumDel">
            </album-item>
          </ul>
        </el-aside>
        <el-container>
          <!-- 相册主内容 -->
          <el-main style="position:absolute; top:60px;bottom:60PX;left:200px;right:0;">
            <el-row :gutter="10">
              <el-col :span="24"
                      :lg="4"
                      :md="6"
                      :sm="8"
                      v-for="(item, index) in imageList"
                      :key="index">
                <el-card class="box-card mb-3 position-relative"
                         :body-style="{ padding: '0' }"
                         shadow="hover"
                         style="cursor:pointer;">
                  <div class="border "
                       :class="{ 'border-danger': item.ischeck }">
                    <img :src="item.url"
                         alt=""
                         class="w-100"
                         style="height:100px;"
                         @click="choose(item)" />
                    <div class="w-100 text-white px-1"
                         style="background:rgba(0,0,0,0.5);margin-top:-25px; position:absolute">
                      <span class="small">{{ item.name }}</span>
                    </div>
                    <div class="p-2 text-center">
                      <el-button-group>
                        <el-button icon="el-icon-view"
                                   size="mini"
                                   class="p-2"
                                   @click="previewImage(item)"></el-button>
                        <el-button icon="el-icon-edit"
                                   size="mini"
                                   class="p-2"
                                   @click="ImageEdit(item, index)"></el-button>
                        <el-button icon="el-icon-delete"
                                   size="mini"
                                   class="p-2"
                                   @click="ImageDel(index)"></el-button>
                      </el-button-group>
                      <span class="badge badge-danger"
                            style="position:absolute;right:0;top:0;"
                            v-if="item.ischeck">{{ item.checkOrder }}</span>
                      <!-- <el-tag type="danger" effect="dark" size="mini" >1</el-tag> -->
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
      <!-- 底部 -->
      <el-footer>Footer</el-footer>
    </el-container>

    <!-- 修改，创建相册模态弹框 -->
    <el-dialog :title="this.cred"
               :visible.sync="albumModel">
      <el-form ref="ruleForm"
               :model="albumForm">
        <el-form-item label="相册名称">
          <el-input v-model="albumForm.name"
                    size="medium"
                    placeholder="请输入相册名称"></el-input>
        </el-form-item>
        <el-form ref="ruleForm"
                 :model="albumForm">
          <el-form-item label="相册排序">
            <el-input-number v-model="albumForm.order"
                             :min="0"></el-input-number>
          </el-form-item>
        </el-form>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="albumModel = false">取 消</el-button>
        <el-button type="primary"
                   @click="confirmAlbumModel">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 上传图片 -->
    <el-dialog title="上传图片"
               :visible.sync="uploadModel">
      <div class="text-center">
        <el-upload class="upload-demo"
                   drag
                   action="https://jsonplaceholder.typicode.com/posts/"
                   multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip"
               slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
    </el-dialog>

    <!-- 预览图片 -->
    <el-dialog :visible.sync="previeModel"
               width="60vw"
               top="5vh">
      <div style="margin:-60px -20px -30px -20px">
        <img :src="previewUrl"
             alt=""
             class="w-100" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import albumItem from '@/components/isimage/album-item'
export default {
  data () {
    return {
      searchForm: {
        order: '',
        keyword: ''
      },
      uploadModel: false, //上传图片模态框状态
      previeModel: false, //预览图片
      cred: '',
      albumIndex: 0,
      albums: [],
      albumModel: false, //打开模态框状态
      albumEditIndex: -1, //如果为-1就是修改相册
      albumForm: {
        name: '',
        order: 0
      },
      previewUrl: '', //预览图片的路径
      imageList: [], //图片数据
      chooseList: [] //图片选中的数组
    }
  },
  components: { albumItem },
  created () {
    this.__init()
  },
  methods: {
    choose (item) {
      //之前未选中,点击之后才选中 才添加
      if (!item.ischeck) {
        this.chooseList.push({ id: item.id, url: item.url })
        // 计算序号
        item.checkOrder = this.chooseList.length
        //修改状态
        item.ischeck = true
        return
      }
      // 取消选中
      // 找到选中数据当中的索引，删除，找不到就是没有选中
      let i = this.chooseList.findIndex(v => v.id === item.id)
      if (i === -1) return
      //  重新计算序号
      let length = this.chooseList.length

      // 取消选中中间部分
      if (i + 1 < length) {
        // 重新计算选中的序号
        for (var j = i; j < length; j++) {
          let no = this.imageList.findIndex(v => v.id === this.chooseList[j].id)
          if (no > -1) {
            this.imageList[no].checkOrder--
          }
        }
      }
      //  找到了就删除
      this.chooseList.splice(i, 1)
      // 修改状态
      item.ischeck = false
      // 重置序号
      item.checkOrder = 0
    },
    __init () {
      for (var i = 0; i < 20; i++) {
        this.albums.push({
          name: '相册' + i,
          num: Math.floor(Math.random() * 100),
          order: 0
        })
      }

      for (var j = 0; j < 30; j++) {
        this.imageList.push({
          url:
            'http://file02.16sucai.com/d/file/2015/0408/779334da99e40adb587d0ba715eca102.jpg',
          name: '图片' + j,
          ischeck: false,
          id: j,
          checkOrder: 0
        })
      }
    },

    // 切换相册
    albumChange (index) {
      this.albumIndex = index
    },
    // 删除相册
    albumDel (index) {
      this.$confirm('是否删除该相册?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.albums.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //打开相册 修改相册|创建相册
    openAlbumModel (obj) {
      // 判断item是否为true 触发修改功能
      if (obj) {
        //初始化表单
        let { item, index } = obj
        this.albumForm.name = item.name
        this.albumForm.order = item.order
          ; (this.albumEditIndex = index), (this.cred = '修改相册')
        // 打开模态框
        return (this.albumModel = true)
      }
      // 如果为false就触发创建功能
      this.albumForm = {
        name: '',
        order: 0
      }
      this.albumEditIndex = -1
      this.cred = '创建相册'
      this.albumModel = true
    },
    // 点击确定 修改 创建相册
    confirmAlbumModel () {
      // 判断是否为修改
      if (this.albumEditIndex > -1) {
        this.albumEdit()
        return (this.albumModel = false)
      }
      // 创建相册 追加albums
      this.albums.unshift({
        name: this.albumForm.name,
        order: this.albumForm.order,
        num: 0
      })
      this.albumModel = false
    },
    // 修改相册
    albumEdit () {
      this.albums[this.albumEditIndex].name = this.albumForm.name
      this.albums[this.albumEditIndex].order = this.albumForm.order
    },
    // 预览图片
    previewImage (item) {
      this.previewUrl = item.url
      this.previeModel = true
    },
    //  修改图片名称
    ImageEdit (item) {
      this.$prompt('请输入新名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: item.name,
        inputValidator (val) {
          if (val === '') {
            return '图片名称不能为空'
          }
        }
      }).then(({ value }) => {
        item.name = value
        this.$message({
          message: '修改成功!',
          type: 'success'
        })
      })
    },
    // 删除图片
    ImageDel (index) {
      this.$confirm('是否删除该图片?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.imageList.splice(index, 1)
        this.$message({
          message: '删除成功!',
          type: 'success'
        })
      })
    },
    //  批量删除
    imageDelAll () {
      let list = this.imageList.filter(i => {
        return !this.chooseList.some(c => {

          return i.id === c.id
        })
      })
      this.imageList = list
      this.chooseList = []
    }
  }
}
</script>

<style lang="scss" scoped></style>