vue+ElementUI 实现管理端照片墙（或广告位）效果

您所在的位置：网站首页 › elementui的table渲染慢 › vue+ElementUI 实现管理端照片墙（或广告位）效果

vue+ElementUI 实现管理端照片墙（或广告位）效果

#vue+ElementUI 实现管理端照片墙（或广告位）效果| 来源: 网络整理| 查看: 265

场景：在管理端配置照片墙或者广告位

先上效果图：

步骤：

首先布局html结构：

重新上传删除提交添加广告位

我是放在一个表单中的，也可以单独放出来

v-loading="upLoading" 这是加了个上传图片的时候加载效果

element-loading-text="拼命上传中" 加载的文字

element-loading-spinner="el-icon-loading" 加载的图标

v-for="(item,index) in homePosterList" 先循环从接口得到的一个数组

js模块：

import { goodsSort,setUp } from "@/api/sysManager"; export default { data() { return { upLoading:false, upUrl:process.env.BASE_API + '/common/upload', //图片上传地址, homePosterId:'', homePosterList:[] } }, created(){ this.getAppletHomePoster() }, methods: { getAppletHomePoster(){ goodsSort({"conditions":[{"type":"code","value":"ad_user_index"}]}).then(res=>{ if(res.status==200&&res.data.length>0){ this.homePosterId=res.data[0].id var imgListArr = JSON.parse(res.data[0].value) imgListArr.images.map(item=>{ let obj={} obj.src=item console.log('obj',obj) this.homePosterList.push(obj) }) console.log('首页广告位的数据：',this.homePosterList) } }) }, beforeAvatarUpload(file){//上传时 const isJPG = (file.type==='image/png' || file.type==='image/jpeg' || file.type==='image/gif') const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('请上传jpg/png/jif格式的图片') return } if (!isLt2M) { this.$message.error('请上传小于 2MB 的图片!'); return } this.upLoading=true }, handleAvatarSuccess(res, file, index){//上传成功时 console.log('上传成功res',res) console.log('上传成功file',file) console.log('上传成功index',index) this.homePosterList[index].src=process.env.VUE_APP_IMG+file.response.data[0].path this.upLoading=false }, submitForm(formName) {//提交 var imgJoin=[] this.homePosterList.map(item=>{ imgJoin.push(item.src) if(item.src==""){ this.$message.error('请先完善新增广告位图片！'); return } }) setUp( {"model":{ "id":this.homePosterId, "value":JSON.stringify({"images": imgJoin}) } }).then(res=>{ if(res.status==200){ this.$message.success('添加成功！'); this.homePosterList=[] this.getAppletHomePoster() } }) }, removeDomain(item) {//删除 var index = this.homePosterList.indexOf(item) if (index !== -1) { this.homePosterList.splice(index, 1) } }, addDomain() {//添加 if(this.homePosterList.length{ if(res.status==200&&res.data.length>0){ this.homePosterId=res.data[0].id var imgListArr = JSON.parse(res.data[0].value) imgListArr.images.map(item=>{ let obj={} obj.src=item console.log('obj',obj) this.homePosterList.push(obj) }) console.log('首页广告位的数据：',this.homePosterList) } }) }, beforeAvatarUpload(file){//上传时 const isJPG = (file.type==='image/png' || file.type==='image/jpeg' || file.type==='image/gif') const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('请上传jpg/png/jif格式的图片') return } if (!isLt2M) { this.$message.error('请上传小于 2MB 的图片!'); return } this.upLoading=true }, handleAvatarSuccess(res, file, index){//上传成功时 console.log('上传成功res',res) console.log('上传成功file',file) console.log('上传成功index',index) this.homePosterList[index].src=process.env.VUE_APP_IMG+file.response.data[0].path this.upLoading=false }, submitForm(formName) {//提交 var imgJoin=[] this.homePosterList.map(item=>{ imgJoin.push(item.src) if(item.src==""){ this.$message.error('请先完善新增广告位图片！'); return } }) setUp( {"model":{ "id":this.homePosterId, "value":JSON.stringify({"images": imgJoin}) } }).then(res=>{ if(res.status==200){ this.$message.success('添加成功！'); this.homePosterList=[] this.getAppletHomePoster() } }) }, removeDomain(item) {//删除 var index = this.homePosterList.indexOf(item) if (index !== -1) { this.homePosterList.splice(index, 1) } }, addDomain() {//添加 if(this.homePosterList.length

【本文地址】

vue+ElementUI 实现管理端照片墙（或广告位）效果

vue+ElementUI 实现管理端照片墙（或广告位）效果

今日新闻

推荐新闻