vue选项卡Tabs组件实现示例详解_vue.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组件的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！