vue选项卡Tabs组件实现示例详解

目录

• 概述
• 效果图
• 实现过程
• 组件分析
• 所需的前置知识
• 项目组件文件夹
• Tabs.vue
• TabPane.vue
• render.js
• index.js
• 使用
• 总结

概述

前端项目中，多数页面涉及到选项卡切换，包括路由切换，指令v-if等，本质上其实和选项卡切换思想差不多，如果是个简单的选项卡，还是很简单的，我们也不需要什么组件库的组件，自己也能几行代码写出来，但是涉及到动画，尺寸计算，拖拽的功能的时候，多数情况下，自己写还是要花点时间的，组件库就提供了现成的，拿来改改样式就行，为了对这个组件更加深入的理解，这里自己实现一个带拖拽，过渡的tabs组件。

效果图

实现过程

组件分析

• 组件包含两部分：Tabs组件和TabPane组件，参考绝大多数组件库的习惯
• 组件主要分为需要点击的tab栏和下面对应的内容块
• 我们需要对内容区和选项卡点击区分别加上过渡动画，提升用户体验
• 最后需要加上拖拽调整选项卡顺序的功能

所需的前置知识

• 熟悉vue内置transition组件
• 深入掌握vue父子组件通信，除开emit和props，还需要掌握inject，emit和props，还需要掌握inject，emit和props，还需要掌握inject，parent,vnode，渲染函数等等，这些业务开发中用的不多，但是组件库里面比较常见。
• 了解dom中位置计算和尺寸的基本计算
• 熟悉html5新增拖拽相关事件

项目组件文件夹

Tabs.vue

TabPane.vue

render.js

主要用于将函数通过转化为render函数形式的组件（前提未提供模板）

export default {
  name: "RenderCell",
  props: {
    renderFn: Function,
  },
  render(h) {
    return this.renderFn(h);
  },
};

index.js

按需导出组件

import TabPane from "./TabPane.vue";
export { Tabs, TabPane };

使用

App.vue

总结

通过上述组件的实现，对于HTML5拖拽事件的应用更加熟悉，关于拖拽请参考MDN文档： developer.mozilla.org/zh-CN/docs/…

以上就是vue选项卡Tabs组件实现示例详解的详细内容，更多关于vue选项卡Tabs组件的资料请关注脚本之家其它相关文章！