vue实现的tabs标签组件

入口文件

<template><div v-cloak><tabs v-model="value"><pane label="标签一" name="1">标签一内容</pane><pane label="标签二" name="2">标签二内容</pane><pane label="标签三" name="3">标签三内容</pane></tabs></div>
</template>
<script>
import Tabs from '../components/tabs/tabs'
import pane from '../components/tabs/tab'
export default {components: {Tabs,pane},data () {return {value: '1'}}
}
</script>

tabs组件

<template>
<div class="tabs"><div class="tabs-bar"><!--标签页标题，通过v-for实现循环--!><div :class="tabCls(item)"v-for="(item,index) in navList"@click = "handleChange(index)" :key="item.name">{{item.label}}</div></div><div class="tabs-content"><!--slot放置pane组件内容--!><slot></slot></div>
</div>
</template><script>
export default {name: 'Tabs',props: {value: [String, Number],required: true},data () {return {currentValue: this.value,navList: []}},methods: {tabCls (item) {return ['tabs-tab',{'tabs-tab-active': item.name === this.currentValue}]},getTabs () {//获取panereturn this.$children.filter(function (item) {return item.$options.name === 'pane'})},updateNav () {//获取标题，name,并放置到navList数组中this.navList = []let _this = thisthis.getTabs().forEach(function (pane, index) {_this.navList.push({label: pane.label,name: pane.name || index})if (!pane.name) pane.name = indexif (index === 0) {if (!_this.currentValue) {_this.currentValue = pane.name || index}}})this.updateStatus()},updateStatus () {let tabs = this.getTabs()let _this = thistabs.forEach(function (tab) {let b = tab.name === _this.currentValuetab.show = breturn tab.show})},handleChange (index) {let nav = this.navList[index]let name = nav.namethis.currentValue = namethis.$emit('input', name)this.$emit('on-click', name)}},watch: {value: function (val) {this.currentValue = val},currentValue () {this.updateStatus()}}
}
</script><style  scoped>
[v-cloak]{display: none;
}
.tabs{font-size: 14px;color: #657180;
}
.tabs-bar:after{content: '';display: block;width: 100%;height: 1px;background: #d7dde4;margin-top:-1px;
}
.tabs-tab{display: inline-block;padding: 4px 16px;margin-right: 6px;background: #fff;border: 1px solid #d7dde4;cursor: pointer;position: relative;
}
.tabs-tab-active{color: #3399ff;border-top: 1px solid #3399ff;border-bottom: 1px solid #3399ff;
}
.tabs-tab-active:before{content: '';display: block;height: 1px;background: #3399ff;position: absolute;top: 0;left: 0;right: 0;
}
.tabs-content{padding: 8px 0;
}
</style>

pane组件

<template><div class="pane" v-show="show"><slot></slot></div>
</template><script>
export default {name: 'pane',props: {name: {type: String},label: {type: String,default: ''}},data () {return {show: true}},methods: {updateNav () {this.$parent.updateNav()}},watch: {label () {this.updateNav()}},mounted () {this.updateNav()},computed: {active () {return false}}
}
</script>
<style  scoped>
</style>

效果如下图：

vue实现的tabs标签组件相关推荐

vue实现nav tabs标签页切换
1.页面组件tagsView.vue.scrollPane.vue <template><div class="tags-view-container">& ...
vue 循环tabs 标签页组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
vue使用el-tabs实现标签页（内存+vuex）
vue使用el-tabs实现标签页(内存+vuex) 效果图: 1: 2: 3:内存中这是一个组件,例如:pageTabs.vue(组件是可以做到独立监听路由变化的,所以不需要外部调用什么内部的方法 ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：组件详解+项目说明...
缘起新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
Vue多个单文件组件使用
在project目录下创建components文件夹,然后将所有子组件放入components文件夹下 [创建此目录][文件名的首字母大写] 1.多组件嵌套使用 Child1.vue <tem ...
.vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景问题由 ...

vue实现的tabs标签组件

vue实现的tabs标签组件相关推荐

最新文章

热门文章