vue+Element?ui怎么實現(xiàn)照片墻效果

本篇內(nèi)容主要講解“vue+Element ui怎么實現(xiàn)照片墻效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習“vue+Element ui怎么實現(xiàn)照片墻效果”吧!

效果如下：

1.前端視圖代碼

<div>
  <el-upload
    :file-list="fileList"
    :headers="upload.headers"
    :action="upload.url"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" height="500px" :src="dialogImageUrl" alt="">
  </el-dialog>
</div>

2.前端script部分代碼

<script>
import { listNetSecurityImg, delNetSecurityImg } from '@/api/websitemanage/netsecurityimg'
import { getToken } from '@/utils/auth'

export default {
  name: 'NetSecurityImg',
  components: {},
  data() {
    return {
      titleName: '圖片管理',
      form: {},
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      // 照片墻
      upload: {
        // 設(shè)置上傳的請求頭部
        headers: { token: getToken() },
        // 上傳的地址
        url: process.env.VUE_APP_BASE_API + 'netSecurityImg/importNetSecurityImg'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 網(wǎng)安時情圖片列表 */
    getList() {
      this.fileList = []
      listNetSecurityImg().then(response => {
        const imgList = response.data
        for (let i = 0; i < imgList.length; i++) {
          this.fileList.push({
            'uid': imgList[i].id,
            'url': imgList[i].imgUrl
          })
        }
      })
    },
    handleRemove(file, fileList) {
      const id = file.uid
      this.$confirm('是否確認刪除此圖片?', '警告', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delNetSecurityImg(id)
      }).then(response => {
        if (response.success) {
          this.getList()
          this.msgSuccess('刪除成功')
        }
      }).catch(() => {
        this.getList()
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

3.api接口js

import request from '@/utils/request'

// 查詢圖片列表
export function listNetSecurityImg(query) {
  return request({
    url: 'netSecurityImg/getList',
    method: 'post',
    data: query
  })
}

// 刪除圖片
export function delNetSecurityImg(id) {
  return request({
    url: 'netSecurityImg/delete?id=' + id,
    method: 'post'
  })
}

4.表的設(shè)計

到此，相信大家對“vue+Element ui怎么實現(xiàn)照片墻效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習！