mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
build: compile 1.0.0-beta.4
This commit is contained in:
rex-zsd
parent
54a363472f
commit
2cae6b0a1c
4
dist/area/index.js
vendored
4
dist/area/index.js
vendored
@ -82,12 +82,10 @@ VantComponent({
|
||||
onChange(event) {
|
||||
const { index, picker, value } = event.detail;
|
||||
this.code = value[index].code;
|
||||
let getValues = picker.getValues();
|
||||
getValues = this.parseOutputValues(getValues);
|
||||
this.setValues().then(() => {
|
||||
this.$emit('change', {
|
||||
picker,
|
||||
values: getValues,
|
||||
values: this.parseOutputValues(picker.getValues()),
|
||||
index
|
||||
});
|
||||
});
|
||||
|
||||
2
dist/dropdown-menu/index.js
vendored
2
dist/dropdown-menu/index.js
vendored
@ -19,7 +19,7 @@ VantComponent({
|
||||
childIndex: this.children.length
|
||||
});
|
||||
this.children.push(target);
|
||||
// 收集 dropdown-item 的 data 挂在 data 上
|
||||
// 收集 dorpdown-item 的 data 挂在 data 上
|
||||
target &&
|
||||
this.setData({
|
||||
itemListData: this.data.itemListData.concat([target.data])
|
||||
|
||||
2
dist/goods-action-button/index.wxss
vendored
2
dist/goods-action-button/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-goods-action-button{border:none!important;height:40px!important;height:var(--goods-action-button-height,40px)!important;font-weight:500!important;font-weight:var(--font-weight-bold,500)!important;line-height:40px!important;line-height:var(--goods-action-button-height,40px)!important}.van-goods-action-button--first{display:block!important;margin-left:5px;border-top-left-radius:40px/2!important;border-top-left-radius:var(--goods-action-button-height,40px)/2!important;border-bottom-left-radius:40px/2!important;border-bottom-left-radius:var(--goods-action-button-height,40px)/2!important}.van-goods-action-button--last{display:block!important;margin-right:5px;border-top-right-radius:40px/2!important;border-top-right-radius:var(--goods-action-button-height,40px)/2!important;border-bottom-right-radius:40px/2!important;border-bottom-right-radius:var(--goods-action-button-height,40px)/2!important}.van-goods-action-button--warning{background:linear-gradient(90deg,#ffd01e,#ff8917);background:var(--goods-action-button-warning-color,linear-gradient(90deg,#ffd01e,#ff8917))}.van-goods-action-button--danger{background:linear-gradient(90deg,#ff6034,#ee0a24);background:var(--goods-action-button-danger-color,linear-gradient(90deg,#ff6034,#ee0a24))}@media (max-width:321px){.van-goods-action-button{font-size:13px}}
|
||||
@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-goods-action-button{border:none!important;height:40px!important;height:var(--goods-action-button-height,40px)!important;font-weight:500!important;font-weight:var(--font-weight-bold,500)!important;line-height:40px!important;line-height:var(--goods-action-button-height,40px)!important}.van-goods-action-button--first{display:block!important;margin-left:5px;border-top-left-radius:20px!important;border-top-left-radius:var(--goods-action-button-border-radius,20px)!important;border-bottom-left-radius:20px!important;border-bottom-left-radius:var(--goods-action-button-border-radius,20px)!important}.van-goods-action-button--last{display:block!important;margin-right:5px;border-top-right-radius:20px!important;border-top-right-radius:var(--goods-action-button-border-radius,20px)!important;border-bottom-right-radius:20px!important;border-bottom-right-radius:var(--goods-action-button-border-radius,20px)!important}.van-goods-action-button--warning{background:linear-gradient(90deg,#ffd01e,#ff8917);background:var(--goods-action-button-warning-color,linear-gradient(90deg,#ffd01e,#ff8917))}.van-goods-action-button--danger{background:linear-gradient(90deg,#ff6034,#ee0a24);background:var(--goods-action-button-danger-color,linear-gradient(90deg,#ff6034,#ee0a24))}@media (max-width:321px){.van-goods-action-button{font-size:13px}}
|
||||
2
dist/icon/index.wxss
vendored
2
dist/icon/index.wxss
vendored
File diff suppressed because one or more lines are too long
1
dist/index-anchor/index.d.ts
vendored
Normal file
1
dist/index-anchor/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
||||
22
dist/index-anchor/index.js
vendored
Normal file
22
dist/index-anchor/index.js
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
VantComponent({
|
||||
relation: {
|
||||
name: 'index-bar',
|
||||
type: 'ancestor',
|
||||
linked(target) {
|
||||
this.parent = target;
|
||||
},
|
||||
unlinked() {
|
||||
this.parent = null;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
useSlot: Boolean,
|
||||
index: null
|
||||
},
|
||||
data: {
|
||||
active: false,
|
||||
wrapperStyle: '',
|
||||
anchorStyle: ''
|
||||
}
|
||||
});
|
||||
3
dist/index-anchor/index.json
vendored
Normal file
3
dist/index-anchor/index.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
14
dist/index-anchor/index.wxml
vendored
Normal file
14
dist/index-anchor/index.wxml
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
<view
|
||||
class="van-index-anchor-wrapper"
|
||||
style="{{ wrapperStyle }}"
|
||||
>
|
||||
<view
|
||||
class="van-index-anchor {{ active ? 'van-index-anchor--active van-hairline--bottom' : '' }}"
|
||||
style="{{ anchorStyle }}"
|
||||
>
|
||||
<slot wx:if="{{ useSlot }}"/>
|
||||
<block wx:else>
|
||||
<text>{{ index }}</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
1
dist/index-anchor/index.wxss
vendored
Normal file
1
dist/index-anchor/index.wxss
vendored
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-index-anchor{padding:0 16px;padding:var(--index-anchor-padding,0 16px);color:#323233;color:var(--index-anchor-text-color,#323233);font-weight:500;font-weight:var(--index-anchor-font-weight,500);font-size:14px;font-size:var(--index-anchor-font-size,14px);line-height:32px;line-height:var(--index-anchor-line-height,32px);background-color:initial;background-color:var(--index-anchor-background-color,transparent)}.van-index-anchor--active{right:0;left:0;color:#07c160;color:var(--index-anchor-active-text-color,#07c160);background-color:#fff;background-color:var(--index-anchor-active-background-color,#fff)}
|
||||
1
dist/index-bar/index.d.ts
vendored
Normal file
1
dist/index-bar/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
||||
240
dist/index-bar/index.js
vendored
Normal file
240
dist/index-bar/index.js
vendored
Normal file
@ -0,0 +1,240 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { GREEN } from '../common/color';
|
||||
const indexList = () => {
|
||||
const indexList = [];
|
||||
const charCodeOfA = 'A'.charCodeAt(0);
|
||||
for (let i = 0; i < 26; i++) {
|
||||
indexList.push(String.fromCharCode(charCodeOfA + i));
|
||||
}
|
||||
return indexList;
|
||||
};
|
||||
VantComponent({
|
||||
relation: {
|
||||
name: 'index-anchor',
|
||||
type: 'descendant',
|
||||
linked() {
|
||||
this.updateData();
|
||||
},
|
||||
linkChanged() {
|
||||
this.updateData();
|
||||
},
|
||||
unlinked() {
|
||||
this.updateData();
|
||||
}
|
||||
},
|
||||
props: {
|
||||
sticky: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 1
|
||||
},
|
||||
highlightColor: {
|
||||
type: String,
|
||||
value: GREEN
|
||||
},
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
observer: 'onScroll'
|
||||
},
|
||||
stickyOffsetTop: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
indexList: {
|
||||
type: Array,
|
||||
value: indexList()
|
||||
}
|
||||
},
|
||||
data: {
|
||||
activeAnchorIndex: null,
|
||||
showSidebar: false
|
||||
},
|
||||
methods: {
|
||||
updateData() {
|
||||
this.timer && clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.children = this.getRelationNodes('../index-anchor/index');
|
||||
this.setData({
|
||||
showSidebar: !!this.children.length
|
||||
});
|
||||
this.setRect().then(() => {
|
||||
this.onScroll();
|
||||
});
|
||||
}, 0);
|
||||
},
|
||||
setRect() {
|
||||
return Promise.all([
|
||||
this.setAnchorsRect(),
|
||||
this.setListRect(),
|
||||
this.setSiderbarRect()
|
||||
]);
|
||||
},
|
||||
setAnchorsRect() {
|
||||
return Promise.all(this.children.map(anchor => (anchor.getRect('.van-index-anchor-wrapper').then((rect) => {
|
||||
Object.assign(anchor, {
|
||||
height: rect.height,
|
||||
top: rect.top + this.data.scrollTop
|
||||
});
|
||||
}))));
|
||||
},
|
||||
setListRect() {
|
||||
return this.getRect('.van-index-bar').then((rect) => {
|
||||
Object.assign(this, {
|
||||
height: rect.height,
|
||||
top: rect.top + this.data.scrollTop
|
||||
});
|
||||
});
|
||||
},
|
||||
setSiderbarRect() {
|
||||
return this.getRect('.van-index-bar__sidebar').then(res => {
|
||||
this.sidebar = {
|
||||
height: res.height,
|
||||
top: res.top
|
||||
};
|
||||
});
|
||||
},
|
||||
setDiffData({ target, data }) {
|
||||
const diffData = {};
|
||||
Object.keys(data).forEach(key => {
|
||||
if (target.data[key] !== data[key]) {
|
||||
diffData[key] = data[key];
|
||||
}
|
||||
});
|
||||
if (Object.keys(diffData).length) {
|
||||
target.setData(diffData);
|
||||
}
|
||||
},
|
||||
getAnchorRect(anchor) {
|
||||
return anchor.getRect('.van-index-anchor-wrapper').then((rect) => ({
|
||||
height: rect.height,
|
||||
top: rect.top
|
||||
}));
|
||||
},
|
||||
getActiveAnchorIndex() {
|
||||
const { children } = this;
|
||||
const { sticky, scrollTop, stickyOffsetTop } = this.data;
|
||||
for (let i = this.children.length - 1; i >= 0; i--) {
|
||||
const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
|
||||
const reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0;
|
||||
if (reachTop + scrollTop >= children[i].top) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
},
|
||||
onScroll() {
|
||||
const { children = [] } = this;
|
||||
if (!children.length) {
|
||||
return;
|
||||
}
|
||||
const { sticky, stickyOffsetTop, zIndex, highlightColor, scrollTop } = this.data;
|
||||
const active = this.getActiveAnchorIndex();
|
||||
this.setDiffData({
|
||||
target: this,
|
||||
data: {
|
||||
activeAnchorIndex: active
|
||||
}
|
||||
});
|
||||
if (sticky) {
|
||||
let isActiveAnchorSticky = false;
|
||||
if (active !== -1) {
|
||||
isActiveAnchorSticky = children[active].top <= stickyOffsetTop + scrollTop;
|
||||
}
|
||||
children.forEach((item, index) => {
|
||||
if (index === active) {
|
||||
let wrapperStyle = '';
|
||||
let anchorStyle = `
|
||||
color: ${highlightColor};
|
||||
`;
|
||||
if (isActiveAnchorSticky) {
|
||||
wrapperStyle = `
|
||||
height: ${children[index].height}px;
|
||||
`;
|
||||
anchorStyle = `
|
||||
position: fixed;
|
||||
top: ${stickyOffsetTop}px;
|
||||
z-index: ${zIndex};
|
||||
color: ${highlightColor};
|
||||
`;
|
||||
}
|
||||
this.setDiffData({
|
||||
target: item,
|
||||
data: {
|
||||
active: true,
|
||||
anchorStyle,
|
||||
wrapperStyle
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (index === active - 1) {
|
||||
const currentAnchor = children[index];
|
||||
const currentOffsetTop = currentAnchor.top;
|
||||
const targetOffsetTop = index === children.length - 1
|
||||
? this.top
|
||||
: children[index + 1].top;
|
||||
const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
|
||||
const translateY = parentOffsetHeight - currentAnchor.height;
|
||||
const anchorStyle = `
|
||||
position: relative;
|
||||
transform: translate3d(0, ${translateY}px, 0);
|
||||
z-index: ${zIndex};
|
||||
color: ${highlightColor};
|
||||
`;
|
||||
this.setDiffData({
|
||||
target: item,
|
||||
data: {
|
||||
active: true,
|
||||
anchorStyle
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.setDiffData({
|
||||
target: item,
|
||||
data: {
|
||||
active: false,
|
||||
anchorStyle: '',
|
||||
wrapperStyle: '',
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onClick(event) {
|
||||
this.scrollToAnchor(event.target.dataset.index);
|
||||
},
|
||||
onTouchMove(event) {
|
||||
const sidebarLength = this.children.length;
|
||||
const touch = event.touches[0];
|
||||
const itemHeight = this.sidebar.height / sidebarLength;
|
||||
let index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight);
|
||||
if (index < 0) {
|
||||
index = 0;
|
||||
}
|
||||
else if (index > sidebarLength - 1) {
|
||||
index = sidebarLength - 1;
|
||||
}
|
||||
this.scrollToAnchor(index);
|
||||
},
|
||||
onTouchStop() {
|
||||
this.scrollToAnchorIndex = null;
|
||||
},
|
||||
scrollToAnchor(index) {
|
||||
if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
|
||||
return;
|
||||
}
|
||||
this.scrollToAnchorIndex = index;
|
||||
const anchor = this.children.filter(item => item.data.index === this.data.indexList[index])[0];
|
||||
this.$emit('select', anchor.data.index);
|
||||
anchor && wx.pageScrollTo({
|
||||
duration: 0,
|
||||
scrollTop: anchor.top
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
3
dist/index-bar/index.json
vendored
Normal file
3
dist/index-bar/index.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
22
dist/index-bar/index.wxml
vendored
Normal file
22
dist/index-bar/index.wxml
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
<view class="van-index-bar">
|
||||
<slot />
|
||||
|
||||
<view
|
||||
wx:if="{{ showSidebar }}"
|
||||
class="van-index-bar__sidebar"
|
||||
catch:tap="onClick"
|
||||
catch:touchmove="onTouchMove"
|
||||
catch:touchend="onTouchStop"
|
||||
catch:touchcancel="onTouchStop"
|
||||
>
|
||||
<view
|
||||
wx:for="{{ indexList }}"
|
||||
wx:key="index"
|
||||
class="van-index-bar__index"
|
||||
style="z-index: {{ zIndex + 1 }}; color: {{ activeAnchorIndex === index ? highlightColor : '' }}"
|
||||
data-index="{{ index }}"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
1
dist/index-bar/index.wxss
vendored
Normal file
1
dist/index-bar/index.wxss
vendored
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-index-bar{position:relative}.van-index-bar__sidebar{position:fixed;top:50%;right:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;user-select:none}.van-index-bar__index{font-weight:500;padding:0 4px 0 16px;padding:0 var(--padding-base,4px) 0 var(--padding-md,16px);font-size:10px;font-size:var(--index-bar-index-font-size,10px);line-height:14px;line-height:var(--index-bar-index-line-height,14px)}
|
||||
2
dist/nav-bar/index.wxss
vendored
2
dist/nav-bar/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 -16px;padding:0 -var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}
|
||||
@import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 16px;padding:0 var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}
|
||||
13
dist/rate/index.js
vendored
13
dist/rate/index.js
vendored
@ -8,10 +8,7 @@ VantComponent({
|
||||
readonly: Boolean,
|
||||
disabled: Boolean,
|
||||
allowHalf: Boolean,
|
||||
size: {
|
||||
type: null,
|
||||
observer: 'setSizeWithUnit'
|
||||
},
|
||||
size: null,
|
||||
icon: {
|
||||
type: String,
|
||||
value: 'star'
|
||||
@ -47,8 +44,7 @@ VantComponent({
|
||||
},
|
||||
data: {
|
||||
innerValue: 0,
|
||||
gutterWithUnit: undefined,
|
||||
sizeWithUnit: '20px'
|
||||
gutterWithUnit: undefined
|
||||
},
|
||||
watch: {
|
||||
value(value) {
|
||||
@ -58,11 +54,6 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSizeWithUnit(val) {
|
||||
this.setData({
|
||||
sizeWithUnit: addUnit(val)
|
||||
});
|
||||
},
|
||||
setGutterWithUnit(val) {
|
||||
this.setData({
|
||||
gutterWithUnit: addUnit(val)
|
||||
|
||||
2
dist/rate/index.wxml
vendored
2
dist/rate/index.wxml
vendored
@ -8,7 +8,7 @@
|
||||
class="van-rate__item"
|
||||
wx:for="{{ count }}"
|
||||
wx:key="index"
|
||||
style="font-size: {{ sizeWithUnit }};padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}"
|
||||
style="padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}"
|
||||
>
|
||||
<van-icon
|
||||
name="{{ index + 1 <= innerValue ? icon : voidIcon }}"
|
||||
|
||||
1
dist/skeleton/index.wxml
vendored
1
dist/skeleton/index.wxml
vendored
@ -17,6 +17,7 @@
|
||||
/>
|
||||
<view
|
||||
wx:for="row"
|
||||
wx:key="index"
|
||||
wx:for-index="index"
|
||||
class="{{ utils.bem('skeleton__row') }}"
|
||||
style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}"
|
||||
|
||||
111
dist/sticky/index.js
vendored
111
dist/sticky/index.js
vendored
@ -1,4 +1,5 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
const ROOT_ELEMENT = '.van-sticky';
|
||||
VantComponent({
|
||||
props: {
|
||||
zIndex: {
|
||||
@ -7,9 +8,27 @@ VantComponent({
|
||||
},
|
||||
offsetTop: {
|
||||
type: Number,
|
||||
value: 0
|
||||
value: 0,
|
||||
observer: 'observeContent'
|
||||
},
|
||||
disabled: Boolean
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
observer(value) {
|
||||
if (!this.mounted) {
|
||||
return;
|
||||
}
|
||||
value ? this.disconnectObserver() : this.initObserver();
|
||||
}
|
||||
},
|
||||
container: {
|
||||
type: null,
|
||||
observer(target) {
|
||||
if (typeof target !== 'function' || !this.data.height) {
|
||||
return;
|
||||
}
|
||||
this.observeContainer();
|
||||
}
|
||||
}
|
||||
},
|
||||
data: {
|
||||
wrapStyle: '',
|
||||
@ -31,35 +50,91 @@ VantComponent({
|
||||
});
|
||||
}
|
||||
},
|
||||
observerContentScroll() {
|
||||
getContainerRect() {
|
||||
const nodesRef = this.data.container();
|
||||
return new Promise(resolve => nodesRef.boundingClientRect(resolve).exec());
|
||||
},
|
||||
initObserver() {
|
||||
this.disconnectObserver();
|
||||
this.getRect(ROOT_ELEMENT).then((rect) => {
|
||||
this.setData({ height: rect.height });
|
||||
wx.nextTick(() => {
|
||||
this.observeContent();
|
||||
this.observeContainer();
|
||||
});
|
||||
});
|
||||
},
|
||||
disconnectObserver(observerName) {
|
||||
if (observerName) {
|
||||
const observer = this[observerName];
|
||||
observer && observer.disconnect();
|
||||
}
|
||||
else {
|
||||
this.contentObserver && this.contentObserver.disconnect();
|
||||
this.containerObserver && this.containerObserver.disconnect();
|
||||
}
|
||||
},
|
||||
observeContent() {
|
||||
const { offsetTop } = this.data;
|
||||
const intersectionObserver = this.createIntersectionObserver({
|
||||
this.disconnectObserver('contentObserver');
|
||||
const contentObserver = this.createIntersectionObserver({
|
||||
thresholds: [0, 1]
|
||||
});
|
||||
this.intersectionObserver = intersectionObserver;
|
||||
intersectionObserver.relativeToViewport({ top: -offsetTop });
|
||||
intersectionObserver.observe('.van-sticky', (res) => {
|
||||
this.contentObserver = contentObserver;
|
||||
contentObserver.relativeToViewport({ top: -offsetTop });
|
||||
contentObserver.observe(ROOT_ELEMENT, res => {
|
||||
if (this.data.disabled) {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
const { top, height } = res.boundingClientRect;
|
||||
const fixed = top <= offsetTop;
|
||||
this.$emit('scroll', {
|
||||
scrollTop: top,
|
||||
isFixed: fixed
|
||||
this.setFixed(res.boundingClientRect.top);
|
||||
});
|
||||
},
|
||||
observeContainer() {
|
||||
if (typeof this.data.container !== 'function') {
|
||||
return;
|
||||
}
|
||||
const { height } = this.data;
|
||||
this.getContainerRect().then((rect) => {
|
||||
this.containerHeight = rect.height;
|
||||
this.disconnectObserver('containerObserver');
|
||||
const containerObserver = this.createIntersectionObserver({
|
||||
thresholds: [0, 1]
|
||||
});
|
||||
this.setData({ fixed, height });
|
||||
wx.nextTick(() => {
|
||||
this.setStyle();
|
||||
this.containerObserver = containerObserver;
|
||||
containerObserver.relativeToViewport({
|
||||
top: this.containerHeight - height
|
||||
});
|
||||
containerObserver.observe(ROOT_ELEMENT, res => {
|
||||
if (this.data.disabled) {
|
||||
return;
|
||||
}
|
||||
this.setFixed(res.boundingClientRect.top);
|
||||
});
|
||||
});
|
||||
},
|
||||
setFixed(top) {
|
||||
const { offsetTop, height } = this.data;
|
||||
const { containerHeight } = this;
|
||||
const fixed = containerHeight && height
|
||||
? top > height - containerHeight && top < offsetTop
|
||||
: top < offsetTop;
|
||||
this.$emit('scroll', {
|
||||
scrollTop: top,
|
||||
isFixed: fixed
|
||||
});
|
||||
this.setData({ fixed });
|
||||
wx.nextTick(() => {
|
||||
this.setStyle();
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.observerContentScroll();
|
||||
this.mounted = true;
|
||||
if (!this.data.disabled) {
|
||||
this.initObserver();
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.intersectionObserver.disconnect();
|
||||
this.disconnectObserver();
|
||||
}
|
||||
});
|
||||
|
||||
2
dist/sticky/index.wxml
vendored
2
dist/sticky/index.wxml
vendored
@ -1,6 +1,6 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="custom-class van-sticky }}" style="{{ containerStyle }}">
|
||||
<view class="custom-class van-sticky" style="{{ containerStyle }}">
|
||||
<view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ wrapStyle }}">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
16
dist/tab/index.js
vendored
16
dist/tab/index.js
vendored
@ -22,10 +22,7 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
data: {
|
||||
width: null,
|
||||
inited: false,
|
||||
active: false,
|
||||
animated: false
|
||||
active: false
|
||||
},
|
||||
watch: {
|
||||
title: 'update',
|
||||
@ -35,15 +32,20 @@ VantComponent({
|
||||
titleStyle: 'update'
|
||||
},
|
||||
methods: {
|
||||
setComputedName() {
|
||||
this.computedName = this.data.name || this.index;
|
||||
},
|
||||
getComputedName() {
|
||||
if (this.data.name !== '') {
|
||||
return this.data.name;
|
||||
}
|
||||
return this.index;
|
||||
},
|
||||
updateRender(active, parent) {
|
||||
const { data: parentData } = parent;
|
||||
this.inited = this.inited || active;
|
||||
this.setData({
|
||||
active,
|
||||
shouldRender: this.inited || !parentData.lazyRender
|
||||
});
|
||||
},
|
||||
update() {
|
||||
if (this.parent) {
|
||||
this.parent.updateTabs();
|
||||
|
||||
3
dist/tab/index.wxml
vendored
3
dist/tab/index.wxml
vendored
@ -1,9 +1,8 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
wx:if="{{ animated || inited }}"
|
||||
wx:if="{{ shouldRender }}"
|
||||
class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}"
|
||||
style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
2
dist/tab/index.wxss
vendored
2
dist/tab/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-tab__pane{box-sizing:border-box;overflow-y:auto}.van-tab__pane--active{height:auto}.van-tab__pane--inactive{height:0;overflow:visible}
|
||||
@import '../common/index.wxss';:host{-webkit-flex-shrink:0;flex-shrink:0;width:100%}.van-tab__pane,:host{box-sizing:border-box}.van-tab__pane{overflow-y:auto}.van-tab__pane--active{height:auto}.van-tab__pane--inactive{height:0;overflow:visible}
|
||||
197
dist/tabs/index.js
vendored
197
dist/tabs/index.js
vendored
@ -1,29 +1,25 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
import { touch } from '../mixins/touch';
|
||||
import { nextTick, isDef, addUnit } from '../common/utils';
|
||||
import { isDef, addUnit } from '../common/utils';
|
||||
VantComponent({
|
||||
mixins: [touch],
|
||||
classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
|
||||
relation: {
|
||||
name: 'tab',
|
||||
type: 'descendant',
|
||||
linked(child) {
|
||||
child.index = this.children.length;
|
||||
this.children.push(child);
|
||||
this.updateTabs(this.data.tabs.concat(child.data));
|
||||
linked(target) {
|
||||
target.index = this.children.length;
|
||||
this.children.push(target);
|
||||
this.updateTabs();
|
||||
},
|
||||
unlinked(child) {
|
||||
const index = this.children.indexOf(child);
|
||||
const { tabs } = this.data;
|
||||
tabs.splice(index, 1);
|
||||
this.children.splice(index, 1);
|
||||
let i = index;
|
||||
while (i >= 0 && i < this.children.length) {
|
||||
const currentChild = this.children[i];
|
||||
currentChild.index--;
|
||||
i++;
|
||||
}
|
||||
this.updateTabs(tabs);
|
||||
unlinked(target) {
|
||||
this.children = this.children
|
||||
.filter((child) => child !== target)
|
||||
.map((child, index) => {
|
||||
child.index = index;
|
||||
return child;
|
||||
});
|
||||
this.updateTabs();
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -47,12 +43,15 @@ VantComponent({
|
||||
value: -1,
|
||||
observer: 'setLine'
|
||||
},
|
||||
titleActiveColor: String,
|
||||
titleInactiveColor: String,
|
||||
active: {
|
||||
type: [String, Number],
|
||||
value: 0,
|
||||
observer(value) {
|
||||
this.currentName = value;
|
||||
this.setActiveTab();
|
||||
observer(name) {
|
||||
if (name !== this.getCurrentName()) {
|
||||
this.setCurrentIndexByName(name);
|
||||
}
|
||||
}
|
||||
},
|
||||
type: {
|
||||
@ -63,6 +62,10 @@ VantComponent({
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
ellipsis: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 0.3
|
||||
@ -74,16 +77,20 @@ VantComponent({
|
||||
swipeThreshold: {
|
||||
type: Number,
|
||||
value: 4,
|
||||
observer() {
|
||||
observer(value) {
|
||||
this.setData({
|
||||
scrollable: this.children.length > this.data.swipeThreshold
|
||||
scrollable: this.children.length > value || !this.data.ellipsis
|
||||
});
|
||||
}
|
||||
},
|
||||
offsetTop: {
|
||||
type: Number,
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
},
|
||||
data: {
|
||||
tabs: [],
|
||||
@ -91,51 +98,87 @@ VantComponent({
|
||||
scrollLeft: 0,
|
||||
scrollable: false,
|
||||
trackStyle: '',
|
||||
wrapStyle: '',
|
||||
position: '',
|
||||
currentIndex: 0
|
||||
currentIndex: null,
|
||||
container: null
|
||||
},
|
||||
beforeCreate() {
|
||||
this.children = [];
|
||||
},
|
||||
mounted() {
|
||||
this.setData({
|
||||
container: () => this.createSelectorQuery().select('.van-tabs')
|
||||
});
|
||||
this.setLine(true);
|
||||
this.setTrack();
|
||||
this.scrollIntoView();
|
||||
},
|
||||
methods: {
|
||||
updateTabs(tabs) {
|
||||
tabs = tabs || this.data.tabs;
|
||||
updateTabs() {
|
||||
const { children = [], data } = this;
|
||||
this.setData({
|
||||
tabs,
|
||||
scrollable: tabs.length > this.data.swipeThreshold
|
||||
tabs: children.map((child) => child.data),
|
||||
scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
|
||||
});
|
||||
this.setActiveTab();
|
||||
this.setCurrentIndexByName(this.getCurrentName() || data.active);
|
||||
},
|
||||
trigger(eventName, name) {
|
||||
const { tabs, currentIndex } = this.data;
|
||||
trigger(eventName) {
|
||||
const { currentIndex } = this.data;
|
||||
const child = this.children[currentIndex];
|
||||
this.$emit(eventName, {
|
||||
name,
|
||||
title: tabs[currentIndex].title
|
||||
index: currentIndex,
|
||||
name: child.getComputedName(),
|
||||
title: child.data.title
|
||||
});
|
||||
},
|
||||
onTap(event) {
|
||||
const { index } = event.currentTarget.dataset;
|
||||
const child = this.children[index];
|
||||
const computedName = child.getComputedName();
|
||||
if (this.data.tabs[index].disabled) {
|
||||
this.trigger('disabled', computedName);
|
||||
if (child.data.disabled) {
|
||||
this.trigger('disabled');
|
||||
}
|
||||
else {
|
||||
this.trigger('click', computedName);
|
||||
this.setActive(computedName);
|
||||
this.setCurrentIndex(index);
|
||||
wx.nextTick(() => {
|
||||
this.trigger('click');
|
||||
});
|
||||
}
|
||||
},
|
||||
setActive(name) {
|
||||
if (name !== this.currentName) {
|
||||
this.currentName = name;
|
||||
this.trigger('change', name);
|
||||
this.setActiveTab();
|
||||
// correct the index of active tab
|
||||
setCurrentIndexByName(name) {
|
||||
const { children = [] } = this;
|
||||
const matched = children.filter((child) => child.getComputedName() === name);
|
||||
const defaultIndex = (children[0] || {}).index || 0;
|
||||
this.setCurrentIndex(matched.length ? matched[0].index : defaultIndex);
|
||||
},
|
||||
setCurrentIndex(currentIndex) {
|
||||
const { data, children = [] } = this;
|
||||
if (!isDef(currentIndex) ||
|
||||
currentIndex >= children.length ||
|
||||
currentIndex < 0) {
|
||||
return;
|
||||
}
|
||||
const shouldEmitChange = data.currentIndex !== null;
|
||||
this.setData({ currentIndex });
|
||||
children.forEach((item, index) => {
|
||||
const active = index === currentIndex;
|
||||
if (active !== item.data.active || !item.inited) {
|
||||
item.updateRender(active, this);
|
||||
}
|
||||
});
|
||||
wx.nextTick(() => {
|
||||
this.setLine();
|
||||
this.setTrack();
|
||||
this.scrollIntoView();
|
||||
this.trigger('input');
|
||||
if (shouldEmitChange) {
|
||||
this.trigger('change');
|
||||
}
|
||||
});
|
||||
},
|
||||
getCurrentName() {
|
||||
const activeTab = this.children[this.data.currentIndex];
|
||||
if (activeTab) {
|
||||
return activeTab.getComputedName();
|
||||
}
|
||||
},
|
||||
setLine(skipTransition) {
|
||||
@ -143,8 +186,11 @@ VantComponent({
|
||||
return;
|
||||
}
|
||||
const { color, duration, currentIndex, lineWidth, lineHeight } = this.data;
|
||||
this.getRect('.van-tab', true).then((rects) => {
|
||||
this.getRect('.van-tab', true).then((rects = []) => {
|
||||
const rect = rects[currentIndex];
|
||||
if (rect == null) {
|
||||
return;
|
||||
}
|
||||
const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
|
||||
const height = lineHeight !== -1
|
||||
? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};`
|
||||
@ -170,50 +216,12 @@ VantComponent({
|
||||
},
|
||||
setTrack() {
|
||||
const { animated, duration, currentIndex } = this.data;
|
||||
if (!animated)
|
||||
return '';
|
||||
this.getRect('.van-tabs__content').then((rect) => {
|
||||
const { width } = rect;
|
||||
this.setData({
|
||||
trackStyle: `
|
||||
width: ${width * this.children.length}px;
|
||||
left: ${-1 * currentIndex * width}px;
|
||||
transition: left ${duration}s;
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
`
|
||||
});
|
||||
const data = { width, animated };
|
||||
this.children.forEach((item) => {
|
||||
item.setData(data);
|
||||
});
|
||||
});
|
||||
},
|
||||
setActiveTab() {
|
||||
if (!isDef(this.currentName)) {
|
||||
const { active } = this.data;
|
||||
const { children = [] } = this;
|
||||
this.currentName =
|
||||
active === '' && children.length
|
||||
? children[0].getComputedName()
|
||||
: active;
|
||||
}
|
||||
this.children.forEach((item, index) => {
|
||||
const data = {
|
||||
active: item.getComputedName() === this.currentName
|
||||
};
|
||||
if (data.active) {
|
||||
this.setData({ currentIndex: index });
|
||||
data.inited = true;
|
||||
}
|
||||
if (data.active !== item.data.active) {
|
||||
item.setData(data);
|
||||
}
|
||||
});
|
||||
nextTick(() => {
|
||||
this.setLine();
|
||||
this.setTrack();
|
||||
this.scrollIntoView();
|
||||
this.setData({
|
||||
trackStyle: `
|
||||
transform: translate3d(${-100 * currentIndex}%, 0, 0);
|
||||
-webkit-transition-duration: ${animated ? duration : 0}s;
|
||||
transition-duration: ${animated ? duration : 0}s;
|
||||
`
|
||||
});
|
||||
},
|
||||
// scroll active tab into view
|
||||
@ -235,6 +243,9 @@ VantComponent({
|
||||
});
|
||||
});
|
||||
},
|
||||
onTouchScroll(event) {
|
||||
this.$emit('scroll', event.detail);
|
||||
},
|
||||
onTouchStart(event) {
|
||||
if (!this.data.swipeable)
|
||||
return;
|
||||
@ -254,12 +265,10 @@ VantComponent({
|
||||
const minSwipeDistance = 50;
|
||||
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
|
||||
if (deltaX > 0 && currentIndex !== 0) {
|
||||
const child = this.children[currentIndex - 1];
|
||||
this.setActive(child.getComputedName());
|
||||
this.setCurrentIndex(currentIndex - 1);
|
||||
}
|
||||
else if (deltaX < 0 && currentIndex !== tabs.length - 1) {
|
||||
const child = this.children[currentIndex - 1];
|
||||
this.setActive(child.getComputedName());
|
||||
this.setCurrentIndex(currentIndex + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
15
dist/tabs/index.wxml
vendored
15
dist/tabs/index.wxml
vendored
@ -1,7 +1,14 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
<wxs src="./index.wxs" module="getters" />
|
||||
|
||||
<view class="custom-class {{ utils.bem('tabs', [type]) }}">
|
||||
<van-sticky disabled="{{ !sticky }}" z-index="{{ zIndex }}" offset-top="{{ offsetTop }}">
|
||||
<van-sticky
|
||||
disabled="{{ !sticky }}"
|
||||
z-index="{{ zIndex }}"
|
||||
offset-top="{{ offsetTop }}"
|
||||
container="{{ container }}"
|
||||
bind:scroll="onTouchScroll"
|
||||
>
|
||||
<view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
|
||||
<slot name="nav-left" />
|
||||
|
||||
@ -18,11 +25,11 @@
|
||||
wx:for="{{ tabs }}"
|
||||
wx:key="index"
|
||||
data-index="{{ index }}"
|
||||
class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
|
||||
style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
|
||||
class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
|
||||
style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}"
|
||||
bind:tap="onTap"
|
||||
>
|
||||
<view class="van-ellipsis" style="{{ item.titleStyle }}">
|
||||
<view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
|
||||
{{ item.title }}
|
||||
<van-info
|
||||
wx:if="{{ item.info !== null || item.dot }}"
|
||||
|
||||
55
dist/tabs/index.wxs
vendored
Normal file
55
dist/tabs/index.wxs
vendored
Normal file
@ -0,0 +1,55 @@
|
||||
/* eslint-disable */
|
||||
function tabClass(active, ellipsis) {
|
||||
var classes = ['tab-class'];
|
||||
|
||||
if (active) {
|
||||
classes.push('tab-active-class');
|
||||
}
|
||||
|
||||
if (ellipsis) {
|
||||
classes.push('van-ellipsis');
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
}
|
||||
|
||||
function tabStyle(
|
||||
active,
|
||||
ellipsis,
|
||||
color,
|
||||
type,
|
||||
disabled,
|
||||
activeColor,
|
||||
inactiveColor,
|
||||
swipeThreshold,
|
||||
scrollable
|
||||
) {
|
||||
var styles = [];
|
||||
var isCard = type === 'card';
|
||||
// card theme color
|
||||
if (color && isCard) {
|
||||
styles.push('border-color:' + color);
|
||||
|
||||
if (!disabled) {
|
||||
if (active) {
|
||||
styles.push('background-color:' + color);
|
||||
} else {
|
||||
styles.push('color:' + color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var titleColor = active ? activeColor : inactiveColor;
|
||||
if (titleColor) {
|
||||
styles.push('color:' + titleColor);
|
||||
}
|
||||
|
||||
if (scrollable && ellipsis) {
|
||||
styles.push('flex-basis:' + 88 / swipeThreshold + '%');
|
||||
}
|
||||
|
||||
return styles.join(';');
|
||||
}
|
||||
|
||||
module.exports.tabClass = tabClass;
|
||||
module.exports.tabStyle = tabStyle;
|
||||
2
dist/tabs/index.wxss
vendored
2
dist/tabs/index.wxss
vendored
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{display:-webkit-flex;display:flex;overflow:hidden}.van-tabs__wrap--scrollable .van-tab{-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__scroll{background-color:#fff;background-color:var(--tabs-nav-background-color,#fff)}.van-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.van-tabs__scroll--card{margin:0 16px;margin:0 var(--padding-md,16px)}.van-tabs__nav{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--card{box-sizing:border-box;height:30px;height:var(--tabs-card-height,30px);border:1px solid #ee0a24;border:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24);border-radius:2px;border-radius:var(--border-radius-sm,2px)}.van-tabs__nav--card .van-tab{color:#ee0a24;color:var(--tabs-default-color,#ee0a24);line-height:28px;line-height:calc(var(--tabs-card-height, 30px) - 2*var(--border-width-base, 1px));border-right:1px solid #ee0a24;border-right:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;color:var(--white,#fff);background-color:#ee0a24;background-color:var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:3px;height:var(--tabs-bottom-bar-height,3px);border-radius:3px;border-radius:var(--tabs-bottom-bar-height,3px);background-color:#ee0a24;background-color:var(--tabs-bottom-bar-color,#ee0a24)}.van-tabs__track{position:relative}.van-tabs__content{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:44px;height:var(--tabs-line-height,44px)}.van-tabs--card .van-tabs__wrap{height:30px;height:var(--tabs-card-height,30px)}.van-tab{position:relative;-webkit-flex:1;flex:1;box-sizing:border-box;min-width:0;padding:0 5px;text-align:center;cursor:pointer;color:#7d7e80;color:var(--tab-text-color,#7d7e80);font-size:14px;font-size:var(--tab-font-size,14px);line-height:44px;line-height:var(--tabs-line-height,44px)}.van-tab--active{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--tab-active-text-color,#323233)}.van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tab__title__info{position:relative!important;top:-1px!important;display:inline-block;-webkit-transform:translateX(0)!important;transform:translateX(0)!important}
|
||||
@import '../common/index.wxss';.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{display:-webkit-flex;display:flex;overflow:hidden}.van-tabs__wrap--scrollable .van-tab{-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__scroll{background-color:#fff;background-color:var(--tabs-nav-background-color,#fff)}.van-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.van-tabs__scroll--card{margin:0 16px;margin:0 var(--padding-md,16px)}.van-tabs__nav{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--card{box-sizing:border-box;height:30px;height:var(--tabs-card-height,30px);border:1px solid #ee0a24;border:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24);border-radius:2px;border-radius:var(--border-radius-sm,2px)}.van-tabs__nav--card .van-tab{color:#ee0a24;color:var(--tabs-default-color,#ee0a24);line-height:28px;line-height:calc(var(--tabs-card-height, 30px) - 2*var(--border-width-base, 1px));border-right:1px solid #ee0a24;border-right:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;color:var(--white,#fff);background-color:#ee0a24;background-color:var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:3px;height:var(--tabs-bottom-bar-height,3px);border-radius:3px;border-radius:var(--tabs-bottom-bar-height,3px);background-color:#ee0a24;background-color:var(--tabs-bottom-bar-color,#ee0a24)}.van-tabs__track{position:relative;display:-webkit-flex;display:flex;width:100%;height:100%;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.van-tabs__content{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:44px;height:var(--tabs-line-height,44px)}.van-tabs--card .van-tabs__wrap{height:30px;height:var(--tabs-card-height,30px)}.van-tab{position:relative;-webkit-flex:1;flex:1;box-sizing:border-box;min-width:0;padding:0 5px;text-align:center;cursor:pointer;color:#7d7e80;color:var(--tab-text-color,#7d7e80);font-size:14px;font-size:var(--tab-font-size,14px);line-height:44px;line-height:var(--tabs-line-height,44px)}.van-tab--active{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--tab-active-text-color,#323233)}.van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tab--complete{-webkit-flex:1 0 auto!important;flex:1 0 auto!important}.van-tab__title__info{position:relative!important;top:-1px!important;display:inline-block;-webkit-transform:translateX(0)!important;transform:translateX(0)!important}
|
||||
21
dist/uploader/index.js
vendored
21
dist/uploader/index.js
vendored
@ -4,6 +4,7 @@ import { addUnit } from '../common/utils';
|
||||
VantComponent({
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
multiple: Boolean,
|
||||
uploadText: String,
|
||||
previewSize: {
|
||||
type: null,
|
||||
@ -77,12 +78,8 @@ VantComponent({
|
||||
wx.chooseImage({
|
||||
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
|
||||
sourceType: capture,
|
||||
success: res => {
|
||||
resolve(res);
|
||||
},
|
||||
fail: err => {
|
||||
reject(err);
|
||||
}
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -91,16 +88,12 @@ VantComponent({
|
||||
wx.chooseMessageFile({
|
||||
count: multiple ? newMaxCount : 1,
|
||||
type: 'file',
|
||||
success(res) {
|
||||
resolve(res);
|
||||
},
|
||||
fail: err => {
|
||||
reject(err);
|
||||
}
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
}
|
||||
chooseFile.then(res => {
|
||||
chooseFile.then((res) => {
|
||||
const file = multiple ? res.tempFiles : res.tempFiles[0];
|
||||
// 检查文件大小
|
||||
if (file instanceof Array) {
|
||||
@ -119,7 +112,7 @@ VantComponent({
|
||||
this.$emit('before-read', {
|
||||
file,
|
||||
name,
|
||||
callback: result => {
|
||||
callback: (result) => {
|
||||
if (result) {
|
||||
// 开始上传
|
||||
this.$emit('after-read', { file, name });
|
||||
|
||||
@ -97,12 +97,10 @@ component_1.VantComponent({
|
||||
var _this = this;
|
||||
var _a = event.detail, index = _a.index, picker = _a.picker, value = _a.value;
|
||||
this.code = value[index].code;
|
||||
var getValues = picker.getValues();
|
||||
getValues = this.parseOutputValues(getValues);
|
||||
this.setValues().then(function () {
|
||||
_this.$emit('change', {
|
||||
picker: picker,
|
||||
values: getValues,
|
||||
values: _this.parseOutputValues(picker.getValues()),
|
||||
index: index
|
||||
});
|
||||
});
|
||||
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-goods-action-button{border:none!important;height:40px!important;height:var(--goods-action-button-height,40px)!important;font-weight:500!important;font-weight:var(--font-weight-bold,500)!important;line-height:40px!important;line-height:var(--goods-action-button-height,40px)!important}.van-goods-action-button--first{display:block!important;margin-left:5px;border-top-left-radius:40px/2!important;border-top-left-radius:var(--goods-action-button-height,40px)/2!important;border-bottom-left-radius:40px/2!important;border-bottom-left-radius:var(--goods-action-button-height,40px)/2!important}.van-goods-action-button--last{display:block!important;margin-right:5px;border-top-right-radius:40px/2!important;border-top-right-radius:var(--goods-action-button-height,40px)/2!important;border-bottom-right-radius:40px/2!important;border-bottom-right-radius:var(--goods-action-button-height,40px)/2!important}.van-goods-action-button--warning{background:linear-gradient(90deg,#ffd01e,#ff8917);background:var(--goods-action-button-warning-color,linear-gradient(90deg,#ffd01e,#ff8917))}.van-goods-action-button--danger{background:linear-gradient(90deg,#ff6034,#ee0a24);background:var(--goods-action-button-danger-color,linear-gradient(90deg,#ff6034,#ee0a24))}@media (max-width:321px){.van-goods-action-button{font-size:13px}}
|
||||
@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-goods-action-button{border:none!important;height:40px!important;height:var(--goods-action-button-height,40px)!important;font-weight:500!important;font-weight:var(--font-weight-bold,500)!important;line-height:40px!important;line-height:var(--goods-action-button-height,40px)!important}.van-goods-action-button--first{display:block!important;margin-left:5px;border-top-left-radius:20px!important;border-top-left-radius:var(--goods-action-button-border-radius,20px)!important;border-bottom-left-radius:20px!important;border-bottom-left-radius:var(--goods-action-button-border-radius,20px)!important}.van-goods-action-button--last{display:block!important;margin-right:5px;border-top-right-radius:20px!important;border-top-right-radius:var(--goods-action-button-border-radius,20px)!important;border-bottom-right-radius:20px!important;border-bottom-right-radius:var(--goods-action-button-border-radius,20px)!important}.van-goods-action-button--warning{background:linear-gradient(90deg,#ffd01e,#ff8917);background:var(--goods-action-button-warning-color,linear-gradient(90deg,#ffd01e,#ff8917))}.van-goods-action-button--danger{background:linear-gradient(90deg,#ff6034,#ee0a24);background:var(--goods-action-button-danger-color,linear-gradient(90deg,#ff6034,#ee0a24))}@media (max-width:321px){.van-goods-action-button{font-size:13px}}
|
||||
File diff suppressed because one or more lines are too long
24
lib/index-anchor/index.js
Normal file
24
lib/index-anchor/index.js
Normal file
@ -0,0 +1,24 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var component_1 = require("../common/component");
|
||||
component_1.VantComponent({
|
||||
relation: {
|
||||
name: 'index-bar',
|
||||
type: 'ancestor',
|
||||
linked: function (target) {
|
||||
this.parent = target;
|
||||
},
|
||||
unlinked: function () {
|
||||
this.parent = null;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
useSlot: Boolean,
|
||||
index: null
|
||||
},
|
||||
data: {
|
||||
active: false,
|
||||
wrapperStyle: '',
|
||||
anchorStyle: ''
|
||||
}
|
||||
});
|
||||
3
lib/index-anchor/index.json
Normal file
3
lib/index-anchor/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
14
lib/index-anchor/index.wxml
Normal file
14
lib/index-anchor/index.wxml
Normal file
@ -0,0 +1,14 @@
|
||||
<view
|
||||
class="van-index-anchor-wrapper"
|
||||
style="{{ wrapperStyle }}"
|
||||
>
|
||||
<view
|
||||
class="van-index-anchor {{ active ? 'van-index-anchor--active van-hairline--bottom' : '' }}"
|
||||
style="{{ anchorStyle }}"
|
||||
>
|
||||
<slot wx:if="{{ useSlot }}"/>
|
||||
<block wx:else>
|
||||
<text>{{ index }}</text>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
1
lib/index-anchor/index.wxss
Normal file
1
lib/index-anchor/index.wxss
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-index-anchor{padding:0 16px;padding:var(--index-anchor-padding,0 16px);color:#323233;color:var(--index-anchor-text-color,#323233);font-weight:500;font-weight:var(--index-anchor-font-weight,500);font-size:14px;font-size:var(--index-anchor-font-size,14px);line-height:32px;line-height:var(--index-anchor-line-height,32px);background-color:initial;background-color:var(--index-anchor-background-color,transparent)}.van-index-anchor--active{right:0;left:0;color:#07c160;color:var(--index-anchor-active-text-color,#07c160);background-color:#fff;background-color:var(--index-anchor-active-background-color,#fff)}
|
||||
235
lib/index-bar/index.js
Normal file
235
lib/index-bar/index.js
Normal file
@ -0,0 +1,235 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var component_1 = require("../common/component");
|
||||
var color_1 = require("../common/color");
|
||||
var indexList = function () {
|
||||
var indexList = [];
|
||||
var charCodeOfA = 'A'.charCodeAt(0);
|
||||
for (var i = 0; i < 26; i++) {
|
||||
indexList.push(String.fromCharCode(charCodeOfA + i));
|
||||
}
|
||||
return indexList;
|
||||
};
|
||||
component_1.VantComponent({
|
||||
relation: {
|
||||
name: 'index-anchor',
|
||||
type: 'descendant',
|
||||
linked: function () {
|
||||
this.updateData();
|
||||
},
|
||||
linkChanged: function () {
|
||||
this.updateData();
|
||||
},
|
||||
unlinked: function () {
|
||||
this.updateData();
|
||||
}
|
||||
},
|
||||
props: {
|
||||
sticky: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
value: 1
|
||||
},
|
||||
highlightColor: {
|
||||
type: String,
|
||||
value: color_1.GREEN
|
||||
},
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
observer: 'onScroll'
|
||||
},
|
||||
stickyOffsetTop: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
indexList: {
|
||||
type: Array,
|
||||
value: indexList()
|
||||
}
|
||||
},
|
||||
data: {
|
||||
activeAnchorIndex: null,
|
||||
showSidebar: false
|
||||
},
|
||||
methods: {
|
||||
updateData: function () {
|
||||
var _this = this;
|
||||
this.timer && clearTimeout(this.timer);
|
||||
this.timer = setTimeout(function () {
|
||||
_this.children = _this.getRelationNodes('../index-anchor/index');
|
||||
_this.setData({
|
||||
showSidebar: !!_this.children.length
|
||||
});
|
||||
_this.setRect().then(function () {
|
||||
_this.onScroll();
|
||||
});
|
||||
}, 0);
|
||||
},
|
||||
setRect: function () {
|
||||
return Promise.all([
|
||||
this.setAnchorsRect(),
|
||||
this.setListRect(),
|
||||
this.setSiderbarRect()
|
||||
]);
|
||||
},
|
||||
setAnchorsRect: function () {
|
||||
var _this = this;
|
||||
return Promise.all(this.children.map(function (anchor) { return (anchor.getRect('.van-index-anchor-wrapper').then(function (rect) {
|
||||
Object.assign(anchor, {
|
||||
height: rect.height,
|
||||
top: rect.top + _this.data.scrollTop
|
||||
});
|
||||
})); }));
|
||||
},
|
||||
setListRect: function () {
|
||||
var _this = this;
|
||||
return this.getRect('.van-index-bar').then(function (rect) {
|
||||
Object.assign(_this, {
|
||||
height: rect.height,
|
||||
top: rect.top + _this.data.scrollTop
|
||||
});
|
||||
});
|
||||
},
|
||||
setSiderbarRect: function () {
|
||||
var _this = this;
|
||||
return this.getRect('.van-index-bar__sidebar').then(function (res) {
|
||||
_this.sidebar = {
|
||||
height: res.height,
|
||||
top: res.top
|
||||
};
|
||||
});
|
||||
},
|
||||
setDiffData: function (_a) {
|
||||
var target = _a.target, data = _a.data;
|
||||
var diffData = {};
|
||||
Object.keys(data).forEach(function (key) {
|
||||
if (target.data[key] !== data[key]) {
|
||||
diffData[key] = data[key];
|
||||
}
|
||||
});
|
||||
if (Object.keys(diffData).length) {
|
||||
target.setData(diffData);
|
||||
}
|
||||
},
|
||||
getAnchorRect: function (anchor) {
|
||||
return anchor.getRect('.van-index-anchor-wrapper').then(function (rect) { return ({
|
||||
height: rect.height,
|
||||
top: rect.top
|
||||
}); });
|
||||
},
|
||||
getActiveAnchorIndex: function () {
|
||||
var children = this.children;
|
||||
var _a = this.data, sticky = _a.sticky, scrollTop = _a.scrollTop, stickyOffsetTop = _a.stickyOffsetTop;
|
||||
for (var i = this.children.length - 1; i >= 0; i--) {
|
||||
var preAnchorHeight = i > 0 ? children[i - 1].height : 0;
|
||||
var reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0;
|
||||
if (reachTop + scrollTop >= children[i].top) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
},
|
||||
onScroll: function () {
|
||||
var _this = this;
|
||||
var _a = this.children, children = _a === void 0 ? [] : _a;
|
||||
if (!children.length) {
|
||||
return;
|
||||
}
|
||||
var _b = this.data, sticky = _b.sticky, stickyOffsetTop = _b.stickyOffsetTop, zIndex = _b.zIndex, highlightColor = _b.highlightColor, scrollTop = _b.scrollTop;
|
||||
var active = this.getActiveAnchorIndex();
|
||||
this.setDiffData({
|
||||
target: this,
|
||||
data: {
|
||||
activeAnchorIndex: active
|
||||
}
|
||||
});
|
||||
if (sticky) {
|
||||
var isActiveAnchorSticky_1 = false;
|
||||
if (active !== -1) {
|
||||
isActiveAnchorSticky_1 = children[active].top <= stickyOffsetTop + scrollTop;
|
||||
}
|
||||
children.forEach(function (item, index) {
|
||||
if (index === active) {
|
||||
var wrapperStyle = '';
|
||||
var anchorStyle = "\n color: " + highlightColor + ";\n ";
|
||||
if (isActiveAnchorSticky_1) {
|
||||
wrapperStyle = "\n height: " + children[index].height + "px;\n ";
|
||||
anchorStyle = "\n position: fixed;\n top: " + stickyOffsetTop + "px;\n z-index: " + zIndex + ";\n color: " + highlightColor + ";\n ";
|
||||
}
|
||||
_this.setDiffData({
|
||||
target: item,
|
||||
data: {
|
||||
active: true,
|
||||
anchorStyle: anchorStyle,
|
||||
wrapperStyle: wrapperStyle
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (index === active - 1) {
|
||||
var currentAnchor = children[index];
|
||||
var currentOffsetTop = currentAnchor.top;
|
||||
var targetOffsetTop = index === children.length - 1
|
||||
? _this.top
|
||||
: children[index + 1].top;
|
||||
var parentOffsetHeight = targetOffsetTop - currentOffsetTop;
|
||||
var translateY = parentOffsetHeight - currentAnchor.height;
|
||||
var anchorStyle = "\n position: relative;\n transform: translate3d(0, " + translateY + "px, 0);\n z-index: " + zIndex + ";\n color: " + highlightColor + ";\n ";
|
||||
_this.setDiffData({
|
||||
target: item,
|
||||
data: {
|
||||
active: true,
|
||||
anchorStyle: anchorStyle
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
_this.setDiffData({
|
||||
target: item,
|
||||
data: {
|
||||
active: false,
|
||||
anchorStyle: '',
|
||||
wrapperStyle: '',
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onClick: function (event) {
|
||||
this.scrollToAnchor(event.target.dataset.index);
|
||||
},
|
||||
onTouchMove: function (event) {
|
||||
var sidebarLength = this.children.length;
|
||||
var touch = event.touches[0];
|
||||
var itemHeight = this.sidebar.height / sidebarLength;
|
||||
var index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight);
|
||||
if (index < 0) {
|
||||
index = 0;
|
||||
}
|
||||
else if (index > sidebarLength - 1) {
|
||||
index = sidebarLength - 1;
|
||||
}
|
||||
this.scrollToAnchor(index);
|
||||
},
|
||||
onTouchStop: function () {
|
||||
this.scrollToAnchorIndex = null;
|
||||
},
|
||||
scrollToAnchor: function (index) {
|
||||
var _this = this;
|
||||
if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
|
||||
return;
|
||||
}
|
||||
this.scrollToAnchorIndex = index;
|
||||
var anchor = this.children.filter(function (item) { return item.data.index === _this.data.indexList[index]; })[0];
|
||||
this.$emit('select', anchor.data.index);
|
||||
anchor && wx.pageScrollTo({
|
||||
duration: 0,
|
||||
scrollTop: anchor.top
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
3
lib/index-bar/index.json
Normal file
3
lib/index-bar/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
22
lib/index-bar/index.wxml
Normal file
22
lib/index-bar/index.wxml
Normal file
@ -0,0 +1,22 @@
|
||||
<view class="van-index-bar">
|
||||
<slot />
|
||||
|
||||
<view
|
||||
wx:if="{{ showSidebar }}"
|
||||
class="van-index-bar__sidebar"
|
||||
catch:tap="onClick"
|
||||
catch:touchmove="onTouchMove"
|
||||
catch:touchend="onTouchStop"
|
||||
catch:touchcancel="onTouchStop"
|
||||
>
|
||||
<view
|
||||
wx:for="{{ indexList }}"
|
||||
wx:key="index"
|
||||
class="van-index-bar__index"
|
||||
style="z-index: {{ zIndex + 1 }}; color: {{ activeAnchorIndex === index ? highlightColor : '' }}"
|
||||
data-index="{{ index }}"
|
||||
>
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
1
lib/index-bar/index.wxss
Normal file
1
lib/index-bar/index.wxss
Normal file
@ -0,0 +1 @@
|
||||
@import '../common/index.wxss';.van-index-bar{position:relative}.van-index-bar__sidebar{position:fixed;top:50%;right:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;user-select:none}.van-index-bar__index{font-weight:500;padding:0 4px 0 16px;padding:0 var(--padding-base,4px) 0 var(--padding-md,16px);font-size:10px;font-size:var(--index-bar-index-font-size,10px);line-height:14px;line-height:var(--index-bar-index-line-height,14px)}
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 -16px;padding:0 -var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}
|
||||
@import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 16px;padding:0 var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}
|
||||
@ -21,10 +21,7 @@ component_1.VantComponent({
|
||||
readonly: Boolean,
|
||||
disabled: Boolean,
|
||||
allowHalf: Boolean,
|
||||
size: {
|
||||
type: null,
|
||||
observer: 'setSizeWithUnit'
|
||||
},
|
||||
size: null,
|
||||
icon: {
|
||||
type: String,
|
||||
value: 'star'
|
||||
@ -60,8 +57,7 @@ component_1.VantComponent({
|
||||
},
|
||||
data: {
|
||||
innerValue: 0,
|
||||
gutterWithUnit: undefined,
|
||||
sizeWithUnit: '20px'
|
||||
gutterWithUnit: undefined
|
||||
},
|
||||
watch: {
|
||||
value: function (value) {
|
||||
@ -71,11 +67,6 @@ component_1.VantComponent({
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSizeWithUnit: function (val) {
|
||||
this.setData({
|
||||
sizeWithUnit: utils_1.addUnit(val)
|
||||
});
|
||||
},
|
||||
setGutterWithUnit: function (val) {
|
||||
this.setData({
|
||||
gutterWithUnit: utils_1.addUnit(val)
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
class="van-rate__item"
|
||||
wx:for="{{ count }}"
|
||||
wx:key="index"
|
||||
style="font-size: {{ sizeWithUnit }};padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}"
|
||||
style="padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}"
|
||||
>
|
||||
<van-icon
|
||||
name="{{ index + 1 <= innerValue ? icon : voidIcon }}"
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
/>
|
||||
<view
|
||||
wx:for="row"
|
||||
wx:key="index"
|
||||
wx:for-index="index"
|
||||
class="{{ utils.bem('skeleton__row') }}"
|
||||
style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var component_1 = require("../common/component");
|
||||
var ROOT_ELEMENT = '.van-sticky';
|
||||
component_1.VantComponent({
|
||||
props: {
|
||||
zIndex: {
|
||||
@ -9,9 +10,27 @@ component_1.VantComponent({
|
||||
},
|
||||
offsetTop: {
|
||||
type: Number,
|
||||
value: 0
|
||||
value: 0,
|
||||
observer: 'observeContent'
|
||||
},
|
||||
disabled: Boolean
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
observer: function (value) {
|
||||
if (!this.mounted) {
|
||||
return;
|
||||
}
|
||||
value ? this.disconnectObserver() : this.initObserver();
|
||||
}
|
||||
},
|
||||
container: {
|
||||
type: null,
|
||||
observer: function (target) {
|
||||
if (typeof target !== 'function' || !this.data.height) {
|
||||
return;
|
||||
}
|
||||
this.observeContainer();
|
||||
}
|
||||
}
|
||||
},
|
||||
data: {
|
||||
wrapStyle: '',
|
||||
@ -33,36 +52,97 @@ component_1.VantComponent({
|
||||
});
|
||||
}
|
||||
},
|
||||
observerContentScroll: function () {
|
||||
getContainerRect: function () {
|
||||
var nodesRef = this.data.container();
|
||||
return new Promise(function (resolve) {
|
||||
return nodesRef.boundingClientRect(resolve).exec();
|
||||
});
|
||||
},
|
||||
initObserver: function () {
|
||||
var _this = this;
|
||||
this.disconnectObserver();
|
||||
this.getRect(ROOT_ELEMENT).then(function (rect) {
|
||||
_this.setData({ height: rect.height });
|
||||
wx.nextTick(function () {
|
||||
_this.observeContent();
|
||||
_this.observeContainer();
|
||||
});
|
||||
});
|
||||
},
|
||||
disconnectObserver: function (observerName) {
|
||||
if (observerName) {
|
||||
var observer = this[observerName];
|
||||
observer && observer.disconnect();
|
||||
}
|
||||
else {
|
||||
this.contentObserver && this.contentObserver.disconnect();
|
||||
this.containerObserver && this.containerObserver.disconnect();
|
||||
}
|
||||
},
|
||||
observeContent: function () {
|
||||
var _this = this;
|
||||
var offsetTop = this.data.offsetTop;
|
||||
var intersectionObserver = this.createIntersectionObserver({
|
||||
this.disconnectObserver('contentObserver');
|
||||
var contentObserver = this.createIntersectionObserver({
|
||||
thresholds: [0, 1]
|
||||
});
|
||||
this.intersectionObserver = intersectionObserver;
|
||||
intersectionObserver.relativeToViewport({ top: -offsetTop });
|
||||
intersectionObserver.observe('.van-sticky', function (res) {
|
||||
this.contentObserver = contentObserver;
|
||||
contentObserver.relativeToViewport({ top: -offsetTop });
|
||||
contentObserver.observe(ROOT_ELEMENT, function (res) {
|
||||
if (_this.data.disabled) {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
var _a = res.boundingClientRect, top = _a.top, height = _a.height;
|
||||
var fixed = top <= offsetTop;
|
||||
_this.$emit('scroll', {
|
||||
scrollTop: top,
|
||||
isFixed: fixed
|
||||
_this.setFixed(res.boundingClientRect.top);
|
||||
});
|
||||
},
|
||||
observeContainer: function () {
|
||||
var _this = this;
|
||||
if (typeof this.data.container !== 'function') {
|
||||
return;
|
||||
}
|
||||
var height = this.data.height;
|
||||
this.getContainerRect().then(function (rect) {
|
||||
_this.containerHeight = rect.height;
|
||||
_this.disconnectObserver('containerObserver');
|
||||
var containerObserver = _this.createIntersectionObserver({
|
||||
thresholds: [0, 1]
|
||||
});
|
||||
_this.setData({ fixed: fixed, height: height });
|
||||
wx.nextTick(function () {
|
||||
_this.setStyle();
|
||||
_this.containerObserver = containerObserver;
|
||||
containerObserver.relativeToViewport({
|
||||
top: _this.containerHeight - height
|
||||
});
|
||||
containerObserver.observe(ROOT_ELEMENT, function (res) {
|
||||
if (_this.data.disabled) {
|
||||
return;
|
||||
}
|
||||
_this.setFixed(res.boundingClientRect.top);
|
||||
});
|
||||
});
|
||||
},
|
||||
setFixed: function (top) {
|
||||
var _this = this;
|
||||
var _a = this.data, offsetTop = _a.offsetTop, height = _a.height;
|
||||
var containerHeight = this.containerHeight;
|
||||
var fixed = containerHeight && height
|
||||
? top > height - containerHeight && top < offsetTop
|
||||
: top < offsetTop;
|
||||
this.$emit('scroll', {
|
||||
scrollTop: top,
|
||||
isFixed: fixed
|
||||
});
|
||||
this.setData({ fixed: fixed });
|
||||
wx.nextTick(function () {
|
||||
_this.setStyle();
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.observerContentScroll();
|
||||
this.mounted = true;
|
||||
if (!this.data.disabled) {
|
||||
this.initObserver();
|
||||
}
|
||||
},
|
||||
destroyed: function () {
|
||||
this.intersectionObserver.disconnect();
|
||||
this.disconnectObserver();
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view class="custom-class van-sticky }}" style="{{ containerStyle }}">
|
||||
<view class="custom-class van-sticky" style="{{ containerStyle }}">
|
||||
<view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ wrapStyle }}">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
@ -24,10 +24,7 @@ component_1.VantComponent({
|
||||
}
|
||||
},
|
||||
data: {
|
||||
width: null,
|
||||
inited: false,
|
||||
active: false,
|
||||
animated: false
|
||||
active: false
|
||||
},
|
||||
watch: {
|
||||
title: 'update',
|
||||
@ -37,15 +34,20 @@ component_1.VantComponent({
|
||||
titleStyle: 'update'
|
||||
},
|
||||
methods: {
|
||||
setComputedName: function () {
|
||||
this.computedName = this.data.name || this.index;
|
||||
},
|
||||
getComputedName: function () {
|
||||
if (this.data.name !== '') {
|
||||
return this.data.name;
|
||||
}
|
||||
return this.index;
|
||||
},
|
||||
updateRender: function (active, parent) {
|
||||
var parentData = parent.data;
|
||||
this.inited = this.inited || active;
|
||||
this.setData({
|
||||
active: active,
|
||||
shouldRender: this.inited || !parentData.lazyRender
|
||||
});
|
||||
},
|
||||
update: function () {
|
||||
if (this.parent) {
|
||||
this.parent.updateTabs();
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
wx:if="{{ animated || inited }}"
|
||||
wx:if="{{ shouldRender }}"
|
||||
class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}"
|
||||
style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-tab__pane{box-sizing:border-box;overflow-y:auto}.van-tab__pane--active{height:auto}.van-tab__pane--inactive{height:0;overflow:visible}
|
||||
@import '../common/index.wxss';:host{-webkit-flex-shrink:0;flex-shrink:0;width:100%}.van-tab__pane,:host{box-sizing:border-box}.van-tab__pane{overflow-y:auto}.van-tab__pane--active{height:auto}.van-tab__pane--inactive{height:0;overflow:visible}
|
||||
@ -9,23 +9,19 @@ component_1.VantComponent({
|
||||
relation: {
|
||||
name: 'tab',
|
||||
type: 'descendant',
|
||||
linked: function (child) {
|
||||
child.index = this.children.length;
|
||||
this.children.push(child);
|
||||
this.updateTabs(this.data.tabs.concat(child.data));
|
||||
linked: function (target) {
|
||||
target.index = this.children.length;
|
||||
this.children.push(target);
|
||||
this.updateTabs();
|
||||
},
|
||||
unlinked: function (child) {
|
||||
var index = this.children.indexOf(child);
|
||||
var tabs = this.data.tabs;
|
||||
tabs.splice(index, 1);
|
||||
this.children.splice(index, 1);
|
||||
var i = index;
|
||||
while (i >= 0 && i < this.children.length) {
|
||||
var currentChild = this.children[i];
|
||||
currentChild.index--;
|
||||
i++;
|
||||
}
|
||||
this.updateTabs(tabs);
|
||||
unlinked: function (target) {
|
||||
this.children = this.children
|
||||
.filter(function (child) { return child !== target; })
|
||||
.map(function (child, index) {
|
||||
child.index = index;
|
||||
return child;
|
||||
});
|
||||
this.updateTabs();
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -49,12 +45,15 @@ component_1.VantComponent({
|
||||
value: -1,
|
||||
observer: 'setLine'
|
||||
},
|
||||
titleActiveColor: String,
|
||||
titleInactiveColor: String,
|
||||
active: {
|
||||
type: [String, Number],
|
||||
value: 0,
|
||||
observer: function (value) {
|
||||
this.currentName = value;
|
||||
this.setActiveTab();
|
||||
observer: function (name) {
|
||||
if (name !== this.getCurrentName()) {
|
||||
this.setCurrentIndexByName(name);
|
||||
}
|
||||
}
|
||||
},
|
||||
type: {
|
||||
@ -65,6 +64,10 @@ component_1.VantComponent({
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
ellipsis: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 0.3
|
||||
@ -76,16 +79,20 @@ component_1.VantComponent({
|
||||
swipeThreshold: {
|
||||
type: Number,
|
||||
value: 4,
|
||||
observer: function () {
|
||||
observer: function (value) {
|
||||
this.setData({
|
||||
scrollable: this.children.length > this.data.swipeThreshold
|
||||
scrollable: this.children.length > value || !this.data.ellipsis
|
||||
});
|
||||
}
|
||||
},
|
||||
offsetTop: {
|
||||
type: Number,
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
},
|
||||
data: {
|
||||
tabs: [],
|
||||
@ -93,51 +100,90 @@ component_1.VantComponent({
|
||||
scrollLeft: 0,
|
||||
scrollable: false,
|
||||
trackStyle: '',
|
||||
wrapStyle: '',
|
||||
position: '',
|
||||
currentIndex: 0
|
||||
currentIndex: null,
|
||||
container: null
|
||||
},
|
||||
beforeCreate: function () {
|
||||
this.children = [];
|
||||
},
|
||||
mounted: function () {
|
||||
var _this = this;
|
||||
this.setData({
|
||||
container: function () { return _this.createSelectorQuery().select('.van-tabs'); }
|
||||
});
|
||||
this.setLine(true);
|
||||
this.setTrack();
|
||||
this.scrollIntoView();
|
||||
},
|
||||
methods: {
|
||||
updateTabs: function (tabs) {
|
||||
tabs = tabs || this.data.tabs;
|
||||
updateTabs: function () {
|
||||
var _a = this, _b = _a.children, children = _b === void 0 ? [] : _b, data = _a.data;
|
||||
this.setData({
|
||||
tabs: tabs,
|
||||
scrollable: tabs.length > this.data.swipeThreshold
|
||||
tabs: children.map(function (child) { return child.data; }),
|
||||
scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
|
||||
});
|
||||
this.setActiveTab();
|
||||
this.setCurrentIndexByName(this.getCurrentName() || data.active);
|
||||
},
|
||||
trigger: function (eventName, name) {
|
||||
var _a = this.data, tabs = _a.tabs, currentIndex = _a.currentIndex;
|
||||
trigger: function (eventName) {
|
||||
var currentIndex = this.data.currentIndex;
|
||||
var child = this.children[currentIndex];
|
||||
this.$emit(eventName, {
|
||||
name: name,
|
||||
title: tabs[currentIndex].title
|
||||
index: currentIndex,
|
||||
name: child.getComputedName(),
|
||||
title: child.data.title
|
||||
});
|
||||
},
|
||||
onTap: function (event) {
|
||||
var _this = this;
|
||||
var index = event.currentTarget.dataset.index;
|
||||
var child = this.children[index];
|
||||
var computedName = child.getComputedName();
|
||||
if (this.data.tabs[index].disabled) {
|
||||
this.trigger('disabled', computedName);
|
||||
if (child.data.disabled) {
|
||||
this.trigger('disabled');
|
||||
}
|
||||
else {
|
||||
this.trigger('click', computedName);
|
||||
this.setActive(computedName);
|
||||
this.setCurrentIndex(index);
|
||||
wx.nextTick(function () {
|
||||
_this.trigger('click');
|
||||
});
|
||||
}
|
||||
},
|
||||
setActive: function (name) {
|
||||
if (name !== this.currentName) {
|
||||
this.currentName = name;
|
||||
this.trigger('change', name);
|
||||
this.setActiveTab();
|
||||
// correct the index of active tab
|
||||
setCurrentIndexByName: function (name) {
|
||||
var _a = this.children, children = _a === void 0 ? [] : _a;
|
||||
var matched = children.filter(function (child) { return child.getComputedName() === name; });
|
||||
var defaultIndex = (children[0] || {}).index || 0;
|
||||
this.setCurrentIndex(matched.length ? matched[0].index : defaultIndex);
|
||||
},
|
||||
setCurrentIndex: function (currentIndex) {
|
||||
var _this = this;
|
||||
var _a = this, data = _a.data, _b = _a.children, children = _b === void 0 ? [] : _b;
|
||||
if (!utils_1.isDef(currentIndex) ||
|
||||
currentIndex >= children.length ||
|
||||
currentIndex < 0) {
|
||||
return;
|
||||
}
|
||||
var shouldEmitChange = data.currentIndex !== null;
|
||||
this.setData({ currentIndex: currentIndex });
|
||||
children.forEach(function (item, index) {
|
||||
var active = index === currentIndex;
|
||||
if (active !== item.data.active || !item.inited) {
|
||||
item.updateRender(active, _this);
|
||||
}
|
||||
});
|
||||
wx.nextTick(function () {
|
||||
_this.setLine();
|
||||
_this.setTrack();
|
||||
_this.scrollIntoView();
|
||||
_this.trigger('input');
|
||||
if (shouldEmitChange) {
|
||||
_this.trigger('change');
|
||||
}
|
||||
});
|
||||
},
|
||||
getCurrentName: function () {
|
||||
var activeTab = this.children[this.data.currentIndex];
|
||||
if (activeTab) {
|
||||
return activeTab.getComputedName();
|
||||
}
|
||||
},
|
||||
setLine: function (skipTransition) {
|
||||
@ -147,7 +193,11 @@ component_1.VantComponent({
|
||||
}
|
||||
var _a = this.data, color = _a.color, duration = _a.duration, currentIndex = _a.currentIndex, lineWidth = _a.lineWidth, lineHeight = _a.lineHeight;
|
||||
this.getRect('.van-tab', true).then(function (rects) {
|
||||
if (rects === void 0) { rects = []; }
|
||||
var rect = rects[currentIndex];
|
||||
if (rect == null) {
|
||||
return;
|
||||
}
|
||||
var width = lineWidth !== -1 ? lineWidth : rect.width / 2;
|
||||
var height = lineHeight !== -1
|
||||
? "height: " + utils_1.addUnit(lineHeight) + "; border-radius: " + utils_1.addUnit(lineHeight) + ";"
|
||||
@ -165,47 +215,9 @@ component_1.VantComponent({
|
||||
});
|
||||
},
|
||||
setTrack: function () {
|
||||
var _this = this;
|
||||
var _a = this.data, animated = _a.animated, duration = _a.duration, currentIndex = _a.currentIndex;
|
||||
if (!animated)
|
||||
return '';
|
||||
this.getRect('.van-tabs__content').then(function (rect) {
|
||||
var width = rect.width;
|
||||
_this.setData({
|
||||
trackStyle: "\n width: " + width * _this.children.length + "px;\n left: " + -1 * currentIndex * width + "px;\n transition: left " + duration + "s;\n display: -webkit-box;\n display: flex;\n "
|
||||
});
|
||||
var data = { width: width, animated: animated };
|
||||
_this.children.forEach(function (item) {
|
||||
item.setData(data);
|
||||
});
|
||||
});
|
||||
},
|
||||
setActiveTab: function () {
|
||||
var _this = this;
|
||||
if (!utils_1.isDef(this.currentName)) {
|
||||
var active = this.data.active;
|
||||
var _a = this.children, children = _a === void 0 ? [] : _a;
|
||||
this.currentName =
|
||||
active === '' && children.length
|
||||
? children[0].getComputedName()
|
||||
: active;
|
||||
}
|
||||
this.children.forEach(function (item, index) {
|
||||
var data = {
|
||||
active: item.getComputedName() === _this.currentName
|
||||
};
|
||||
if (data.active) {
|
||||
_this.setData({ currentIndex: index });
|
||||
data.inited = true;
|
||||
}
|
||||
if (data.active !== item.data.active) {
|
||||
item.setData(data);
|
||||
}
|
||||
});
|
||||
utils_1.nextTick(function () {
|
||||
_this.setLine();
|
||||
_this.setTrack();
|
||||
_this.scrollIntoView();
|
||||
this.setData({
|
||||
trackStyle: "\n transform: translate3d(" + -100 * currentIndex + "%, 0, 0);\n -webkit-transition-duration: " + (animated ? duration : 0) + "s;\n transition-duration: " + (animated ? duration : 0) + "s;\n "
|
||||
});
|
||||
},
|
||||
// scroll active tab into view
|
||||
@ -229,6 +241,9 @@ component_1.VantComponent({
|
||||
});
|
||||
});
|
||||
},
|
||||
onTouchScroll: function (event) {
|
||||
this.$emit('scroll', event.detail);
|
||||
},
|
||||
onTouchStart: function (event) {
|
||||
if (!this.data.swipeable)
|
||||
return;
|
||||
@ -248,12 +263,10 @@ component_1.VantComponent({
|
||||
var minSwipeDistance = 50;
|
||||
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
|
||||
if (deltaX > 0 && currentIndex !== 0) {
|
||||
var child = this.children[currentIndex - 1];
|
||||
this.setActive(child.getComputedName());
|
||||
this.setCurrentIndex(currentIndex - 1);
|
||||
}
|
||||
else if (deltaX < 0 && currentIndex !== tabs.length - 1) {
|
||||
var child = this.children[currentIndex - 1];
|
||||
this.setActive(child.getComputedName());
|
||||
this.setCurrentIndex(currentIndex + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
<wxs src="./index.wxs" module="getters" />
|
||||
|
||||
<view class="custom-class {{ utils.bem('tabs', [type]) }}">
|
||||
<van-sticky disabled="{{ !sticky }}" z-index="{{ zIndex }}" offset-top="{{ offsetTop }}">
|
||||
<van-sticky
|
||||
disabled="{{ !sticky }}"
|
||||
z-index="{{ zIndex }}"
|
||||
offset-top="{{ offsetTop }}"
|
||||
container="{{ container }}"
|
||||
bind:scroll="onTouchScroll"
|
||||
>
|
||||
<view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
|
||||
<slot name="nav-left" />
|
||||
|
||||
@ -18,11 +25,11 @@
|
||||
wx:for="{{ tabs }}"
|
||||
wx:key="index"
|
||||
data-index="{{ index }}"
|
||||
class="van-ellipsis tab-class {{ index === currentIndex ? 'tab-active-class' : '' }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled }) }}"
|
||||
style="{{ color && index !== currentIndex && type === 'card' && !item.disabled ? 'color: ' + color : '' }} {{ color && index === currentIndex && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }} {{ scrollable ? ';flex-basis:' + (88 / swipeThreshold) + '%' : '' }}"
|
||||
class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
|
||||
style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}"
|
||||
bind:tap="onTap"
|
||||
>
|
||||
<view class="van-ellipsis" style="{{ item.titleStyle }}">
|
||||
<view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
|
||||
{{ item.title }}
|
||||
<van-info
|
||||
wx:if="{{ item.info !== null || item.dot }}"
|
||||
|
||||
55
lib/tabs/index.wxs
Normal file
55
lib/tabs/index.wxs
Normal file
@ -0,0 +1,55 @@
|
||||
/* eslint-disable */
|
||||
function tabClass(active, ellipsis) {
|
||||
var classes = ['tab-class'];
|
||||
|
||||
if (active) {
|
||||
classes.push('tab-active-class');
|
||||
}
|
||||
|
||||
if (ellipsis) {
|
||||
classes.push('van-ellipsis');
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
}
|
||||
|
||||
function tabStyle(
|
||||
active,
|
||||
ellipsis,
|
||||
color,
|
||||
type,
|
||||
disabled,
|
||||
activeColor,
|
||||
inactiveColor,
|
||||
swipeThreshold,
|
||||
scrollable
|
||||
) {
|
||||
var styles = [];
|
||||
var isCard = type === 'card';
|
||||
// card theme color
|
||||
if (color && isCard) {
|
||||
styles.push('border-color:' + color);
|
||||
|
||||
if (!disabled) {
|
||||
if (active) {
|
||||
styles.push('background-color:' + color);
|
||||
} else {
|
||||
styles.push('color:' + color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var titleColor = active ? activeColor : inactiveColor;
|
||||
if (titleColor) {
|
||||
styles.push('color:' + titleColor);
|
||||
}
|
||||
|
||||
if (scrollable && ellipsis) {
|
||||
styles.push('flex-basis:' + 88 / swipeThreshold + '%');
|
||||
}
|
||||
|
||||
return styles.join(';');
|
||||
}
|
||||
|
||||
module.exports.tabClass = tabClass;
|
||||
module.exports.tabStyle = tabStyle;
|
||||
@ -1 +1 @@
|
||||
@import '../common/index.wxss';.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{display:-webkit-flex;display:flex;overflow:hidden}.van-tabs__wrap--scrollable .van-tab{-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__scroll{background-color:#fff;background-color:var(--tabs-nav-background-color,#fff)}.van-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.van-tabs__scroll--card{margin:0 16px;margin:0 var(--padding-md,16px)}.van-tabs__nav{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--card{box-sizing:border-box;height:30px;height:var(--tabs-card-height,30px);border:1px solid #ee0a24;border:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24);border-radius:2px;border-radius:var(--border-radius-sm,2px)}.van-tabs__nav--card .van-tab{color:#ee0a24;color:var(--tabs-default-color,#ee0a24);line-height:28px;line-height:calc(var(--tabs-card-height, 30px) - 2*var(--border-width-base, 1px));border-right:1px solid #ee0a24;border-right:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;color:var(--white,#fff);background-color:#ee0a24;background-color:var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:3px;height:var(--tabs-bottom-bar-height,3px);border-radius:3px;border-radius:var(--tabs-bottom-bar-height,3px);background-color:#ee0a24;background-color:var(--tabs-bottom-bar-color,#ee0a24)}.van-tabs__track{position:relative}.van-tabs__content{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:44px;height:var(--tabs-line-height,44px)}.van-tabs--card .van-tabs__wrap{height:30px;height:var(--tabs-card-height,30px)}.van-tab{position:relative;-webkit-flex:1;flex:1;box-sizing:border-box;min-width:0;padding:0 5px;text-align:center;cursor:pointer;color:#7d7e80;color:var(--tab-text-color,#7d7e80);font-size:14px;font-size:var(--tab-font-size,14px);line-height:44px;line-height:var(--tabs-line-height,44px)}.van-tab--active{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--tab-active-text-color,#323233)}.van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tab__title__info{position:relative!important;top:-1px!important;display:inline-block;-webkit-transform:translateX(0)!important;transform:translateX(0)!important}
|
||||
@import '../common/index.wxss';.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{display:-webkit-flex;display:flex;overflow:hidden}.van-tabs__wrap--scrollable .van-tab{-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__scroll{background-color:#fff;background-color:var(--tabs-nav-background-color,#fff)}.van-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.van-tabs__scroll--card{margin:0 16px;margin:0 var(--padding-md,16px)}.van-tabs__nav{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--card{box-sizing:border-box;height:30px;height:var(--tabs-card-height,30px);border:1px solid #ee0a24;border:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24);border-radius:2px;border-radius:var(--border-radius-sm,2px)}.van-tabs__nav--card .van-tab{color:#ee0a24;color:var(--tabs-default-color,#ee0a24);line-height:28px;line-height:calc(var(--tabs-card-height, 30px) - 2*var(--border-width-base, 1px));border-right:1px solid #ee0a24;border-right:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;color:var(--white,#fff);background-color:#ee0a24;background-color:var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:3px;height:var(--tabs-bottom-bar-height,3px);border-radius:3px;border-radius:var(--tabs-bottom-bar-height,3px);background-color:#ee0a24;background-color:var(--tabs-bottom-bar-color,#ee0a24)}.van-tabs__track{position:relative;display:-webkit-flex;display:flex;width:100%;height:100%;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.van-tabs__content{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:44px;height:var(--tabs-line-height,44px)}.van-tabs--card .van-tabs__wrap{height:30px;height:var(--tabs-card-height,30px)}.van-tab{position:relative;-webkit-flex:1;flex:1;box-sizing:border-box;min-width:0;padding:0 5px;text-align:center;cursor:pointer;color:#7d7e80;color:var(--tab-text-color,#7d7e80);font-size:14px;font-size:var(--tab-font-size,14px);line-height:44px;line-height:var(--tabs-line-height,44px)}.van-tab--active{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--tab-active-text-color,#323233)}.van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tab--complete{-webkit-flex:1 0 auto!important;flex:1 0 auto!important}.van-tab__title__info{position:relative!important;top:-1px!important;display:inline-block;-webkit-transform:translateX(0)!important;transform:translateX(0)!important}
|
||||
@ -17,6 +17,7 @@ var utils_2 = require("../common/utils");
|
||||
component_1.VantComponent({
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
multiple: Boolean,
|
||||
uploadText: String,
|
||||
previewSize: {
|
||||
type: null,
|
||||
@ -92,12 +93,8 @@ component_1.VantComponent({
|
||||
wx.chooseImage({
|
||||
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
|
||||
sourceType: capture,
|
||||
success: function (res) {
|
||||
resolve(res);
|
||||
},
|
||||
fail: function (err) {
|
||||
reject(err);
|
||||
}
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -106,12 +103,8 @@ component_1.VantComponent({
|
||||
wx.chooseMessageFile({
|
||||
count: multiple ? newMaxCount : 1,
|
||||
type: 'file',
|
||||
success: function (res) {
|
||||
resolve(res);
|
||||
},
|
||||
fail: function (err) {
|
||||
reject(err);
|
||||
}
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user