用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码

<template><el-carousel :interval="2000" indicator-position="none" id="el-carousel"><el-carousel-item v-for="item in 4" :key="item"><img :src=" 'http://192.168.1.123:81/image/home/banner' +item+'.png' "></el-carousel-item></el-carousel>
</template><script>export default {data() {return {bannerHeight: 700,screenWidth: 1920,};},mounted() {this.setSize1();const that = this;//监听浏览器窗口大小改变window.addEventListener('resize', function() {var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;that.screenWidth = width;that.setSize();}, false);},methods: {setSize1: function() {var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;this.screenWidth = width;//图片                高 / 宽  700 / 1920this.bannerHeight = 700 / 1920 * this.screenWidth - 50document.getElementById('el-carousel').style.height = this.bannerHeight + 'px';},setSize: function() {this.bannerHeight = 700 / 1920 * this.screenWidth - 50document.getElementById('el-carousel').style.height = this.bannerHeight + 'px';},}}
</script><style>.el-carousel__container {height: 100% !important;}img {display: inline-block;height: auto;max-width: 100%;}
</style>

用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码相关推荐

element走马灯自动_详细element-ui的走马灯carousel轻松实现自适应全屏banner详细过程...
div部分 CSS部分 .bannerImg{ width: 100%; height: inherit; min-height: 600px; min-width: 1400px; } vue.JS ...
element ui中走马灯放图片
官方文档地址: https://element.eleme.cn/#/zh-CN/component/carousel require 是 commonjs 的语法.目的是根据路径引入图片.浏览器是不 ...
Element的左菜单Container容器不能布满全屏
编写不易,未有VIP但想白嫖文章的朋友可以关注我的个人公众号"不秃头的码农"直接查看文章,后台回复java资料.单片机.安卓可免费领取资源.你的支持是我最大的动力! 官方代码运行后 ...
charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
element ui 菜单封装_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
从 Element UI 源码的构建流程看前端 UI 库设计
引言由于业务需要,近期团队要搞一套自己的UI组件库,框架方面还是Vue.而业界已经有比较成熟的一些UI库了,比如ElementUI.AntDesign.Vant等. 结合框架Vue,我们选择在Ele ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...

用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码

用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码

用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码相关推荐

最新文章

热门文章

用element-ui的走马灯carousel轻松实现自适应全屏banner图 解决el-carousel默认高度300问题 组件代码

用element-ui的走马灯carousel轻松实现自适应全屏banner图 解决el-carousel默认高度300问题 组件代码

用element-ui的走马灯carousel轻松实现自适应全屏banner图 解决el-carousel默认高度300问题 组件代码相关推荐

最新文章

热门文章

用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码

用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码

用element-ui的走马灯carousel轻松实现自适应全屏banner图解决el-carousel默认高度300问题组件代码相关推荐