您现在的位置是：网站首页> 编程资料编程资料

Vue + element-ui 背景图片设置方式_vue.js_

2023-05-24 341人已围观

简介 Vue + element-ui 背景图片设置方式_vue.js_

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

element自定义背景更换

最近的项目中需要自定义背景更换。可以在element官网查看使用方法，有2中方法，使用了第一种比较简单的，第二种自己尝试了开头没有继续。

在这里使用这个方法，在项目中新建一个js文件，并且全局引用

在这个element-variables.scss里面内容可以官网复制过来

/* theme color */ $--color-primary: #1890ff; $--color-success: #13ce66; $--color-warning: #ffba00; $--color-danger: #ff4949; $--color-info: rgba(32, 37, 57, 1); $--button-font-weight: 400; // $--color-text-regular: #1f2d3d; $--border-color-light: #dfe4ed; $--border-color-lighter: #e6ebf5; $--table-border:1px solid#dfe6ec; /* icon font path, required */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { theme: $--color-primary; }

我们使用store来实现主题更换

引入index.js里面

此后进行组件编写在components

以上这里方法是自己写的，如果是简单的背景更换，可以使用这个一版本方法，可以看懂的自己研究一下里面方法，例如：