Vue + element-ui 背景图片设置

实现效果


以下是如何实现：

找到你想要设置背景图片的页面

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;
  }