【Splitpanes】Vue.js 靠谱、简单并支持触摸的窗格分割器/调整器。

news2025/1/16 16:03:31

【Splitpanes】Vue.js 靠谱、简单并支持触摸的窗格分割器/调整器。

  • 介绍
  • 安装
  • 使用
  • 示例与文档

介绍

Vue.js 靠谱、简单并支持触摸的窗格分割器/调整器。用于实现可调节窗口,支持Vue2、Vue3。
在这里插入图片描述

安装

  • Vue3
npm install splitpanes
  • Vue2
npm install splitpanes@legacy

使用

<template>
    <h1>splitpanes</h1>
    <Splitpanes class="default-theme" horizontal style="height: 400px">
        <Pane min-size="20" max-size="70" size="20">
            <span>1</span>
        </Pane>
        <Pane>
            <span>2</span>
        </Pane>
        <Pane max-size="70">
            <span>3</span>
        </Pane>
    </Splitpanes>
</template>

<script setup>
import { Splitpanes, Pane } from "splitpanes";
import 'splitpanes/dist/splitpanes.css'
</script>

示例与文档

项目地址:https://gitcode.com/antoniandre/splitpanes
示例地址:https://antoniandre.github.io/splitpanes 示例虽然是英文的,但是用法本身也没有很复杂,容易看懂

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

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

相关文章

一文读懂数据仓库ODS层

数据仓库一般分为三层&#xff0c;分别为数据贴源层&#xff08;ODS&#xff0c;Operation Data Store&#xff09;、数据公共层&#xff08;CDM&#xff0c;Common Data Model&#xff09;和数据应用层&#xff08;ADS&#xff0c;Application Data Service&#xff09;。其中…

小巧悦耳的百元耳机,也有纯净的音乐享受,西圣AVA2体验

无论是居家休闲还是出门在外&#xff0c;音乐成为了许多人生活中不可或缺的一部分。特别是在拥有一款既经济又好听的蓝牙耳机之后&#xff0c;我们就可以在通勤路上和办公室里&#xff0c;隔绝外界干扰&#xff0c;找回属于自己的天地&#xff0c;提升生活品质。目前我用的是一…

[巨详细]使用HBuilder-X新建uniapp项目教程

文章目录 安装HBuilder-X启动uniapp项目其他&#xff1a;下载预览浏览器下载终端插件想用uni-ui 安装HBuilder-X 详细步骤可看上文》》 启动uniapp项目 先打开HBuilder-X 点击新建项目 选择uniapp侧边栏&#xff0c;mian中的点击浏览 选择已经安装到本地的uniapp项目&#…

web版的数字孪生,选择three.js、unity3D、还是UE4

数字孪生分为客户端版和web端版&#xff0c;开发引擎多种多用&#xff0c;本文重点分析web端版采用哪种引擎最合适&#xff0c; 贝格前端工场结合实际经验和网上主流说法&#xff0c;为您讲解。 一、数字孪生的web版和桌面版 数字孪生的Web版和桌面版是数字孪生技术在不同平台…

分享由AI制定一个商城网站的开发计划及推荐的开发语言

商城网站开发计划 一、项目概述 本商城网站开发计划旨在创建一个功能齐全、用户友好的在线购物平台&#xff0c;为顾客提供商品浏览、搜索、购物车管理、订单跟踪、在线支付等服务。商城将支持多种商品分类&#xff0c;包括但不限于电子产品、家居用品、服饰鞋帽等。 二、开…

张大哥笔记:5种信息差赚钱模式

从古至今&#xff0c;赚钱最快的路子就一个&#xff0c;而且从未改变&#xff0c;那就是信息差&#xff01;在商业活动中&#xff0c;信息不对称现象普遍存在&#xff0c;如果你善于利用这些信息差的话&#xff0c;就可以赚到钱&#xff01; 1、价格的信息差 商品价格在不同地…

倍思突破氮化镓快充技术,为用户带来安全舒适体验

氮化镓,这个化学式为GaN的化合物,其高热稳定性和化学稳定性使其在多种极端环境中都能保持优良的性能,从而为其在电子器件领域的应用奠定了坚实的基础。 2018年前后开始,氮化镓快充充电器进入国内市场。作为第三代半导体材料的代表,氮化镓具有宽禁带的特性,其禁带宽度远大于传统…

数据库讲解---(数据库保护)【下】

目录 一.并发控制 1.1并发操作引发的问题 1.1.1丢失修改 1.1.2不可重复读 1.1.3读”脏“数据 1.2调度及其可串行化 1.3事务的隔离性级别 1.4封锁技术【重要】 1.4.1排他锁 1.4.2共享锁 1.5封锁协议 1.5.1一级封锁协议 1.5.2二级封锁协议 1.5.3三级封锁协议 1.5.…

【STM32】SysTick系统滴答定时器

1.SysTick简介 CM4内核的处理和CM3一样&#xff0c;内部都包含了一个SysTick定时器&#xff0c;SysTick 是一个24 位的倒计数定时器&#xff0c;当计到0 时 &#xff0c;将 从RELOAD 寄存器中自动重装载定时初值。只要不把它在SysTick 控制及状态寄存器中的使能位清除&#xf…

使用Python发送电子邮件:轻松实现自动化沟通

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 1. 为什么使用Python发送电子邮件&#xff1f; 在当今这个信息爆炸的时代&#xff0c;电子邮件已经成为了日常生活中不可或缺的一部分。无论是工作还是生活&#xff0c;都可能需要通过电子邮件与他人进行沟通。而Py…

springboot项目mapper无法自动装配,未找到 ‘userMapper‘ 类型的Bean解决办法.

一开始我看到了这个回答&#xff1a;springboot项目mapper无法自动装配&#xff0c;未找到 ‘userMapper‘ 类型的 Bean解决办法&#xff08;含报错原因&#xff09;_无法自动装配。找不到 usermapper 类型的 bean。-CSDN博客 mapper无法自动装配&#xff0c;未找到 ‘userMap…

Open WebUI的SearXNG网络搜索配置【403报错解决方法】

1.拉取SearXNG镜像 docker pull searxng/searxng 2.在Docker Desktop的Images界面中启动searxng容器 3.查看searxng是否部署成功 在Docker Desktop的Containers界面中&#xff0c;查看searxgn暴露的端口。 http://localhost:31292/ 4.修改settings.yml配置参数 在Docker De…

python如何判断图片是否为空

如下所示&#xff1a; import cv2im cv2.imread(2.jpg) if im is None:print("图像为空") # cv2.imshow("ss", im) # cv2.waitKey(0)

【Spine学习11】之 战士攻击动作 思路总结(手动调整贝塞尔曲线实现前快后慢)

拿到一份psd文件先观察检查一下图片顺序有没有问题&#xff0c; 重点看一下人物的腿部分层&#xff0c;&#xff08;如果是大小腿分开画的就网格可打可不打&#xff0c;如果是连在一起画的&#xff0c;那必须打网格&#xff09; 拿着剑的时候剑和手的层级有没有错位&#xff0c…

如何一步一步将Python中的应用打包成安卓的APK安装包文件

一、首先&#xff0c;按照如下链接操作 Python 应用打包成 APK【全流程】_python打包成apk-CSDN博客 二、运行 buildozer init会报错buildozer命令找不到&#xff0c;明明已经安装 解决方法&#xff1a; 这里重新创建一个conda环境 Installation — Buildozer 0.11 docum…

Codepen Three.js环境依赖配置

Codepen Three.js环境依赖配置 前言 如果想在CodePen环境写Three.js依赖的项目&#xff0c;环境搭建可以参考该Codepen项目: Chill the lion 详细 打开设置可以看到以下配置 更多项目参考 1. Chill the Lion Chill the Lion 是一个基于 ThreeJS 制作的 WebGL 示例。它由…

基于llama3-8B-instruct的调用部署以及lora微调

基于llama3-8B-instruct的调用部署以及lora微调 1 Llama-3-8B-Instruct 基于FastApi 部署调用2 LLaMA3-8B-Instruct langchain 接入3 LaMA3-8B-Instruct 基于streamlit的web demo部署LLaMA3-8B-Instruct Lora 微调参考&#xff1a; 1 Llama-3-8B-Instruct 基于FastApi 部署调用…

Docker Desktop进入界面时一直转圈的解决办法记录

我的win10版本如下&#xff0c;是支持安装的&#xff0c;不支持安装的&#xff0c;可以先升级系统版本&#xff1a; 起初是因为运行Docker Desktop时一直转圈&#xff0c;无法进入主面板&#xff0c;百度之&#xff0c;需要安装hype-v环境&#xff0c;找到以下 勾选Hyper-V下的…

linux日志管理之journalctl命令

一、日志查询 1.输出所有日志或按相关要求输出 输出所有日志 #journalctl查看实时日志 #journalctl -f查看最后n行 #journalctl -n 10不分页显示 #journalctl --no-pager适合阅读模式 #journalctl -p 3 -o json-pretty 查看内核日志 #journalctl -k 2.按服务查询 #journal…

【MySQL进阶之路 | 高级篇】InnoDB搜索引擎行格式

1. COMPACT行格式 COMPACT行格式是MySQL5.1的默认行格式.其结构示意图如下. 大体可以分为两部分. 记录的额外信息.这里面有包括变长字段长度列表&#xff0c;NULL值列表和记录头信息.记录的真实数据. (1).变长字段长度列表 MySQL支持一些变长的数据类型.比如VARCHAR(m), VA…