mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Tab: support string type of line-width & line-height (#3514)
This commit is contained in:
neverland
GitHub
parent
c05124b3ec
commit
7fbf943a2d
@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">自定义索引列表</span></div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">错误提示</span></div>
|
||||
</div>
|
||||
|
||||
@ -159,8 +159,8 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
|
||||
| type | Can be set to `line` `card` | `String` | `line` |
|
||||
| duration | Toggle tab's animation time | `Number` | `0.3` | - |
|
||||
| background | Background color | `String` | `white` |
|
||||
| line-width | Width of tab line (px) | `Number` | Width of active tab |
|
||||
| line-height | Height of tab line (px) | `Number` | 3 |
|
||||
| line-width | Width of tab line | `Number | String` | Width of active tab |
|
||||
| line-height | Height of tab line | `Number | String` | `3px` |
|
||||
| color | Tab color | `String` | `#f44` |
|
||||
| title-active-color | Title active color | `String` | - |
|
||||
| title-inactive-color | Title inactive color | `String` | - |
|
||||
|
||||
@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
|
||||
@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 2</span></div>
|
||||
<div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 3</span></div>
|
||||
@ -76,7 +76,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">标签 2</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
|
||||
@ -121,7 +121,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
|
||||
</div>
|
||||
@ -140,7 +140,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
|
||||
@ -167,7 +167,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active">
|
||||
<div>
|
||||
<div><i class="van-icon van-icon-more-o">
|
||||
@ -198,7 +198,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
|
||||
@ -235,7 +235,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
|
||||
|
||||
@ -62,7 +62,7 @@ exports[`click to switch tab 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
|
||||
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
|
||||
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
|
||||
<div role="tab" class="van-tab">
|
||||
<div><span>title2</span></div>
|
||||
@ -86,7 +86,7 @@ exports[`click to switch tab 2`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
|
||||
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px); transition-duration: 0.3s;"></div>
|
||||
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
|
||||
<div role="tab" class="van-tab"><span class="van-ellipsis">title1</span></div>
|
||||
<div role="tab" class="van-tab van-tab--active" aria-selected="true">
|
||||
<div><span>title2</span></div>
|
||||
@ -133,7 +133,7 @@ exports[`lazy render 2`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
|
||||
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
|
||||
<div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
|
||||
<div role="tab" class="van-tab">
|
||||
<div><span>title2</span></div>
|
||||
|
||||
@ -129,10 +129,10 @@ test('render nav-left & nav-right slot', async () => {
|
||||
});
|
||||
|
||||
test('border props', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-tabs :border="false" />
|
||||
`,
|
||||
const wrapper = mount(Tabs, {
|
||||
propsData: {
|
||||
border: false
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
@ -161,8 +161,8 @@ export default {
|
||||
| type | 样式类型，可选值为`card` | `String` | `line` | - |
|
||||
| duration | 动画时间，单位秒 | `Number` | `0.3` | - |
|
||||
| background | 标签栏背景色 | `String` | `white` | 1.6.5 |
|
||||
| line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 |
|
||||
| line-height | 底部条高度，单位 px | `Number` | 3 | 1.5.0 |
|
||||
| line-width | 底部条宽度，默认单位 px | `Number | String` | `auto` | 1.1.1 |
|
||||
| line-height | 底部条高度，默认单位 px | `Number | String` | `3px` | 1.5.0 |
|
||||
| color | 标签主题色 | `String` | `#f44` | 1.2.0 |
|
||||
| title-active-color | 标题选中态颜色 | `String` | - | 1.6.5 |
|
||||
| title-inactive-color | 标题默认态颜色 | `String` | - | 1.6.5 |
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { use, isDef } from '../utils';
|
||||
import { raf } from '../utils/dom/raf';
|
||||
import { use, isDef, suffixPx } from '../utils';
|
||||
import { scrollLeftTo } from './utils';
|
||||
import { on, off } from '../utils/dom/event';
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
@ -35,6 +35,8 @@ export default sfc({
|
||||
offsetTop: Number,
|
||||
swipeable: Boolean,
|
||||
background: String,
|
||||
lineWidth: [Number, String],
|
||||
lineHeight: [Number, String],
|
||||
titleActiveColor: String,
|
||||
titleInactiveColor: String,
|
||||
border: {
|
||||
@ -49,14 +51,6 @@ export default sfc({
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
lineWidth: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
lineHeight: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
active: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
@ -240,12 +234,12 @@ export default sfc({
|
||||
const tab = tabs[this.curActive];
|
||||
const { lineWidth, lineHeight } = this;
|
||||
const width = isDef(lineWidth) ? lineWidth : tab.offsetWidth / 2;
|
||||
const left = tab.offsetLeft + (tab.offsetWidth - width) / 2;
|
||||
const left = tab.offsetLeft + tab.offsetWidth / 2;
|
||||
|
||||
const lineStyle = {
|
||||
width: `${width}px`,
|
||||
width: suffixPx(width),
|
||||
backgroundColor: this.color,
|
||||
transform: `translateX(${left}px)`
|
||||
transform: `translateX(${left}px) translateX(-50%)`
|
||||
};
|
||||
|
||||
if (shouldAnimate) {
|
||||
@ -253,7 +247,7 @@ export default sfc({
|
||||
}
|
||||
|
||||
if (isDef(lineHeight)) {
|
||||
const height = `${lineHeight}px`;
|
||||
const height = suffixPx(lineHeight);
|
||||
lineStyle.height = height;
|
||||
lineStyle.borderRadius = height;
|
||||
}
|
||||
@ -314,29 +308,10 @@ export default sfc({
|
||||
}
|
||||
|
||||
const { nav } = this.$refs;
|
||||
const { scrollLeft, offsetWidth: navWidth } = nav;
|
||||
const { offsetLeft, offsetWidth: tabWidth } = tabs[this.curActive];
|
||||
const active = tabs[this.curActive];
|
||||
const to = active.offsetLeft - (nav.offsetWidth - active.offsetWidth) / 2;
|
||||
|
||||
this.scrollTo(nav, scrollLeft, offsetLeft - (navWidth - tabWidth) / 2, immediate);
|
||||
},
|
||||
|
||||
// animate the scrollLeft of nav
|
||||
scrollTo(el, from, to, immediate) {
|
||||
if (immediate) {
|
||||
el.scrollLeft += to - from;
|
||||
return;
|
||||
}
|
||||
|
||||
let count = 0;
|
||||
const frames = Math.round((this.duration * 1000) / 16);
|
||||
const animate = () => {
|
||||
el.scrollLeft += (to - from) / frames;
|
||||
/* istanbul ignore next */
|
||||
if (++count < frames) {
|
||||
raf(animate);
|
||||
}
|
||||
};
|
||||
animate();
|
||||
scrollLeftTo(nav, to, immediate ? 0 : this.duration);
|
||||
},
|
||||
|
||||
// render title slot of child tab
|
||||
|
||||
17
packages/tabs/utils.ts
Normal file
17
packages/tabs/utils.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { raf } from '../utils/dom/raf';
|
||||
|
||||
export function scrollLeftTo(el: HTMLElement, to: number, duration: number) {
|
||||
let count = 0;
|
||||
const from = el.scrollLeft;
|
||||
const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16);
|
||||
|
||||
function animate() {
|
||||
el.scrollLeft += (to - from) / frames;
|
||||
|
||||
if (++count < frames) {
|
||||
raf(animate);
|
||||
}
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
@ -93,6 +93,8 @@ test('is-mobile', () => {
|
||||
|
||||
test('is-number', () => {
|
||||
expect(isNumber('1')).toBeTruthy();
|
||||
expect(isNumber('1.2')).toBeTruthy();
|
||||
expect(isNumber('1..2')).toBeFalsy();
|
||||
expect(isNumber('abc')).toBeFalsy();
|
||||
expect(isNumber('1b2')).toBeFalsy();
|
||||
});
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export function isNumber(value: string): boolean {
|
||||
return /^\d+$/.test(value);
|
||||
return /^\d+(\.\d+)?$/.test(value);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user