mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'feature/code_review'
This commit is contained in:
cookfront
commit
f31f5d84d8
@ -1,4 +1,3 @@
|
||||
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b tab {
|
||||
@ -6,6 +5,22 @@
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-tabs--card .zan-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -36,7 +51,43 @@ export default {
|
||||
|
||||
## Tab 标签
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tab, Tabs } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/tab.css';
|
||||
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
|
||||
|
||||
```js
|
||||
import { Tab, Tabs } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-tab': Tab,
|
||||
'zan-tabs': Tabs
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况下是启用第一个`tab`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -50,17 +101,36 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用用法
|
||||
#### active特定tab
|
||||
|
||||
:::demo 禁用用法
|
||||
可以在`zan-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-tabs :active="active">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用tab
|
||||
|
||||
在对应的`zan-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
|
||||
|
||||
:::demo 禁用tab
|
||||
```html
|
||||
<zan-tabs>
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
@ -73,9 +143,11 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### card样式用法
|
||||
#### card样式
|
||||
|
||||
:::demo card样式用法
|
||||
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`zan-tabs`上设置`type`为`card`改为card样式。
|
||||
|
||||
:::demo card样式
|
||||
```html
|
||||
<zan-tabs type="card">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
@ -87,18 +159,12 @@ export default {
|
||||
```
|
||||
:::
|
||||
<style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
@ -106,30 +172,27 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
### 自定义样式用法
|
||||
#### 自定义样式
|
||||
|
||||
:::demo 自定义样式用法
|
||||
可以在`zan-tabs`上设置对应的`class`，从而自定义某些样式。
|
||||
|
||||
:::demo 自定义样式
|
||||
```html
|
||||
<zan-tabs active="2" navclass="custom-tabwrap">
|
||||
<zan-tabs active="2" class="custom-tabwrap">
|
||||
<zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
|
||||
<zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
|
||||
<zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
|
||||
<zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
|
||||
<zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
|
||||
<style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
@ -139,7 +202,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### click事件
|
||||
#### click事件
|
||||
|
||||
可以在`zan-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
|
||||
|
||||
@ -179,5 +242,12 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `string` | | |
|
||||
| disable | 是否禁用这个tab | `boolean` | `false` | |
|
||||
| disabled | 是否禁用这个tab | `boolean` | `false` | |
|
||||
|
||||
### zan-tabs Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 某个tab点击事件 | index：点击的`tab`的索引 |
|
||||
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
|
||||
|
||||
|
||||
@ -13,15 +13,15 @@
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
disable: Boolean
|
||||
disabled: Boolean
|
||||
},
|
||||
beforeCreate() {
|
||||
this.$parent.tabs.push(this);
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
|
||||
return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.curActive };
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$parent.tabs.push(this);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
<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" :class="[`zan-tabs--${type}`]">
|
||||
<div
|
||||
class="zan-tabs__nav"
|
||||
:class="[`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`]"
|
||||
>
|
||||
<div class="zan-tabs__nav-bar" :style="navBarStyle" v-if="type === 'line'"></div>
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
class="zan-tab"
|
||||
:class="{'zan-tab--active': index == switchActiveTabKey}"
|
||||
:class="{'zan-tab--active': index === curActive}"
|
||||
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>
|
||||
|
||||
@ -30,11 +35,6 @@
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
},
|
||||
// nav的wrap的样式
|
||||
navclass: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
@ -42,27 +42,28 @@
|
||||
return {
|
||||
tabs: [],
|
||||
isReady: false,
|
||||
switchActiveTabKey: +this.active
|
||||
curActive: +this.active
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
active(val) {
|
||||
this.switchActiveTabKey = +val;
|
||||
this.curActive = +val;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classNames() {
|
||||
return [`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`, this.navclass];
|
||||
},
|
||||
|
||||
/**
|
||||
* `type`为`line`时，tab下方的横线的样式
|
||||
*/
|
||||
navBarStyle() {
|
||||
if (!this.isReady) return;
|
||||
const tabKey = this.switchActiveTabKey;
|
||||
if (!this.isReady || type !== 'line') return;
|
||||
|
||||
const tabKey = this.curActive;
|
||||
const elem = this.$refs.tabkey[tabKey];
|
||||
const offsetWidth = `${elem.offsetWidth || 0}px`;
|
||||
const offsetLeft = `${elem.offsetLeft || 0}px`;
|
||||
|
||||
return {
|
||||
width: offsetWidth,
|
||||
transform: `translate3d(${offsetLeft}, 0px, 0px)`
|
||||
@ -71,13 +72,20 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* tab点击事件
|
||||
*
|
||||
* @param {number} index tab在tabs中的索引
|
||||
* @param {Object} el tab的vue实例
|
||||
*/
|
||||
handleTabClick(index, el) {
|
||||
if (el.disable) {
|
||||
el.$emit('disable');
|
||||
if (el.disabled) {
|
||||
el.$emit('disabled', index);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('click', index);
|
||||
this.switchActiveTabKey = index;
|
||||
this.curActive = index;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ command_exists () {
|
||||
|
||||
fontname() {
|
||||
if command_exists superman ; then
|
||||
echo "//b.yzcdn.cn$server_prefix/$(basename $basepath/../build/font/zanui-icon-*.$1)"
|
||||
echo "https://b.yzcdn.cn$server_prefix/$(basename $basepath/../build/font/zanui-icon-*.$1)"
|
||||
else
|
||||
echo "$(abspath $basepath/../build/font/zanui-icon-*.$1)"
|
||||
fi
|
||||
|
||||
@ -53,9 +53,7 @@
|
||||
border-radius: 2px;
|
||||
border: 1px solid #666666;
|
||||
overflow: hidden;
|
||||
.zan-tabs__nav-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zan-tab {
|
||||
color: #666666;
|
||||
line-height: 28px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user