vue+element ui 走马灯添加图片+图片自适应

上面是最终效果图~
代码 (zmd.vue) ：

<template><el-carousel :interval="4000" type="card" height="200px"><el-carousel-item v-for="item in imagebox" :key="item.id"><img :src="item.idView" class="image"></el-carousel-item></el-carousel>
</template><script>export default{name:'zmd',data(){return {imagebox:[{id:0,idView:require('../assets/imagebox/1.jpg')},{id:1,idView:require('../assets/imagebox/2.jpg')},{id:2,idView:require('../assets/imagebox/3.jpg')}//imagebox是assets下一个放图片的文件夹]}}}
</script><style>.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}
</style>

别忘了在APP.vue添加import并调用（哪个界面用就在相应文件处调用）

<template><div id="app"><Zmd></Zmd></div>
</template><script>import Zmd from './components/zmd.vue'
export default {name: 'App',components:{Zmd}
}
</script>

保存刷新我们发现图片的比例似乎和框架不太匹配，这样每次都要调节图片大小，很麻烦。接下来我们来调节使图片自适应。

<template><!--动态将图片轮播图的容器高度设置成与图片一致--><el-carousel :interval="4000" type="card" height="300px"><el-carousel-item v-for="item in imagebox" :key="item.id"><img :src="item.idView" class="image"></el-carousel-item></el-carousel>
</template><script>export default{name:'zmd',data(){return {imagebox:[{id:0,idView:require('../assets/imagebox/1.jpg')},{id:1,idView:require('../assets/imagebox/2.jpg')},{id:2,idView:require('../assets/imagebox/3.jpg')}],// 浏览器宽度screenWidth :0}},methods:{setSize:function () {// 通过浏览器宽度(图片宽度)计算高度this.bannerHeight = 400 / 1920 * this.screenWidth;},},mounted() {// 首次加载时,需要调用一次this.screenWidth =  window.innerWidth;this.setSize();// 窗口大小发生改变时,调用一次window.onresize = () =>{this.screenWidth =  window.innerWidth;this.setSize();}}}
</script><style>.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}img{/*设置图片宽度和浏览器宽度一致*/width:100%;height:inherit;}
</style>

这样保存刷新之后图片就很好看了！

vue+element ui 走马灯添加图片+图片自适应相关推荐

vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
该案例的情况 vue版本:vue cli3 插件:vue-quill-editor vue-quill-editor的增强模块:quill-image-extend-module quill-imag ...
element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
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案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...

vue+element ui 走马灯添加图片+图片自适应

vue+element ui 走马灯添加图片+图片自适应相关推荐

最新文章

热门文章