AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue3实现面板分割

2024-10-21 9
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3实现面板分割

Vue3实现面板分割

下面是将你提供的 Vue 组件使用 SCSS，并以 Vue 3 的组合式 API 形式的面板分割代码。

1、建立组件相关的文件夹

2、将下面代码拷贝到index.vue中

<template>
  <div class="g-split" ref="gSplit">
    <!-- 水平方向 -->
    <div class="horizontal" v-if="showHorizontal">
      <div class="left-panel position" :style="horizontalLeftPanel">
        <slot name="left"></slot>
      </div>
      <div
        class="horizontal-trigger-panel position"
        :style="horizontaltriggerPanel"
        ref="horizontalTriggerPanel"
      >
        <slot name="trigger" v-if="$slots.trigger"></slot>
        <div class="trigger-content-default-wrap" v-else>
          <div class="trigger-content">
            <i class="trigger-bar" v-for="n in 7" :key="n"></i>
          </div>
        </div>
      </div>
      <div class="right-panel position" :style="horizontalRightPanel">
        <slot name="right"></slot>
      </div>
    </div>
    <!-- 垂直方向 -->
    <div class="vertical" v-if="showVertical">
      <div class="top-panel position" :style="verticalTopPanel">
        <slot name="top"></slot>
      </div>
      <div
        class="vertical-trigger-panel position"
        :style="verticaltriggerPanel"
        ref="verticalTriggerPanel"
      >
        <slot name="trigger" v-if="$slots.trigger"></slot>
        <div class="trigger-content-default-wrap" v-else>
          <div class="trigger-content">
            <i class="trigger-bar" v-for="n in 7" :key="n"></i>
          </div>
        </div>
      </div>
      <div class="bottom-panel position" :style="verticalBottomPanel">
        <slot name="bottom"></slot>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
// 注意：页面偏移量单位统一使用百分比计算
const props = defineProps({
  value: {
    type: [String, Number],
    default: 0.5,
  },
  mode: {
    type: String,
    validator(value) {
      return ["horizontal", "vertical"].includes(value);
    },
    default: "horizontal",
  },
  min: {
    type: [String, Number],
    default: 0.1,
  },
  max: {
    type: [String, Number],
    default: 0.9,
  },
});
import { defineEmits } from 'vue';
const emit = defineEmits(['onMoveStart', 'onMoving', 'onMoveEnd']);
const gSplit = ref(null);
const horizontalTriggerPanel = ref(null);
const verticalTriggerPanel = ref(null);
const left = ref(props.value);
const top = ref(props.value);
const gSplitWidth = ref(0);
const gSplitHeight = ref(0);
const horizontalTriggerPanelWidth = ref(0);
const verticalTriggerPanelHeight = ref(0);
const showHorizontal = computed(() => props.mode === "horizontal");
const showVertical = computed(() => props.mode === "vertical");
const horizontalLeftPanel = computed(() => ({
  left: 0,
  right: (1 - left.value) * 100 + "%",
}));
const horizontalRightPanel = computed(() => ({
  left: (left.value + horizontalTriggerPanelWidth.value / gSplitWidth.value) * 100 + "%",
}));
const horizontaltriggerPanel = computed(() => ({
  left: left.value * 100 + "%",
}));
const verticalTopPanel = computed(() => ({
  top: 0,
  bottom: (1 - top.value) * 100 + "%",
}));
const verticalBottomPanel = computed(() => ({
  top: (top.value + verticalTriggerPanelHeight.value / gSplitHeight.value) * 100 + "%",
}));
const verticaltriggerPanel = computed(() => ({
  top: top.value * 100 + "%",
}));
const initDom = () => {
  gSplitWidth.value = gSplit.value.clientWidth;
  gSplitHeight.value = gSplit.value.clientHeight;
  if (props.mode === "horizontal") {
    horizontalTriggerPanelWidth.value = horizontalTriggerPanel.value.clientWidth;
  } else {
    verticalTriggerPanelHeight.value = verticalTriggerPanel.value.clientHeight;
  }
};
const bindEvent = () => {
  if (props.mode === "horizontal") {
    bindHorizontalTriggerPanelEvent();
  } else {
    bindVerticalTriggerPanelEvent();
  }
};
const preventSelectedOnMouseMove = (e) => e.preventDefault();
const bindHorizontalTriggerPanelEvent = () => {
  resolveMouseFn("horizontal", horizontalTriggerPanel.value);
};
const bindVerticalTriggerPanelEvent = () => {
  resolveMouseFn("vertical", verticalTriggerPanel.value);
};
const resolveMouseFn = (type, element) => {
  const mousedown = (e) => {
    document.addEventListener("selectstart", preventSelectedOnMouseMove);
    emit("onMoveStart", e);
    const pos = type === "horizontal" ? "left" : "top";
    const distance = type === "horizontal" ? e.clientX - element.offsetLeft : e.clientY - element.offsetTop;
    const mousemove = (e) => {
      emit("onMoving", e);
      const gSplitSize = type === "horizontal" ? gSplitWidth.value : gSplitHeight.value;
      const newPos = (type === "horizontal" ? e.clientX - distance : e.clientY - distance) / gSplitSize;
      if (newPos < props.min) newPos = props.min;
      if (newPos > 1 - props.min) newPos = 1 - props.min;
      if (pos === "left") left.value = newPos;
      else top.value = newPos;
    };
    const mouseup = () => {
      emit("onMoveEnd", e);
      document.removeEventListener("mousemove", mousemove);
      document.removeEventListener("mouseup", mouseup);
      document.removeEventListener("selectstart", preventSelectedOnMouseMove);
    };
    document.addEventListener("mousemove", mousemove);
    document.addEventListener("mouseup", mouseup);
  };
  element.addEventListener("mousedown", mousedown);
};
onMounted(() => {
  bindEvent();
  initDom();
});
</script>
<style lang="scss">
.g-split {
  height: 100%;
  overflow: hidden;
  .position {
    position: absolute;
  }
  .horizontal {
    position: relative;
    height: 100%;
    .left-panel, .right-panel {
      height: 100%;
    }
    .horizontal-trigger-panel {
      cursor: col-resize;
      height: 100%;
      .trigger-content-default-wrap {
        background-color: #f8f8f9;
        height: 100%;
        position: relative;
        width: 7px;
        .trigger-content {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          .trigger-bar {
            width: 7px;
            height: 1px;
            display: block;
            background: rgba(23, 35, 61, 0.25);
            margin-top: 3px;
          }
        }
      }
    }
  }
  .vertical {
    position: relative;
    height: 100%;
    .top-panel, .bottom-panel {
      width: 100%;
    }
    .vertical-trigger-panel {
      width: 100%;
      .trigger-content-default-wrap {
        width: 100%;
        position: relative;
        height: 7px;
        cursor: row-resize;
        background-color: #f8f8f9;
        .trigger-content {
          position: absolute;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          height: 100%;
          .trigger-bar {
            width: 1px;
            height: 100%;
            display: inline-block;
            background: rgba(23, 35, 61, 0.25);
            margin-left: 3px;
            vertical-align: top;
          }
        }
      }
    }
  }
}
</style>

使用

注册组件

在你的 Vue 项目中，你需要在你的组件或应用程序中注册 GSplitPanel 组件。你可以通过局部注册或全局注册来实现。

局部注册

在你的父组件中导入并注册 GSplitPanel 组件：

<template>
  <div>
    <GSplitPanel mode="horizontal" :value="0.5">
      <template v-slot:left>
        <div>左侧面板内容</div>
      </template>
      <template v-slot:right>
        <div>右侧面板内容</div>
      </template>
    </GSplitPanel>
  </div>
</template>
<script setup>
import GSplitPanel from '@/components/Split/index.vue';
</script>
全局注册

如果你希望在整个项目中使用 GSplitPanel 组件，可以在你的主入口文件（如 main.js 或 main.ts）中全局注册：

import { createApp } from 'vue';
import App from './App.vue';
import GSplitPanel from '@/components/Split/index.vue';
const app = createApp(App);
app.component('GSplitPanel', GSplitPanel);
app.mount('#app');

使用组件

在你的项目中，你现在可以使用 标签来使用这个组件。你可以通过 mode 属性来控制是水平分割还是垂直分割，并通过插槽来填充面板的内容。

vue
<GSplitPanel mode="horizontal" :value="0.5">
  <template v-slot:left>
    <div>左侧面板内容</div>
  </template>
  <template v-slot:right>
    <div>右侧面板内容</div>
  </template>
</GSplitPanel>
文章标签：
JavaScript
API
关键词：
面板VUE.js
分割VUE.js
vue3面板VUE.js
LKIDTI数据
目录
相关文章
那年春天
|
4天前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
那年春天
126 57
diygwcom
|
5天前
|
Web App开发 JavaScript 数据可视化
vue3扩展echart封装为组件库-快速复用
vue3扩展echart封装为组件库-快速复用
diygwcom
21 7
chnjames
|
21小时前
|
移动开发 JavaScript 前端开发
💻揭秘！如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心，通过随机生成的颜色矩阵和一个变化点，玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能，包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外，作者展示了使用Vue 3和TypeScript开发的代码实现，带领读者一步步深入了解游戏的逻辑与细节。
chnjames
95 66
那年春天
|
4天前
Vue3 使用mapState
【10月更文挑战第8天】
那年春天
6 1
前端徐徐
|
4天前
|
缓存 JavaScript 前端开发
对比一下Vue2和Vue3？
本文首发于微信公众号“前端徐徐”，详细对比了 Vue 2 和 Vue 3 在原理、生命周期、性能、编码方式、API、Diff 算法、打包构建、TS 支持等八个方面的差异，帮助读者全面了解两者的不同之处。
前端徐徐
32 0
对比一下Vue2和Vue3？
万少！
|
4天前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
万少！
19 1
chnjames
|
22小时前
|
JavaScript
在 Vue 3 中使用 DHTMLX 甘特图组件
本文将介绍如何在 Vue 3 项目中集成 DHTMLX 甘特图组件，详细讲解安装、模块导入以及基本用法。通过示例代码，您将学会如何配置甘特图的任务、样式和交互功能，帮助您在项目中更有效地管理和展示任务时间线。
chnjames
7 0
chnjames
|
22小时前
|
资源调度 JavaScript 前端开发
在 Vue 3 中实现流畅的 Swiper 滑动效果
本文介绍了如何在 Vue 3 项目中集成 Swiper，涵盖了从安装、基本用法到丰富的配置选项。通过简单的示例，读者将学习如何创建响应式的图片轮播，利用 Swiper 的循环、自动播放和自定义分页功能，提升用户体验。无论是简单的幻灯片还是复杂的滑块效果，Swiper 都能轻松实现，帮助开发者快速构建出美观的滑动组件。
chnjames
6 0
html的七十二变
|
1天前
|
监控 JavaScript 开发者
在 Vue 中，子组件为何不可以修改父组件传递的 Prop，如果修改了，Vue 是如何监控到属性的修改并给出警告的
在 Vue 中，子组件不能直接修改父组件传递的 Prop，以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop，Vue 会通过响应式系统检测到这一变化，并在控制台发出警告，提示开发者避免这种操作。
html的七十二变
17 3
mao29955
|
23小时前
|
JavaScript 开发者
Vue Render函数
【10月更文挑战第11天】 Vue 的 Render 函数提供了一种强大而灵活的方法来创建虚拟 DOM 节点，使开发者能够更精细地控制组件的构建过程。通过 `createElement` 参数，可以动态生成各种元素和组件，实现复杂逻辑和高级定制。尽管使用 Render 函数需要更多代码和对虚拟 DOM 的深入理解，但它在处理复杂场景时展现出巨大的优势。
mao29955
5 2