Vue + element-ui 背景图片设置

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

实现效果

以下是如何实现：

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

data里设置url

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

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

<div class="pull-height animated" :class="{'zoomOutUp': isLock}" :style="{backgroundImage:'url('+url+')'}" style="background-size: 100% 100%">
</div>

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

<div class="index">
</div>

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

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

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

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

 <top v-on:listenToChildEvent="setBackground"></top>

子组件设置数据

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

点击弹出图片上传界面

<el-tooltip class='item' effect='dark' content='背景图片设置' placement='bottom'><div style="font-size: 14px;margin-right: 20px" @click='dialogFormVisible = true'>背景设置</div></el-tooltip>

绑定数据

<el-dialog v-dialogDrag :visible.sync="dialogFormVisible" width="40%" title="背景图片设置"><div style="text-align: center;margin-bottom: 10px"><span>多张图片隔10分钟切换</span></div><el-upload style="text-align: center" action="你的上传图片接口" list-type="picture-card" ref="uploadImages" :multiple="true" :limit="4":file-list="uploadFile.uploadImageList" :autoUpload="true" :on-remove="handleUploadRemove" :onPreview="handlePictureCardPreview":onSuccess="handleUploadSuccess" :onExceed="()=>{$message.error('背景图片不能超过四张')}"><i class="el-icon-plus"></i></el-upload><div style="text-align: center;margin-top: 10px"><el-button type="primary" @click='saveImage'>保存</el-button></div></el-dialog>

handleUploadSuccess(response, file, fileList) { // 上传图片成功后的回调this.uploadFile.uploadImageList = fileListthis.$message.success('上传成功')console.log('上传图片回调')},handleMidiaUploadSuccess(response, file, fileList) { // 上传媒体成功后的回调this.uploadFile.uploadMedia = fileList},handleUploadRemove(file, fileList) { // 删除图片callbackthis.uploadFile.uploadImageList = fileList},handleMediaRemove(response, file, fileList) {this.uploadFile.uploadMedia = fileList},handlePictureCardPreview(file) { // 预览图片this.uploadFile.dialogImageUrl = file.urlthis.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 - 1var imageMin = 0var 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 = imgListthis.setData()},

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

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

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

<div v-cloak class="pull-height animated" :class="{'zoomOutUp': isLock}" :style="{backgroundImage:'url('+url+')'}" style="background-size: 100% 100%">
</div>

在style里配置

[v-cloak] {display: none;}

Vue + element-ui 背景图片设置相关推荐

vue element ui 时间选择器设置两个时间一前一后
时间选择器,需求是下线时间必须在发布时间之后,但后台是储存两个值,就没使用element UI 的范围选择器在标签设置:picker-options 属性,该属性下disabledDate(),控制 ...
vue 单页面背景图片设置
html 部分,background 是放背景图片的div,front是放其他的div <div class="background"><img :src=&qu ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
vue+Element ui 实现照片墙
vue+Element ui 实现照片墙上面是我要实现的效果.直接上代码,间接明了 1.前端视图代码 <div><el-upload:file-list="fileLis ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
移动端也能兼容的web页面制作2：导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...

Vue + element-ui 背景图片设置

Vue + element-ui 背景图片设置

Vue + element-ui 背景图片设置相关推荐

最新文章

热门文章