mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
fix:tab
This commit is contained in:
cookfront
parent
e8d1bd41d3
commit
429e6e129a
@ -1,7 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b tab {
|
||||
.zan-tabs-pane {
|
||||
.zan-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
@ -9,6 +9,26 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.active = 3;
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Tab 组件
|
||||
|
||||
### 基础用法
|
||||
@ -24,20 +44,11 @@
|
||||
</zan-tabs>
|
||||
```
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
:::
|
||||
### 禁用用法
|
||||
:::demo 禁用用法
|
||||
```html
|
||||
<zan-tabs>
|
||||
<zan-tabs :active="active">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="zan-tabs-pane" :class="classNames">
|
||||
<div class="zan-tab__pane" :class="classNames">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@ -17,7 +17,7 @@
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return { 'is-select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
|
||||
return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -1,24 +1,25 @@
|
||||
<template>
|
||||
<div class="zan-tabs">
|
||||
<div class="zan-tabs-nav" :class="classNames">
|
||||
<div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
|
||||
<div class="zan-tabs__nav" :class="classNames">
|
||||
<div class="zan-tabs__nav-bar" :style="navBarStyle"></div>
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
class="zan-tab"
|
||||
:class="{'zan-tab-active': index == switchActiveTabKey}"
|
||||
:class="{'zan-tab--active': index == switchActiveTabKey}"
|
||||
ref="tabkey"
|
||||
@click="handleTabClick(index,tab)"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="zan-tabs-content"><slot></slot></div>
|
||||
<div class="zan-tabs__content"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tabs',
|
||||
|
||||
props: {
|
||||
// 外部传入的激活的tab标签
|
||||
active: {
|
||||
@ -36,17 +37,26 @@
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tabs: [],
|
||||
isReady: false,
|
||||
switchActiveTabKey: this.active
|
||||
switchActiveTabKey: +this.active
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
active(val) {
|
||||
this.switchActiveTabKey = +val;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classNames() {
|
||||
return [`zan-tabs-${this.type}`, this.navclass];
|
||||
return [`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`, this.navclass];
|
||||
},
|
||||
|
||||
navBarStyle() {
|
||||
if (!this.isReady) return;
|
||||
const tabKey = this.switchActiveTabKey;
|
||||
@ -59,6 +69,7 @@
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleTabClick(index, el) {
|
||||
if (el.disable) {
|
||||
@ -68,6 +79,7 @@
|
||||
this.switchActiveTabKey = index;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// 页面载入完成
|
||||
this.$nextTick(() => {
|
||||
|
||||
@ -2,86 +2,109 @@
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b tabs {
|
||||
position: relative;
|
||||
@b tabs {
|
||||
position: relative;
|
||||
|
||||
@m col-2 {
|
||||
.zan-tab {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@b tabs-line {
|
||||
|
||||
@m col-3 {
|
||||
.zan-tab {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
@m col-4 {
|
||||
.zan-tab {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@m col-5 {
|
||||
.zan-tab {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@e nav {
|
||||
overflow: hidden;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
|
||||
@m line {
|
||||
height: 44px;
|
||||
background-color: $c-white;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (bottom);
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@b tabs-card {
|
||||
}
|
||||
|
||||
@m card {
|
||||
height: 28px;
|
||||
margin: 0 15px;
|
||||
background-color: $c-white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #666666;
|
||||
overflow: hidden;
|
||||
.zan-tabs-nav-bar {
|
||||
display: none;
|
||||
.zan-tabs__nav-bar {
|
||||
display: none;
|
||||
}
|
||||
.zan-tab {
|
||||
color: #666666;
|
||||
line-height: 28px;
|
||||
border-right: 1px solid #666666;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
&.zan-tab-active {
|
||||
background-color: #666666;
|
||||
color: $c-white;
|
||||
}
|
||||
color: #666666;
|
||||
line-height: 28px;
|
||||
border-right: 1px solid #666666;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
&.zan-tab--active {
|
||||
background-color: #666666;
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@b tabs-nav {
|
||||
display: flex;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
/*float: left*/
|
||||
&::after, &::before {
|
||||
display: table;
|
||||
content: " "
|
||||
}
|
||||
&::after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
@e nav-bar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #f13e3a;
|
||||
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #f13e3a;
|
||||
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
@b tab {
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
float: left;
|
||||
|
||||
@m active {
|
||||
color: #FF4444;
|
||||
}
|
||||
@b tab {
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
@b tab-active {
|
||||
color: #FF4444;
|
||||
}
|
||||
@b tabs-pane {
|
||||
display: none;
|
||||
@when select {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@e pane {
|
||||
display: none;
|
||||
|
||||
@m select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user