vue项目中css样式如何使用data中定义的动态变量

直接上代码：
在这里是因为需要根据接口返回的数据控制对应父级盒子的高度以及子级盒子的宽度，所以需要用到动态样式。具体代码如下：

<template><el-row class="el-row-flex" :style="styleVar" :gutter="10"><el-col v-for="item in list" :key="item.id" :span="24" class="caa" :style="styleVar1"><el-card class="component-card" shadow="never"><div class="data-panel-body" ><img class="imgborer" :src="item.logoUrl"/><div class="summary"><p class="count">{{ item.countUrl }}</p><p class="title">{{ item.name }}</p></div></div></el-card></el-col></el-row>
</template><script>
import { queryCustomData , queryDataPanel } from "@/api/system/..";
export default {props: {url: String,dataList: {type: Array,default: () => defaultDataList,},isReal:String},data() {return {list: [],dialogVisible:false,src:'',title:'',height:100,// 初始值flexBasis:100 // 初始值};},computed:{styleVar(){return {'height':this.height+'%'}},styleVar1(){return {'flex-basis':this.flexBasis+'%'}},},mounted() {if(this.isReal=='1'){queryCustomData(this.url).then((res) => {this.list = res.data;if(this.list.length<=5){this.height=100this.flexBasis = this.list.length/5 == 0 ? 20 : 100/this.list.length}else{var hs  = this.list.length/5 == 0 ? this.list.length/5 : Math.floor(this.list.length/5)+1this.flexBasis = 20this.height=this.height/hs}});}else{queryDataPanel().then((res)=>{this.list = res.data;if(this.list.length<=5){this.height=100this.flexBasis = this.list.length/5 == 0 ? 20 : 100/this.list.length}else{var hs  = this.list.length/5 == 0 ? this.list.length/5 : Math.floor(this.list.length/5)+1this.flexBasis = 20this.height=this.height/hs}})}},
};
</script><style scoped lang="scss">
.el-row-flex {display: flex;//动态样式height: var('height');flex-direction:row;flex-wrap:wrap;justify-content:flex-start;padding-bottom: 10px;
}
.caa{//动态样式flex-basis: var('flex-basis');margin-bottom:10px;
}
.context{width: 100%;height: 500px;overflow-y: scroll;
}
.iframe{width: 100%;height: 100%;
}
.el-col {height: 100%;
}
.el-dialog__wrapper >>> .el-dialog__body{padding: 10px 20px !important;
}
.el-dialog__wrapper >>> .el-dialog__footer{text-align: center !important;
}
.component-card ::v-deep  .el-card__body {padding: 0;height: 100%;
}.data-panel-body {padding-left: 30px;height: 100%;display: flex;align-items: center;
}.data-panel-body img {width: 66px;height: 66px;margin-right: 16px;border-radius: 50%;text-align: center;line-height: 66px;font-size: 36px;flex-shrink: 0;
}.data-panel-body .summary {margin-top: -10px;
}
.data-panel-body .count {font-size: 18px;line-height: 46px;height: 46px;font-weight: bold;margin: 0px;padding: 0px;
}.data-panel-body .title {font-size: 14px;color: #666;line-height: 18px;margin: 0px;padding: 0px;
}
.data-panel-body .imgborer:hover{border: 2px solid #ffffff;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {width: 2px;height: 2px;background-color: transparent;
}::-webkit-scrollbar:hover {background-color: rgb(255, 255, 255);
}/* 滚动槽/外层轨道 */
::-webkit-scrollbar-track {width: 2px;height: 2px;border-radius: 2px;-webkit-box-shadow: inset 0 0 2px  rgb(255, 255, 255);background-color: transparent;
}/* 滚动条滑块 */
::-webkit-scrollbar-thumb {min-height: 2px;min-width: 2px;border-radius: 2px;-webkit-box-shadow: inset 0 0 2px  rgb(255, 255, 255);
}</style>

vue项目中css样式如何使用data中定义的动态变量相关推荐

webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
[vue] 怎么使css样式只在当前组件中生效？
[vue] 怎么使css样式只在当前组件中生效? <style scoped> </style> 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...
CSS样式为什么放在head中，而不放在body底部
CSS样式为什么放在head中,而不放在body底部 1. 放在body底部代码: <!DOCTYPE html> <html lang="en"> &l ...
html中的面板样式,Dreamweaver中CSS样式面板
核心提示:本教程为大家介绍一下Dreamweaver中CSS样式面板,希望对大家有帮助. 本教程为大家介绍一下Dreamweaver中CSS样式面板,希望对大家有帮助. 一.打开CSS样式面板使用& ...
laravel项目中css样式表的背景图片不显示
刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd {background: url(../images/sky/body ...
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
[写在前面]vue3在vscode运行正常.build后在IDEA运行正常,但是当部署在服务器上运行发现样式加载不出来,下面我们针对这些情况进行复现与解决. 一.问题分析困扰我好久,当即百度原因,百 ...
Vue 之解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
一.简介官方文档: 通过上面官方文档的介绍我们可以得知两个重点: ① 通过v-html生成的页面元素,不会被当做Vue模板进行编译,只会作为普通的html代码被插入,也就是说通过v-html插入的h ...
Vue项目自定义滚动条样式【火狐、谷歌、360】
Vue项目中自定义浏览器的滚动条样式,已解决火狐.谷歌.360 火狐浏览器谷歌和360 火狐浏览器 // 火狐浏览器专属 // 仅有scrollbar-color.scrollbar-width两个 ...

vue项目中css样式如何使用data中定义的动态变量

vue项目中css样式如何使用data中定义的动态变量

vue项目中css样式如何使用data中定义的动态变量相关推荐

最新文章

热门文章