element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应

2024-05-24 06:20:57

Element UI走马灯中，通过属性height来设置高度，但是设置就是死的，不能自适应。要自适应需要监控窗口宽度的变化。

网上别人分享的太复杂了，这儿有简单的方法实现高度自适应。

首先，确定图片的最大高度

我的图片最大高度为270px，屏幕宽度超过container的宽度，这个值就不能再变化了。

首先计算图片高度和网站宽度的百分比，例如，内容区域最大宽度为1180px，图片高度为270px，270/1180约0.22

那么，只要宽度被改变，高度就变化为宽度的0.22倍即可

data中声明hdgd属性，作为高度变量

VUE添加mounted事件：

mounted() {

let that = this;

window.onresize = function windowResize() {

// 通过捕获系统的onresize事件触发我们需要执行的事件

var w = window.innerWidth

var h = 270

if (w > 1180) {

h = 270

} else {

h = 0.22 * w

}

that.hdgd = h + 'px'

console.log(that.hdgd)

}

}

添加el-carousel，:height="hdgd"属性

效果如下：

完整代码：

图片和vue以及element自行引入

Header

var vue = new Vue({

el: '#app',

data: {

show: true,

hdgd: '270px',

img: ['lb01', 'lb02', 'lb03']

},

computed: {

cancard: () => {

return ""

}

},

methods: {},

mounted() {

let that = this;

window.onresize = function windowResize() {

// 通过捕获系统的onresize事件触发我们需要执行的事件

var w = window.innerWidth

var h = 270

if (w > 1180) {

h = 270

} else {

h = 0.22 * w

}

that.hdgd = h + 'px'

console.log(that.hdgd)

}

}

});

element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应相关推荐

element ui走马灯怎么添加_element-ui对话框与走马灯一起用
一.需求分析通过点击一组图片中的某一张图片,显示出当前的图片在对话框中,并可以通过走马灯的方式左右切换出其他图片,图片大小和对话框大小为自适应二.实现步骤 1.布局代码 :src="it ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）
1.Element ui 文档已经更新至Vue3,可以放心使用,在使用Element ui的时候注意在使用弹性布局的时候,Element ui中的Table 表格会出现缩放无法自适应问题. 安装 $ ...
基于layui的动态添加条件查询ui插件
layuiExtend 项目介绍最近做一个档案系统,发现字段超多,查询页面布局不是很好弄,于是就想着干脆写一个动态添加条件的ui插件. 因为是用的layui框架写的系统,所以就直接基于layui编写 ...
UI 设计师的盛宴：Web UI 设计资源大系
每个 Web 设计师都在 UI 设计上费尽了心血,即使这样,资源的匮乏,视野的狭窄,也常常让他们的呕心沥血之作并不为人看好,事实上,UI 设计并不需要闭门造车,很多 UI 元素是通用的.本文收集了 2 ...
UI培训分享：导航栏UI设计规范及注意事项有哪些?
UI设计学习起来要注意的东西还是有很多的,例如导航栏,导航栏UI设计规范及注意事项有哪些呢?今天小编为大家详细的介绍一下关于导航栏的设计注意事项,希望能够帮助到今后工作的你. UI培训分享:导航栏UI ...
朱慕慕：ui设计包括什么内容，ui设计包括有几部分内容？
ui设计包括什么内容,ui设计包括有几部分内容?UI即User Interface(用户界面)的简称.UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计.优秀的UI设计不仅是让软件变得有个性有 ...
ui设计怎么做分享：ui设计方案
ui设计怎么做分享:ui设计方案包含一套UI设计从无到有的全过程.由于最近很多新手加入APP设计群,不知道如何下手.今天庞姿姿跟大家再次分享ui设计怎么做分享:ui设计方案如何做好一个APP界面设计. ...
ui动效 unity_简易 Unity3D UI 框架
看见一篇介绍 Unity3D UI 框架编写的文章,并且给出了示例代码.然后去了解了一下.讲道理,示例代码蛮乱的,不知道有一些是不是直接从项目代码拷贝然后简单修改,对于一个简单的框架来说,有很多不必要 ...

最新文章

热门文章