mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
6f4c8f1e5b
@ -10,6 +10,37 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
|
||||
- Minor version：released every one to two months, including backwards compatible features.
|
||||
- Major version：including breaking changes and new features.
|
||||
|
||||
### [v2.10.2](https://github.com/youzan/vant/compare/v2.10.1...v2.10.2)
|
||||
|
||||
`2020-08-12`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Tab: add @tab-line-height less var [#6985](https://github.com/youzan/vant/issues/6985)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Sku: compatible sku.list don't exist [#6991](https://github.com/youzan/vant/issues/6991)
|
||||
|
||||
### [v2.10.1](https://github.com/youzan/vant/compare/v2.10.0...v2.10.1)
|
||||
|
||||
`2020-08-10`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Button: add loading slot [#6966](https://github.com/youzan/vant/issues/6966)
|
||||
- Locale: adding Norwegian Language support [#6962](https://github.com/youzan/vant/issues/6962)
|
||||
|
||||
**style**
|
||||
|
||||
- ContactList: add safe area inset bottom [#6970](https://github.com/youzan/vant/issues/6970)
|
||||
- TabbarItem: increase icon size to 22px [#6972](https://github.com/youzan/vant/issues/6972)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- AddressEdit: incorrect label wrap on safari [#6969](https://github.com/youzan/vant/issues/6969)
|
||||
- Icon: fix badge number align [#6975](https://github.com/youzan/vant/issues/6975) [#6952](https://github.com/youzan/vant/issues/6952)
|
||||
|
||||
### [v2.10.0](https://github.com/youzan/vant/compare/v2.9.4...v2.10.0)
|
||||
|
||||
`2020-08-07`
|
||||
|
||||
@ -10,6 +10,38 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
|
||||
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
|
||||
|
||||
### [v2.10.2](https://github.com/youzan/vant/compare/v2.10.1...v2.10.2)
|
||||
|
||||
`2020-08-12`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Tab: 新增 @tab-line-height less 变量 [#6985](https://github.com/youzan/vant/issues/6985)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Sku: 适配 sku.list 为空导致报错的问题 [#6991](https://github.com/youzan/vant/issues/6991)
|
||||
|
||||
### [v2.10.1](https://github.com/youzan/vant/compare/v2.10.0...v2.10.1)
|
||||
|
||||
`2020-08-10`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Button: 新增 loading 插槽 [#6966](https://github.com/youzan/vant/issues/6966)
|
||||
- Locale: 新增挪威语语言包 [#6962](https://github.com/youzan/vant/issues/6962)
|
||||
|
||||
**style**
|
||||
|
||||
- ContactList: 适配 iOS 底部安全区 [#6970](https://github.com/youzan/vant/issues/6970)
|
||||
- TabbarItem: 图标大小扩大为 22px [#6972](https://github.com/youzan/vant/issues/6972)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- AddressEdit: 修复在 safari 上左侧文字换行的问题 [#6969](https://github.com/youzan/vant/issues/6969)
|
||||
- ContactEdit: 修复在 safari 上左侧文字换行的问题 [#6969](https://github.com/youzan/vant/issues/6969)
|
||||
- Icon: 修复徽标数字不居中的问题 [#6975](https://github.com/youzan/vant/issues/6975) [#6952](https://github.com/youzan/vant/issues/6952)
|
||||
|
||||
### [v2.10.0](https://github.com/youzan/vant/compare/v2.9.4...v2.10.0)
|
||||
|
||||
`2020-08-07`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "2.10.0",
|
||||
"version": "2.10.2",
|
||||
"description": "Mobile UI Components built on Vue",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
border-radius: @padding-xs;
|
||||
|
||||
.van-field__label {
|
||||
width: 4em;
|
||||
width: 4.1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
&__add {
|
||||
height: 40px;
|
||||
margin: 5px 0;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
&__disabled-text {
|
||||
|
||||
@ -4035,7 +4035,13 @@ export default {
|
||||
810307: '荃湾区',
|
||||
810308: '葵青区',
|
||||
810309: '离岛区',
|
||||
820101: '澳门半岛',
|
||||
820201: '离岛',
|
||||
820102: '花地玛堂区',
|
||||
820103: '花王堂区',
|
||||
820104: '望德堂区',
|
||||
820105: '大堂区',
|
||||
820106: '风顺堂区',
|
||||
820202: '嘉模堂区',
|
||||
820203: '路氹填海区',
|
||||
820204: '圣方济各堂区',
|
||||
},
|
||||
};
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
.van-contact-list {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding-bottom: 50px;
|
||||
padding-bottom: 80px;
|
||||
|
||||
&__item {
|
||||
padding: @contact-list-item-padding;
|
||||
@ -41,12 +41,14 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: @contact-list-add-button-z-index;
|
||||
padding: 5px 16px;
|
||||
padding: 0 @padding-md;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
&__add {
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,6 +30,23 @@ Dialog.alert({
|
||||
});
|
||||
```
|
||||
|
||||
### Confirm dialog
|
||||
|
||||
Used to confirm some messages, including a confirm button and a cancel button.
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
title: 'Title',
|
||||
message: 'Content',
|
||||
})
|
||||
.then(() => {
|
||||
// on confirm
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
```
|
||||
|
||||
### Round Button Style
|
||||
|
||||
Use round button style.
|
||||
@ -51,23 +68,6 @@ Dialog.alert({
|
||||
});
|
||||
```
|
||||
|
||||
### Confirm dialog
|
||||
|
||||
Used to confirm some messages, including a confirm button and a cancel button.
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
title: 'Title',
|
||||
message: 'Content',
|
||||
})
|
||||
.then(() => {
|
||||
// on confirm
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
```
|
||||
|
||||
### Asnyc Close
|
||||
|
||||
```js
|
||||
|
||||
@ -56,6 +56,23 @@ Dialog.alert({
|
||||
});
|
||||
```
|
||||
|
||||
### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message: '弹窗内容',
|
||||
})
|
||||
.then(() => {
|
||||
// on confirm
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
```
|
||||
|
||||
### 圆角按钮风格
|
||||
|
||||
将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗，该选项从 2.10.0 版本开始支持。
|
||||
@ -77,23 +94,6 @@ Dialog.alert({
|
||||
});
|
||||
```
|
||||
|
||||
### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message: '弹窗内容',
|
||||
})
|
||||
.then(() => {
|
||||
// on confirm
|
||||
})
|
||||
.catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
```
|
||||
|
||||
### 异步关闭
|
||||
|
||||
通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。
|
||||
|
||||
@ -1,39 +1,22 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('alert1')">
|
||||
<van-button type="primary" @click="onClickAlert">
|
||||
{{ t('alert1') }}
|
||||
</van-button>
|
||||
<van-button type="primary" @click="onClickAlert2">
|
||||
{{ t('alert2') }}
|
||||
</van-button>
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('alert1')" @click="onClickAlert" />
|
||||
<van-cell is-link :title="t('alert2')" @click="onClickAlert2" />
|
||||
<van-cell is-link :title="t('confirm')" @click="onClickConfirm" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('roundButton')">
|
||||
<van-button type="primary" @click="onClickRound">
|
||||
{{ t('alert1') }}
|
||||
</van-button>
|
||||
<van-button type="primary" @click="onClickRound2">
|
||||
{{ t('alert2') }}
|
||||
</van-button>
|
||||
<demo-block card :title="t('roundButton')">
|
||||
<van-cell is-link :title="t('alert1')" @click="onClickRound" />
|
||||
<van-cell is-link :title="t('alert2')" @click="onClickRound2" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('confirm')">
|
||||
<van-button type="primary" @click="onClickConfirm">
|
||||
{{ t('confirm') }}
|
||||
</van-button>
|
||||
<demo-block card :title="t('asyncClose')">
|
||||
<van-cell is-link :title="t('asyncClose')" @click="onClickAsyncClose" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('asyncClose')">
|
||||
<van-button type="primary" @click="onClickAsyncClose">
|
||||
{{ t('asyncClose') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('componentCall')">
|
||||
<van-button type="primary" @click="show = true">
|
||||
{{ t('componentCall') }}
|
||||
</van-button>
|
||||
<demo-block card :title="t('componentCall')">
|
||||
<van-cell is-link :title="t('componentCall')" @click="show = true" />
|
||||
<van-dialog
|
||||
v-model:show="show"
|
||||
:title="t('title')"
|
||||
@ -135,12 +118,6 @@ export default {
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-dialog {
|
||||
background-color: @white;
|
||||
|
||||
.van-doc-demo-block > .van-button {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
img {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
@ -2,39 +2,41 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗
|
||||
</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗（无标题）
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗
|
||||
</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗（无标题）
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
确认弹窗
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
异步关闭
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
组件调用
|
||||
</span></div>
|
||||
</button>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>提示弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>提示弹窗（无标题）</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>确认弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>提示弹窗</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>提示弹窗（无标题）</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>异步关闭</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>组件调用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
|
||||
<div class="van-dialog__header">标题</div>
|
||||
<div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
|
||||
|
||||
@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">通用错误</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">网络错误</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">搜索提示</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
|
||||
@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义索引列表</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
color: @info-color;
|
||||
font-weight: @info-font-weight;
|
||||
font-size: @info-font-size;
|
||||
font-family: @info-font-family;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
background-color: @info-background-color;
|
||||
|
||||
@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">错误提示</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">下拉刷新</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
|
||||
@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">成功提示</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义提示</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
|
||||
@ -200,7 +200,7 @@ export default createComponent({
|
||||
let skuComb = null;
|
||||
if (this.isSkuCombSelected) {
|
||||
if (this.hasSku) {
|
||||
skuComb = getSkuComb(this.sku.list, this.selectedSku);
|
||||
skuComb = getSkuComb(this.skuList, this.selectedSku);
|
||||
} else {
|
||||
skuComb = {
|
||||
id: this.sku.collection_id,
|
||||
@ -257,6 +257,10 @@ export default createComponent({
|
||||
return this.sku.tree || [];
|
||||
},
|
||||
|
||||
skuList() {
|
||||
return this.sku.list || [];
|
||||
},
|
||||
|
||||
propList() {
|
||||
return this.properties || [];
|
||||
},
|
||||
@ -384,7 +388,7 @@ export default createComponent({
|
||||
item.v.length === 1 ? item.v[0].id : this.initialSku[key];
|
||||
if (
|
||||
valueId &&
|
||||
isSkuChoosable(this.sku.list, this.selectedSku, { key, valueId })
|
||||
isSkuChoosable(this.skuList, this.selectedSku, { key, valueId })
|
||||
) {
|
||||
this.selectedSku[key] = valueId;
|
||||
}
|
||||
@ -639,6 +643,7 @@ export default createComponent({
|
||||
|
||||
const {
|
||||
sku,
|
||||
skuList,
|
||||
goods,
|
||||
price,
|
||||
lazyLoad,
|
||||
@ -709,7 +714,7 @@ export default createComponent({
|
||||
<SkuRow skuRow={skuTreeItem} ref="skuRows" refInFor>
|
||||
{skuTreeItem.v.map((skuValue) => (
|
||||
<SkuRowItem
|
||||
skuList={sku.list}
|
||||
skuList={skuList}
|
||||
lazyLoad={lazyLoad}
|
||||
skuValue={skuValue}
|
||||
skuKeyStr={skuTreeItem.k_s}
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
@address-edit-detail-finish-font-size: @font-size-sm;
|
||||
|
||||
// AddressList
|
||||
@address-list-padding: 12px 12px 100px;
|
||||
@address-list-padding: @padding-sm @padding-sm 80px;
|
||||
@address-list-disabled-text-color: @gray-6;
|
||||
@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md;
|
||||
@address-list-disabled-text-font-size: @font-size-md;
|
||||
@ -255,7 +255,7 @@
|
||||
@contact-edit-buttons-padding: @padding-xl 0;
|
||||
@contact-edit-button-margin-bottom: @padding-sm;
|
||||
@contact-edit-button-font-size: 16px;
|
||||
@contact-edit-field-label-width: 4em;
|
||||
@contact-edit-field-label-width: 4.1em;
|
||||
|
||||
// ContactList
|
||||
@contact-list-edit-icon-size: 16px;
|
||||
@ -419,6 +419,7 @@
|
||||
@info-background-color: @red;
|
||||
@info-dot-color: @red;
|
||||
@info-dot-size: 8px;
|
||||
@info-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
|
||||
|
||||
// Image
|
||||
@image-placeholder-text-color: @gray-6;
|
||||
@ -754,20 +755,22 @@
|
||||
@tabbar-item-text-color: @gray-7;
|
||||
@tabbar-item-active-color: @blue;
|
||||
@tabbar-item-line-height: 1;
|
||||
@tabbar-item-icon-size: 18px;
|
||||
@tabbar-item-margin-bottom: 5px;
|
||||
@tabbar-item-icon-size: 22px;
|
||||
@tabbar-item-margin-bottom: 4px;
|
||||
|
||||
// Tab
|
||||
@tab-text-color: @gray-7;
|
||||
@tab-active-text-color: @text-color;
|
||||
@tab-disabled-text-color: @gray-5;
|
||||
@tab-font-size: @font-size-md;
|
||||
@tab-line-height: @line-height-md;
|
||||
|
||||
// Tabs
|
||||
@tabs-default-color: @red;
|
||||
@tabs-line-height: 44px;
|
||||
@tabs-card-height: 30px;
|
||||
@tabs-nav-background-color: @white;
|
||||
@tabs-bottom-bar-width: 40px;
|
||||
@tabs-bottom-bar-height: 3px;
|
||||
@tabs-bottom-bar-color: @tabs-default-color;
|
||||
|
||||
|
||||
@ -224,7 +224,7 @@ export default {
|
||||
| color | Tab color | _string_ | `#ee0a24` |
|
||||
| background | Background color | _string_ | `white` |
|
||||
| duration | Toggle tab's animation time | _number \| string_ | `0.3` | - |
|
||||
| line-width | Width of tab line | _number \| string_ | Width of active tab |
|
||||
| line-width | Width of tab line | _number \| string_ | `40px` |
|
||||
| line-height | Height of tab line | _number \| string_ | `3px` |
|
||||
| animated | Whether to change tabs with animation | _boolean_ | `false` |
|
||||
| border | Whether to show border when `type="line"` | _boolean_ | `false` |
|
||||
|
||||
@ -231,8 +231,8 @@ export default {
|
||||
| color | 标签主题色 | _string_ | `#ee0a24` |
|
||||
| background | 标签栏背景色 | _string_ | `white` |
|
||||
| duration | 动画时间，单位秒 | _number \| string_ | `0.3` |
|
||||
| line-width | 底部条宽度，默认单位`px` | _number \| string_ | `auto` |
|
||||
| line-height | 底部条高度，默认单位`px` | _number \| string_ | `3px` |
|
||||
| line-width | 底部条宽度，默认单位 `px` | _number \| string_ | `40px` |
|
||||
| line-height | 底部条高度，默认单位 `px` | _number \| string_ | `3px` |
|
||||
| animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` |
|
||||
| border | 是否显示标签栏外边框，仅在 `type="line"` 时有效 | _boolean_ | `false` |
|
||||
| ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` |
|
||||
|
||||
@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -36,7 +36,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -62,7 +62,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -100,7 +100,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -144,7 +144,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -167,7 +167,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -194,7 +194,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签 </span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签 </span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -215,7 +215,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content van-tabs__content--animated">
|
||||
@ -252,7 +252,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -285,7 +285,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -326,7 +326,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
|
||||
@ -65,7 +65,7 @@ exports[`click to switch tab 1`] = `
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
|
||||
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -87,7 +87,7 @@ exports[`click to switch tab 2`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
|
||||
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
|
||||
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -187,7 +187,7 @@ exports[`name prop 1`] = `
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
|
||||
<div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
@ -238,7 +238,7 @@ exports[`scrollspy prop 1`] = `
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -260,7 +260,7 @@ exports[`scrollspy prop 2`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
|
||||
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@ exports[`insert tab dynamically 1`] = `
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">3</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div class="van-tabs__line" style="transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: @tabbar-item-icon-size;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,6 +32,6 @@
|
||||
}
|
||||
|
||||
.van-info {
|
||||
margin-top: 2px;
|
||||
margin-top: @padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
@ -204,11 +204,10 @@ export default createComponent({
|
||||
|
||||
const title = titleRefs[this.currentIndex].$el;
|
||||
const { lineWidth, lineHeight } = this;
|
||||
const width = isDef(lineWidth) ? lineWidth : title.offsetWidth / 2;
|
||||
const left = title.offsetLeft + title.offsetWidth / 2;
|
||||
|
||||
const lineStyle = {
|
||||
width: addUnit(width),
|
||||
width: addUnit(lineWidth),
|
||||
backgroundColor: this.color,
|
||||
transform: `translateX(${left}px) translateX(-50%)`,
|
||||
};
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
padding: 0 @padding-base;
|
||||
color: @tab-text-color;
|
||||
font-size: @tab-font-size;
|
||||
line-height: @tab-line-height;
|
||||
cursor: pointer;
|
||||
|
||||
&--active {
|
||||
@ -118,6 +119,7 @@
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: @tabs-bottom-bar-width;
|
||||
height: @tabs-bottom-bar-height;
|
||||
background-color: @tabs-bottom-bar-color;
|
||||
border-radius: @tabs-bottom-bar-height;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user