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

【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 示例虽然是英文的,但是用法本身也没有很复杂,容易看懂

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CentOS 7.9检测硬盘坏区、实物定位(三)

系列文章目录 CentOS 7.9上创建JBOD&#xff08;一&#xff09; CentOS 7.9上创建的JBOD阵列恢复&#xff08;二&#xff09; 文章目录 系列文章目录前言一、在系统中找到硬盘对应的盘符二、使用命令定位实物1.badblocks检测坏块2.对2T以上的硬盘检测&#xff08;对本篇非必要…

百度文心智能体,创建属于自己的智能体应用

百度文心智能体平台为你开启。百度文心智能体平台&#xff0c;创建属于自己的智能体应用。百度文心智能体平台是百度旗下的智能AI平台&#xff0c;集成了先进的自然语言处理技术和人工智能技术&#xff0c;可以用来创建属于自己的智能体应用&#xff0c;访问官网链接&#xff1…

数据仓库 基础教程

数据仓库 基础教程 1. 数据仓库概述 数据仓库(Data Warehouse,简称DW或者DWH)是通过集成来自多个异构数据源的数据来构建的。它支持分析报告、结构化和/或特别查询和决策制定。本教程采用循序渐进的方法来解释数据仓库的所有必要概念。 “数据仓库”一词最早是由Bill Inmon在1…

fataadmin导出Exel文件图片太大

// 导出图片过大处理 exportOptions: {ignoreColumn: [0, operate],onBeforeSaveToFile: function (data, fileName, type, charset, encoding, bom) {return $.fn.bootstrapTable.defaults.extend.savestatus;},onCellHtmlHyperlink: function ($cell, rowIndex, colIndex, hr…

C#开发-集合使用和技巧(一)常用集合和方法介绍

C#开发-集合使用和技巧 &#xff08;一&#xff09;常用集合和方法介绍常用集合和方法介绍 C#开发-集合使用和技巧1. 集合基础集合介绍集合跟数组对比 2.我们常用的集合类型列表List<T>键值对集合Dictionary<TKey,TValue>队列Queue<T>其他一些集合类型堆栈St…

修改vscode的主题颜色

1、首选项--主题--颜色主题 2、选择一个喜欢的颜色主题 这样就可以了。

工作实践:11种API性能优化方法

一、索引优化 接口性能优化时&#xff0c;大家第一个想到的通常是&#xff1a;优化索引。 确实&#xff0c;优化索引的成本是最小的。 你可以通过查看线上日志或监控报告&#xff0c;发现某个接口使用的某条SQL语句耗时较长。 此时&#xff0c;你可能会有以下疑问&#xff…

Mistral AI最新力作——Mistral Large媲美GPT-4

Mistral AI自豪地宣布&#xff0c;他们的最新力作——Mistral Large&#xff0c;已经正式面世。这款尖端的文本生成模型不仅在多语言理解上表现出色&#xff0c;更在推理能力上达到了顶级水平。Mistral Large能够处理包括文本理解、转换和代码生成在内的复杂多语言推理任务。 M…

go-admin-ui开源后台管理系统华为云部署

1.华为云开通8000与9527端口 2.编译 编译成功 3.发布到远程服务器 4.登陆华为云终端 5.安装Nginx 6.查看服务启动状态 7.添加网站 添加与修改配置www-data 改为 www 自定义日志输出格式 添加网站配置文件go_admin_ui.conf 添加如下内容: location 下的root指向网站文件夹 修…

former系列在时间序列预测任务上的研究综述

总&#xff1a;基于Transformer的LSTF解决方案 现有基于Transformer的LSTM解决方案设计要素总结如下&#xff1a; 从图中可以看出&#xff0c;Transformer在时序中应用具体包含以下几个步骤&#xff1a; 1&#xff09;时序分解&#xff1a;对于数据处理&#xff0c;TSF中0均…

zookeeper + kafka消息队列

zookeeper kafka 消息队列 一、消息队列简介 1、什么是消息队列 消息队列&#xff08;Message Queue&#xff09;是一种用于跨进程或分布式系统中传递消息的通信机制。消息队列在异步通信、系统解耦、负载均衡和容错方面具有重要作用。 &#xff08;1&#xff09;特性 异步…

“打造智能售货机系统,基于ruoyi微服务版本生成基础代码“

目录 # 开篇 1. 菜单 2. 字典配置 3. 表配置 3.1 导入表 3.2 区域管理 3.3 合作商管理 3.4 点位管理 4. 代码导入 4.1 后端代码生成 4.2 前端代码生成 5. 数据库代码执行 6. 点位管理菜单顺序修改 7. 页面展示 8. 附加设备表 8.1 新增设备管理菜单 8.2 创建字…

GBDT算法详解

GBDT算法详解 梯度提升决策树&#xff08;Gradient Boosting Decision Trees&#xff0c;GBDT&#xff09;是机器学习中一种强大的集成算法。它通过构建一系列的决策树&#xff0c;并逐步优化模型的预测能力&#xff0c;在各种回归和分类任务中取得了显著的效果。本文将详细介…

【mysql 安装启动失败】 没有网下 libssl.so.10 not found 如何解决?

问题描述&#xff1a; libssl.so.10 > not found libcrypto.so.10 > not found [rootmysql tools]# ls -l /usr/sbin/mysqld -rwxr-xr-x. 1 root root 64290024 Sep 14 2022 /usr/sbin/mysqld [rootmysql tools]# ldd /usr/sbin/mysqldlinux-vdso.so.1 (0x00007fff97105…

Blazor 组件:创建、生命周期、嵌套和 UI 集成

在本文中&#xff0c;您将获得以下问题的答案。 什么是 Blazor 组件&#xff1f;如何使用组件&#xff1f;Blazor 组件的生命周期是什么&#xff1f;我们可以从一个组件调用另一个组件吗&#xff1f;如何创建 Blazor 组件&#xff1f;在组件中哪里写 C# 代码&#xff1f; 什么…

碳化硅陶瓷膜的生产工艺和应用

一、生产工艺 碳化硅陶瓷膜的生产工艺多样&#xff0c;其中浸渍提拉法和喷涂法为两大主流技术。 浸渍提拉法 浸渍提拉法是一种广泛应用的制备方法。其过程主要包括&#xff1a;先将陶瓷颗粒或者聚合物前体分散在水或有机溶剂中&#xff0c;形成均质稳定的制膜液。随后&#xff…

深入探索C++中的AVL树

引言 在数据结构和算法的世界里&#xff0c;平衡二叉搜索树&#xff08;Balanced Binary Search Tree, BST&#xff09;是一种非常重要的数据结构。AVL树&#xff08;Adelson-Velsky和Landis发明的树&#xff09;就是平衡二叉搜索树的一种&#xff0c;它通过自平衡来维护其性质…

ELK+Filebeat+kafka+zookeeper构建海量日志分析平台

ELK是什么&#xff08;What&#xff09;&#xff1f; ELK组件介绍 ELK 是ElasticSearch开源生态中提供的一套完整日志收集、分析以及展示的解决方案&#xff0c;是三个产品的首字母缩写&#xff0c;分别是ElasticSearch、Logstash 和 Kibana。除此之外&#xff0c;FileBeat也是…

海外版coze前端代码助手

定位 解决前端同事的开发问题 参数配置 测试 支持 最屌的大模型及语音播报。 体验地址 海外版前端代码助手 需要魔法才能体验油

索尼MXF文件断电变2G恢复方法(PXW-Z280V)

PXM-Z280V算是索尼比较经典的机型&#xff0c;也是使用MXF文件格式的机型之一。近期接到很多例索尼MXF量突然不正常的案例&#xff08;如变成512字节或者2G&#xff09;&#xff0c;下面来看下这个案例。 故障存储: 128G存储卡 /文件系统&#xff1a;exFAT 故障现象: 客户反…