关于作者
还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信,一起交流。
No. | 推荐链接 |
---|---|
1 | Openlayers 【入门教程】 - 【源代码+图文 300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
- 核心算法:
- 示例效果图
- 示例源代码
做项目时候碰到这样的一个需求: 左边列表中有4种类型,通过checkbox做选择,选择的数量的不同,决定了右侧的box的高度的不同。这里采用了ref的方法,定位到dom,进行高度的改变。
核心算法:
this.$ref.box.style.height= XXX+‘px’
示例效果图
示例源代码
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-03-14
*/
<template>
<div class="djs-box">
<div class="topBox">
<h3>vue中 ref 根据多选框所选数量,动态地变换box的高度</h3>
<div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
</div>
<div class="dajianshi">
<div class="left">
<el-checkbox-group v-model="checkedCities">
<p v-for="city in cities" :key="city">
<el-checkbox :label="city" @change="changeSize()">{{city}} </el-checkbox>
</p>
</el-checkbox-group>
</div>
<div class="box" ref="box">
<p v-for="(item,index) in restaurants" :key="index">
{{ item.name }}
</p>
</div>
</div>
</div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data() {
return {
checkedCities: ['上海', '北京'],
cities: cityOptions,
restaurants: [{
"name": "三全鲜食(北新泾店)",
},
{
"name": "Hot honey 首尔炸鸡(仙霞路)",
},
{
"name": "唦哇嘀咖",
},
{
"name": "爱茜茜里(西郊百联)",
},
{
"name": "爱茜茜里(近铁广场)",
},
{
"name": "鲜果榨,汁(金沙江路和美广店)",
},
{
"name": "开心丽果(缤谷店)",
},
{
"name": "超级鸡车(丰庄路店)",
},
{
"name": "三全鲜食(北新泾店)",
},
{
"name": "Hot honey 首尔炸鸡(仙霞路)",
},
{
"name": "唦哇嘀咖",
},
{
"name": "爱茜茜里(西郊百联)",
},
{
"name": "爱茜茜里(近铁广场)",
},
{
"name": "鲜果榨,汁(金沙江路和美广店)",
},
{
"name": "开心丽果(缤谷店)",
},
{
"name": "超级鸡车(丰庄路店)",
},
{
"name": "三全鲜食(北新泾店)",
},
{
"name": "Hot honey 首尔炸鸡(仙霞路)",
},
{
"name": "唦哇嘀咖",
},
{
"name": "爱茜茜里(西郊百联)",
},
{
"name": "爱茜茜里(近铁广场)",
},
{
"name": "鲜果榨,汁(金沙江路和美广店)",
},
{
"name": "开心丽果(缤谷店)",
},
{
"name": "超级鸡车(丰庄路店)",
}
],
}
},
mounted() {
this.changeSize()
},
methods: {
changeSize() {
let m = this.checkedCities.length;
let k = 500 - m * 50;
this.$refs.box.style.height = k + "px"
},
}
}
</script>
<style scoped>
.djs-box {
width: 1000px;
height: 650px;
margin: 50px auto;
border: 1px solid black;
}
.topBox {
margin: 0 auto 0px;
padding: 10px 0 20px;
background: black;
color: #fff;
}
.dajianshi {
width: 98%;
margin: 0 auto;
height: 520px;
background-color: cde;
position: relative;
}
.left {
width: 30%;
height: 500px;
float: left;
margin:100px 10px 0;
}
.box {
width: 60%;
height: 500px;
float: right;
margin:10px;
overflow-y: auto;
/* 必须允许滚动 */
border: 1px solid #369;
}
</style>