当前位置: 首页 > news >正文

vue拖拽改变宽度

 1.封装组件ResizeBox.vue

<template><div ref="resize" class="resize"><div ref="resizeHandle" class="handle-resize" /><slot /></div>
</template>
<script>
export default {name: 'ResizeBox',props: {resizeConf: {type: Object,default: () => ({width: 280, // 初始宽度widthRange: [100, 500] // 宽度范围})}},mounted() {this.dragControllerDiv(this.$refs.resize, this.$refs.resizeHandle)},methods: {dragControllerDiv: function(resizeBox, resizeHandle) {resizeBox.style.width = this.resizeConf.width + 'px'// 鼠标按下事件resizeHandle.onmousedown = e => {const resizeWidth = resizeBox.offsetWidthconst startX = e.clientX // 水平坐标// 鼠标拖动事件document.onmousemove = ev => {const moveX = ev.clientXconst moveLen = resizeWidth + (moveX - startX)if (this.resizeConf.widthRange[0] <= moveLen && this.resizeConf.widthRange[1] >= moveLen) {resizeBox.style.width = moveLen + 'px'}}// 鼠标松开事件document.onmouseup = function() {document.onmousemove = nulldocument.onmouseup = null}}}}
}
</script>
<style lang="scss" scoped>
.resize {background: #fbfbfb;position: relative;word-wrap: break-word;.handle-resize {cursor: col-resize;position: absolute;right: -2px;width: 6px;height: 50px;border-left: 2px solid #c5c5c5;border-right: 2px solid #c5c5c5;top: calc(50% - 25px);}
}
</style>

 2.组件中使用

<template><div class="container sa-flex"><ResizeBox :resize-conf="resizeConf">我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边我是左边</ResizeBox><div class="right sa-flex-1">我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边我是右边</div></div>
</template>
<script>
import ResizeBox from './ResizeBox.vue'
export default {components: {ResizeBox},data() {return {resizeConf: {width: 280, // 初始宽度widthRange: [100, 500] // 宽度范围}}}
}</script>
<style lang="scss">
.sa-flex {display: flex;flex-wrap: no-wrap
}
.sa-flex-1 {flex:1
}
.container {min-height: 600px;background: #eee;
}
</style>

相关文章:

vue拖拽改变宽度

1.封装组件ResizeBox.vue <template><div ref"resize" class"resize"><div ref"resizeHandle" class"handle-resize" /><slot /></div> </template> <script> export default {name: Resi…...

华为数通HCIA-ARP(地址解析协议)详细解析

地址解析协议 (ARP) ARP &#xff08;Address Resolution Protocol&#xff09;地址解析协议&#xff1a; 根据已知的IP地址解析获得其对应的MAC地址。 ARP&#xff08;Address Resolution Protocol&#xff0c;地址解析协议&#xff09;是根据IP地址获取数据链路层地址的一个…...

【Python机器学习】实验04(1) 多分类(基于逻辑回归)实践

文章目录 多分类以及机器学习实践如何对多个类别进行分类1.1 数据的预处理1.2 训练数据的准备1.3 定义假设函数&#xff0c;代价函数&#xff0c;梯度下降算法&#xff08;从实验3复制过来&#xff09;1.4 调用梯度下降算法来学习三个分类模型的参数1.5 利用模型进行预测1.6 评…...

【ChatGLM_01】ChatGLM2-6B本地安装与部署(大语言模型)

基于本地知识库的问答 1、简介&#xff08;1&#xff09;ChatGLM2-6B&#xff08;2&#xff09;LangChain&#xff08;3&#xff09;基于单一文档问答的实现原理&#xff08;4&#xff09;大规模语言模型系列技术&#xff1a;以GLM-130B为例&#xff08;5&#xff09;新建知识库…...

谷歌Tsunami(海啸)扫描器搭建扩展使用教程

目录 介绍 下载地址 功能总结 原理 服务探测 漏洞检测 安装...

诚迈科技承办大同首届信息技术产业峰会,共话数字经济崭新未来

7月28日&#xff0c;“聚势而强共领信创”2023大同首届信息技术产业峰会圆满举行。本次峰会由中共大同市委、大同市人民政府主办&#xff0c;中国高科技产业化研究会国际交流合作中心、山西省信创协会协办&#xff0c;中共大同市云冈区委、大同市云冈区人民政府、诚迈科技&…...

【Python】Python使用TK实现动态爱心效果

【Python】Python使用Tk实现动态爱心效果 画布使用了缓存机制&#xff0c;启动时绘制足够多的帧数&#xff0c;运行时一帧帧地取出来展示&#xff0c;明显更流畅&#xff0c;加快了程序执行速度。将控制跳动动画的函数从正弦函数换成了贝塞尔函数&#xff0c;贝塞尔函数更灵活…...

Unity3d C#快速打开萤石云监控视频流(ezopen)支持WebGL平台,替代UMP播放视频流的方案(含源码)

前言 Universal Media Player算是视频流播放功能常用的插件了&#xff0c;用到现在已经不知道躺了多少坑了&#xff0c;这个插件虽然是白嫖的&#xff0c;不过被甲方和领导吐槽的就是播放视频流的速度特别慢&#xff0c;可能需要几十秒来打开监控画面&#xff0c;等待的时间较…...

【Android】APP启动优化学习笔记

启动优化目的 用户体验&#xff1a; 应用的启动速度直接影响用户体验。用户希望应用能够快速启动并迅速响应他们的操作。如果应用启动较慢&#xff0c;用户可能会感到不满&#xff0c;并且有可能选择卸载或切换到竞争对手的应用。通过启动优化&#xff0c;可以提高应用的启动…...

docker的使用

docker安装 https://docs.docker.com/engine/install/debian/ 设置国内镜像 创建或修改 /etc/docker/daemon.json 文件&#xff0c;修改为如下形式 {"registry-mirrors": ["https://registry.hub.docker.com","http://hub-mirror.c.163.com"…...

iOS使用Rust调研

编辑已恢复 我们已与您断开连接。尝试重连时会保存您所做的变更。尝试重连 标题 1 已保存 Bin Song B 要发布此内容&#xff0c;请选择键盘上的 ⌘Enter。 发布 关闭 Rust技术空间 … 跨平台使用调研 iOS使用Rust调研 添加表情符号 添加标题图像 添加状态 一、iOS 项…...

抖音引流推广的几个方法,抖音全自动引流脚本软件详细使用教学

大家好我是你们的小编一辞脚本&#xff0c;今天给大家分享新的知识&#xff0c;很开心可以在CSDN平台分享知识给大家,很多伙伴看不到代码我先录制一下视频 在给大家做代码&#xff0c;给大家分享一下抖音引流脚本的知识和视频演示 不懂的小伙伴可以认真看一下&#xff0c;我们…...

k8s概念-DaemonSet

回到目录 参考链接https://v1-23.docs.kubernetes.io/zh/docs/concepts/workloads/controllers/daemonset/ DaemonSet 确保全部&#xff08;或者某些&#xff09;节点上运行一个 Pod 的副本 当节点加入到K8S集群中&#xff0c;pod会被&#xff08;DaemonSet&#xff09;调度到…...

Mac 终端快捷键设置:如何给 Mac 中的 Terminal 设置 Ctrl+Alt+T 快捷键快速启动

Mac 电脑中正常是没有直接打开终端命令行的快捷键指令的&#xff0c;但可以通过 commandspace 打开聚焦搜索&#xff0c;然后输入 ter 或者 terminal 全拼打开。但习惯了 linux 的同学会觉得这个操作很别扭。于是我们希望能通过键盘按键直接打开。 操作流程如下&#xff1a; 1…...

VR 变电站事故追忆反演——正泰电力携手图扑

VR(Virtual Reality&#xff0c;虚拟现实)技术作为近年来快速发展的一项新技术&#xff0c;具有广泛的应用前景&#xff0c;支持融合人工智能、机器学习、大数据等技术&#xff0c;实现更加智能化、个性化的应用。在电力能源领域&#xff0c;VR 技术在高性能计算机和专有设备支…...

fpga开发——蜂鸣器

蜂鸣器的原理 有源蜂鸣器和无源蜂鸣器 无源蜂鸣器利用电磁感应现象&#xff0c;为音圈接入交变电流后形成的电磁铁与永磁铁相吸或相斥而推动振膜发声&#xff0c;接入直流电只能持续推动振膜而无法产生声音&#xff0c;只能在接通或断开时产生声音。无源蜂鸣器的工作原理与扬声…...

【Liux下6818开发板(ARM)】触摸屏

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…...

苍穹外卖day11——数据统计图形报表(Apache ECharts)

效果展示 Apache ECharts 介绍 常见图表 入门案例 快速上手 - Handbook - Apache ECharts 营业额统计——需求分析与设计 产品原型 接口设计 VO设计 营业额统计——代码开发 Controller中 /*** 数据统计相关接口*/ RestController RequestMapping("/admin/report&qu…...

在制作PC端Game Launcher游戏启动器时涉及到的技术选型

1&#xff09;在制作PC端Game Launcher游戏启动器时涉及到的技术选型​ 2&#xff09;​如何将图片显示到Canvas的Raw Image上面 3&#xff09;Unity 2018.4.4f1退出重启后出现黑屏 4&#xff09;如何获取到GPU耗时 这是第346篇UWA技术知识分享的推送&#xff0c;精选了UWA社区…...

SQL力扣练习(九)

目录 1.订单最多的用户(586) 示例 1 解法一(limit) 解法二(dense_rank()) 2.体育馆的人流量 示例 1 解法一(临时表) 解法二&#xff08;三表法&#xff09; 1.订单最多的用户(586) 表: Orders --------------------------- | Column Name | Type | ---------…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...