解决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 相关文章推荐
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue实现文件上传功能
Aug 13 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 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 Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
深入了解javascript中的prototype与继承
2013/04/14 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
vue-property-decorator用法详解
2019/12/12 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
python实现自动更换ip的方法
2015/05/05 Python
Python引用模块和查找模块路径
2016/03/17 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
django的csrf实现过程详解
2019/07/26 Python
python正则-re的用法详解
2019/07/28 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
如何提高python 中for循环的效率
2020/04/15 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
暑假安全教育广播稿
2014/09/10 职场文书
房屋租赁协议书
2014/10/18 职场文书
2014年学生工作总结
2014/11/20 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers