Vue3 左右2栏的宽度 比例resize

Vue3, 页面左右2栏布局,用vue-resizer.页面效果如下图。

安装

npm  i vue-resizer

引入

import { DragCol, DragRow, ResizeCol, ResizeRow, Resize } from 'vue-resizer'<DragCol height="100%" width="100%" :leftPercent="15"><template #left>// 左侧内容<div class="left_tree">...省略</div></div></template><template #right>// 右侧内容省略...</template></DragCol>

自定义样式

<style>
.drager_col {background-color: #fff !important;height: 100vh !important;// 改变滑块列的样式.slider_col {background-color: #f8f8f8 !important;}.slider_col:hover {background-color: #f8f8f8 !important;}.slider_col:activate {background-color: #f8f8f8 !important;}
}
</style>

// 注意左右2列布局宽度不要写死,不然没法拖动的时候自适应宽度

<style lang="less" scoped>
// 设置左列宽度100% 但是默认只有15%的宽度:leftPercent="15"
.left_tree {width: 100%;
}

PS: 我按照官网那样定义props给width,height没有生效,始终都是400px,但是又不能强制写死宽度!important,那样拖动就改变不了宽度了,所以没有用props定义属性,而是这种方式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/64297.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拿到小米 Offer,却迷茫了。。

大家好&#xff0c;我是程序员鱼皮&#xff0c;12 月了&#xff0c;很多小伙伴也拿到了秋招的 Offer&#xff08;没拿到也不要灰心&#xff09;&#xff0c;但即使拿到 Offer&#xff0c;可能还会有一些其他的顾虑。今天分享我们编程导航一位鱼友的提问&#xff0c;给大家作为学…

transformer学习笔记-自注意力机制(2)

经过上一篇transformer学习笔记-自注意力机制&#xff08;1&#xff09;原理学习&#xff0c;这一篇对其中的几个关键知识点代码演示&#xff1a; 1、整体qkv注意力计算 先来个最简单未经变换的QKV处理&#xff1a; import torch Q torch.tensor([[3.0, 3.0,0.0],[0.5, 4…

Leecode刷题C++之形成目标字符串需要的最少字符串数①

执行结果:通过 执行用时和内存消耗如下&#xff1a; 代码如下&#xff1a; class Solution { public:int minValidStrings(vector<string>& words, string target) {auto prefix_function [](const string& word, const string& target) -> vector<…

unity shader中的逐像素光源和逐顶点光源

在Unity Shader中&#xff0c;逐像素光源和逐顶点光源是两种不同的光照计算方法&#xff0c;它们之间存在显著的区别。 一、基本原理 逐顶点光源&#xff1a;这种方法在顶点着色器中计算每个顶点的光照值。然后&#xff0c;在片段着色器中&#xff0c;通过插值算法将这些顶点…

CompletableFuture异步业务 默认ForkJoinPool 导致类加载器加载类失败

目录 1、Bug案发现场 2、捉虫过程过程 3、解决方案与代码 4、成果展现与总结 ​编辑 5、参考文章 1、Bug案发现场 最近参与帮助以前同事实际业务开发中业务&#xff0c;在一个业务场景之中&#xff1b;使用H5页面通过二维码收集小微企业/个体工商户贷款业务需求。其中在获…

mybatis-plus超详细讲解

mybatis-plus &#xff08;简化代码神器&#xff09; 地址&#xff1a;https://mp.baomidou.com/ 目录 mybatis-plus 简介 特性 支持数据库 参与贡献 快速指南 1、创建数据库 mybatis_plus 2、导入相关的依赖 3、创建对应的文件夹 4、编写配置文件 5、编写代码 …

Houdini abc 导入 maya uv无法识别

参考&#xff1a;Houdini导出abc 至maya UV 无法识别_houdini导出abc没有uv-CSDN博客 从maya导入到houdini的uv默认是vertex层级的&#xff0c;而在maya中&#xff0c;uv是在point层级的&#xff1b;因此在houdini中导出abc时应将uv转为点层级&#xff0c;使用vertexsplit节点&…

2025erp系统开源免费进销存系统搭建教程/功能介绍/上线即可运营软件平台源码

系统介绍 基于ThinkPHP与LayUI构建的全方位进销存解决方案 本系统集成了采购、销售、零售、多仓库管理、财务管理等核心功能模块&#xff0c;旨在为企业提供一站式进销存管理体验。借助详尽的报表分析和灵活的设置选项&#xff0c;企业可实现精细化管理&#xff0c;提升运营效…

半导体数据分析(二):徒手玩转STDF格式文件 -- 码农切入半导体系列

一、概述 在上一篇文章中&#xff0c;我们一起学习了STDF格式的文件&#xff0c;知道了这是半导体测试数据的标准格式文件。也解释了为什么码农掌握了STDF文件之后&#xff0c;好比掌握了切入半导体行业的金钥匙。 从今天开始&#xff0c;我们一起来一步步地学习如何解构、熟…

Mac Goland dlv 升级

Mac Goland dlv 升级 问题表现 WARNING: undefined behavior - version of Delve is too old for Go version 1.22.1 (maximum supported version 1.21)查看当前Goland dlv 版本 ☁ ~ /Applications/GoLand.app/Contents/plugins/go-plugin/lib/dlv/mac/dlv version Delve…

OCR:文字识别

使用场景: 远程身份认证 自动识别录入用户身份/企业资质信息&#xff0c;应用于金融、政务、保险、电商、直播等场景&#xff0c;对用户、商家、主播进行实名身份认证&#xff0c;有效降低用户输入成本&#xff0c;控制业务风险 文档电子化 识别提取各类办公文档、合同文件、企…

深入C语言文件操作:从库函数到系统调用

引言 文件操作是编程中不可或缺的一部分&#xff0c;尤其在C语言中&#xff0c;文件操作不仅是处理数据的基本手段&#xff0c;也是连接程序与外部世界的重要桥梁。C语言提供了丰富的库函数来处理文件&#xff0c;如 fopen、fclose、fread、fwrite 等。然而&#xff0c;这些库…

Java 和 J2EE 有什么不同?

Java 和 J2EE 有什么不同&#xff1f; 一. Java的理解二. 什么是 J2EE三. Java 和 J2EE 的主要区别四. 结论 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 Java 和 J2EE&#xff…

linux上qt打包(二)

sudo apt install git 新建一个文件夹 名为xiazai&#xff0c; chmod -R 777 xiazai cd xiazai 并进入这个文件夹&#xff0c;然后clone git clone https://github.com/probonopd/linuxdeployqt.git 此处可能要fanQiang才能下 cd linuxdeployqt文件夹 下载平台需要的…

Delphi编写涂鸦桌面的小程序

用Delphi编写涂鸦桌面的小程序&#xff0c;类似于腾讯会议中的画板功能的实现。这里用Delphi实现代码给大家提供一些思路&#xff1b; 首先&#xff0c;新建一个Application&#xff0c;将Form1的WindowState设为wsMaximized&#xff0c;BorderStyle设为bsNone。这样做的目的就…

Windos中解决redis-server.exe闪退问题

一、闪退原因 &#xff08;一&#xff09;数据状态异常 数据不一致 在 Redis 运行过程中&#xff0c;如果发生意外情况&#xff0c;如突然断电、系统崩溃或者不正确的操作&#xff0c;可能会导致数据在内存中的存储状态不一致。例如&#xff0c;Redis 使用多种数据结构&#x…

【数据分享】2013-2023年我国省市县三级的逐年CO数据(免费获取\excel\shp格式)

空气质量数据是在我们日常研究中经常使用的数据&#xff01;之前我们给大家分享了2000-2023年的省市县三级的逐年PM2.5数据、2000-2023年的省市县三级的逐年PM10数据、2013-2023年的省市县三级的逐年SO2数据、2000-2023年省市县三级的逐年O3数据和2008-2023年我国省市县三级的逐…

华为WLAN基础配置(AC6005模拟配置)

AC6005基础配置 本次实验模拟华为AC6005的基本配置 Tip display interface GigabitEthernet 0/0/0 查看ap接口mac 前提条件&#xff1a;Vlan10为业务网段&#xff0c;vlan100为管理网段&#xff0c;5700作为dhcp。 5700配置如下 <Huawei>sy [Huawei]sys 5700 //设…

shell编程2 永久环境变量和字符串显位

声明 学习视频来自B站UP主 泷羽sec 常见变量 echo $HOME &#xff08;家目录 root用户&#xff09; /root cd /root windows的环境变量可以去设置里去新建 为什么输入ls dir的命令的时候就会输出相应的内容呢 因为这些命令都有相应的变量 which ls 通过这个命令查看ls命令脚本…

WebRTC服务质量(05)- 重传机制(02) NACK判断丢包

WebRTC服务质量&#xff08;01&#xff09;- Qos概述 WebRTC服务质量&#xff08;02&#xff09;- RTP协议 WebRTC服务质量&#xff08;03&#xff09;- RTCP协议 WebRTC服务质量&#xff08;04&#xff09;- 重传机制&#xff08;01) RTX NACK概述 WebRTC服务质量&#xff08;…