实现 element ui 走马灯图片插入与自适应大小

在进行这一模块开发的时候，走马灯组件不知道如何使用，还有大小的自适应。我就用官方给的参考文档来进行修改。

接下来是解决方案：

//以下是官网组件代码
<template><el-carousel :interval="4000" type="card" height="200px"><el-carousel-item v-for="item in 6" :key="item"><h3 class="medium">{{ item }}</h3></el-carousel-item></el-carousel>
</template><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>

下面是我自己的解决方案

 <div>   <template><!--动态将图片轮播图的容器高度设置成与图片一致--><el-carousel :interval="4000" type="card" height="350px"><el-carousel-item v-for="item in imagebox" :key="item.id"><img :src="item.idView" class="image"></el-carousel-item></el-carousel></template></div><script>export default{data(){return {drawer: false, direction: 'btt',imagebox:[{id:0,idView:('https://i.loli.net/2021/08/10/d59WgfZloLsxTtu.jpg')},{id:1,idView:('https://i.loli.net/2021/08/10/yolB1uqA98CsneX.jpg')},{id:2,idView:('https://i.loli.net/2021/08/10/vnqM3Vz1wtEemIR.jpg')},{id:3,idView:('https://i.loli.net/2021/08/10/pFrK81SxC2s6Wku.jpg')},{id:4,idView:('https://i.loli.net/2021/08/10/dkG8xYshzUaWQOe.jpg')},{id:5,idView:('https://i.loli.net/2021/08/10/lSFUhZdC8HvVN3P.jpg')},{id:6,idView:('https://i.loli.net/2021/08/10/pj46B79XLudiv1z.jpg')},{id:7,idView:('https://i.loli.net/2021/08/10/hog1HuVspdBi4Ml.jpg')}],// 浏览器宽度screenWidth :0}},methods:{handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},//下面是自适应框体大小的设置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>

实现 element ui 走马灯图片插入与自适应大小相关推荐

element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
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 ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
element ui走马灯怎么添加_element-ui对话框与走马灯一起用
一.需求分析通过点击一组图片中的某一张图片,显示出当前的图片在对话框中,并可以通过走马灯的方式左右切换出其他图片,图片大小和对话框大小为自适应二.实现步骤 1.布局代码 :src="it ...
vue基于element ui走马灯卡片化的图片轮播
1.安装依赖 npm i element-ui -S 2.代码 <template><div><el-carousel :interval="4000" ...
element ui走马灯实现网易云音乐轮播图
记录一下做项目过程中的问题: 官方文档给的卡片化走马灯而我想要的效果: 话不多说直接上代码: <el-carousel :interval="4000" type=&quo ...
element UI多图片展示
图片展示效果如下: [使用for循环展示图片和对应图片名称,鼠标选中图片有阴影效果,可以自动换行] 对应图片上使用鼠标点击或鼠标悬浮,图片变大,展示如下: 完整代码 <template>& ...
element UI 走马灯使用
先贴一个官方的贴一个我写的在原有的基础上,删了官方的左右箭头,自己换了个,然后底部的切换从条形换成点状 1.如何更换官网原来的切换箭头: 先给el-carousel增加一个ref,然后自定义按钮图 ...

实现 element ui 走马灯图片插入与自适应大小

实现 element ui 走马灯图片插入与自适应大小相关推荐

最新文章

热门文章