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

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 走马灯无法实现的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Element Carousel 走马灯的具体实现

    本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/carousel 基础用法 普通走马灯 <div class="block"> <span class="demonstration">默认 Hover 指示器触发</span> <el-carousel height="150px"> <el-carousel-ite

  • 详解vantUI框架在vue项目中的应用踩坑

    1.订单提交地址等组件的应用. 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块: <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default show-searc

  • 基于Vue和Element-Ui搭建项目的方法

    首先要求事先安装node和npm 没有安装的自行百度或在论坛里面搜索! 提示:在命令行分别输入node -v(node和-v之间有个空格) 和npm -v(同样有个空格)可查看当前的node和npm版本 创建vue项目 1.创建一个项目文件夹,记住文件夹路径,如我的是F:\AppCode 2.打开cmd命令通过cd指令进入到刚才创建的文件夹路径F:\AppCode. 输入npm install -g cnpm –registry=https://registry.npm.taobao.org安装

  • vue项目部署上线遇到的问题及解决方法

    前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会

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

    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 :

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

  • 解决vue脚手架项目打包后路由视图不显示的问题

    脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部变成静态加载成功,但路由视图为空,最初以为是webpack打包的问题,找了好久发现是路由配置问题. 解决办法如下: Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: '/system/', //添加根目录 scrollBehavior: () => ({ y: 0 }), routes }) 比如我是将打包后的dist和ind

  • 解决vue初始化项目时,一直卡在Project description上的问题

    最近初学vue,但是项目初始化就进行不下去了. 如上图所示,初始化项目时一直卡在项目描述上,直接回车无响应,文字也无法输入. 已定位出原因:vue版本不对!! 解决方法:将2.9.6的版本升级到3.0以上 1.npm uninstall -g vue-cli 卸载掉旧版本: 2.npm install -g @vue/cli 和 npm install -g @vue/cli-init 命令安装新版本vue-cli. 升级后版本: 注意:3.0以上版本的vue-cli的名称已经改为了 @vue/

  • 解决vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import

  • 解决vue+webpack项目接口跨域出现的问题

    1.config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost) proxyTable: { '/api': { target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境 // target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口 changeOrigin: true, pathRewrite:

  • 解决vue初始化项目一直停在downloading template的问题

    解决方法如下: 用power shell初始化vue项目一直停留在downloading template 用git的git bush here 就可以了. 补充知识:vue init webpack 卡在chromedriver上问题解决办法 最近在学习vue,尝试利用vue-cli创建一个工程.但是执行vue init webpack projectname时,执行到Saving to c:\Users\......\chromedriver_win32.zip时卡住不往下走了. 仔细看do

  • Vue前端整合Element Ui的教程详解

    Vue前端整合Element Ui的教程详解

    目录 Vue前端整合Element Ui 1.安装Element Ui组件库 2.测试Element Ui是否整合成功 Vue前端整合Element Ui 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型. Element Ui组件官网 1.安装Element Ui组件库 WIN+

  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式. 方法一(不推荐):使用class 为要修改的这个组件标签设置一个 class 类名,然后在 <style></style> 标签中设置样式.但要注意这种方式必须是在全局下才会生效,也就是说 <style></style> 标签中不能用 scoped 属性. <style> </style>

  • vue项目如何引入element ui、iview和echarts

    vue项目如何引入element ui、iview和echarts

    目录 vue引入element ui.iview和echarts 1.vue项目引入elementui 2.vue项目中引入iview 3.vue项目中引入echarts 4.main.js文件代码截图 5.echarts在引入后 6.引入之后就可以使用他们的组件了 iview与elementui对比 表格 风格 按需引入 表单验证 下拉选择器 vue引入element ui.iview和echarts 记性不好,每次引入都要重新搜一遍,今天把几个自己整理一下.全部引入,没搞按需引入. 1.vu

随机推荐