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

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

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

效果如下：

1.前端视图代码

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

2.前端script部分代码

<script>import{listNetSecurityImg,delNetSecurityImg}from'@/api/websitemanage/netsecurityimg'import{getToken}from'@/utils/auth'exportdefault{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=>{constimgList=response.datafor(leti=0;i<imgList.length;i++){this.fileList.push({'uid':imgList[i].id,'url':imgList[i].imgUrl})}})},handleRemove(file,fileList){constid=file.uidthis.$confirm('是否确认删除此图片?','警告',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(function(){returndelNetSecurityImg(id)}).then(response=>{if(response.success){this.getList()this.msgSuccess('删除成功')}}).catch(()=>{this.getList()})},handlePictureCardPreview(file){this.dialogImageUrl=file.urlthis.dialogVisible=true}}}</script>

3.api接口js

importrequestfrom'@/utils/request'//查询图片列表exportfunctionlistNetSecurityImg(query){returnrequest({url:'netSecurityImg/getList',method:'post',data:query})}//删除图片exportfunctiondelNetSecurityImg(id){returnrequest({url:'netSecurityImg/delete?id='+id,method:'post'})}

4.表的设计

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