vue+Element ui怎么实现照片墙效果

本篇内容主要讲解“vue+Element ui怎么实现照片墙效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue+Element ui怎么实现照片墙效果”吧!

效果如下：

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" :class="lazy" data-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: {        // 设置上传的请求头部        headers: { token: getToken() },        // 上传的地址        url: process.env.VUE_APP_BASE_API + 'netSecurityImg/importNetSecurityImg'      }    }  },  created() {    this.getList()  },  methods: {        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.表的设计

到此，相信大家对“vue+Element ui怎么实现照片墙效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！