解决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中的同名标识符优先级
Dec 06 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
jquery validate demo 基础
Oct 29 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
深入浅析Vue中的Prop
Jun 10 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
javascript canvas实现雨滴效果
Jun 09 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 和 MySQL 时区的一点总结
2008/03/26 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Scrapy框架使用的基本知识
2018/10/21 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
基于python中__add__函数的用法
2019/11/25 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
结构和类有什么异同
2012/07/16 面试题
老师推荐信
2013/10/28 职场文书
工程安全员岗位职责
2014/03/09 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python