首页 前端知识 vue中ref 根据多选框所选数量,动态地变换box的高度

vue中ref 根据多选框所选数量,动态地变换box的高度

2024-04-08 11:04:52 前端知识 前端哥 136 189 我要收藏

在这里插入图片描述

查看本专栏目录


关于作者

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信,一起交流。

在这里插入图片描述

No.推荐链接
1Openlayers 【入门教程】 - 【源代码+图文 300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4595.html
评论
发布的文章

PostgreSQL 操作json/jsonb

2024-04-20 17:04:16

Excel转json的两种办法

2024-04-20 17:04:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!