Vue + element

您所在的位置：网站首页 › vue换背景 › Vue + element

Vue + element

2024-07-14 21:09| 来源: 网络整理| 查看: 265

Vue + element-ui 背景图片设置初学vue 看到其他网址都有些背景图片，于是试着自己也写了一下，表述不好请见谅

实现效果背景图片设置以下是如何实现：

找到你想要设置背景图片的页面在这里插入图片描述 data里设置url

data() { return { url: '', urlList: [], timer: null } },

设置背景图片绑定url，并填满页面

将子组件用div包裹，设置子组件透明度

.index { filter:alpha(Opacity=85); -moz-opacity:0.85; opacity: 0.85; }

这样背景图片就设置好了，只要将url替换成图片连接即可

接下来用element-ui的upload组件来设置url

在父组件设置监听事件，监听子组件传值，也可以用vuex实现

子组件设置数据

data() { return { uploadFile: { dialogVisible: false, uploadImageList: [], uploadMedia: [] }, dialogFormVisible: false } },

点击弹出图片上传界面

背景设置

绑定数据

多张图片隔10分钟切换保存 handleUploadSuccess(response, file, fileList) { // 上传图片成功后的回调 this.uploadFile.uploadImageList = fileList this.$message.success('上传成功') console.log('上传图片回调') }, handleMidiaUploadSuccess(response, file, fileList) { // 上传媒体成功后的回调 this.uploadFile.uploadMedia = fileList }, handleUploadRemove(file, fileList) { // 删除图片callback this.uploadFile.uploadImageList = fileList }, handleMediaRemove(response, file, fileList) { this.uploadFile.uploadMedia = fileList }, handlePictureCardPreview(file) { // 预览图片 this.uploadFile.dialogImageUrl = file.url this.uploadFile.dialogVisible = true },

点击保存按钮后触发的事件，这时父组件能接收到uploadImageList

saveImage() { this.$emit('listenToChildEvent', this.uploadFile.uploadImageList) this.dialogFormVisible = false },

父组件修改背景图片的值，并将图片连接存入localStorage，这样页面刷新图片不会丢失

setData() { console.log(this.urlList.length) var imageMax = this.urlList.length - 1 var imageMin = 0 var imageNumber = parseInt(Math.random() * (imageMax - imageMin + 1) + imageMin) this.url = this.urlList[imageNumber] console.log(imageNumber) console.log(this.url) }, setBackground(data) { console.log(data) if (data.length === 0) { this.url = '' this.urlList = [] localStorage.setItem('mydata', JSON.stringify(this.urlList)) } else { this.url = '' this.urlList = [] for (let i = 0; i < data.length; i++) { this.urlList.push( data[i].response.data ) } this.setData() localStorage.setItem('mydata', JSON.stringify(this.urlList)) } }

页面初始化的时候从localStorage取数据创建线程每隔10分钟更换背景图片

mounted() { this.timer = setInterval(this.setData, 600000) var imgList = JSON.parse(localStorage.mydata) this.urlList = imgList this.setData() },

页面被销毁时触发事件，清空定时器

beforeDestroy() { clearInterval(this.timer) this.timer = null },

这样写完，图片改变时页面会闪烁在设置背景图片的div上，加上v-cloak 防止页面闪烁

在style里配置

[v-cloak] { display: none; }

【本文地址】

Vue + element

Vue + element

今日新闻

推荐新闻