解决Vue的项目使用Element ui 走马灯无法实现的问题


Posted in Javascript onAugust 03, 2020

1.在vue项目中引入element ui

http://element.eleme.io/#/zh-CN/component/carousel

引入后,HTML部分

<el-carousel height="150px">
<el-carousel-item v-for="item in imgList" :key="item" height="300px" >
<h3><img :src="item" alt=""> </h3>
</el-carousel-item>
</el-carousel>

JS部分

<script>
export default {
data(){
return {
imgList:[
require('../../assets/img/images/a1.png'),
require('../../assets/img/images/a2.png'),
require('../../assets/img/images/a3.png'),
require('../../assets/img/images/a4.png'),
require('../../assets/img/images/a5.png')
]
}
},
components: {
}
}
</script>

用webpack搭建的项目不能直接使用绝对路径,要用require,如果不使用这个,必须是线上图片。http类型的

补充知识:基于vue 使用element UI框架 实现走马灯 图片高度自适应

走马灯代码结构走一遍 (imgList数组在data中声明,此为本地数据)

data() {
 return{
 // 图片需要引入, 否则无法显示
 imgList: [
   {id: 0, idView: require('../assets/images/banner3.jpg')},
   {id: 1, name: '详情', idView: require('../assets/images/banner2.jpg')},
   {id: 2, name: '推荐', idView: require('../assets/images/banner1.jpg')}
  ]
 }
}
<template> 
 <el-carousel :interval="5000" arrow="always" class="d_jump" :height="imgHeight">
 <el-carousel-item v-for="item in imgList" :key="item.id">
  <el-row>
  <el-col :span="24"><img ref="imgHeight" :src="item.idView" class="banner_img"/></el-col>
  </el-row>
 </el-carousel-item>
 </el-carousel>
</template>

element UI 官网地址戳这里

http://element-cn.eleme.io/#/zh-CN/component/carousel

Carousel 中有一个height参数 如果给固定值620px,那么它会出现如图效果, 图片的宽高随可视窗口的改变等比放大或缩小,可视窗口缩小,图片的宽度和高度缩小, 轮播图的固定高度不变, so...如图所示 如果图片给height: 100%; 属性,图片会拉伸;好吧,那就换一个auto,则如图所示

所以,要想图片正常显示,又不会出现空白条的办法,就是动态改变轮播图的高度跟图片高度相等即可。

首先获取图片的高度,通过ref来获取DOM元素

监听窗口发生改变时,获取img的高度,给轮播图height属性添加属性值

that.imgHeight = '620px'
window.onresize = function temp() {
 // 通过点语法获取img的height属性值
 that.imgHeight = `${that.$refs.imgHeight['0'].height}px`
}

以上这篇解决Vue的项目使用Element ui 走马灯无法实现的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
js实现简单商品筛选功能
Feb 02 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 #Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 #Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 #Javascript
简单了解three.js 着色器材质
Aug 03 #Javascript
Element InputNumber 计数器的实现示例
Aug 03 #Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 #Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 #Javascript
You might like
优化PHP代码的53条建议
2008/03/27 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
header导出Excel应用示例
2014/01/24 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
初中生三年学习生活的自我评价
2013/11/03 职场文书
校长岗位职责
2013/11/26 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
老龄工作先进事迹
2014/08/15 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
领导参观欢迎词
2015/01/26 职场文书
市场部岗位职责范本
2015/04/15 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸