mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
build: compile 1.2.0
This commit is contained in:
parent
d9fa98bdbe
commit
0485c48f8a
4
dist/calendar/index.wxs
vendored
4
dist/calendar/index.wxs
vendored
@ -16,6 +16,10 @@ function getMonths(minDate, maxDate) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getButtonDisabled(type, currentDate) {
|
function getButtonDisabled(type, currentDate) {
|
||||||
|
if (currentDate == null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
if (type === 'range') {
|
if (type === 'range') {
|
||||||
return !currentDate[0] || !currentDate[1];
|
return !currentDate[0] || !currentDate[1];
|
||||||
}
|
}
|
||||||
|
12
dist/circle/index.js
vendored
12
dist/circle/index.js
vendored
@ -37,6 +37,10 @@ VantComponent({
|
|||||||
value: BLUE,
|
value: BLUE,
|
||||||
observer: 'setHoverColor'
|
observer: 'setHoverColor'
|
||||||
},
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
strokeWidth: {
|
strokeWidth: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 4
|
value: 4
|
||||||
@ -57,8 +61,8 @@ VantComponent({
|
|||||||
return this.ctx;
|
return this.ctx;
|
||||||
},
|
},
|
||||||
setHoverColor() {
|
setHoverColor() {
|
||||||
const context = this.getContext();
|
const { color, size, type } = this.data;
|
||||||
const { color, size } = this.data;
|
const context = type ? this.getContext(type) : this.getContext();
|
||||||
let hoverColor = color;
|
let hoverColor = color;
|
||||||
if (isObj(color)) {
|
if (isObj(color)) {
|
||||||
const LinearColor = context.createLinearGradient(size, 0, 0, 0);
|
const LinearColor = context.createLinearGradient(size, 0, 0, 0);
|
||||||
@ -98,8 +102,8 @@ VantComponent({
|
|||||||
this.presetCanvas(context, hoverColor, BEGIN_ANGLE, endAngle);
|
this.presetCanvas(context, hoverColor, BEGIN_ANGLE, endAngle);
|
||||||
},
|
},
|
||||||
drawCircle(currentValue) {
|
drawCircle(currentValue) {
|
||||||
const context = this.getContext();
|
const { size, type } = this.data;
|
||||||
const { size } = this.data;
|
const context = type ? this.getContext(type) : this.getContext();
|
||||||
context.clearRect(0, 0, size, size);
|
context.clearRect(0, 0, size, size);
|
||||||
this.renderLayerCircle(context);
|
this.renderLayerCircle(context);
|
||||||
const formatValue = format(currentValue);
|
const formatValue = format(currentValue);
|
||||||
|
132
dist/field/index.js
vendored
132
dist/field/index.js
vendored
@ -1,109 +1,89 @@
|
|||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
|
import { commonProps, inputProps, textareaProps } from './props';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
field: true,
|
field: true,
|
||||||
classes: ['input-class', 'right-icon-class'],
|
classes: ['input-class', 'right-icon-class'],
|
||||||
props: {
|
props: Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), inputProps), textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: [Boolean, Object], readonly: {
|
||||||
size: String,
|
type: Boolean,
|
||||||
icon: String,
|
observer: 'setShowClear'
|
||||||
label: String,
|
}, required: Boolean, iconClass: String, clearable: {
|
||||||
error: Boolean,
|
type: Boolean,
|
||||||
fixed: Boolean,
|
observer: 'setShowClear'
|
||||||
focus: Boolean,
|
}, clickable: Boolean, inputAlign: String, customStyle: String, errorMessage: String, arrowDirection: String, showWordLimit: Boolean, errorMessageAlign: String, border: {
|
||||||
center: Boolean,
|
|
||||||
isLink: Boolean,
|
|
||||||
leftIcon: String,
|
|
||||||
rightIcon: String,
|
|
||||||
disabled: Boolean,
|
|
||||||
autosize: [Boolean, Object],
|
|
||||||
readonly: Boolean,
|
|
||||||
required: Boolean,
|
|
||||||
password: Boolean,
|
|
||||||
iconClass: String,
|
|
||||||
clearable: Boolean,
|
|
||||||
clickable: Boolean,
|
|
||||||
inputAlign: String,
|
|
||||||
placeholder: String,
|
|
||||||
customStyle: String,
|
|
||||||
confirmType: String,
|
|
||||||
confirmHold: Boolean,
|
|
||||||
holdKeyboard: Boolean,
|
|
||||||
errorMessage: String,
|
|
||||||
arrowDirection: String,
|
|
||||||
showWordLimit: Boolean,
|
|
||||||
placeholderStyle: String,
|
|
||||||
errorMessageAlign: String,
|
|
||||||
selectionEnd: {
|
|
||||||
type: Number,
|
|
||||||
value: -1
|
|
||||||
},
|
|
||||||
selectionStart: {
|
|
||||||
type: Number,
|
|
||||||
value: -1
|
|
||||||
},
|
|
||||||
showConfirmBar: {
|
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: true
|
value: true
|
||||||
},
|
}, titleWidth: {
|
||||||
adjustPosition: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
cursorSpacing: {
|
|
||||||
type: Number,
|
|
||||||
value: 50
|
|
||||||
},
|
|
||||||
maxlength: {
|
|
||||||
type: Number,
|
|
||||||
value: -1
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
value: 'text'
|
|
||||||
},
|
|
||||||
border: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
titleWidth: {
|
|
||||||
type: String,
|
type: String,
|
||||||
value: '90px'
|
value: '90px'
|
||||||
}
|
} }),
|
||||||
},
|
|
||||||
data: {
|
data: {
|
||||||
focused: false,
|
focused: false,
|
||||||
|
innerValue: '',
|
||||||
|
showClear: false
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.value = this.data.value;
|
||||||
|
this.setData({ innerValue: this.value });
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onInput(event) {
|
onInput(event) {
|
||||||
const { value = '' } = event.detail || {};
|
const { value = '' } = event.detail || {};
|
||||||
this.setData({ value });
|
this.value = value;
|
||||||
wx.nextTick(() => {
|
this.setShowClear();
|
||||||
this.emitChange(value);
|
this.emitChange();
|
||||||
});
|
|
||||||
},
|
},
|
||||||
onFocus(event) {
|
onFocus(event) {
|
||||||
this.setData({ focused: true });
|
this.focused = true;
|
||||||
|
this.setShowClear();
|
||||||
this.$emit('focus', event.detail);
|
this.$emit('focus', event.detail);
|
||||||
},
|
},
|
||||||
onBlur(event) {
|
onBlur(event) {
|
||||||
this.setData({ focused: false });
|
this.focused = false;
|
||||||
|
this.setShowClear();
|
||||||
this.$emit('blur', event.detail);
|
this.$emit('blur', event.detail);
|
||||||
},
|
},
|
||||||
onClickIcon() {
|
onClickIcon() {
|
||||||
this.$emit('click-icon');
|
this.$emit('click-icon');
|
||||||
},
|
},
|
||||||
onClear() {
|
onClear() {
|
||||||
this.setData({ value: '' });
|
this.setData({ innerValue: '' });
|
||||||
|
this.value = '';
|
||||||
|
this.setShowClear();
|
||||||
wx.nextTick(() => {
|
wx.nextTick(() => {
|
||||||
this.emitChange('');
|
this.emitChange();
|
||||||
this.$emit('clear', '');
|
this.$emit('clear', '');
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onConfirm() {
|
onConfirm(event) {
|
||||||
this.$emit('confirm', this.data.value);
|
const { value = '' } = event.detail || {};
|
||||||
|
this.value = value;
|
||||||
|
this.setShowClear();
|
||||||
|
this.$emit('confirm', value);
|
||||||
},
|
},
|
||||||
emitChange(value) {
|
setValue(value) {
|
||||||
this.$emit('input', value);
|
this.value = value;
|
||||||
this.$emit('change', value);
|
this.setShowClear();
|
||||||
|
if (value === '') {
|
||||||
|
this.setData({ innerValue: '' });
|
||||||
|
}
|
||||||
|
this.emitChange();
|
||||||
|
},
|
||||||
|
onLineChange(event) {
|
||||||
|
this.$emit('linechange', event.detail);
|
||||||
|
},
|
||||||
|
onKeyboardHeightChange(event) {
|
||||||
|
this.$emit('keyboardheightchange', event.detail);
|
||||||
|
},
|
||||||
|
emitChange() {
|
||||||
|
this.$emit('input', this.value);
|
||||||
|
this.$emit('change', this.value);
|
||||||
|
},
|
||||||
|
setShowClear() {
|
||||||
|
const { clearable, readonly } = this.data;
|
||||||
|
const { focused, value } = this;
|
||||||
|
this.setData({
|
||||||
|
showClear: clearable && focused && !!value && !readonly
|
||||||
|
});
|
||||||
},
|
},
|
||||||
noop() { }
|
noop() { }
|
||||||
}
|
}
|
||||||
|
26
dist/field/index.wxml
vendored
26
dist/field/index.wxml
vendored
@ -23,7 +23,9 @@
|
|||||||
class="input-class {{ utils.bem('field__input', [inputAlign, type, { disabled, error }]) }}"
|
class="input-class {{ utils.bem('field__input', [inputAlign, type, { disabled, error }]) }}"
|
||||||
fixed="{{ fixed }}"
|
fixed="{{ fixed }}"
|
||||||
focus="{{ focus }}"
|
focus="{{ focus }}"
|
||||||
value="{{ value }}"
|
cursor="{{ cursor }}"
|
||||||
|
value="{{ innerValue }}"
|
||||||
|
auto-focus="{{ autoFocus }}"
|
||||||
disabled="{{ disabled || readonly }}"
|
disabled="{{ disabled || readonly }}"
|
||||||
maxlength="{{ maxlength }}"
|
maxlength="{{ maxlength }}"
|
||||||
placeholder="{{ placeholder }}"
|
placeholder="{{ placeholder }}"
|
||||||
@ -37,10 +39,13 @@
|
|||||||
hold-keyboard="{{ holdKeyboard }}"
|
hold-keyboard="{{ holdKeyboard }}"
|
||||||
selection-end="{{ selectionEnd }}"
|
selection-end="{{ selectionEnd }}"
|
||||||
selection-start="{{ selectionStart }}"
|
selection-start="{{ selectionStart }}"
|
||||||
|
disable-default-padding="{{ disableDefaultPadding }}"
|
||||||
bindinput="onInput"
|
bindinput="onInput"
|
||||||
bind:blur="onBlur"
|
bindblur="onBlur"
|
||||||
bind:focus="onFocus"
|
bindfocus="onFocus"
|
||||||
bind:confirm="onConfirm"
|
bindconfirm="onConfirm"
|
||||||
|
bindlinechange="onLineChange"
|
||||||
|
bindkeyboardheightchange="onKeyboardHeightChange"
|
||||||
>
|
>
|
||||||
</textarea>
|
</textarea>
|
||||||
<input
|
<input
|
||||||
@ -48,7 +53,9 @@
|
|||||||
class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
|
class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
|
||||||
type="{{ type }}"
|
type="{{ type }}"
|
||||||
focus="{{ focus }}"
|
focus="{{ focus }}"
|
||||||
value="{{ value }}"
|
cursor="{{ cursor }}"
|
||||||
|
value="{{ innerValue }}"
|
||||||
|
auto-focus="{{ autoFocus }}"
|
||||||
disabled="{{ disabled || readonly }}"
|
disabled="{{ disabled || readonly }}"
|
||||||
maxlength="{{ maxlength }}"
|
maxlength="{{ maxlength }}"
|
||||||
placeholder="{{ placeholder }}"
|
placeholder="{{ placeholder }}"
|
||||||
@ -63,12 +70,13 @@
|
|||||||
selection-start="{{ selectionStart }}"
|
selection-start="{{ selectionStart }}"
|
||||||
password="{{ password || type === 'password' }}"
|
password="{{ password || type === 'password' }}"
|
||||||
bindinput="onInput"
|
bindinput="onInput"
|
||||||
bind:blur="onBlur"
|
bindblur="onBlur"
|
||||||
bind:focus="onFocus"
|
bindfocus="onFocus"
|
||||||
bind:confirm="onConfirm"
|
bindconfirm="onConfirm"
|
||||||
|
bindkeyboardheightchange="onKeyboardHeightChange"
|
||||||
/>
|
/>
|
||||||
<van-icon
|
<van-icon
|
||||||
wx:if="{{ clearable && focused && value && !readonly }}"
|
wx:if="{{ showClear }}"
|
||||||
name="clear"
|
name="clear"
|
||||||
class="van-field__clear-root van-field__icon-root"
|
class="van-field__clear-root van-field__icon-root"
|
||||||
catch:touchstart="onClear"
|
catch:touchstart="onClear"
|
||||||
|
58
dist/field/props.d.ts
vendored
Normal file
58
dist/field/props.d.ts
vendored
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
export declare const commonProps: {
|
||||||
|
value: {
|
||||||
|
type: StringConstructor;
|
||||||
|
observer(value: string): void;
|
||||||
|
};
|
||||||
|
placeholder: StringConstructor;
|
||||||
|
placeholderStyle: StringConstructor;
|
||||||
|
placeholderClass: StringConstructor;
|
||||||
|
disabled: BooleanConstructor;
|
||||||
|
maxlength: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value: number;
|
||||||
|
};
|
||||||
|
cursorSpacing: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value: number;
|
||||||
|
};
|
||||||
|
autoFocus: BooleanConstructor;
|
||||||
|
focus: BooleanConstructor;
|
||||||
|
cursor: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value: number;
|
||||||
|
};
|
||||||
|
selectionStart: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value: number;
|
||||||
|
};
|
||||||
|
selectionEnd: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
value: number;
|
||||||
|
};
|
||||||
|
adjustPosition: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value: boolean;
|
||||||
|
};
|
||||||
|
holdKeyboard: BooleanConstructor;
|
||||||
|
};
|
||||||
|
export declare const inputProps: {
|
||||||
|
type: {
|
||||||
|
type: StringConstructor;
|
||||||
|
value: string;
|
||||||
|
};
|
||||||
|
password: BooleanConstructor;
|
||||||
|
confirmType: StringConstructor;
|
||||||
|
confirmHold: BooleanConstructor;
|
||||||
|
};
|
||||||
|
export declare const textareaProps: {
|
||||||
|
autoHeight: BooleanConstructor;
|
||||||
|
fixed: BooleanConstructor;
|
||||||
|
showConfirmBar: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value: boolean;
|
||||||
|
};
|
||||||
|
disableDefaultPadding: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
value: boolean;
|
||||||
|
};
|
||||||
|
};
|
63
dist/field/props.js
vendored
Normal file
63
dist/field/props.js
vendored
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
export const commonProps = {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
observer(value) {
|
||||||
|
if (value !== this.value) {
|
||||||
|
this.setData({ innerValue: value });
|
||||||
|
this.value = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
placeholder: String,
|
||||||
|
placeholderStyle: String,
|
||||||
|
placeholderClass: String,
|
||||||
|
disabled: Boolean,
|
||||||
|
maxlength: {
|
||||||
|
type: Number,
|
||||||
|
value: -1
|
||||||
|
},
|
||||||
|
cursorSpacing: {
|
||||||
|
type: Number,
|
||||||
|
value: 50
|
||||||
|
},
|
||||||
|
autoFocus: Boolean,
|
||||||
|
focus: Boolean,
|
||||||
|
cursor: {
|
||||||
|
type: Number,
|
||||||
|
value: -1
|
||||||
|
},
|
||||||
|
selectionStart: {
|
||||||
|
type: Number,
|
||||||
|
value: -1
|
||||||
|
},
|
||||||
|
selectionEnd: {
|
||||||
|
type: Number,
|
||||||
|
value: -1
|
||||||
|
},
|
||||||
|
adjustPosition: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
holdKeyboard: Boolean
|
||||||
|
};
|
||||||
|
export const inputProps = {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
value: 'text'
|
||||||
|
},
|
||||||
|
password: Boolean,
|
||||||
|
confirmType: String,
|
||||||
|
confirmHold: Boolean
|
||||||
|
};
|
||||||
|
export const textareaProps = {
|
||||||
|
autoHeight: Boolean,
|
||||||
|
fixed: Boolean,
|
||||||
|
showConfirmBar: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
disableDefaultPadding: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
};
|
4
dist/image/index.js
vendored
4
dist/image/index.js
vendored
@ -6,7 +6,9 @@ const FIT_MODE_MAP = {
|
|||||||
none: 'center',
|
none: 'center',
|
||||||
fill: 'scaleToFill',
|
fill: 'scaleToFill',
|
||||||
cover: 'aspectFill',
|
cover: 'aspectFill',
|
||||||
contain: 'aspectFit'
|
contain: 'aspectFit',
|
||||||
|
widthFix: 'widthFix',
|
||||||
|
heightFix: 'heightFix'
|
||||||
};
|
};
|
||||||
VantComponent({
|
VantComponent({
|
||||||
mixins: [button, openType],
|
mixins: [button, openType],
|
||||||
|
5
dist/mixins/page-scroll.d.ts
vendored
Normal file
5
dist/mixins/page-scroll.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/// <reference types="miniprogram-api-typings" />
|
||||||
|
declare type IPageScrollOption = WechatMiniprogram.Page.IPageScrollOption;
|
||||||
|
declare type Scroller = (event: IPageScrollOption) => void;
|
||||||
|
export declare const pageScrollMixin: (scroller: Scroller) => string;
|
||||||
|
export {};
|
28
dist/mixins/page-scroll.js
vendored
Normal file
28
dist/mixins/page-scroll.js
vendored
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
function getCurrentPage() {
|
||||||
|
const pages = getCurrentPages();
|
||||||
|
return pages[pages.length - 1] || {};
|
||||||
|
}
|
||||||
|
function onPageScroll(event) {
|
||||||
|
const { vanPageScroller = [] } = getCurrentPage();
|
||||||
|
vanPageScroller.forEach((scroller) => {
|
||||||
|
if (typeof scroller === 'function') {
|
||||||
|
scroller(event);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export const pageScrollMixin = (scroller) => Behavior({
|
||||||
|
attached() {
|
||||||
|
const page = getCurrentPage();
|
||||||
|
if (Array.isArray(page.vanPageScroller)) {
|
||||||
|
page.vanPageScroller.push(scroller.bind(this));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
page.vanPageScroller = [page.onPageScroll, scroller.bind(this)];
|
||||||
|
}
|
||||||
|
page.onPageScroll = onPageScroll;
|
||||||
|
},
|
||||||
|
detached() {
|
||||||
|
const page = getCurrentPage();
|
||||||
|
page.vanPageScroller = (page.vanPageScroller || []).filter(item => item !== scroller);
|
||||||
|
}
|
||||||
|
});
|
32
dist/nav-bar/index.js
vendored
32
dist/nav-bar/index.js
vendored
@ -3,7 +3,14 @@ VantComponent({
|
|||||||
classes: ['title-class'],
|
classes: ['title-class'],
|
||||||
props: {
|
props: {
|
||||||
title: String,
|
title: String,
|
||||||
fixed: Boolean,
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
observer: 'setHeight'
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: Boolean,
|
||||||
|
observer: 'setHeight'
|
||||||
|
},
|
||||||
leftText: String,
|
leftText: String,
|
||||||
rightText: String,
|
rightText: String,
|
||||||
leftArrow: Boolean,
|
leftArrow: Boolean,
|
||||||
@ -18,14 +25,21 @@ VantComponent({
|
|||||||
safeAreaInsetTop: {
|
safeAreaInsetTop: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: true
|
value: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
statusBarHeight: 0
|
statusBarHeight: 0,
|
||||||
|
height: 44
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
const { statusBarHeight } = wx.getSystemInfoSync();
|
const { statusBarHeight } = wx.getSystemInfoSync();
|
||||||
this.setData({ statusBarHeight });
|
this.setData({
|
||||||
|
statusBarHeight,
|
||||||
|
height: 44 + statusBarHeight
|
||||||
|
});
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setHeight();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onClickLeft() {
|
onClickLeft() {
|
||||||
@ -33,6 +47,16 @@ VantComponent({
|
|||||||
},
|
},
|
||||||
onClickRight() {
|
onClickRight() {
|
||||||
this.$emit('click-right');
|
this.$emit('click-right');
|
||||||
|
},
|
||||||
|
setHeight() {
|
||||||
|
if (!this.data.fixed || !this.data.placeholder) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
wx.nextTick(() => {
|
||||||
|
this.getRect('.van-nav-bar').then((res) => {
|
||||||
|
this.setData({ height: res.height });
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
2
dist/nav-bar/index.wxml
vendored
2
dist/nav-bar/index.wxml
vendored
@ -1,5 +1,7 @@
|
|||||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||||
|
|
||||||
|
<view wx:if="{{ fixed && placeholder }}" style="height: {{ height }}px;" />
|
||||||
|
|
||||||
<view
|
<view
|
||||||
class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
|
class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
|
||||||
style="z-index: {{ zIndex }}; padding-top: {{ safeAreaInsetTop ? statusBarHeight : 0 }}px;"
|
style="z-index: {{ zIndex }}; padding-top: {{ safeAreaInsetTop ? statusBarHeight : 0 }}px;"
|
||||||
|
2
dist/sidebar-item/index.wxss
vendored
2
dist/sidebar-item/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-sidebar-item{display:block;box-sizing:border-box;overflow:hidden;word-wrap:break-word;border-left:3px solid transparent;-webkit-user-select:none;user-select:none;padding:20px 12px 20px 8px;padding:var(--sidebar-padding,20px 12px 20px 8px);font-size:14px;font-size:var(--sidebar-font-size,14px);line-height:20px;line-height:var(--sidebar-line-height,20px);color:#323233;color:var(--sidebar-text-color,#323233);background-color:#fafafa;background-color:var(--sidebar-background-color,#fafafa)}.van-sidebar-item__text{position:relative;display:inline-block}.van-sidebar-item--hover:not(.van-sidebar-item--disabled){background-color:#f2f3f5;background-color:var(--sidebar-active-color,#f2f3f5)}.van-sidebar-item:after{border-bottom-width:1px}.van-sidebar-item--selected{color:#323233;color:var(--sidebar-selected-text-color,#323233);font-weight:500;font-weight:var(--sidebar-selected-font-weight,500);border-color:#ee0a24;border-color:var(--sidebar-selected-border-color,#ee0a24)}.van-sidebar-item--selected:after{border-right-width:1px}.van-sidebar-item--selected,.van-sidebar-item--selected.van-sidebar-item--hover{background-color:#fff;background-color:var(--sidebar-selected-background-color,#fff)}.van-sidebar-item--disabled{color:#c8c9cc;color:var(--sidebar-disabled-text-color,#c8c9cc)}
|
@import '../common/index.wxss';.van-sidebar-item{display:block;box-sizing:border-box;overflow:hidden;word-wrap:break-word;border-left:3px solid transparent;-webkit-user-select:none;user-select:none;padding:20px 12px 20px 8px;padding:var(--sidebar-padding,20px 12px 20px 8px);font-size:14px;font-size:var(--sidebar-font-size,14px);line-height:20px;line-height:var(--sidebar-line-height,20px);color:#323233;color:var(--sidebar-text-color,#323233);background-color:#f7f8fa;background-color:var(--sidebar-background-color,#f7f8fa)}.van-sidebar-item__text{position:relative;display:inline-block}.van-sidebar-item--hover:not(.van-sidebar-item--disabled){background-color:#f2f3f5;background-color:var(--sidebar-active-color,#f2f3f5)}.van-sidebar-item:after{border-bottom-width:1px}.van-sidebar-item--selected{color:#323233;color:var(--sidebar-selected-text-color,#323233);font-weight:500;font-weight:var(--sidebar-selected-font-weight,500);border-color:#ee0a24;border-color:var(--sidebar-selected-border-color,#ee0a24)}.van-sidebar-item--selected:after{border-right-width:1px}.van-sidebar-item--selected,.van-sidebar-item--selected.van-sidebar-item--hover{background-color:#fff;background-color:var(--sidebar-selected-background-color,#fff)}.van-sidebar-item--disabled{color:#c8c9cc;color:var(--sidebar-disabled-text-color,#c8c9cc)}
|
2
dist/sidebar/index.wxml
vendored
2
dist/sidebar/index.wxml
vendored
@ -1,3 +1,3 @@
|
|||||||
<view class="van-sidebar van-hairline--top-bottom custom-class">
|
<view class="van-sidebar custom-class">
|
||||||
<slot />
|
<slot />
|
||||||
</view>
|
</view>
|
||||||
|
173
dist/sticky/index.js
vendored
173
dist/sticky/index.js
vendored
@ -1,4 +1,5 @@
|
|||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
|
import { pageScrollMixin } from '../mixins/page-scroll';
|
||||||
const ROOT_ELEMENT = '.van-sticky';
|
const ROOT_ELEMENT = '.van-sticky';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
props: {
|
props: {
|
||||||
@ -9,124 +10,90 @@ VantComponent({
|
|||||||
offsetTop: {
|
offsetTop: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 0,
|
value: 0,
|
||||||
observer: 'observeContent'
|
observer: 'onScroll'
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
observer(value) {
|
observer: 'onScroll'
|
||||||
if (!this.mounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
value ? this.disconnectObserver() : this.initObserver();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
type: null,
|
type: null,
|
||||||
observer(target) {
|
observer: 'onScroll'
|
||||||
if (typeof target !== 'function' || !this.data.height) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.observeContainer();
|
|
||||||
this.updateFixed();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mixins: [
|
||||||
|
pageScrollMixin(function (event) {
|
||||||
|
this.onScroll(event);
|
||||||
|
})
|
||||||
|
],
|
||||||
data: {
|
data: {
|
||||||
height: 0,
|
height: 0,
|
||||||
fixed: false
|
fixed: false,
|
||||||
|
transform: 0
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.onScroll();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onScroll({ scrollTop } = {}) {
|
||||||
|
const { container, offsetTop, disabled } = this.data;
|
||||||
|
if (disabled) {
|
||||||
|
this.setDataAfterDiff({
|
||||||
|
fixed: false,
|
||||||
|
transform: 0
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.scrollTop = scrollTop || this.scrollTop;
|
||||||
|
if (typeof container === 'function') {
|
||||||
|
Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then(([root, container]) => {
|
||||||
|
if (offsetTop + root.height > container.height + container.top) {
|
||||||
|
this.setDataAfterDiff({
|
||||||
|
fixed: false,
|
||||||
|
transform: container.height - root.height
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (offsetTop >= root.top) {
|
||||||
|
this.setDataAfterDiff({
|
||||||
|
fixed: true,
|
||||||
|
height: root.height,
|
||||||
|
transform: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.setDataAfterDiff({ fixed: false, transform: 0 });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.getRect(ROOT_ELEMENT).then((root) => {
|
||||||
|
if (offsetTop >= root.top) {
|
||||||
|
this.setDataAfterDiff({ fixed: true, height: root.height });
|
||||||
|
this.transform = 0;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.setDataAfterDiff({ fixed: false });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setDataAfterDiff(data) {
|
||||||
|
wx.nextTick(() => {
|
||||||
|
const diff = Object.keys(data).reduce((prev, key) => {
|
||||||
|
if (data[key] !== this.data[key]) {
|
||||||
|
prev[key] = data[key];
|
||||||
|
}
|
||||||
|
return prev;
|
||||||
|
}, {});
|
||||||
|
this.setData(diff);
|
||||||
|
this.$emit('scroll', {
|
||||||
|
scrollTop: this.scrollTop,
|
||||||
|
isFixed: data.fixed || this.data.fixed
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
getContainerRect() {
|
getContainerRect() {
|
||||||
const nodesRef = this.data.container();
|
const nodesRef = this.data.container();
|
||||||
return new Promise(resolve => nodesRef.boundingClientRect(resolve).exec());
|
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateFixed() {
|
|
||||||
Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then(([content, container]) => {
|
|
||||||
this.setData({ height: content.height });
|
|
||||||
this.containerHeight = container.height;
|
|
||||||
wx.nextTick(() => {
|
|
||||||
this.setFixed(content.top);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
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;
|
|
||||||
this.disconnectObserver('contentObserver');
|
|
||||||
const contentObserver = this.createIntersectionObserver({
|
|
||||||
thresholds: [0.9, 1]
|
|
||||||
});
|
|
||||||
contentObserver.relativeToViewport({ top: -offsetTop });
|
|
||||||
contentObserver.observe(ROOT_ELEMENT, res => {
|
|
||||||
if (this.data.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.setFixed(res.boundingClientRect.top);
|
|
||||||
});
|
|
||||||
this.contentObserver = contentObserver;
|
|
||||||
},
|
|
||||||
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.9, 1]
|
|
||||||
});
|
|
||||||
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 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.mounted = true;
|
|
||||||
if (!this.data.disabled) {
|
|
||||||
this.initObserver();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
this.disconnectObserver();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
2
dist/sticky/index.wxml
vendored
2
dist/sticky/index.wxml
vendored
@ -2,7 +2,7 @@
|
|||||||
<wxs src="./index.wxs" module="computed" />
|
<wxs src="./index.wxs" module="computed" />
|
||||||
|
|
||||||
<view class="custom-class van-sticky" style="{{ computed.containerStyle({ fixed, height, zIndex }) }}">
|
<view class="custom-class van-sticky" style="{{ computed.containerStyle({ fixed, height, zIndex }) }}">
|
||||||
<view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ computed.wrapStyle({ fixed, offsetTop }) }}">
|
<view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ computed.wrapStyle({ fixed, offsetTop, transform, zIndex }) }}">
|
||||||
<slot />
|
<slot />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
26
dist/sticky/index.wxs
vendored
26
dist/sticky/index.wxs
vendored
@ -1,18 +1,34 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
function wrapStyle(data) {
|
function wrapStyle(data) {
|
||||||
if (data.fixed) {
|
var style = '';
|
||||||
return 'top: ' + data.offsetTop + 'px;';
|
|
||||||
|
if (data.transform) {
|
||||||
|
style += 'transform: translate3d(0, ' + data.transform + 'px, 0);';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '';
|
if (data.fixed) {
|
||||||
|
style += 'top: ' + data.offsetTop + 'px;';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.zIndex) {
|
||||||
|
style += 'z-index: ' + data.zIndex + ';';
|
||||||
|
}
|
||||||
|
|
||||||
|
return style;
|
||||||
}
|
}
|
||||||
|
|
||||||
function containerStyle(data) {
|
function containerStyle(data) {
|
||||||
|
var style = '';
|
||||||
|
|
||||||
if (data.fixed) {
|
if (data.fixed) {
|
||||||
return 'height: ' + data.height + 'px; z-index: ' + data.zIndex + ';';
|
style += 'height: ' + data.height + 'px;';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '';
|
if (data.zIndex) {
|
||||||
|
style += 'z-index: ' + data.zIndex + ';';
|
||||||
|
}
|
||||||
|
|
||||||
|
return style;
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
2
dist/tabs/index.wxml
vendored
2
dist/tabs/index.wxml
vendored
@ -19,7 +19,7 @@
|
|||||||
class="{{ utils.bem('tabs__scroll', [type]) }}"
|
class="{{ utils.bem('tabs__scroll', [type]) }}"
|
||||||
style="{{ color ? 'border-color: ' + color : '' }}"
|
style="{{ color ? 'border-color: ' + color : '' }}"
|
||||||
>
|
>
|
||||||
<view class="{{ utils.bem('tabs__nav', [type]) }} nav-class">
|
<view class="{{ utils.bem('tabs__nav', [type]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
|
||||||
<view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
|
<view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
|
||||||
<view
|
<view
|
||||||
wx:for="{{ tabs }}"
|
wx:for="{{ tabs }}"
|
||||||
|
10
dist/tabs/index.wxs
vendored
10
dist/tabs/index.wxs
vendored
@ -51,6 +51,15 @@ function tabStyle(
|
|||||||
return styles.join(';');
|
return styles.join(';');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function tabCardTypeBorderStyle(color, type) {
|
||||||
|
var isCard = type === 'card';
|
||||||
|
var styles = [];
|
||||||
|
if (isCard && color) {
|
||||||
|
styles.push('border-color:' + color);
|
||||||
|
}
|
||||||
|
return styles.join(';');
|
||||||
|
}
|
||||||
|
|
||||||
function trackStyle(data) {
|
function trackStyle(data) {
|
||||||
if (!data.animated) {
|
if (!data.animated) {
|
||||||
return '';
|
return '';
|
||||||
@ -66,3 +75,4 @@ function trackStyle(data) {
|
|||||||
module.exports.tabClass = tabClass;
|
module.exports.tabClass = tabClass;
|
||||||
module.exports.tabStyle = tabStyle;
|
module.exports.tabStyle = tabStyle;
|
||||||
module.exports.trackStyle = trackStyle;
|
module.exports.trackStyle = trackStyle;
|
||||||
|
module.exports.tabCardTypeBorderStyle = tabCardTypeBorderStyle;
|
||||||
|
2
dist/tree-select/index.wxss
vendored
2
dist/tree-select/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-tree-select{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none;font-size:14px;font-size:var(--tree-select-font-size,14px)}.van-tree-select__nav{-webkit-flex:1;flex:1;background-color:#fafafa;background-color:var(--tree-select-nav-background-color,#fafafa);--sidebar-padding:12px 8px 12px 12px}.van-tree-select__nav__inner{width:100%!important;height:100%}.van-tree-select__content{-webkit-flex:2;flex:2;background-color:#fff;background-color:var(--tree-select-content-background-color,#fff)}.van-tree-select__item{position:relative;font-weight:700;padding:0 32px 0 16px;padding:0 32px 0 var(--padding-md,16px);line-height:44px;line-height:var(--tree-select-item-height,44px)}.van-tree-select__item--active{color:#ee0a24;color:var(--tree-select-item-active-color,#ee0a24)}.van-tree-select__item--disabled{color:#c8c9cc;color:var(--tree-select-item-disabled-color,#c8c9cc)}.van-tree-select__selected{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:16px;right:var(--padding-md,16px)}
|
@import '../common/index.wxss';.van-tree-select{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none;font-size:14px;font-size:var(--tree-select-font-size,14px)}.van-tree-select__nav{-webkit-flex:1;flex:1;background-color:#f7f8fa;background-color:var(--tree-select-nav-background-color,#f7f8fa);--sidebar-padding:12px 8px 12px 12px}.van-tree-select__nav__inner{width:100%!important;height:100%}.van-tree-select__content{-webkit-flex:2;flex:2;background-color:#fff;background-color:var(--tree-select-content-background-color,#fff)}.van-tree-select__item{position:relative;font-weight:700;padding:0 32px 0 16px;padding:0 32px 0 var(--padding-md,16px);line-height:44px;line-height:var(--tree-select-item-height,44px)}.van-tree-select__item--active{color:#ee0a24;color:var(--tree-select-item-active-color,#ee0a24)}.van-tree-select__item--disabled{color:#c8c9cc;color:var(--tree-select-item-disabled-color,#c8c9cc)}.van-tree-select__selected{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:16px;right:var(--padding-md,16px)}
|
3
dist/uploader/index.json
vendored
3
dist/uploader/index.json
vendored
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"component": true,
|
"component": true,
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"van-icon": "../icon/index"
|
"van-icon": "../icon/index",
|
||||||
|
"van-loading": "../loading/index"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
8
dist/uploader/index.wxml
vendored
8
dist/uploader/index.wxml
vendored
@ -27,6 +27,14 @@
|
|||||||
<van-icon name="description" class="van-uploader__file-icon" />
|
<van-icon name="description" class="van-uploader__file-icon" />
|
||||||
<view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
|
<view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view
|
||||||
|
wx:if="{{ item.status === 'uploading' || item.status === 'failed' }}"
|
||||||
|
class="van-uploader__mask"
|
||||||
|
>
|
||||||
|
<van-icon wx:if="{{ item.status === 'failed' }}" name="warning-o" class="van-uploader__mask-icon" />
|
||||||
|
<van-loading wx:else class="van-uploader__loading" />
|
||||||
|
<text wx:if="{{ item.message }}" class="van-uploader__upload-text">{{ item.message }}</text>
|
||||||
|
</view>
|
||||||
<van-icon
|
<van-icon
|
||||||
wx:if="{{ deletable }}"
|
wx:if="{{ deletable }}"
|
||||||
name="clear"
|
name="clear"
|
||||||
|
2
dist/uploader/index.wxss
vendored
2
dist/uploader/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__slot:empty{display:none}.van-uploader__slot:not(:empty)+.van-uploader__upload{display:none!important}.van-uploader__upload{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;height:80px;margin:0 8px 8px 0;background-color:#f7f8fa;border-radius:8px}.van-uploader__upload:active{background-color:#f2f3f5}.van-uploader__upload-icon{color:#dcdee0;font-size:24px}.van-uploader__upload-text{margin-top:8px;color:#969799;font-size:12px}.van-uploader__upload--disabled{opacity:.5;opacity:var(--uploader-disabled-opacity,.5)}.van-uploader__preview{position:relative;margin:0 8px 8px 0;cursor:pointer}.van-uploader__preview-image{display:block;width:80px;height:80px;overflow:hidden;border-radius:8px}.van-uploader__preview-delete{position:absolute;top:-8px;right:-8px;color:#969799;font-size:18px;background-color:#fff;border-radius:100%}.van-uploader__file{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;height:80px;background-color:#f7f8fa;border-radius:8px}.van-uploader__file-icon{color:#646566;font-size:20px}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:8px;padding:0 4px;color:#646566;font-size:12px;text-align:center}
|
@import '../common/index.wxss';.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__slot:empty{display:none}.van-uploader__slot:not(:empty)+.van-uploader__upload{display:none!important}.van-uploader__upload{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;height:80px;margin:0 8px 8px 0;background-color:#f7f8fa;border-radius:8px}.van-uploader__upload:active{background-color:#f2f3f5}.van-uploader__upload-icon{color:#dcdee0;font-size:24px}.van-uploader__upload-text{margin-top:8px;color:#969799;font-size:12px}.van-uploader__upload--disabled{opacity:.5;opacity:var(--uploader-disabled-opacity,.5)}.van-uploader__preview{position:relative;margin:0 8px 8px 0;cursor:pointer}.van-uploader__preview-image{display:block;width:80px;height:80px;overflow:hidden;border-radius:8px}.van-uploader__preview-delete{position:absolute;top:-8px;right:-8px;color:#969799;font-size:18px;background-color:#fff;border-radius:100%}.van-uploader__file{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;height:80px;background-color:#f7f8fa;border-radius:8px}.van-uploader__file-icon{color:#646566;font-size:20px}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:8px;padding:0 4px;color:#646566;font-size:12px;text-align:center}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#fff;background-color:rgba(50,50,51,.88);border-radius:8px}.van-uploader__mask-icon{font-size:22px}.van-uploader__mask-message{margin-top:6px;padding:0 4px;font-size:12px;line-height:14px}.van-uploader__loading{width:22px;height:22px;color:#fff}
|
@ -16,6 +16,10 @@ function getMonths(minDate, maxDate) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getButtonDisabled(type, currentDate) {
|
function getButtonDisabled(type, currentDate) {
|
||||||
|
if (currentDate == null) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
if (type === 'range') {
|
if (type === 'range') {
|
||||||
return !currentDate[0] || !currentDate[1];
|
return !currentDate[0] || !currentDate[1];
|
||||||
}
|
}
|
||||||
|
@ -39,6 +39,10 @@ component_1.VantComponent({
|
|||||||
value: color_1.BLUE,
|
value: color_1.BLUE,
|
||||||
observer: 'setHoverColor'
|
observer: 'setHoverColor'
|
||||||
},
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
strokeWidth: {
|
strokeWidth: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 4
|
value: 4
|
||||||
@ -59,8 +63,8 @@ component_1.VantComponent({
|
|||||||
return this.ctx;
|
return this.ctx;
|
||||||
},
|
},
|
||||||
setHoverColor: function () {
|
setHoverColor: function () {
|
||||||
var context = this.getContext();
|
var _a = this.data, color = _a.color, size = _a.size, type = _a.type;
|
||||||
var _a = this.data, color = _a.color, size = _a.size;
|
var context = type ? this.getContext(type) : this.getContext();
|
||||||
var hoverColor = color;
|
var hoverColor = color;
|
||||||
if (utils_1.isObj(color)) {
|
if (utils_1.isObj(color)) {
|
||||||
var LinearColor_1 = context.createLinearGradient(size, 0, 0, 0);
|
var LinearColor_1 = context.createLinearGradient(size, 0, 0, 0);
|
||||||
@ -100,8 +104,8 @@ component_1.VantComponent({
|
|||||||
this.presetCanvas(context, hoverColor, BEGIN_ANGLE, endAngle);
|
this.presetCanvas(context, hoverColor, BEGIN_ANGLE, endAngle);
|
||||||
},
|
},
|
||||||
drawCircle: function (currentValue) {
|
drawCircle: function (currentValue) {
|
||||||
var context = this.getContext();
|
var _a = this.data, size = _a.size, type = _a.type;
|
||||||
var size = this.data.size;
|
var context = type ? this.getContext(type) : this.getContext();
|
||||||
context.clearRect(0, 0, size, size);
|
context.clearRect(0, 0, size, size);
|
||||||
this.renderLayerCircle(context);
|
this.renderLayerCircle(context);
|
||||||
var formatValue = format(currentValue);
|
var formatValue = format(currentValue);
|
||||||
|
@ -1,94 +1,58 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
|
var __assign = (this && this.__assign) || function () {
|
||||||
|
__assign = Object.assign || function(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||||
|
t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
var component_1 = require("../common/component");
|
var component_1 = require("../common/component");
|
||||||
|
var props_1 = require("./props");
|
||||||
component_1.VantComponent({
|
component_1.VantComponent({
|
||||||
field: true,
|
field: true,
|
||||||
classes: ['input-class', 'right-icon-class'],
|
classes: ['input-class', 'right-icon-class'],
|
||||||
props: {
|
props: __assign(__assign(__assign(__assign({}, props_1.commonProps), props_1.inputProps), props_1.textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: [Boolean, Object], readonly: {
|
||||||
size: String,
|
type: Boolean,
|
||||||
icon: String,
|
observer: 'setShowClear'
|
||||||
label: String,
|
}, required: Boolean, iconClass: String, clearable: {
|
||||||
error: Boolean,
|
type: Boolean,
|
||||||
fixed: Boolean,
|
observer: 'setShowClear'
|
||||||
focus: Boolean,
|
}, clickable: Boolean, inputAlign: String, customStyle: String, errorMessage: String, arrowDirection: String, showWordLimit: Boolean, errorMessageAlign: String, border: {
|
||||||
center: Boolean,
|
|
||||||
isLink: Boolean,
|
|
||||||
leftIcon: String,
|
|
||||||
rightIcon: String,
|
|
||||||
disabled: Boolean,
|
|
||||||
autosize: [Boolean, Object],
|
|
||||||
readonly: Boolean,
|
|
||||||
required: Boolean,
|
|
||||||
password: Boolean,
|
|
||||||
iconClass: String,
|
|
||||||
clearable: Boolean,
|
|
||||||
clickable: Boolean,
|
|
||||||
inputAlign: String,
|
|
||||||
placeholder: String,
|
|
||||||
customStyle: String,
|
|
||||||
confirmType: String,
|
|
||||||
confirmHold: Boolean,
|
|
||||||
holdKeyboard: Boolean,
|
|
||||||
errorMessage: String,
|
|
||||||
arrowDirection: String,
|
|
||||||
showWordLimit: Boolean,
|
|
||||||
placeholderStyle: String,
|
|
||||||
errorMessageAlign: String,
|
|
||||||
selectionEnd: {
|
|
||||||
type: Number,
|
|
||||||
value: -1
|
|
||||||
},
|
|
||||||
selectionStart: {
|
|
||||||
type: Number,
|
|
||||||
value: -1
|
|
||||||
},
|
|
||||||
showConfirmBar: {
|
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: true
|
value: true
|
||||||
},
|
}, titleWidth: {
|
||||||
adjustPosition: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
cursorSpacing: {
|
|
||||||
type: Number,
|
|
||||||
value: 50
|
|
||||||
},
|
|
||||||
maxlength: {
|
|
||||||
type: Number,
|
|
||||||
value: -1
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
value: 'text'
|
|
||||||
},
|
|
||||||
border: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
titleWidth: {
|
|
||||||
type: String,
|
type: String,
|
||||||
value: '90px'
|
value: '90px'
|
||||||
}
|
} }),
|
||||||
},
|
|
||||||
data: {
|
data: {
|
||||||
focused: false,
|
focused: false,
|
||||||
|
innerValue: '',
|
||||||
|
showClear: false
|
||||||
|
},
|
||||||
|
created: function () {
|
||||||
|
this.value = this.data.value;
|
||||||
|
this.setData({ innerValue: this.value });
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onInput: function (event) {
|
onInput: function (event) {
|
||||||
var _this = this;
|
|
||||||
var _a = (event.detail || {}).value, value = _a === void 0 ? '' : _a;
|
var _a = (event.detail || {}).value, value = _a === void 0 ? '' : _a;
|
||||||
this.setData({ value: value });
|
this.value = value;
|
||||||
wx.nextTick(function () {
|
this.setShowClear();
|
||||||
_this.emitChange(value);
|
this.emitChange();
|
||||||
});
|
|
||||||
},
|
},
|
||||||
onFocus: function (event) {
|
onFocus: function (event) {
|
||||||
this.setData({ focused: true });
|
this.focused = true;
|
||||||
|
this.setShowClear();
|
||||||
this.$emit('focus', event.detail);
|
this.$emit('focus', event.detail);
|
||||||
},
|
},
|
||||||
onBlur: function (event) {
|
onBlur: function (event) {
|
||||||
this.setData({ focused: false });
|
this.focused = false;
|
||||||
|
this.setShowClear();
|
||||||
this.$emit('blur', event.detail);
|
this.$emit('blur', event.detail);
|
||||||
},
|
},
|
||||||
onClickIcon: function () {
|
onClickIcon: function () {
|
||||||
@ -96,18 +60,44 @@ component_1.VantComponent({
|
|||||||
},
|
},
|
||||||
onClear: function () {
|
onClear: function () {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
this.setData({ value: '' });
|
this.setData({ innerValue: '' });
|
||||||
|
this.value = '';
|
||||||
|
this.setShowClear();
|
||||||
wx.nextTick(function () {
|
wx.nextTick(function () {
|
||||||
_this.emitChange('');
|
_this.emitChange();
|
||||||
_this.$emit('clear', '');
|
_this.$emit('clear', '');
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onConfirm: function () {
|
onConfirm: function (event) {
|
||||||
this.$emit('confirm', this.data.value);
|
var _a = (event.detail || {}).value, value = _a === void 0 ? '' : _a;
|
||||||
|
this.value = value;
|
||||||
|
this.setShowClear();
|
||||||
|
this.$emit('confirm', value);
|
||||||
},
|
},
|
||||||
emitChange: function (value) {
|
setValue: function (value) {
|
||||||
this.$emit('input', value);
|
this.value = value;
|
||||||
this.$emit('change', value);
|
this.setShowClear();
|
||||||
|
if (value === '') {
|
||||||
|
this.setData({ innerValue: '' });
|
||||||
|
}
|
||||||
|
this.emitChange();
|
||||||
|
},
|
||||||
|
onLineChange: function (event) {
|
||||||
|
this.$emit('linechange', event.detail);
|
||||||
|
},
|
||||||
|
onKeyboardHeightChange: function (event) {
|
||||||
|
this.$emit('keyboardheightchange', event.detail);
|
||||||
|
},
|
||||||
|
emitChange: function () {
|
||||||
|
this.$emit('input', this.value);
|
||||||
|
this.$emit('change', this.value);
|
||||||
|
},
|
||||||
|
setShowClear: function () {
|
||||||
|
var _a = this.data, clearable = _a.clearable, readonly = _a.readonly;
|
||||||
|
var _b = this, focused = _b.focused, value = _b.value;
|
||||||
|
this.setData({
|
||||||
|
showClear: clearable && focused && !!value && !readonly
|
||||||
|
});
|
||||||
},
|
},
|
||||||
noop: function () { }
|
noop: function () { }
|
||||||
}
|
}
|
||||||
|
@ -23,7 +23,9 @@
|
|||||||
class="input-class {{ utils.bem('field__input', [inputAlign, type, { disabled, error }]) }}"
|
class="input-class {{ utils.bem('field__input', [inputAlign, type, { disabled, error }]) }}"
|
||||||
fixed="{{ fixed }}"
|
fixed="{{ fixed }}"
|
||||||
focus="{{ focus }}"
|
focus="{{ focus }}"
|
||||||
value="{{ value }}"
|
cursor="{{ cursor }}"
|
||||||
|
value="{{ innerValue }}"
|
||||||
|
auto-focus="{{ autoFocus }}"
|
||||||
disabled="{{ disabled || readonly }}"
|
disabled="{{ disabled || readonly }}"
|
||||||
maxlength="{{ maxlength }}"
|
maxlength="{{ maxlength }}"
|
||||||
placeholder="{{ placeholder }}"
|
placeholder="{{ placeholder }}"
|
||||||
@ -37,10 +39,13 @@
|
|||||||
hold-keyboard="{{ holdKeyboard }}"
|
hold-keyboard="{{ holdKeyboard }}"
|
||||||
selection-end="{{ selectionEnd }}"
|
selection-end="{{ selectionEnd }}"
|
||||||
selection-start="{{ selectionStart }}"
|
selection-start="{{ selectionStart }}"
|
||||||
|
disable-default-padding="{{ disableDefaultPadding }}"
|
||||||
bindinput="onInput"
|
bindinput="onInput"
|
||||||
bind:blur="onBlur"
|
bindblur="onBlur"
|
||||||
bind:focus="onFocus"
|
bindfocus="onFocus"
|
||||||
bind:confirm="onConfirm"
|
bindconfirm="onConfirm"
|
||||||
|
bindlinechange="onLineChange"
|
||||||
|
bindkeyboardheightchange="onKeyboardHeightChange"
|
||||||
>
|
>
|
||||||
</textarea>
|
</textarea>
|
||||||
<input
|
<input
|
||||||
@ -48,7 +53,9 @@
|
|||||||
class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
|
class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
|
||||||
type="{{ type }}"
|
type="{{ type }}"
|
||||||
focus="{{ focus }}"
|
focus="{{ focus }}"
|
||||||
value="{{ value }}"
|
cursor="{{ cursor }}"
|
||||||
|
value="{{ innerValue }}"
|
||||||
|
auto-focus="{{ autoFocus }}"
|
||||||
disabled="{{ disabled || readonly }}"
|
disabled="{{ disabled || readonly }}"
|
||||||
maxlength="{{ maxlength }}"
|
maxlength="{{ maxlength }}"
|
||||||
placeholder="{{ placeholder }}"
|
placeholder="{{ placeholder }}"
|
||||||
@ -63,12 +70,13 @@
|
|||||||
selection-start="{{ selectionStart }}"
|
selection-start="{{ selectionStart }}"
|
||||||
password="{{ password || type === 'password' }}"
|
password="{{ password || type === 'password' }}"
|
||||||
bindinput="onInput"
|
bindinput="onInput"
|
||||||
bind:blur="onBlur"
|
bindblur="onBlur"
|
||||||
bind:focus="onFocus"
|
bindfocus="onFocus"
|
||||||
bind:confirm="onConfirm"
|
bindconfirm="onConfirm"
|
||||||
|
bindkeyboardheightchange="onKeyboardHeightChange"
|
||||||
/>
|
/>
|
||||||
<van-icon
|
<van-icon
|
||||||
wx:if="{{ clearable && focused && value && !readonly }}"
|
wx:if="{{ showClear }}"
|
||||||
name="clear"
|
name="clear"
|
||||||
class="van-field__clear-root van-field__icon-root"
|
class="van-field__clear-root van-field__icon-root"
|
||||||
catch:touchstart="onClear"
|
catch:touchstart="onClear"
|
||||||
|
65
lib/field/props.js
Normal file
65
lib/field/props.js
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
exports.commonProps = {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
observer: function (value) {
|
||||||
|
if (value !== this.value) {
|
||||||
|
this.setData({ innerValue: value });
|
||||||
|
this.value = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
placeholder: String,
|
||||||
|
placeholderStyle: String,
|
||||||
|
placeholderClass: String,
|
||||||
|
disabled: Boolean,
|
||||||
|
maxlength: {
|
||||||
|
type: Number,
|
||||||
|
value: -1
|
||||||
|
},
|
||||||
|
cursorSpacing: {
|
||||||
|
type: Number,
|
||||||
|
value: 50
|
||||||
|
},
|
||||||
|
autoFocus: Boolean,
|
||||||
|
focus: Boolean,
|
||||||
|
cursor: {
|
||||||
|
type: Number,
|
||||||
|
value: -1
|
||||||
|
},
|
||||||
|
selectionStart: {
|
||||||
|
type: Number,
|
||||||
|
value: -1
|
||||||
|
},
|
||||||
|
selectionEnd: {
|
||||||
|
type: Number,
|
||||||
|
value: -1
|
||||||
|
},
|
||||||
|
adjustPosition: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
holdKeyboard: Boolean
|
||||||
|
};
|
||||||
|
exports.inputProps = {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
value: 'text'
|
||||||
|
},
|
||||||
|
password: Boolean,
|
||||||
|
confirmType: String,
|
||||||
|
confirmHold: Boolean
|
||||||
|
};
|
||||||
|
exports.textareaProps = {
|
||||||
|
autoHeight: Boolean,
|
||||||
|
fixed: Boolean,
|
||||||
|
showConfirmBar: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
disableDefaultPadding: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
};
|
@ -8,7 +8,9 @@ var FIT_MODE_MAP = {
|
|||||||
none: 'center',
|
none: 'center',
|
||||||
fill: 'scaleToFill',
|
fill: 'scaleToFill',
|
||||||
cover: 'aspectFill',
|
cover: 'aspectFill',
|
||||||
contain: 'aspectFit'
|
contain: 'aspectFit',
|
||||||
|
widthFix: 'widthFix',
|
||||||
|
heightFix: 'heightFix'
|
||||||
};
|
};
|
||||||
component_1.VantComponent({
|
component_1.VantComponent({
|
||||||
mixins: [button_1.button, open_type_1.openType],
|
mixins: [button_1.button, open_type_1.openType],
|
||||||
|
32
lib/mixins/page-scroll.js
Normal file
32
lib/mixins/page-scroll.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
"use strict";
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
function getCurrentPage() {
|
||||||
|
var pages = getCurrentPages();
|
||||||
|
return pages[pages.length - 1] || {};
|
||||||
|
}
|
||||||
|
function onPageScroll(event) {
|
||||||
|
var _a = getCurrentPage().vanPageScroller, vanPageScroller = _a === void 0 ? [] : _a;
|
||||||
|
vanPageScroller.forEach(function (scroller) {
|
||||||
|
if (typeof scroller === 'function') {
|
||||||
|
scroller(event);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
exports.pageScrollMixin = function (scroller) {
|
||||||
|
return Behavior({
|
||||||
|
attached: function () {
|
||||||
|
var page = getCurrentPage();
|
||||||
|
if (Array.isArray(page.vanPageScroller)) {
|
||||||
|
page.vanPageScroller.push(scroller.bind(this));
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
page.vanPageScroller = [page.onPageScroll, scroller.bind(this)];
|
||||||
|
}
|
||||||
|
page.onPageScroll = onPageScroll;
|
||||||
|
},
|
||||||
|
detached: function () {
|
||||||
|
var page = getCurrentPage();
|
||||||
|
page.vanPageScroller = (page.vanPageScroller || []).filter(function (item) { return item !== scroller; });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
@ -5,7 +5,14 @@ component_1.VantComponent({
|
|||||||
classes: ['title-class'],
|
classes: ['title-class'],
|
||||||
props: {
|
props: {
|
||||||
title: String,
|
title: String,
|
||||||
fixed: Boolean,
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
observer: 'setHeight'
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: Boolean,
|
||||||
|
observer: 'setHeight'
|
||||||
|
},
|
||||||
leftText: String,
|
leftText: String,
|
||||||
rightText: String,
|
rightText: String,
|
||||||
leftArrow: Boolean,
|
leftArrow: Boolean,
|
||||||
@ -20,14 +27,21 @@ component_1.VantComponent({
|
|||||||
safeAreaInsetTop: {
|
safeAreaInsetTop: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: true
|
value: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
statusBarHeight: 0
|
statusBarHeight: 0,
|
||||||
|
height: 44
|
||||||
},
|
},
|
||||||
created: function () {
|
created: function () {
|
||||||
var statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
|
var statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
|
||||||
this.setData({ statusBarHeight: statusBarHeight });
|
this.setData({
|
||||||
|
statusBarHeight: statusBarHeight,
|
||||||
|
height: 44 + statusBarHeight
|
||||||
|
});
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.setHeight();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onClickLeft: function () {
|
onClickLeft: function () {
|
||||||
@ -35,6 +49,17 @@ component_1.VantComponent({
|
|||||||
},
|
},
|
||||||
onClickRight: function () {
|
onClickRight: function () {
|
||||||
this.$emit('click-right');
|
this.$emit('click-right');
|
||||||
|
},
|
||||||
|
setHeight: function () {
|
||||||
|
var _this = this;
|
||||||
|
if (!this.data.fixed || !this.data.placeholder) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
wx.nextTick(function () {
|
||||||
|
_this.getRect('.van-nav-bar').then(function (res) {
|
||||||
|
_this.setData({ height: res.height });
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||||
|
|
||||||
|
<view wx:if="{{ fixed && placeholder }}" style="height: {{ height }}px;" />
|
||||||
|
|
||||||
<view
|
<view
|
||||||
class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
|
class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
|
||||||
style="z-index: {{ zIndex }}; padding-top: {{ safeAreaInsetTop ? statusBarHeight : 0 }}px;"
|
style="z-index: {{ zIndex }}; padding-top: {{ safeAreaInsetTop ? statusBarHeight : 0 }}px;"
|
||||||
|
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-sidebar-item{display:block;box-sizing:border-box;overflow:hidden;word-wrap:break-word;border-left:3px solid transparent;-webkit-user-select:none;user-select:none;padding:20px 12px 20px 8px;padding:var(--sidebar-padding,20px 12px 20px 8px);font-size:14px;font-size:var(--sidebar-font-size,14px);line-height:20px;line-height:var(--sidebar-line-height,20px);color:#323233;color:var(--sidebar-text-color,#323233);background-color:#fafafa;background-color:var(--sidebar-background-color,#fafafa)}.van-sidebar-item__text{position:relative;display:inline-block}.van-sidebar-item--hover:not(.van-sidebar-item--disabled){background-color:#f2f3f5;background-color:var(--sidebar-active-color,#f2f3f5)}.van-sidebar-item:after{border-bottom-width:1px}.van-sidebar-item--selected{color:#323233;color:var(--sidebar-selected-text-color,#323233);font-weight:500;font-weight:var(--sidebar-selected-font-weight,500);border-color:#ee0a24;border-color:var(--sidebar-selected-border-color,#ee0a24)}.van-sidebar-item--selected:after{border-right-width:1px}.van-sidebar-item--selected,.van-sidebar-item--selected.van-sidebar-item--hover{background-color:#fff;background-color:var(--sidebar-selected-background-color,#fff)}.van-sidebar-item--disabled{color:#c8c9cc;color:var(--sidebar-disabled-text-color,#c8c9cc)}
|
@import '../common/index.wxss';.van-sidebar-item{display:block;box-sizing:border-box;overflow:hidden;word-wrap:break-word;border-left:3px solid transparent;-webkit-user-select:none;user-select:none;padding:20px 12px 20px 8px;padding:var(--sidebar-padding,20px 12px 20px 8px);font-size:14px;font-size:var(--sidebar-font-size,14px);line-height:20px;line-height:var(--sidebar-line-height,20px);color:#323233;color:var(--sidebar-text-color,#323233);background-color:#f7f8fa;background-color:var(--sidebar-background-color,#f7f8fa)}.van-sidebar-item__text{position:relative;display:inline-block}.van-sidebar-item--hover:not(.van-sidebar-item--disabled){background-color:#f2f3f5;background-color:var(--sidebar-active-color,#f2f3f5)}.van-sidebar-item:after{border-bottom-width:1px}.van-sidebar-item--selected{color:#323233;color:var(--sidebar-selected-text-color,#323233);font-weight:500;font-weight:var(--sidebar-selected-font-weight,500);border-color:#ee0a24;border-color:var(--sidebar-selected-border-color,#ee0a24)}.van-sidebar-item--selected:after{border-right-width:1px}.van-sidebar-item--selected,.van-sidebar-item--selected.van-sidebar-item--hover{background-color:#fff;background-color:var(--sidebar-selected-background-color,#fff)}.van-sidebar-item--disabled{color:#c8c9cc;color:var(--sidebar-disabled-text-color,#c8c9cc)}
|
@ -1,3 +1,3 @@
|
|||||||
<view class="van-sidebar van-hairline--top-bottom custom-class">
|
<view class="van-sidebar custom-class">
|
||||||
<slot />
|
<slot />
|
||||||
</view>
|
</view>
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
Object.defineProperty(exports, "__esModule", { value: true });
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
var component_1 = require("../common/component");
|
var component_1 = require("../common/component");
|
||||||
|
var page_scroll_1 = require("../mixins/page-scroll");
|
||||||
var ROOT_ELEMENT = '.van-sticky';
|
var ROOT_ELEMENT = '.van-sticky';
|
||||||
component_1.VantComponent({
|
component_1.VantComponent({
|
||||||
props: {
|
props: {
|
||||||
@ -11,131 +12,96 @@ component_1.VantComponent({
|
|||||||
offsetTop: {
|
offsetTop: {
|
||||||
type: Number,
|
type: Number,
|
||||||
value: 0,
|
value: 0,
|
||||||
observer: 'observeContent'
|
observer: 'onScroll'
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
observer: function (value) {
|
observer: 'onScroll'
|
||||||
if (!this.mounted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
value ? this.disconnectObserver() : this.initObserver();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
type: null,
|
type: null,
|
||||||
observer: function (target) {
|
observer: 'onScroll'
|
||||||
if (typeof target !== 'function' || !this.data.height) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.observeContainer();
|
|
||||||
this.updateFixed();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mixins: [
|
||||||
|
page_scroll_1.pageScrollMixin(function (event) {
|
||||||
|
this.onScroll(event);
|
||||||
|
})
|
||||||
|
],
|
||||||
data: {
|
data: {
|
||||||
height: 0,
|
height: 0,
|
||||||
fixed: false
|
fixed: false,
|
||||||
|
transform: 0
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.onScroll();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onScroll: function (_a) {
|
||||||
|
var _this = this;
|
||||||
|
var scrollTop = (_a === void 0 ? {} : _a).scrollTop;
|
||||||
|
var _b = this.data, container = _b.container, offsetTop = _b.offsetTop, disabled = _b.disabled;
|
||||||
|
if (disabled) {
|
||||||
|
this.setDataAfterDiff({
|
||||||
|
fixed: false,
|
||||||
|
transform: 0
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.scrollTop = scrollTop || this.scrollTop;
|
||||||
|
if (typeof container === 'function') {
|
||||||
|
Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then(function (_a) {
|
||||||
|
var root = _a[0], container = _a[1];
|
||||||
|
if (offsetTop + root.height > container.height + container.top) {
|
||||||
|
_this.setDataAfterDiff({
|
||||||
|
fixed: false,
|
||||||
|
transform: container.height - root.height
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (offsetTop >= root.top) {
|
||||||
|
_this.setDataAfterDiff({
|
||||||
|
fixed: true,
|
||||||
|
height: root.height,
|
||||||
|
transform: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
_this.setDataAfterDiff({ fixed: false, transform: 0 });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.getRect(ROOT_ELEMENT).then(function (root) {
|
||||||
|
if (offsetTop >= root.top) {
|
||||||
|
_this.setDataAfterDiff({ fixed: true, height: root.height });
|
||||||
|
_this.transform = 0;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
_this.setDataAfterDiff({ fixed: false });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setDataAfterDiff: function (data) {
|
||||||
|
var _this = this;
|
||||||
|
wx.nextTick(function () {
|
||||||
|
var diff = Object.keys(data).reduce(function (prev, key) {
|
||||||
|
if (data[key] !== _this.data[key]) {
|
||||||
|
prev[key] = data[key];
|
||||||
|
}
|
||||||
|
return prev;
|
||||||
|
}, {});
|
||||||
|
_this.setData(diff);
|
||||||
|
_this.$emit('scroll', {
|
||||||
|
scrollTop: _this.scrollTop,
|
||||||
|
isFixed: data.fixed || _this.data.fixed
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
getContainerRect: function () {
|
getContainerRect: function () {
|
||||||
var nodesRef = this.data.container();
|
var nodesRef = this.data.container();
|
||||||
return new Promise(function (resolve) {
|
return new Promise(function (resolve) {
|
||||||
return nodesRef.boundingClientRect(resolve).exec();
|
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateFixed: function () {
|
|
||||||
var _this = this;
|
|
||||||
Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then(function (_a) {
|
|
||||||
var content = _a[0], container = _a[1];
|
|
||||||
_this.setData({ height: content.height });
|
|
||||||
_this.containerHeight = container.height;
|
|
||||||
wx.nextTick(function () {
|
|
||||||
_this.setFixed(content.top);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
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;
|
|
||||||
this.disconnectObserver('contentObserver');
|
|
||||||
var contentObserver = this.createIntersectionObserver({
|
|
||||||
thresholds: [0.9, 1]
|
|
||||||
});
|
|
||||||
contentObserver.relativeToViewport({ top: -offsetTop });
|
|
||||||
contentObserver.observe(ROOT_ELEMENT, function (res) {
|
|
||||||
if (_this.data.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
_this.setFixed(res.boundingClientRect.top);
|
|
||||||
});
|
|
||||||
this.contentObserver = contentObserver;
|
|
||||||
},
|
|
||||||
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.9, 1]
|
|
||||||
});
|
|
||||||
_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 _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 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
this.mounted = true;
|
|
||||||
if (!this.data.disabled) {
|
|
||||||
this.initObserver();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroyed: function () {
|
|
||||||
this.disconnectObserver();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<wxs src="./index.wxs" module="computed" />
|
<wxs src="./index.wxs" module="computed" />
|
||||||
|
|
||||||
<view class="custom-class van-sticky" style="{{ computed.containerStyle({ fixed, height, zIndex }) }}">
|
<view class="custom-class van-sticky" style="{{ computed.containerStyle({ fixed, height, zIndex }) }}">
|
||||||
<view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ computed.wrapStyle({ fixed, offsetTop }) }}">
|
<view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ computed.wrapStyle({ fixed, offsetTop, transform, zIndex }) }}">
|
||||||
<slot />
|
<slot />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
@ -1,18 +1,34 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
function wrapStyle(data) {
|
function wrapStyle(data) {
|
||||||
if (data.fixed) {
|
var style = '';
|
||||||
return 'top: ' + data.offsetTop + 'px;';
|
|
||||||
|
if (data.transform) {
|
||||||
|
style += 'transform: translate3d(0, ' + data.transform + 'px, 0);';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '';
|
if (data.fixed) {
|
||||||
|
style += 'top: ' + data.offsetTop + 'px;';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.zIndex) {
|
||||||
|
style += 'z-index: ' + data.zIndex + ';';
|
||||||
|
}
|
||||||
|
|
||||||
|
return style;
|
||||||
}
|
}
|
||||||
|
|
||||||
function containerStyle(data) {
|
function containerStyle(data) {
|
||||||
|
var style = '';
|
||||||
|
|
||||||
if (data.fixed) {
|
if (data.fixed) {
|
||||||
return 'height: ' + data.height + 'px; z-index: ' + data.zIndex + ';';
|
style += 'height: ' + data.height + 'px;';
|
||||||
}
|
}
|
||||||
|
|
||||||
return '';
|
if (data.zIndex) {
|
||||||
|
style += 'z-index: ' + data.zIndex + ';';
|
||||||
|
}
|
||||||
|
|
||||||
|
return style;
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
class="{{ utils.bem('tabs__scroll', [type]) }}"
|
class="{{ utils.bem('tabs__scroll', [type]) }}"
|
||||||
style="{{ color ? 'border-color: ' + color : '' }}"
|
style="{{ color ? 'border-color: ' + color : '' }}"
|
||||||
>
|
>
|
||||||
<view class="{{ utils.bem('tabs__nav', [type]) }} nav-class">
|
<view class="{{ utils.bem('tabs__nav', [type]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
|
||||||
<view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
|
<view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
|
||||||
<view
|
<view
|
||||||
wx:for="{{ tabs }}"
|
wx:for="{{ tabs }}"
|
||||||
|
@ -51,6 +51,15 @@ function tabStyle(
|
|||||||
return styles.join(';');
|
return styles.join(';');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function tabCardTypeBorderStyle(color, type) {
|
||||||
|
var isCard = type === 'card';
|
||||||
|
var styles = [];
|
||||||
|
if (isCard && color) {
|
||||||
|
styles.push('border-color:' + color);
|
||||||
|
}
|
||||||
|
return styles.join(';');
|
||||||
|
}
|
||||||
|
|
||||||
function trackStyle(data) {
|
function trackStyle(data) {
|
||||||
if (!data.animated) {
|
if (!data.animated) {
|
||||||
return '';
|
return '';
|
||||||
@ -66,3 +75,4 @@ function trackStyle(data) {
|
|||||||
module.exports.tabClass = tabClass;
|
module.exports.tabClass = tabClass;
|
||||||
module.exports.tabStyle = tabStyle;
|
module.exports.tabStyle = tabStyle;
|
||||||
module.exports.trackStyle = trackStyle;
|
module.exports.trackStyle = trackStyle;
|
||||||
|
module.exports.tabCardTypeBorderStyle = tabCardTypeBorderStyle;
|
||||||
|
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-tree-select{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none;font-size:14px;font-size:var(--tree-select-font-size,14px)}.van-tree-select__nav{-webkit-flex:1;flex:1;background-color:#fafafa;background-color:var(--tree-select-nav-background-color,#fafafa);--sidebar-padding:12px 8px 12px 12px}.van-tree-select__nav__inner{width:100%!important;height:100%}.van-tree-select__content{-webkit-flex:2;flex:2;background-color:#fff;background-color:var(--tree-select-content-background-color,#fff)}.van-tree-select__item{position:relative;font-weight:700;padding:0 32px 0 16px;padding:0 32px 0 var(--padding-md,16px);line-height:44px;line-height:var(--tree-select-item-height,44px)}.van-tree-select__item--active{color:#ee0a24;color:var(--tree-select-item-active-color,#ee0a24)}.van-tree-select__item--disabled{color:#c8c9cc;color:var(--tree-select-item-disabled-color,#c8c9cc)}.van-tree-select__selected{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:16px;right:var(--padding-md,16px)}
|
@import '../common/index.wxss';.van-tree-select{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none;font-size:14px;font-size:var(--tree-select-font-size,14px)}.van-tree-select__nav{-webkit-flex:1;flex:1;background-color:#f7f8fa;background-color:var(--tree-select-nav-background-color,#f7f8fa);--sidebar-padding:12px 8px 12px 12px}.van-tree-select__nav__inner{width:100%!important;height:100%}.van-tree-select__content{-webkit-flex:2;flex:2;background-color:#fff;background-color:var(--tree-select-content-background-color,#fff)}.van-tree-select__item{position:relative;font-weight:700;padding:0 32px 0 16px;padding:0 32px 0 var(--padding-md,16px);line-height:44px;line-height:var(--tree-select-item-height,44px)}.van-tree-select__item--active{color:#ee0a24;color:var(--tree-select-item-active-color,#ee0a24)}.van-tree-select__item--disabled{color:#c8c9cc;color:var(--tree-select-item-disabled-color,#c8c9cc)}.van-tree-select__selected{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:16px;right:var(--padding-md,16px)}
|
@ -1,6 +1,7 @@
|
|||||||
{
|
{
|
||||||
"component": true,
|
"component": true,
|
||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"van-icon": "../icon/index"
|
"van-icon": "../icon/index",
|
||||||
|
"van-loading": "../loading/index"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -27,6 +27,14 @@
|
|||||||
<van-icon name="description" class="van-uploader__file-icon" />
|
<van-icon name="description" class="van-uploader__file-icon" />
|
||||||
<view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
|
<view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view
|
||||||
|
wx:if="{{ item.status === 'uploading' || item.status === 'failed' }}"
|
||||||
|
class="van-uploader__mask"
|
||||||
|
>
|
||||||
|
<van-icon wx:if="{{ item.status === 'failed' }}" name="warning-o" class="van-uploader__mask-icon" />
|
||||||
|
<van-loading wx:else class="van-uploader__loading" />
|
||||||
|
<text wx:if="{{ item.message }}" class="van-uploader__upload-text">{{ item.message }}</text>
|
||||||
|
</view>
|
||||||
<van-icon
|
<van-icon
|
||||||
wx:if="{{ deletable }}"
|
wx:if="{{ deletable }}"
|
||||||
name="clear"
|
name="clear"
|
||||||
|
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__slot:empty{display:none}.van-uploader__slot:not(:empty)+.van-uploader__upload{display:none!important}.van-uploader__upload{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;height:80px;margin:0 8px 8px 0;background-color:#f7f8fa;border-radius:8px}.van-uploader__upload:active{background-color:#f2f3f5}.van-uploader__upload-icon{color:#dcdee0;font-size:24px}.van-uploader__upload-text{margin-top:8px;color:#969799;font-size:12px}.van-uploader__upload--disabled{opacity:.5;opacity:var(--uploader-disabled-opacity,.5)}.van-uploader__preview{position:relative;margin:0 8px 8px 0;cursor:pointer}.van-uploader__preview-image{display:block;width:80px;height:80px;overflow:hidden;border-radius:8px}.van-uploader__preview-delete{position:absolute;top:-8px;right:-8px;color:#969799;font-size:18px;background-color:#fff;border-radius:100%}.van-uploader__file{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;height:80px;background-color:#f7f8fa;border-radius:8px}.van-uploader__file-icon{color:#646566;font-size:20px}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:8px;padding:0 4px;color:#646566;font-size:12px;text-align:center}
|
@import '../common/index.wxss';.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__slot:empty{display:none}.van-uploader__slot:not(:empty)+.van-uploader__upload{display:none!important}.van-uploader__upload{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;height:80px;margin:0 8px 8px 0;background-color:#f7f8fa;border-radius:8px}.van-uploader__upload:active{background-color:#f2f3f5}.van-uploader__upload-icon{color:#dcdee0;font-size:24px}.van-uploader__upload-text{margin-top:8px;color:#969799;font-size:12px}.van-uploader__upload--disabled{opacity:.5;opacity:var(--uploader-disabled-opacity,.5)}.van-uploader__preview{position:relative;margin:0 8px 8px 0;cursor:pointer}.van-uploader__preview-image{display:block;width:80px;height:80px;overflow:hidden;border-radius:8px}.van-uploader__preview-delete{position:absolute;top:-8px;right:-8px;color:#969799;font-size:18px;background-color:#fff;border-radius:100%}.van-uploader__file{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;height:80px;background-color:#f7f8fa;border-radius:8px}.van-uploader__file-icon{color:#646566;font-size:20px}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:8px;padding:0 4px;color:#646566;font-size:12px;text-align:center}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#fff;background-color:rgba(50,50,51,.88);border-radius:8px}.van-uploader__mask-icon{font-size:22px}.van-uploader__mask-message{margin-top:6px;padding:0 4px;font-size:12px;line-height:14px}.van-uploader__loading{width:22px;height:22px;color:#fff}
|
Loading…
x
Reference in New Issue
Block a user