How to realize the effect of Photo Wall by vue+Element ui

This article mainly explains "how to achieve photo wall effect with vue+Element ui". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve the photo wall effect with vue+Element ui".

The effect is as follows:

1. Front-end view code

two。 Part of the front-end script code

Import {listNetSecurityImg, delNetSecurityImg} from'@ / api/websitemanage/netsecurityimg'import {getToken} from'@ / utils/auth'export default {name: 'NetSecurityImg', components: {}, data () {return {titleName:' picture management', form: {}, dialogImageUrl:'', dialogVisible: false, fileList: [] / / Photo Wall upload: {/ / set upload request header headers: {token: getToken ()}, / / upload address url: process.env.VUE_APP_BASE_API + 'netSecurityImg/importNetSecurityImg'}, created () {this.getList ()} Methods: {/ * * Network Security picture list * / 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 ('deleted successfully')}) .catch (() = > {this.getList ()})}, handlePictureCardPreview (file) {this.dialogImageUrl = file.url this.dialogVisible = true}

3.api interface js

Import request from'@ / utils/request'// query picture list export function listNetSecurityImg (query) {return request ({url: 'netSecurityImg/getList', method:' post', data: query})} / / delete picture export function delNetSecurityImg (id) {return request ({url: 'netSecurityImg/delete?id=' + id, method:' post'})}

4. Design of the watch

At this point, I believe you have a deeper understanding of "how to achieve photo wall effect in vue+Element ui". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!