关于作者
还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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>
