解决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 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
AngularJS自动表单验证
Feb 01 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
DIV菜单层实现代码
2010/11/19 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
JS中的phototype详解
2017/02/04 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python实现的登录和操作开心网脚本分享
2014/07/09 Python
详解Python中的日志模块logging
2015/06/19 Python
python实现汉诺塔方法汇总
2016/07/25 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
经销商培训邀请函
2014/01/21 职场文书
厕所文明标语
2014/06/11 职场文书
服务行业演讲稿
2014/09/02 职场文书
五一劳动节活动总结
2015/02/09 职场文书
公司回复函格式
2015/07/14 职场文书
大学校园招聘会感想
2015/08/10 职场文书