解决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对象的三个方法小结
Jan 12 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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&amp;&amp;mysql)六
2006/10/09 PHP
如何在PHP中进行身份认证
2006/10/09 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php给图片加文字水印
2015/07/31 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
js数组操作常用方法
2014/05/08 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
json的使用小结
2016/06/08 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
美国家具网站:Cymax
2016/09/17 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
金融专业个人的自我评价
2013/10/18 职场文书
办公室文书岗位职责
2013/12/16 职场文书
校园环保建议书
2014/05/14 职场文书
死亡证明书样本说明
2014/10/18 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android