概述
前端项目中,多数页面涉及到选项卡切换,包括路由切换,指令v-if等,本质上其实和选项卡切换思想差不多,如果是个简单的选项卡,还是很简单的,我们也不需要什么组件库的组件,自己也能几行代码写出来,但是涉及到动画,尺寸计算,拖拽的功能的时候,多数情况下,自己写还是要花点时间的,组件库就提供了现成的,拿来改改样式就行,为了对这个组件更加深入的理解,这里自己实现一个带拖拽,过渡的tabs组件。
效果图
实现过程
组件分析
- 组件包含两部分:Tabs组件和TabPane组件,参考绝大多数组件库的习惯
- 组件主要分为需要点击的tab栏和下面对应的内容块
- 我们需要对内容区和选项卡点击区分别加上过渡动画,提升用户体验
- 最后需要加上拖拽调整选项卡顺序的功能
所需的前置知识
- 熟悉vue内置transition组件
- 深入掌握vue父子组件通信,除开emit和props,还需要掌握inject,emit和props,还需要掌握inject,emit和props,还需要掌握inject,parent,vnode,渲染函数等等,这些业务开发中用的不多,但是组件库里面比较常见。
- 了解dom中位置计算和尺寸的基本计算
- 熟悉html5新增拖拽相关事件
项目组件文件夹
Tabs.vue
<template> <div class="gnip-tab"> <div class="gnip-tab-nav"> <div v-for="(item, index) in tabNavList" @click.stop="handleTabNavClick(item, index)" :class="['tab-nav-item', item.name == activeName ? 'active' : '']" ref="tabNavItemRefs" @drop="handleDrop(item, $event, index)" @dragstart="handelDragstart(item, $event, index)" @dragover="handleDragOver(item, $event, index)" draggable="true" > <span v-if="item.text">{{ item.text }}</span> <render v-if="item.renderFun" :renderFn="item.renderFun"></render> </div> </div> <!-- 滚动滑块 --> <div class="tab-nav-track" :style="{ background: showTrackBg ? '#e5e7eb' : '', }" > <span class="track-line" :style="{ width: trackLineWidht + 'px', left: left + 'px' }" ></span> </div> <div class="tab-content-wrap"> <slot></slot> </div> </div> </template> <script> // render组件,label为render函数的时候进行渲染 import Render from "./render"; export default { props: { // v-model的那项 value: { type: String, }, // 是否显示滑块背景 showTrackBg: { type: Boolean, default: false, }, }, components: { Render, }, data() { return { // tab数组 tabNavList: [], // 当前活跃项 activeName: "", // 滑块的宽度 trackLineWidht: 0, // 当前活跃索引 currentIndex: 0, // 滑块偏移量 left: 0, // 拖拽开始的哪项 dragOriginItemIndex: null, // 拖拽活跃项的索引 dragStartIndex: null, }; }, mounted() { this.init(); }, methods: { // 初始化 init() { // 默认当前活跃项为外部v-model的值 this.activeName = this.value; // 页面渲染任务之后计算滑块偏移量和宽度 this.$nextTick(() => { this.currentIndex = this.$children.findIndex( (component) => component.name == this.value ); this.computedTrackWidth(); }); }, // 设置tab点击栏 setTabBar(tabsPaneInstance) { // tab的描述信息可以是字符串也可以是render函数 const label = tabsPaneInstance.label, type = typeof label; // 添加到数组项中,根据添加条件渲染 this.tabNavList.push({ text: type == "function" ? "" : label, renderFun: type == "function" ? label : "", name: tabsPaneInstance.name, }); }, handleTabNavClick(item, index) { if (item.name == this.activeName) return; // 更新当前活跃项 this.activeName = item.name; // 活跃项的索引 this.currentIndex = index; // 计算滑块的偏移量和宽度 this.computedTrackWidth(); }, // 计算滑块的偏移量和宽度 computedTrackWidth() { // 插槽子组件的索引集合 const tabNavItemRefsList = this.$refs.tabNavItemRefs; // 导航tab项的宽度 const scrollWidth = tabNavItemRefsList[this.currentIndex].scrollWidth; // 滑块的宽度为scrollWidth this.trackLineWidht = scrollWidth; // 定位的偏移量为offsetLeft this.left = tabNavItemRefsList[this.currentIndex].offsetLeft; }, /* 关于拖拽请参考MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent,实现拖拽需要清楚关于拖拽相关的几个事件 */ // 开始拖拽 handelDragstart(item, event, index) { // 说明是拖拽的当前活跃的哪一项,记录这一项的索引位置 if (item.name == this.activeName) { this.dragStartIndex = index; } this.dragOriginItemIndex = index; }, // 推拽进入目标区域 handleDragOver(item, event) { // 阻止默认事件 event.preventDefault(); }, //拖拽进入有效item handleDrop(item, event, index) { event.preventDefault(); // 说明拖动的位置是变了的 if (this.dragOriginItemIndex != index) { // 交换数据,重新渲染生成tab栏 this.swap(this.dragOriginItemIndex, index); // 重新计算滑块的偏移量 if (this.dragStartIndex !== null) { this.currentIndex = index; // 记住,数据更新为异步操作,因此我们这里需要用到nextTick,将计算任务放到渲染任务完成之后执行,避免计算不准确 this.$nextTick(() => { this.computedTrackWidth(); this.dragStartIndex = null; }); } else { // 不是点击拖拽当前活跃项,也要重新计算滑块跨度和位置,因为每个tab项的宽度不一致,因此,每次拖拽都需要重新计算 this.$nextTick(() => { this.computedTrackWidth(); }); } // 这里还可以根据需要,发布一个拖拽完成事件 } }, // 交换tab数据项 swap(start, end) { let startItem = this.tabNavList[start]; let endItem = this.tabNavList[end]; // 由于直接通过索引修改数组,无法触发响应式,因此需要$set this.$set(this.tabNavList, start, endItem); this.$set(this.tabNavList, end, startItem); }, }, }; </script> <style lang="less"> .gnip-tab { .gnip-tab-nav { display: flex; position: relative; .tab-nav-item { padding: 0 20px; cursor: pointer; line-height: 2; } } .tab-nav-item.active { color: #2d8cf0; } .tab-nav-track { width: 100%; position: relative; height: 2px; .track-line { height: 2px; background-color: #2d8cf0; position: absolute; transition: left 0.35s; } } } </style>
TabPane.vue
<template> <div class="gnip-tabs-pane"> <transition :name="paneTransitionName"> <div class="tab-pane-content" v-show="$parent.activeName == name"> <slot name="default"></slot> </div> </transition> </div> </template> <script> export default { props: { // tab项的文本或者render函数 label: { type: [String, Function], }, // 每项标识 name: { type: String, }, // 是否禁用当前项 disabled: { type: Boolean, default: false, }, }, data() { return { paneTransitionName: "enter-right", }; }, created() { // 统一tab的数据给父组件进行处理和渲染 this.$parent.setTabBar(this); }, }; </script> <style lang="less"> .gnip-tabs-pane { overflow-x: hidden; .enter-right-enter-active { transition: transform 0.35s; } .enter-right-enter { transform: translateX(100%); } .enter-right-to { transform: translateX(0); } } </style>
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
<template> <div class="app"> <div class="aline"> <Tabs v-model="tabName" show-track-bg> <TabPane label="首页" name="name1">首页</TabPane> <TabPane label="图书详情页" name="name2" disabled>图书详情页</TabPane> <TabPane label="个人主页" name="name3">个人主页</TabPane> <TabPane :label="labelRender" name="name4">购物车</TabPane> </Tabs> </div> </div> </div> </template> <script> import { Tabs, TabPane } from "@/components/Tabs"; export default { components: { Tabs, TabPane }, data() { return { tabName: "name1", labelRender(h) { return h("div", "购物车"); }, }; }, }; </script> <style lang="less"> * { margin: 0; padding: 0; } .app { padding: 20px; button { padding: 10px; background-color: #008c8c; color: #fff; margin: 20px 0; } .container { .operate { text-align: center; } .aline { width: 50%; } h2 { font-weight: bold; font-size: 20px; } .aline { &:nth-child(1) { margin-right: 20px; } } display: flex; justify-content: space-between; } } .aline { display: flex; justify-content: center; } .item { margin: 40px; img { width: 250px; height: 200px; } ul { margin: 0 auto; li { border: 1px solid red; height: 200px; width: 250px; } } } </style>
总结
通过上述组件的实现,对于HTML5拖拽事件的应用更加熟悉,关于拖拽请参考MDN文档: developer.mozilla.org/zh-CN/docs/…
以上就是vue选项卡Tabs组件实现示例详解的详细内容,更多关于vue选项卡Tabs组件的资料请关注阿兔在线工具其它相关文章!