vue之tab栏切换

一个简单的tab栏切换组件，由tabs以及tab-pane组成

效果图

使用

<template><div class="container"><tabsdefault-active="2"class="build-tabs"><tab-panelabel="tab栏标题1"index="1">tab栏内容1</tab-pane><tab-panelabel="tab栏标题tab栏标题2"index="2">tab栏内容2</tab-pane><tab-panelabel="tab栏标题"index="3">tab栏内容3</tab-pane><tab-panelabel="标题"index="4">tab栏内容4</tab-pane><tab-panelabel="tab栏标题3"index="5">tab栏内容5</tab-pane></tabs></div>
</template>

tabs

<template><divv-show="pans.length"class="tabs"><div class="tab-title"><divv-for="(item) in pans":key="item.id"class="item":class="{ 'active': currentActive === item.index }"@click="changeTab(item.index)">{{ item.label }}</div></div><div class="tab-content"><slot></slot></div></div>
</template><script>
export default {props: {mode: {type: String,default: "horizontal/vertical"},defaultActive: {type: String | Number,default: '1'},defaultColor: {type: String,default: '#409EFF'}},data: () => {return {currentActive: '',pans: []}},computed: {},watch: {defaultActive: {handler (newVal) {this.currentActive = newVal},immediate: true}},mounted () {},methods: {changeTab (val) {this.currentActive = val},}
}
</script>
<style scoped lang="scss">
::root {--color: "#409EFF";
}
.tabs {.tab-title {display: flex;// align-items: flex-start;align-items: stretch;   // 侧边栏时，使侧栏高度与内容高度一致，按最高的显示margin-bottom: 14px;border-bottom: 1px solid #ccc;.item {padding: 20px;/* padding-bottom: 20px; */cursor: pointer;white-space: nowrap;}.active {// color: var(--color);color: #409EFF;/* padding-bottom: 15px; // 修正边框值：20px - 5px = 15px */border-bottom: 5px solid #409EFF;background-image: linear-gradient(to top,rgba($color: #409EFF, $alpha: 0.2),transparent);}}
}
</style>

tab-pane

<template><divv-show="show && renderPan"class="tab-pane"><slot></slot></div>
</template>
<script>
export default {name: 'tabPane',props: {index: {type: [String, Number],default: ''},label: {type: String,required: true}},data: () => {return {renderPan: false}},computed: {show () {if (this.$parent.currentActive === this.index) return truereturn false}},mounted () {this.$parent.pans.push({ id: Date.parse(new Date()) + Math.random(), index: this.index, label: this.label });this.renderPan = true},methods: {},
}
</script>
<style scoped lang="scss">
</style>

vue之tab栏切换相关推荐

vue之tab栏切换总结
一.显示隐藏切换(v-show) 二.组件之间的切换. 三.路由切换.(对地址栏和数据请求) 一.v-show控制内容切换用点击事件改变cur的值来控制tab样式和内容显示隐藏. 数据渲染原理:利用 ...
vant/vue——tab栏切换上下箭头功能实现
有的tab栏需要点击两次从而达到排序的功能下面是实现双重tab栏切换功能 css样式 .active {color: red; } .black{color: black; } 标签部分 <u ...
apiCloud + aui实现tab栏切换功能
本人apiCloud新手一枚,在学习的过程中,发现aui是一个非常好用的ui框架,我在作apiCloud项目时,最常用的就是aui框架.同时,发现sui也挺好,这两种框架可以同时在项目中混用,但是不能 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
tab栏切换动画的相关方法上动画的相关方法下隐藏动画案例隐藏动画练习
tab栏切换 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
WebAPI(part7)--Tab栏切换案例
学习笔记,仅供参考,有错必究 Web API Tab栏切换案例代码 <!DOCTYPE html> <html lang="en"><head> ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...

vue之tab栏切换

vue之tab栏切换相关推荐

最新文章

热门文章