Commit 2c276421 authored by 吴颖's avatar 吴颖

'首页现有接口对接'

parent 28b06958
...@@ -241,3 +241,14 @@ view { ...@@ -241,3 +241,14 @@ view {
-o-flex-wrap: wrap; -o-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
} }
/* 空元素样式 */
.empty {
padding: 50rpx 0 !important;
}
.van-empty__description {
margin-top: 32rpx !important;
font-size: 24rpx !important;
color: #B3B3B3 !important;
}
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
import { button } from '../mixins/button'; Object.defineProperty(exports, '__esModule', { value: true });
import { openType } from '../mixins/open-type'; var component_1 = require('../common/component');
VantComponent({ var button_1 = require('../mixins/button');
mixins: [button, openType], var open_type_1 = require('../mixins/open-type');
props: { component_1.VantComponent({
show: Boolean, mixins: [button_1.button, open_type_1.openType],
title: String, props: {
cancelText: String, show: Boolean,
description: String, title: String,
round: { cancelText: String,
type: Boolean, description: String,
value: true round: {
}, type: Boolean,
zIndex: { value: true,
type: Number, },
value: 100 zIndex: {
}, type: Number,
actions: { value: 100,
type: Array, },
value: [] actions: {
}, type: Array,
overlay: { value: [],
type: Boolean, },
value: true overlay: {
}, type: Boolean,
closeOnClickOverlay: { value: true,
type: Boolean, },
value: true closeOnClickOverlay: {
}, type: Boolean,
closeOnClickAction: { value: true,
type: Boolean, },
value: true closeOnClickAction: {
}, type: Boolean,
safeAreaInsetBottom: { value: true,
type: Boolean,
value: true
}
}, },
methods: { safeAreaInsetBottom: {
onSelect(event) { type: Boolean,
const { index } = event.currentTarget.dataset; value: true,
const item = this.data.actions[index]; },
if (item && !item.disabled && !item.loading) { },
this.$emit('select', item); methods: {
if (this.data.closeOnClickAction) { onSelect: function (event) {
this.onClose(); var index = event.currentTarget.dataset.index;
} var item = this.data.actions[index];
} if (item && !item.disabled && !item.loading) {
}, this.$emit('select', item);
onCancel() { if (this.data.closeOnClickAction) {
this.$emit('cancel'); this.onClose();
},
onClose() {
this.$emit('close');
},
onClickOverlay() {
this.$emit('click-overlay');
this.onClose();
} }
} }
},
onCancel: function () {
this.$emit('cancel');
},
onClose: function () {
this.$emit('close');
},
onClickOverlay: function () {
this.$emit('click-overlay');
this.onClose();
},
},
}); });
'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 });
var component_1 = require('../common/component');
var shared_1 = require('../picker/shared');
var utils_1 = require('../common/utils');
var COLUMNSPLACEHOLDERCODE = '000000';
component_1.VantComponent({
classes: ['active-class', 'toolbar-class', 'column-class'],
props: __assign(__assign({}, shared_1.pickerProps), {
value: {
type: String,
observer: function (value) {
this.code = value;
this.setValues();
},
},
areaList: {
type: Object,
value: {},
observer: 'setValues',
},
columnsNum: {
type: null,
value: 3,
observer: function (value) {
this.setData({
displayColumns: this.data.columns.slice(0, +value),
});
},
},
columnsPlaceholder: {
type: Array,
observer: function (val) {
this.setData({
typeToColumnsPlaceholder: {
province: val[0] || '',
city: val[1] || '',
county: val[2] || '',
},
});
},
},
}),
data: {
columns: [{ values: [] }, { values: [] }, { values: [] }],
displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
typeToColumnsPlaceholder: {},
},
mounted: function () {
var _this = this;
utils_1.requestAnimationFrame(function () {
_this.setValues();
});
},
methods: {
getPicker: function () {
if (this.picker == null) {
this.picker = this.selectComponent('.van-area__picker');
}
return this.picker;
},
onCancel: function (event) {
this.emit('cancel', event.detail);
},
onConfirm: function (event) {
var index = event.detail.index;
var value = event.detail.value;
value = this.parseOutputValues(value);
this.emit('confirm', { value: value, index: index });
},
emit: function (type, detail) {
detail.values = detail.value;
delete detail.value;
this.$emit(type, detail);
},
// parse output columns data
parseOutputValues: function (values) {
var columnsPlaceholder = this.data.columnsPlaceholder;
return values.map(function (value, index) {
// save undefined value
if (!value) return value;
value = JSON.parse(JSON.stringify(value));
if (!value.code || value.name === columnsPlaceholder[index]) {
value.code = '';
value.name = '';
}
return value;
});
},
onChange: function (event) {
var _this = this;
var _a = event.detail,
index = _a.index,
picker = _a.picker,
value = _a.value;
this.code = value[index].code;
this.setValues().then(function () {
_this.$emit('change', {
picker: picker,
values: _this.parseOutputValues(picker.getValues()),
index: index,
});
});
},
getConfig: function (type) {
var areaList = this.data.areaList;
return (areaList && areaList[type + '_list']) || {};
},
getList: function (type, code) {
var typeToColumnsPlaceholder = this.data.typeToColumnsPlaceholder;
var result = [];
if (type !== 'province' && !code) {
return result;
}
var list = this.getConfig(type);
result = Object.keys(list).map(function (code) {
return {
code: code,
name: list[code],
};
});
if (code) {
// oversea code
if (code[0] === '9' && type === 'city') {
code = '9';
}
result = result.filter(function (item) {
return item.code.indexOf(code) === 0;
});
}
if (typeToColumnsPlaceholder[type] && result.length) {
// set columns placeholder
var codeFill =
type === 'province'
? ''
: type === 'city'
? COLUMNSPLACEHOLDERCODE.slice(2, 4)
: COLUMNSPLACEHOLDERCODE.slice(4, 6);
result.unshift({
code: '' + code + codeFill,
name: typeToColumnsPlaceholder[type],
});
}
return result;
},
getIndex: function (type, code) {
var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
var list = this.getList(type, code.slice(0, compareNum - 2));
// oversea code
if (code[0] === '9' && type === 'province') {
compareNum = 1;
}
code = code.slice(0, compareNum);
for (var i = 0; i < list.length; i++) {
if (list[i].code.slice(0, compareNum) === code) {
return i;
}
}
return 0;
},
setValues: function () {
var county = this.getConfig('county');
var code = this.code;
if (!code) {
if (this.data.columnsPlaceholder.length) {
code = COLUMNSPLACEHOLDERCODE;
} else if (Object.keys(county)[0]) {
code = Object.keys(county)[0];
} else {
code = '';
}
}
var province = this.getList('province');
var city = this.getList('city', code.slice(0, 2));
var picker = this.getPicker();
if (!picker) {
return;
}
var stack = [];
var indexes = [];
var columnsNum = this.data.columnsNum;
if (columnsNum >= 1) {
stack.push(picker.setColumnValues(0, province, false));
indexes.push(this.getIndex('province', code));
}
if (columnsNum >= 2) {
stack.push(picker.setColumnValues(1, city, false));
indexes.push(this.getIndex('city', code));
if (city.length && code.slice(2, 4) === '00') {
code = city[0].code;
}
}
if (columnsNum === 3) {
stack.push(
picker.setColumnValues(
2,
this.getList('county', code.slice(0, 4)),
false
)
);
indexes.push(this.getIndex('county', code));
}
return Promise.all(stack)
.catch(function () {})
.then(function () {
return picker.setIndexes(indexes);
})
.catch(function () {});
},
getValues: function () {
var picker = this.getPicker();
return picker
? picker.getValues().filter(function (value) {
return !!value;
})
: [];
},
getDetail: function () {
var values = this.getValues();
var area = {
code: '',
country: '',
province: '',
city: '',
county: '',
};
if (!values.length) {
return area;
}
var names = values.map(function (item) {
return item.name;
});
area.code = values[values.length - 1].code;
if (area.code[0] === '9') {
area.country = names[1] || '';
area.province = names[2] || '';
} else {
area.province = names[0] || '';
area.city = names[1] || '';
area.county = names[2] || '';
}
return area;
},
reset: function (code) {
this.code = code || '';
return this.setValues();
},
},
});
{
"component": true,
"usingComponents": {
"van-picker": "../picker/index"
}
}
<van-picker
class="van-area__picker"
active-class="active-class"
toolbar-class="toolbar-class"
column-class="column-class"
show-toolbar
value-key="name"
title="{{ title }}"
loading="{{ loading }}"
columns="{{ displayColumns }}"
item-height="{{ itemHeight }}"
visible-item-count="{{ visibleItemCount }}"
cancel-button-text="{{ cancelButtonText }}"
confirm-button-text="{{ confirmButtonText }}"
bind:change="onChange"
bind:confirm="onConfirm"
bind:cancel="onCancel"
/>
@import '../common/index.wxss';
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var button_1 = require('../mixins/button');
var open_type_1 = require('../mixins/open-type');
var version_1 = require('../common/version');
var mixins = [button_1.button, open_type_1.openType];
if (version_1.canIUseFormFieldButton()) {
mixins.push('wx://form-field-button');
}
component_1.VantComponent({
mixins: mixins,
classes: ['hover-class', 'loading-class'],
data: {
baseStyle: '',
},
props: {
formType: String,
icon: String,
classPrefix: {
type: String,
value: 'van-icon',
},
plain: Boolean,
block: Boolean,
round: Boolean,
square: Boolean,
loading: Boolean,
hairline: Boolean,
disabled: Boolean,
loadingText: String,
customStyle: String,
loadingType: {
type: String,
value: 'circular',
},
type: {
type: String,
value: 'default',
},
dataset: null,
size: {
type: String,
value: 'normal',
},
loadingSize: {
type: String,
value: '20px',
},
color: {
type: String,
observer: function (color) {
var style = '';
if (color) {
style += 'color: ' + (this.data.plain ? color : 'white') + ';';
if (!this.data.plain) {
// Use background instead of backgroundColor to make linear-gradient work
style += 'background: ' + color + ';';
}
// hide border when color is linear-gradient
if (color.indexOf('gradient') !== -1) {
style += 'border: 0;';
} else {
style += 'border-color: ' + color + ';';
}
}
if (style !== this.data.baseStyle) {
this.setData({ baseStyle: style });
}
},
},
},
methods: {
onClick: function () {
if (!this.data.loading) {
this.$emit('click');
}
},
noop: function () {},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index",
"van-loading": "../loading/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<button
id="{{ id }}"
data-detail="{{ dataset }}"
class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
hover-class="van-button--active hover-class"
lang="{{ lang }}"
form-type="{{ formType }}"
style="{{ baseStyle }} {{ customStyle }}"
open-type="{{ disabled ? '' : openType }}"
business-id="{{ businessId }}"
session-from="{{ sessionFrom }}"
send-message-title="{{ sendMessageTitle }}"
send-message-path="{{ sendMessagePath }}"
send-message-img="{{ sendMessageImg }}"
show-message-card="{{ showMessageCard }}"
app-parameter="{{ appParameter }}"
aria-label="{{ ariaLabel }}"
bindtap="{{ !disabled ? 'onClick' : 'noop' }}"
bindgetuserinfo="bindGetUserInfo"
bindcontact="bindContact"
bindgetphonenumber="bindGetPhoneNumber"
binderror="bindError"
bindlaunchapp="bindLaunchApp"
bindopensetting="bindOpenSetting"
>
<block wx:if="{{ loading }}">
<van-loading
custom-class="loading-class"
size="{{ loadingSize }}"
type="{{ loadingType }}"
color="{{ loadingColor(type,color,plain) }}"
/>
<view wx:if="{{ loadingText }}" class="van-button__loading-text">
{{ loadingText }}
</view>
</block>
<block wx:else>
<van-icon
wx:if="{{ icon }}"
size="1.2em"
name="{{ icon }}"
class-prefix="{{ classPrefix }}"
class="van-button__icon"
custom-style="line-height: inherit;"
/>
<view class="van-button__text">
<slot />
</view>
</block>
</button>
<wxs module="loadingColor">
function get(type, color,plain) {
if(plain) {
return color ? color: '#c9c9c9';
}
if(type === 'default') {
return '#c9c9c9';
}
return 'white';
}
module.exports = get;
</wxs>
@import '../common/index.wxss';.van-button{position:relative;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;padding:0;text-align:center;vertical-align:middle;-webkit-appearance:none;-webkit-text-size-adjust:100%;height:44px;height:var(--button-default-height,44px);line-height:20px;line-height:var(--button-line-height,20px);font-size:16px;font-size:var(--button-default-font-size,16px);transition:opacity .2s;transition:opacity var(--animation-duration-fast,.2s);border-radius:2px;border-radius:var(--button-border-radius,2px)}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:" ";background-color:#000;background-color:var(--black,#000);border-color:#000;border-color:var(--black,#000)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#323233;color:var(--button-default-color,#323233);background:#fff;background:var(--button-default-background-color,#fff);border:1px solid #ebedf0;border:var(--button-border-width,1px) solid var(--button-default-border-color,#ebedf0)}.van-button--primary{color:#fff;color:var(--button-primary-color,#fff);background:#07c160;background:var(--button-primary-background-color,#07c160);border:1px solid #07c160;border:var(--button-border-width,1px) solid var(--button-primary-border-color,#07c160)}.van-button--info{color:#fff;color:var(--button-info-color,#fff);background:#1989fa;background:var(--button-info-background-color,#1989fa);border:1px solid #1989fa;border:var(--button-border-width,1px) solid var(--button-info-border-color,#1989fa)}.van-button--danger{color:#fff;color:var(--button-danger-color,#fff);background:#ee0a24;background:var(--button-danger-background-color,#ee0a24);border:1px solid #ee0a24;border:var(--button-border-width,1px) solid var(--button-danger-border-color,#ee0a24)}.van-button--warning{color:#fff;color:var(--button-warning-color,#fff);background:#ff976a;background:var(--button-warning-background-color,#ff976a);border:1px solid #ff976a;border:var(--button-border-width,1px) solid var(--button-warning-border-color,#ff976a)}.van-button--plain{background:#fff;background:var(--button-plain-background-color,#fff)}.van-button--plain.van-button--primary{color:#07c160;color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:#1989fa;color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:#ee0a24;color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:#ff976a;color:var(--button-warning-background-color,#ff976a)}.van-button--large{width:100%;height:50px;height:var(--button-large-height,50px)}.van-button--normal{padding:0 15px;font-size:14px;font-size:var(--button-normal-font-size,14px)}.van-button--small{min-width:60px;min-width:var(--button-small-min-width,60px);height:30px;height:var(--button-small-height,30px);padding:0 8px;padding:0 var(--padding-xs,8px);font-size:12px;font-size:var(--button-small-font-size,12px)}.van-button--mini{display:inline-block;min-width:50px;min-width:var(--button-mini-min-width,50px);height:22px;height:var(--button-mini-height,22px);font-size:10px;font-size:var(--button-mini-font-size,10px)}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:-webkit-flex;display:flex;width:100%}.van-button--round{border-radius:999px;border-radius:var(--button-round-border-radius,999px)}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5;opacity:var(--button-disabled-opacity,.5)}.van-button__text{display:inline}.van-button__icon+.van-button__text:not(:empty),.van-button__loading-text{margin-left:4px}.van-button__icon{min-width:1em;line-height:inherit!important;vertical-align:top}.van-button--hairline{padding-top:1px;border-width:0}.van-button--hairline:after{border-color:inherit;border-width:1px;border-radius:4px;border-radius:calc(var(--button-border-radius, 2px)*2)}.van-button--hairline.van-button--round:after{border-radius:999px;border-radius:var(--button-round-border-radius,999px)}.van-button--hairline.van-button--square:after{border-radius:0}
\ No newline at end of file
<wxs src="./index.wxs" module="computed"></wxs>
<template name="calendar">
<view class="van-calendar">
<header
title="{{ title }}"
showTitle="{{ showTitle }}"
subtitle="{{ subtitle }}"
showSubtitle="{{ showSubtitle }}"
>
<slot name="title" slot="title"></slot>
</header>
<scroll-view class="van-calendar__body" scroll-y scroll-into-view="{{ scrollIntoView }}">
<month
wx:for="{{ computed.getMonths(minDate, maxDate) }}"
wx:key="index"
id="month{{ index }}"
class="month"
data-date="{{ item }}"
date="{{ item }}"
type="{{ type }}"
color="{{ color }}"
minDate="{{ minDate }}"
maxDate="{{ maxDate }}"
showMark="{{ showMark }}"
formatter="{{ formatter }}"
rowHeight="{{ rowHeight }}"
currentDate="{{ currentDate }}"
showSubtitle="{{ showSubtitle }}"
allowSameDay="{{ allowSameDay }}"
showMonthTitle="{{ index !== 0 || !showSubtitle }}"
bind:click="onClickDay"
/>
</scroll-view>
<view class="van-calendar__footer {{ safeAreaInsetBottom ? 'van-calendar__footer--safe-area-inset-bottom' : '' }}">
<slot name="footer"></slot>
</view>
<view class="van-calendar__footer {{ safeAreaInsetBottom ? 'van-calendar__footer--safe-area-inset-bottom' : '' }}">
<van-button
wx:if="{{ showConfirm }}"
round
block
type="danger"
color="{{ color }}"
custom-class="van-calendar__confirm"
disabled="{{ computed.getButtonDisabled(type, currentDate) }}"
nativeType="text"
bind:click="onConfirm"
>
{{ computed.getButtonDisabled(type, currentDate) ? confirmDisabledText : confirmText }}
</van-button>
</view>
</view>
</template>
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../../../common/component');
component_1.VantComponent({
props: {
title: {
type: String,
value: '日期选择',
},
subtitle: String,
showTitle: Boolean,
showSubtitle: Boolean,
},
data: {
weekdays: ['', '', '', '', '', '', ''],
},
methods: {},
});
<view class="van-calendar__header">
<block wx:if="{{ showTitle }}">
<view class="van-calendar__header-title"><slot name="title"></slot></view>
<view class="van-calendar__header-title">{{ title }}</view>
</block>
<view wx:if="{{ showSubtitle }}" class="van-calendar__header-subtitle">
{{ subtitle }}
</view>
<view class="van-calendar__weekdays">
<view wx:for="{{ weekdays }}" wx:key="index" class="van-calendar__weekday">
{{ item }}
</view>
</view>
</view>
@import '../../../common/index.wxss';.van-calendar__header{-webkit-flex-shrink:0;flex-shrink:0;box-shadow:0 2px 10px rgba(125,126,128,.16);box-shadow:var(--calendar-header-box-shadow,0 2px 10px rgba(125,126,128,.16))}.van-calendar__header-subtitle,.van-calendar__header-title{text-align:center;height:44px;height:var(--calendar-header-title-height,44px);font-weight:500;font-weight:var(--font-weight-bold,500);line-height:44px;line-height:var(--calendar-header-title-height,44px)}.van-calendar__header-title+.van-calendar__header-title,.van-calendar__header-title:empty{display:none}.van-calendar__header-title:empty+.van-calendar__header-title{display:block!important}.van-calendar__weekdays{display:-webkit-flex;display:flex}.van-calendar__weekday{-webkit-flex:1;flex:1;text-align:center;font-size:12px;font-size:var(--calendar-weekdays-font-size,12px);line-height:30px;line-height:var(--calendar-weekdays-height,30px)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../../../common/component');
var utils_1 = require('../../utils');
component_1.VantComponent({
props: {
date: {
type: null,
observer: 'setDays',
},
type: {
type: String,
observer: 'setDays',
},
color: String,
minDate: {
type: null,
observer: 'setDays',
},
maxDate: {
type: null,
observer: 'setDays',
},
showMark: Boolean,
rowHeight: [Number, String],
formatter: {
type: null,
observer: 'setDays',
},
currentDate: {
type: [null, Array],
observer: 'setDays',
},
allowSameDay: Boolean,
showSubtitle: Boolean,
showMonthTitle: Boolean,
},
data: {
visible: true,
days: [],
},
methods: {
onClick: function (event) {
var index = event.currentTarget.dataset.index;
var item = this.data.days[index];
if (item.type !== 'disabled') {
this.$emit('click', item);
}
},
setDays: function () {
var days = [];
var startDate = new Date(this.data.date);
var year = startDate.getFullYear();
var month = startDate.getMonth();
var totalDay = utils_1.getMonthEndDay(
startDate.getFullYear(),
startDate.getMonth() + 1
);
for (var day = 1; day <= totalDay; day++) {
var date = new Date(year, month, day);
var type = this.getDayType(date);
var config = {
date: date,
type: type,
text: day,
bottomInfo: this.getBottomInfo(type),
};
if (this.data.formatter) {
config = this.data.formatter(config);
}
days.push(config);
}
this.setData({ days: days });
},
getMultipleDayType: function (day) {
var currentDate = this.data.currentDate;
if (!Array.isArray(currentDate)) {
return '';
}
var isSelected = function (date) {
return currentDate.some(function (item) {
return utils_1.compareDay(item, date) === 0;
});
};
if (isSelected(day)) {
var prevDay = utils_1.getPrevDay(day);
var nextDay = utils_1.getNextDay(day);
var prevSelected = isSelected(prevDay);
var nextSelected = isSelected(nextDay);
if (prevSelected && nextSelected) {
return 'multiple-middle';
}
if (prevSelected) {
return 'end';
}
return nextSelected ? 'start' : 'multiple-selected';
}
return '';
},
getRangeDayType: function (day) {
var _a = this.data,
currentDate = _a.currentDate,
allowSameDay = _a.allowSameDay;
if (!Array.isArray(currentDate)) {
return;
}
var startDay = currentDate[0],
endDay = currentDate[1];
if (!startDay) {
return;
}
var compareToStart = utils_1.compareDay(day, startDay);
if (!endDay) {
return compareToStart === 0 ? 'start' : '';
}
var compareToEnd = utils_1.compareDay(day, endDay);
if (compareToStart === 0 && compareToEnd === 0 && allowSameDay) {
return 'start-end';
}
if (compareToStart === 0) {
return 'start';
}
if (compareToEnd === 0) {
return 'end';
}
if (compareToStart > 0 && compareToEnd < 0) {
return 'middle';
}
},
getDayType: function (day) {
var _a = this.data,
type = _a.type,
minDate = _a.minDate,
maxDate = _a.maxDate,
currentDate = _a.currentDate;
if (
utils_1.compareDay(day, minDate) < 0 ||
utils_1.compareDay(day, maxDate) > 0
) {
return 'disabled';
}
if (type === 'single') {
return utils_1.compareDay(day, currentDate) === 0 ? 'selected' : '';
}
if (type === 'multiple') {
return this.getMultipleDayType(day);
}
/* istanbul ignore else */
if (type === 'range') {
return this.getRangeDayType(day);
}
},
getBottomInfo: function (type) {
if (this.data.type === 'range') {
if (type === 'start') {
return '开始';
}
if (type === 'end') {
return '结束';
}
if (type === 'start-end') {
return '开始/结束';
}
}
},
},
});
<wxs src="./index.wxs" module="computed"></wxs>
<wxs src="../../../wxs/utils.wxs" module="utils" />
<view class="van-calendar__month" style="{{ computed.getMonthStyle(visible, date, rowHeight) }}">
<view wx:if="{{ showMonthTitle }}" class="van-calendar__month-title">
{{ computed.formatMonthTitle(date) }}
</view>
<view wx:if="{{ visible }}" class="van-calendar__days">
<view wx:if="{{ showMark }}" class="van-calendar__month-mark">
{{ computed.getMark(date) }}
</view>
<view
wx:for="{{ days }}"
wx:key="index"
style="{{ computed.getDayStyle(item.type, index, date, rowHeight, color) }}"
class="{{ utils.bem('calendar__day', [item.type]) }} {{ item.className }}"
data-index="{{ index }}"
bindtap="onClick"
>
<view wx:if="{{ item.type === 'selected' }}" class="van-calendar__selected-day" style="background: {{ color }}">
<view wx:if="{{ item.topInfo }}" class="van-calendar__top-info">{{ item.topInfo }}</view>
{{ item.text }}
<view wx:if="{{ item.bottomInfo }}" class="van-calendar__bottom-info">
{{ item.bottomInfo }}
</view>
</view>
<view wx:else>
<view wx:if="{{ item.topInfo }}" class="van-calendar__top-info">{{ item.topInfo }}</view>
{{ item.text }}
<view wx:if="{{ item.bottomInfo }}" class="van-calendar__bottom-info">
{{ item.bottomInfo }}
</view>
</view>
</view>
</view>
</view>
/* eslint-disable */
var utils = require('../../utils.wxs');
function getMark(date) {
return getDate(date).getMonth() + 1;
}
var ROW_HEIGHT = 64;
function getDayStyle(type, index, date, rowHeight, color) {
var style = [];
var offset = getDate(date).getDay();
if (index === 0) {
style.push(['margin-left', (100 * offset) / 7 + '%']);
}
if (rowHeight !== ROW_HEIGHT) {
style.push(['height', rowHeight + 'px']);
}
if (color) {
if (
type === 'start' ||
type === 'end' ||
type === 'multiple-selected' ||
type === 'multiple-middle'
) {
style.push(['background', color]);
} else if (type === 'middle') {
style.push(['color', color]);
}
}
return style
.map(function(item) {
return item.join(':');
})
.join(';');
}
function formatMonthTitle(date) {
date = getDate(date);
return date.getFullYear() + '年' + (date.getMonth() + 1) + '月';
}
function getMonthStyle(visible, date, rowHeight) {
if (!visible) {
date = getDate(date);
var totalDay = utils.getMonthEndDay(
date.getFullYear(),
date.getMonth() + 1
);
var offset = getDate(date).getDay();
var padding = Math.ceil((totalDay + offset) / 7) * rowHeight;
return 'padding-bottom:' + padding + 'px';
}
}
module.exports = {
getMark: getMark,
getDayStyle: getDayStyle,
formatMonthTitle: formatMonthTitle,
getMonthStyle: getMonthStyle
};
@import '../../../common/index.wxss';.van-calendar{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;height:100%;background-color:#fff;background-color:var(--calendar-background-color,#fff)}.van-calendar__month-title{text-align:center;height:44px;height:var(--calendar-header-title-height,44px);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:14px;font-size:var(--calendar-month-title-font-size,14px);line-height:44px;line-height:var(--calendar-header-title-height,44px)}.van-calendar__days{position:relative;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{position:absolute;top:50%;left:50%;z-index:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none;color:rgba(242,243,245,.8);color:var(--calendar-month-mark-color,rgba(242,243,245,.8));font-size:160px;font-size:var(--calendar-month-mark-font-size,160px)}.van-calendar__day,.van-calendar__selected-day{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;text-align:center}.van-calendar__day{position:relative;width:14.285%;height:64px;height:var(--calendar-day-height,64px);font-size:16px;font-size:var(--calendar-day-font-size,16px)}.van-calendar__day--end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected,.van-calendar__day--start,.van-calendar__day--start-end{color:#fff;color:var(--calendar-range-edge-color,#fff);background-color:#ee0a24;background-color:var(--calendar-range-edge-background-color,#ee0a24)}.van-calendar__day--start{border-radius:4px 0 0 4px;border-radius:var(--border-radius-md,4px) 0 0 var(--border-radius-md,4px)}.van-calendar__day--end{border-radius:0 4px 4px 0;border-radius:0 var(--border-radius-md,4px) var(--border-radius-md,4px) 0}.van-calendar__day--multiple-selected,.van-calendar__day--start-end{border-radius:4px;border-radius:var(--border-radius-md,4px)}.van-calendar__day--middle{color:#ee0a24;color:var(--calendar-range-middle-color,#ee0a24)}.van-calendar__day--middle:after{position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;content:"";opacity:.1;opacity:var(--calendar-range-middle-background-opacity,.1)}.van-calendar__day--disabled{cursor:default;color:#c8c9cc;color:var(--calendar-day-disabled-color,#c8c9cc)}.van-calendar__bottom-info,.van-calendar__top-info{position:absolute;right:0;left:0;font-size:10px;font-size:var(--calendar-info-font-size,10px);line-height:14px;line-height:var(--calendar-info-line-height,14px)}@media (max-width:350px){.van-calendar__bottom-info,.van-calendar__top-info{font-size:9px}}.van-calendar__top-info{top:6px}.van-calendar__bottom-info{bottom:6px}.van-calendar__selected-day{width:54px;width:var(--calendar-selected-day-size,54px);height:54px;height:var(--calendar-selected-day-size,54px);color:#fff;color:var(--calendar-selected-day-color,#fff);background-color:#ee0a24;background-color:var(--calendar-selected-day-background-color,#ee0a24);border-radius:4px;border-radius:var(--border-radius-md,4px)}
\ No newline at end of file
'use strict';
var __spreadArrays =
(this && this.__spreadArrays) ||
function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var __importDefault =
(this && this.__importDefault) ||
function (mod) {
return mod && mod.__esModule ? mod : { default: mod };
};
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var utils_1 = require('./utils');
var toast_1 = __importDefault(require('../toast/toast'));
var utils_2 = require('../common/utils');
component_1.VantComponent({
props: {
title: {
type: String,
value: '日期选择',
},
color: String,
show: {
type: Boolean,
observer: function (val) {
if (val) {
this.initRect();
this.scrollIntoView();
}
},
},
formatter: null,
confirmText: {
type: String,
value: '确定',
},
rangePrompt: String,
defaultDate: {
type: [Number, Array],
observer: function (val) {
this.setData({ currentDate: val });
this.scrollIntoView();
},
},
allowSameDay: Boolean,
confirmDisabledText: String,
type: {
type: String,
value: 'single',
observer: 'reset',
},
minDate: {
type: null,
value: Date.now(),
},
maxDate: {
type: null,
value: new Date(
new Date().getFullYear(),
new Date().getMonth() + 6,
new Date().getDate()
).getTime(),
},
position: {
type: String,
value: 'bottom',
},
rowHeight: {
type: [Number, String],
value: utils_1.ROW_HEIGHT,
},
round: {
type: Boolean,
value: true,
},
poppable: {
type: Boolean,
value: true,
},
showMark: {
type: Boolean,
value: true,
},
showTitle: {
type: Boolean,
value: true,
},
showConfirm: {
type: Boolean,
value: true,
},
showSubtitle: {
type: Boolean,
value: true,
},
safeAreaInsetBottom: {
type: Boolean,
value: true,
},
closeOnClickOverlay: {
type: Boolean,
value: true,
},
maxRange: {
type: [Number, String],
value: null,
},
},
data: {
subtitle: '',
currentDate: null,
scrollIntoView: '',
},
created: function () {
this.setData({
currentDate: this.getInitialDate(),
});
},
mounted: function () {
if (this.data.show || !this.data.poppable) {
this.initRect();
this.scrollIntoView();
}
},
methods: {
reset: function () {
this.setData({ currentDate: this.getInitialDate() });
this.scrollIntoView();
},
initRect: function () {
var _this = this;
if (this.contentObserver != null) {
this.contentObserver.disconnect();
}
var contentObserver = this.createIntersectionObserver({
thresholds: [0, 0.1, 0.9, 1],
observeAll: true,
});
this.contentObserver = contentObserver;
contentObserver.relativeTo('.van-calendar__body');
contentObserver.observe('.month', function (res) {
if (res.boundingClientRect.top <= res.relativeRect.top) {
// @ts-ignore
_this.setData({
subtitle: utils_1.formatMonthTitle(res.dataset.date),
});
}
});
},
getInitialDate: function () {
var _a = this.data,
type = _a.type,
defaultDate = _a.defaultDate,
minDate = _a.minDate;
if (type === 'range') {
var _b = defaultDate || [],
startDay = _b[0],
endDay = _b[1];
return [
startDay || minDate,
endDay || utils_1.getNextDay(new Date(minDate)).getTime(),
];
}
if (type === 'multiple') {
return defaultDate || [minDate];
}
return defaultDate || minDate;
},
scrollIntoView: function () {
var _this = this;
utils_2.requestAnimationFrame(function () {
var _a = _this.data,
currentDate = _a.currentDate,
type = _a.type,
show = _a.show,
poppable = _a.poppable,
minDate = _a.minDate,
maxDate = _a.maxDate;
var targetDate = type === 'single' ? currentDate : currentDate[0];
var displayed = show || !poppable;
if (!targetDate || !displayed) {
return;
}
var months = utils_1.getMonths(minDate, maxDate);
months.some(function (month, index) {
if (utils_1.compareMonth(month, targetDate) === 0) {
_this.setData({ scrollIntoView: 'month' + index });
return true;
}
return false;
});
});
},
onOpen: function () {
this.$emit('open');
},
onOpened: function () {
this.$emit('opened');
},
onClose: function () {
this.$emit('close');
},
onClosed: function () {
this.$emit('closed');
},
onClickDay: function (event) {
var date = event.detail.date;
var _a = this.data,
type = _a.type,
currentDate = _a.currentDate,
allowSameDay = _a.allowSameDay;
if (type === 'range') {
var startDay = currentDate[0],
endDay = currentDate[1];
if (startDay && !endDay) {
var compareToStart = utils_1.compareDay(date, startDay);
if (compareToStart === 1) {
this.select([startDay, date], true);
} else if (compareToStart === -1) {
this.select([date, null]);
} else if (allowSameDay) {
this.select([date, date]);
}
} else {
this.select([date, null]);
}
} else if (type === 'multiple') {
var selectedIndex_1;
var selected = currentDate.some(function (dateItem, index) {
var equal = utils_1.compareDay(dateItem, date) === 0;
if (equal) {
selectedIndex_1 = index;
}
return equal;
});
if (selected) {
var cancelDate = currentDate.splice(selectedIndex_1, 1);
this.setData({ currentDate: currentDate });
this.unselect(cancelDate);
} else {
this.select(__spreadArrays(currentDate, [date]));
}
} else {
this.select(date, true);
}
},
unselect: function (dateArray) {
var date = dateArray[0];
if (date) {
this.$emit('unselect', utils_1.copyDates(date));
}
},
select: function (date, complete) {
if (complete && this.data.type === 'range') {
var valid = this.checkRange(date);
if (!valid) {
// auto selected to max range if showConfirm
if (this.data.showConfirm) {
this.emit([
date[0],
utils_1.getDayByOffset(date[0], this.data.maxRange - 1),
]);
} else {
this.emit(date);
}
return;
}
}
this.emit(date);
if (complete && !this.data.showConfirm) {
this.onConfirm();
}
},
emit: function (date) {
var getTime = function (date) {
return date instanceof Date ? date.getTime() : date;
};
this.setData({
currentDate: Array.isArray(date) ? date.map(getTime) : getTime(date),
});
this.$emit('select', utils_1.copyDates(date));
},
checkRange: function (date) {
var _a = this.data,
maxRange = _a.maxRange,
rangePrompt = _a.rangePrompt;
if (maxRange && utils_1.calcDateNum(date) > maxRange) {
toast_1.default({
context: this,
message:
rangePrompt ||
'\u9009\u62E9\u5929\u6570\u4E0D\u80FD\u8D85\u8FC7 ' +
maxRange +
' \u5929',
});
return false;
}
return true;
},
onConfirm: function () {
var _this = this;
if (
this.data.type === 'range' &&
!this.checkRange(this.data.currentDate)
) {
return;
}
wx.nextTick(function () {
_this.$emit('confirm', utils_1.copyDates(_this.data.currentDate));
});
},
},
});
{
"component": true,
"usingComponents": {
"header": "./components/header/index",
"month": "./components/month/index",
"van-button": "../button/index",
"van-popup": "../popup/index",
"van-toast": "../toast/index"
}
}
<wxs src="./index.wxs" module="computed" />
<import src="./calendar.wxml" />
<van-popup
wx:if="{{ poppable }}"
custom-class="van-calendar__popup--{{ position }}"
close-icon-class="van-calendar__close-icon"
show="{{ show }}"
round="{{ round }}"
position="{{ position }}"
closeable="{{ showTitle || showSubtitle }}"
close-on-click-overlay="{{ closeOnClickOverlay }}"
bind:enter="onOpen"
bind:close="onClose"
bind:after-enter="onOpened"
bind:after-leave="onClosed"
>
<template
is="calendar"
data="{{ title, subtitle, showTitle, showSubtitle, minDate, maxDate, type, color, showMark, formatter, rowHeight, currentDate, safeAreaInsetBottom, showConfirm, confirmDisabledText, confirmText, scrollIntoView, allowSameDay }}"
/>
</van-popup>
<template
wx:else
is="calendar"
data="{{ title, subtitle, showTitle, showSubtitle, minDate, maxDate, type, color, showMark, formatter, rowHeight, currentDate, safeAreaInsetBottom, showConfirm, confirmDisabledText, confirmText, scrollIntoView, allowSameDay }}"
/>
<van-toast id="van-toast" />
/* eslint-disable */
var utils = require('./utils.wxs');
function getMonths(minDate, maxDate) {
var months = [];
var cursor = getDate(minDate);
cursor.setDate(1);
do {
months.push(cursor.getTime());
cursor.setMonth(cursor.getMonth() + 1);
} while (utils.compareMonth(cursor, getDate(maxDate)) !== 1);
return months;
}
function getButtonDisabled(type, currentDate) {
if (currentDate == null) {
return true;
}
if (type === 'range') {
return !currentDate[0] || !currentDate[1];
}
if (type === 'multiple') {
return !currentDate.length;
}
return !currentDate;
}
module.exports = {
getMonths: getMonths,
getButtonDisabled: getButtonDisabled
};
@import '../common/index.wxss';.van-calendar{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;height:100%;height:var(--calendar-height,100%);background-color:#fff;background-color:var(--calendar-background-color,#fff)}.van-calendar__close-icon{top:11px}.van-calendar__popup--bottom,.van-calendar__popup--top{height:80%;height:var(--calendar-popup-height,80%)}.van-calendar__popup--left,.van-calendar__popup--right{height:100%}.van-calendar__body{-webkit-flex:1;flex:1;overflow:auto;-webkit-overflow-scrolling:touch}.van-calendar__footer{-webkit-flex-shrink:0;flex-shrink:0;padding:0 16px;padding:0 var(--padding-md,16px)}.van-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.van-calendar__footer+.van-calendar__footer,.van-calendar__footer:empty{display:none}.van-calendar__footer:empty+.van-calendar__footer{display:block!important}.van-calendar__confirm{height:36px!important;height:var(--calendar-confirm-button-height,36px)!important;margin:7px 0!important;margin:var(--calendar-confirm-button-margin,7px 0)!important;line-height:34px!important;line-height:var(--calendar-confirm-button-line-height,34px)!important}
\ No newline at end of file
export declare const ROW_HEIGHT = 64;
export declare function formatMonthTitle(date: Date): string;
export declare function compareMonth(
date1: Date | number,
date2: Date | number
): 0 | 1 | -1;
export declare function compareDay(
day1: Date | number,
day2: Date | number
): 0 | 1 | -1;
export declare function getDayByOffset(date: Date, offset: number): Date;
export declare function getPrevDay(date: Date): Date;
export declare function getNextDay(date: Date): Date;
export declare function calcDateNum(date: [Date, Date]): number;
export declare function copyDates(dates: Date | Date[]): Date | Date[];
export declare function getMonthEndDay(year: number, month: number): number;
export declare function getMonths(minDate: number, maxDate: number): any[];
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.getMonths = exports.getMonthEndDay = exports.copyDates = exports.calcDateNum = exports.getNextDay = exports.getPrevDay = exports.getDayByOffset = exports.compareDay = exports.compareMonth = exports.formatMonthTitle = exports.ROW_HEIGHT = void 0;
exports.ROW_HEIGHT = 64;
function formatMonthTitle(date) {
if (!(date instanceof Date)) {
date = new Date(date);
}
return date.getFullYear() + '\u5E74' + (date.getMonth() + 1) + '\u6708';
}
exports.formatMonthTitle = formatMonthTitle;
function compareMonth(date1, date2) {
if (!(date1 instanceof Date)) {
date1 = new Date(date1);
}
if (!(date2 instanceof Date)) {
date2 = new Date(date2);
}
var year1 = date1.getFullYear();
var year2 = date2.getFullYear();
var month1 = date1.getMonth();
var month2 = date2.getMonth();
if (year1 === year2) {
return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
}
return year1 > year2 ? 1 : -1;
}
exports.compareMonth = compareMonth;
function compareDay(day1, day2) {
if (!(day1 instanceof Date)) {
day1 = new Date(day1);
}
if (!(day2 instanceof Date)) {
day2 = new Date(day2);
}
var compareMonthResult = compareMonth(day1, day2);
if (compareMonthResult === 0) {
var date1 = day1.getDate();
var date2 = day2.getDate();
return date1 === date2 ? 0 : date1 > date2 ? 1 : -1;
}
return compareMonthResult;
}
exports.compareDay = compareDay;
function getDayByOffset(date, offset) {
date = new Date(date);
date.setDate(date.getDate() + offset);
return date;
}
exports.getDayByOffset = getDayByOffset;
function getPrevDay(date) {
return getDayByOffset(date, -1);
}
exports.getPrevDay = getPrevDay;
function getNextDay(date) {
return getDayByOffset(date, 1);
}
exports.getNextDay = getNextDay;
function calcDateNum(date) {
var day1 = new Date(date[0]).getTime();
var day2 = new Date(date[1]).getTime();
return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
}
exports.calcDateNum = calcDateNum;
function copyDates(dates) {
if (Array.isArray(dates)) {
return dates.map(function (date) {
if (date === null) {
return date;
}
return new Date(date);
});
}
return new Date(dates);
}
exports.copyDates = copyDates;
function getMonthEndDay(year, month) {
return 32 - new Date(year, month - 1, 32).getDate();
}
exports.getMonthEndDay = getMonthEndDay;
function getMonths(minDate, maxDate) {
var months = [];
var cursor = new Date(minDate);
cursor.setDate(1);
do {
months.push(cursor.getTime());
cursor.setMonth(cursor.getMonth() + 1);
} while (compareMonth(cursor, maxDate) !== 1);
return months;
}
exports.getMonths = getMonths;
/* eslint-disable */
function getMonthEndDay(year, month) {
return 32 - getDate(year, month - 1, 32).getDate();
}
function compareMonth(date1, date2) {
date1 = getDate(date1);
date2 = getDate(date2);
var year1 = date1.getFullYear();
var year2 = date2.getFullYear();
var month1 = date1.getMonth();
var month2 = date2.getMonth();
if (year1 === year2) {
return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
}
return year1 > year2 ? 1 : -1;
}
module.exports = {
getMonthEndDay: getMonthEndDay,
compareMonth: compareMonth
};
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var link_1 = require('../mixins/link');
var component_1 = require('../common/component');
component_1.VantComponent({
classes: [
'num-class',
'desc-class',
'thumb-class',
'title-class',
'price-class',
'origin-price-class',
],
mixins: [link_1.link],
props: {
tag: String,
num: String,
desc: String,
thumb: String,
title: String,
price: {
type: String,
observer: 'updatePrice',
},
centered: Boolean,
lazyLoad: Boolean,
thumbLink: String,
originPrice: String,
thumbMode: {
type: String,
value: 'aspectFit',
},
currency: {
type: String,
value: '¥',
},
},
methods: {
updatePrice: function () {
var price = this.data.price;
var priceArr = price.toString().split('.');
this.setData({
integerStr: priceArr[0],
decimalStr: priceArr[1] ? '.' + priceArr[1] : '',
});
},
onClickThumb: function () {
this.jumpLink('thumbLink');
},
},
});
{
"component": true,
"usingComponents": {
"van-tag": "../tag/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="custom-class van-card">
<view class="{{ utils.bem('card__header', { center: centered }) }}">
<view class="van-card__thumb" bind:tap="onClickThumb">
<image
wx:if="{{ thumb }}"
src="{{ thumb }}"
mode="{{ thumbMode }}"
lazy-load="{{ lazyLoad }}"
class="van-card__img thumb-class"
/>
<slot name="thumb" />
<van-tag
wx:if="{{ tag }}"
mark
type="danger"
custom-class="van-card__tag"
>
{{ tag }}
</van-tag>
</view>
<view class="van-card__content {{ utils.bem('card__content', { center: centered }) }}">
<view>
<view wx:if="{{ title }}" class="van-card__title title-class">{{ title }}</view>
<slot wx:else name="title" />
<view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>
<slot wx:else name="desc" />
<slot name="tags" />
</view>
<view class="van-card__bottom">
<slot name="price-top" />
<view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }}<text class="van-card__price-integer">{{ integerStr }}</text><text class="van-card__price-decimal">{{ decimalStr }}</text></view>
<slot wx:else name="price" />
<view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
<view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
<slot wx:else name="num" />
<slot name="bottom" />
</view>
</view>
</view>
<view class="van-card__footer">
<slot name="footer" />
</view>
</view>
@import '../common/index.wxss';.van-card{position:relative;box-sizing:border-box;padding:8px 16px;padding:var(--card-padding,8px 16px);font-size:12px;font-size:var(--card-font-size,12px);color:#323233;color:var(--card-text-color,#323233);background-color:#fafafa;background-color:var(--card-background-color,#fafafa)}.van-card__header{display:-webkit-flex;display:flex}.van-card__header--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:relative;-webkit-flex:none;flex:none;width:88px;width:var(--card-thumb-size,88px);height:88px;height:var(--card-thumb-size,88px);margin-right:8px;margin-right:var(--padding-xs,8px)}.van-card__thumb:empty{display:none}.van-card__img{width:100%;height:100%;border-radius:8px;border-radius:var(--border-radius-lg,8px)}.van-card__content{position:relative;display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;min-width:0;min-height:88px;min-height:var(--card-thumb-size,88px)}.van-card__content--center{-webkit-justify-content:center;justify-content:center}.van-card__desc,.van-card__title{word-wrap:break-word}.van-card__title{font-weight:700;line-height:16px;line-height:var(--card-title-line-height,16px)}.van-card__desc{line-height:20px;line-height:var(--card-desc-line-height,20px);color:#646566;color:var(--card-desc-color,#646566)}.van-card__bottom{line-height:20px}.van-card__price{display:inline-block;font-weight:700;color:#ee0a24;color:var(--card-price-color,#ee0a24);font-size:12px;font-size:var(--card-price-font-size,12px)}.van-card__price-integer{font-size:16px;font-size:var(--card-price-integer-font-size,16px)}.van-card__price-decimal,.van-card__price-integer{font-family:Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif;font-family:var(--card-price-font-family,Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif)}.van-card__origin-price{display:inline-block;margin-left:5px;text-decoration:line-through;font-size:10px;font-size:var(--card-origin-price-font-size,10px);color:#646566;color:var(--card-origin-price-color,#646566)}.van-card__num{float:right}.van-card__tag{position:absolute;top:2px;left:0}.van-card__footer{-webkit-flex:none;flex:none;width:100%;text-align:right}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
props: {
title: String,
border: {
type: Boolean,
value: true,
},
},
});
<view
wx:if="{{ title }}"
class="van-cell-group__title"
>
{{ title }}
</view>
<view class="custom-class van-cell-group {{ border ? 'van-hairline--top-bottom' : '' }}">
<slot />
</view>
@import '../common/index.wxss';.van-cell-group__title{padding:16px 16px 8px;padding:var(--cell-group-title-padding,16px 16px 8px);font-size:14px;font-size:var(--cell-group-title-font-size,14px);line-height:16px;line-height:var(--cell-group-title-line-height,16px);color:#969799;color:var(--cell-group-title-color,#969799)}
\ No newline at end of file
import { link } from '../mixins/link'; 'use strict';
import { VantComponent } from '../common/component'; Object.defineProperty(exports, '__esModule', { value: true });
VantComponent({ var link_1 = require('../mixins/link');
classes: [ var component_1 = require('../common/component');
'title-class', component_1.VantComponent({
'label-class', classes: [
'value-class', 'title-class',
'right-icon-class', 'label-class',
'hover-class' 'value-class',
], 'right-icon-class',
mixins: [link], 'hover-class',
props: { ],
title: null, mixins: [link_1.link],
value: null, props: {
icon: String, title: null,
size: String, value: null,
label: String, icon: String,
center: Boolean, size: String,
isLink: Boolean, label: String,
required: Boolean, center: Boolean,
clickable: Boolean, isLink: Boolean,
titleWidth: String, required: Boolean,
customStyle: String, clickable: Boolean,
arrowDirection: String, titleWidth: String,
useLabelSlot: Boolean, customStyle: String,
border: { arrowDirection: String,
type: Boolean, useLabelSlot: Boolean,
value: true border: {
} type: Boolean,
value: true,
}, },
methods: { titleStyle: String,
onClick(event) { },
this.$emit('click', event.detail); methods: {
this.jumpLink(); onClick: function (event) {
} this.$emit('click', event.detail);
} this.jumpLink();
},
},
}); });
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
"usingComponents": { "usingComponents": {
"van-icon": "../icon/index" "van-icon": "../icon/index"
} }
} }
\ No newline at end of file
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<slot wx:else name="icon" /> <slot wx:else name="icon" />
<view <view
style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}" style="{{ (titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth + ';' : '') + titleStyle }}"
class="van-cell__title title-class" class="van-cell__title title-class"
> >
<block wx:if="{{ title }}">{{ title }}</block> <block wx:if="{{ title }}">{{ title }}</block>
......
@import '../common/index.wxss';.van-cell{position:relative;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:10px 16px;padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);font-size:14px;font-size:var(--cell-font-size,14px);line-height:24px;line-height:var(--cell-line-height,24px);color:#323233;color:var(--cell-text-color,#323233);background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:auto;right:0;bottom:0;left:16px;border-bottom:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-cell--borderless:after{display:none}.van-cell-group{background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell__label{margin-top:3px;margin-top:var(--cell-label-margin-top,3px);font-size:12px;font-size:var(--cell-label-font-size,12px);line-height:18px;line-height:var(--cell-label-line-height,18px);color:#969799;color:var(--cell-label-color,#969799)}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle;color:#969799;color:var(--cell-value-color,#969799)}.van-cell__title,.van-cell__value{-webkit-flex:1;flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:24px;height:var(--cell-line-height,24px);font-size:16px;font-size:var(--cell-icon-size,16px)}.van-cell__left-icon-wrap{margin-right:5px}.van-cell__right-icon-wrap{margin-left:5px;color:#969799;color:var(--cell-right-icon-color,#969799)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:24px;line-height:var(--cell-line-height,24px)}.van-cell--clickable.van-cell--hover{background-color:#f2f3f5;background-color:var(--cell-active-color,#f2f3f5)}.van-cell--required{overflow:visible}.van-cell--required:before{position:absolute;content:"*";left:8px;left:var(--padding-xs,8px);font-size:14px;font-size:var(--cell-font-size,14px);color:#ee0a24;color:var(--cell-required-color,#ee0a24)}.van-cell--center{-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:12px;padding-top:var(--cell-large-vertical-padding,12px);padding-bottom:12px;padding-bottom:var(--cell-large-vertical-padding,12px)}.van-cell--large .van-cell__title{font-size:16px;font-size:var(--cell-large-title-font-size,16px)}.van-cell--large .van-cell__label{font-size:14px;font-size:var(--cell-large-label-font-size,14px)} @import '../common/index.wxss';.van-cell{position:relative;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:10px 16px;padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);font-size:14px;font-size:var(--cell-font-size,14px);line-height:24px;line-height:var(--cell-line-height,24px);color:#323233;color:var(--cell-text-color,#323233);background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:16px;bottom:0;left:16px;border-bottom:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-cell--borderless:after{display:none}.van-cell-group{background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell__label{margin-top:3px;margin-top:var(--cell-label-margin-top,3px);font-size:12px;font-size:var(--cell-label-font-size,12px);line-height:18px;line-height:var(--cell-label-line-height,18px);color:#969799;color:var(--cell-label-color,#969799)}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle;color:#969799;color:var(--cell-value-color,#969799)}.van-cell__title,.van-cell__value{-webkit-flex:1;flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:24px;height:var(--cell-line-height,24px);font-size:16px;font-size:var(--cell-icon-size,16px)}.van-cell__left-icon-wrap{margin-right:5px}.van-cell__right-icon-wrap{margin-left:5px;color:#969799;color:var(--cell-right-icon-color,#969799)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:24px;line-height:var(--cell-line-height,24px)}.van-cell--clickable.van-cell--hover{background-color:#f2f3f5;background-color:var(--cell-active-color,#f2f3f5)}.van-cell--required{overflow:visible}.van-cell--required:before{position:absolute;content:"*";left:8px;left:var(--padding-xs,8px);font-size:14px;font-size:var(--cell-font-size,14px);color:#ee0a24;color:var(--cell-required-color,#ee0a24)}.van-cell--center{-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:12px;padding-top:var(--cell-large-vertical-padding,12px);padding-bottom:12px;padding-bottom:var(--cell-large-vertical-padding,12px)}.van-cell--large .van-cell__title{font-size:16px;font-size:var(--cell-large-title-font-size,16px)}.van-cell--large .van-cell__value{font-size:16px;font-size:var(--cell-large-value-font-size,16px)}.van-cell--large .van-cell__label{font-size:14px;font-size:var(--cell-large-label-font-size,14px)}
\ No newline at end of file \ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
field: true,
relation: {
name: 'checkbox',
type: 'descendant',
current: 'checkbox-group',
linked: function (target) {
this.updateChild(target);
},
},
props: {
max: Number,
value: {
type: Array,
observer: 'updateChildren',
},
disabled: {
type: Boolean,
observer: 'updateChildren',
},
},
methods: {
updateChildren: function () {
var _this = this;
(this.children || []).forEach(function (child) {
return _this.updateChild(child);
});
},
updateChild: function (child) {
var _a = this.data,
value = _a.value,
disabled = _a.disabled;
child.setData({
value: value.indexOf(child.data.name) !== -1,
parentDisabled: disabled,
});
},
},
});
@import '../common/index.wxss';
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
function emit(target, value) {
target.$emit('input', value);
target.$emit('change', value);
}
component_1.VantComponent({
field: true,
relation: {
name: 'checkbox-group',
type: 'ancestor',
current: 'checkbox',
},
classes: ['icon-class', 'label-class'],
props: {
value: Boolean,
disabled: Boolean,
useIconSlot: Boolean,
checkedColor: String,
labelPosition: String,
labelDisabled: Boolean,
shape: {
type: String,
value: 'round',
},
iconSize: {
type: null,
value: 20,
},
},
data: {
parentDisabled: false,
},
methods: {
emitChange: function (value) {
if (this.parent) {
this.setParentValue(this.parent, value);
} else {
emit(this, value);
}
},
toggle: function () {
var _a = this.data,
parentDisabled = _a.parentDisabled,
disabled = _a.disabled,
value = _a.value;
if (!disabled && !parentDisabled) {
this.emitChange(!value);
}
},
onClickLabel: function () {
var _a = this.data,
labelDisabled = _a.labelDisabled,
parentDisabled = _a.parentDisabled,
disabled = _a.disabled,
value = _a.value;
if (!disabled && !labelDisabled && !parentDisabled) {
this.emitChange(!value);
}
},
setParentValue: function (parent, value) {
var parentValue = parent.data.value.slice();
var name = this.data.name;
var max = parent.data.max;
if (value) {
if (max && parentValue.length >= max) {
return;
}
if (parentValue.indexOf(name) === -1) {
parentValue.push(name);
emit(parent, parentValue);
}
} else {
var index = parentValue.indexOf(name);
if (index !== -1) {
parentValue.splice(index, 1);
emit(parent, parentValue);
}
}
},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="computed" />
<view class="van-checkbox custom-class">
<view class="van-checkbox__icon-wrap" bindtap="toggle">
<slot wx:if="{{ useIconSlot }}" name="icon" />
<van-icon
wx:else
name="success"
size="0.8em"
class="{{ utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }]) }}"
style="{{ computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) }}"
custom-class="icon-class"
custom-style="line-height: 1.25em;"
/>
</view>
<view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}" bindtap="onClickLabel">
<slot />
</view>
</view>
/* eslint-disable */
var utils = require('../wxs/utils.wxs');
function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
var styles = [['font-size', utils.addUnit(iconSize)]];
if (checkedColor && value && !disabled && !parentDisabled) {
styles.push(['border-color', checkedColor]);
styles.push(['background-color', checkedColor]);
}
return styles
.map(function(item) {
return item.join(':');
})
.join(';');
}
module.exports = {
iconStyle: iconStyle
};
@import '../common/index.wxss';.van-checkbox{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox__icon-wrap,.van-checkbox__label{line-height:20px;line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{-webkit-flex:none;flex:none}.van-checkbox__icon{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:1em;height:1em;color:transparent;text-align:center;transition-property:color,border-color,background-color;font-size:20px;font-size:var(--checkbox-size,20px);border:1px solid #c8c9cc;border:1px solid var(--checkbox-border-color,#c8c9cc);transition-duration:.2s;transition-duration:var(--checkbox-transition-duration,.2s)}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{color:#fff;color:var(--white,#fff);background-color:#1989fa;background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:#1989fa;border-color:var(--checkbox-checked-icon-color,#1989fa)}.van-checkbox__icon--disabled{background-color:#ebedf0;background-color:var(--checkbox-disabled-background-color,#ebedf0);border-color:#c8c9cc;border-color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:#c8c9cc;color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__label{word-wrap:break-word;margin-left:10px;margin-left:var(--checkbox-label-margin,10px);color:#323233;color:var(--checkbox-label-color,#323233)}.van-checkbox__label--left{float:left;margin:0 10px 0 0;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:#c8c9cc;color:var(--checkbox-disabled-label-color,#c8c9cc)}.van-checkbox__label:empty{margin:0}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.adaptor = void 0;
function adaptor(ctx) {
// @ts-ignore
return Object.assign(ctx, {
setStrokeStyle: function (val) {
ctx.strokeStyle = val;
},
setLineWidth: function (val) {
ctx.lineWidth = val;
},
setLineCap: function (val) {
ctx.lineCap = val;
},
setFillStyle: function (val) {
ctx.fillStyle = val;
},
setFontSize: function (val) {
ctx.font = String(val);
},
setGlobalAlpha: function (val) {
ctx.globalAlpha = val;
},
setLineJoin: function (val) {
ctx.lineJoin = val;
},
setTextAlign: function (val) {
ctx.textAlign = val;
},
setMiterLimit: function (val) {
ctx.miterLimit = val;
},
setShadow: function (offsetX, offsetY, blur, color) {
ctx.shadowOffsetX = offsetX;
ctx.shadowOffsetY = offsetY;
ctx.shadowBlur = blur;
ctx.shadowColor = color;
},
setTextBaseline: function (val) {
ctx.textBaseline = val;
},
createCircularGradient: function () {},
draw: function () {},
});
}
exports.adaptor = adaptor;
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var utils_1 = require('../common/utils');
var color_1 = require('../common/color');
var canvas_1 = require('./canvas');
function format(rate) {
return Math.min(Math.max(rate, 0), 100);
}
var PERIMETER = 2 * Math.PI;
var BEGIN_ANGLE = -Math.PI / 2;
var STEP = 1;
component_1.VantComponent({
props: {
text: String,
lineCap: {
type: String,
value: 'round',
},
value: {
type: Number,
value: 0,
observer: 'reRender',
},
speed: {
type: Number,
value: 50,
},
size: {
type: Number,
value: 100,
observer: function () {
this.drawCircle(this.currentValue);
},
},
fill: String,
layerColor: {
type: String,
value: color_1.WHITE,
},
color: {
type: [String, Object],
value: color_1.BLUE,
observer: function () {
var _this = this;
this.setHoverColor().then(function () {
_this.drawCircle(_this.currentValue);
});
},
},
type: {
type: String,
value: '',
},
strokeWidth: {
type: Number,
value: 4,
},
clockwise: {
type: Boolean,
value: true,
},
},
data: {
hoverColor: color_1.BLUE,
},
methods: {
getContext: function () {
var _this = this;
var _a = this.data,
type = _a.type,
size = _a.size;
if (type === '') {
var ctx = wx.createCanvasContext('van-circle', this);
return Promise.resolve(ctx);
}
var dpr = wx.getSystemInfoSync().pixelRatio;
return new Promise(function (resolve) {
wx.createSelectorQuery()
.in(_this)
.select('#van-circle')
.node()
.exec(function (res) {
var canvas = res[0].node;
var ctx = canvas.getContext(type);
if (!_this.inited) {
_this.inited = true;
canvas.width = size * dpr;
canvas.height = size * dpr;
ctx.scale(dpr, dpr);
}
resolve(canvas_1.adaptor(ctx));
});
});
},
setHoverColor: function () {
var _this = this;
var _a = this.data,
color = _a.color,
size = _a.size;
if (utils_1.isObj(color)) {
return this.getContext().then(function (context) {
var LinearColor = context.createLinearGradient(size, 0, 0, 0);
Object.keys(color)
.sort(function (a, b) {
return parseFloat(a) - parseFloat(b);
})
.map(function (key) {
return LinearColor.addColorStop(
parseFloat(key) / 100,
color[key]
);
});
_this.hoverColor = LinearColor;
});
}
this.hoverColor = color;
return Promise.resolve();
},
presetCanvas: function (context, strokeStyle, beginAngle, endAngle, fill) {
var _a = this.data,
strokeWidth = _a.strokeWidth,
lineCap = _a.lineCap,
clockwise = _a.clockwise,
size = _a.size;
var position = size / 2;
var radius = position - strokeWidth / 2;
context.setStrokeStyle(strokeStyle);
context.setLineWidth(strokeWidth);
context.setLineCap(lineCap);
context.beginPath();
context.arc(position, position, radius, beginAngle, endAngle, !clockwise);
context.stroke();
if (fill) {
context.setFillStyle(fill);
context.fill();
}
},
renderLayerCircle: function (context) {
var _a = this.data,
layerColor = _a.layerColor,
fill = _a.fill;
this.presetCanvas(context, layerColor, 0, PERIMETER, fill);
},
renderHoverCircle: function (context, formatValue) {
var clockwise = this.data.clockwise;
// 结束角度
var progress = PERIMETER * (formatValue / 100);
var endAngle = clockwise
? BEGIN_ANGLE + progress
: 3 * Math.PI - (BEGIN_ANGLE + progress);
this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle);
},
drawCircle: function (currentValue) {
var _this = this;
var size = this.data.size;
this.getContext().then(function (context) {
context.clearRect(0, 0, size, size);
_this.renderLayerCircle(context);
var formatValue = format(currentValue);
if (formatValue !== 0) {
_this.renderHoverCircle(context, formatValue);
}
context.draw();
});
},
reRender: function () {
var _this = this;
// tofector 动画暂时没有想到好的解决方案
var _a = this.data,
value = _a.value,
speed = _a.speed;
if (speed <= 0 || speed > 1000) {
this.drawCircle(value);
return;
}
this.clearInterval();
this.currentValue = this.currentValue || 0;
this.interval = setInterval(function () {
if (_this.currentValue !== value) {
if (_this.currentValue < value) {
_this.currentValue += STEP;
} else {
_this.currentValue -= STEP;
}
_this.drawCircle(_this.currentValue);
} else {
_this.clearInterval();
}
}, 1000 / speed);
},
clearInterval: function () {
if (this.interval) {
clearInterval(this.interval);
this.interval = null;
}
},
},
mounted: function () {
var _this = this;
this.currentValue = this.data.value;
this.setHoverColor().then(function () {
_this.drawCircle(_this.currentValue);
});
},
destroyed: function () {
this.clearInterval();
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="van-circle">
<canvas class="van-circle__canvas" type="{{ type }}" style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" id="van-circle" canvas-id="van-circle"></canvas>
<view wx:if="{{ !text }}" class="van-circle__text">
<slot></slot>
</view>
<cover-view wx:else class="van-circle__text">{{ text }}</cover-view>
</view>
@import '../common/index.wxss';.van-circle{position:relative;display:inline-block;text-align:center}.van-circle__text{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#323233;color:var(--circle-text-color,#323233)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
relation: {
name: 'row',
type: 'ancestor',
current: 'col',
},
props: {
span: Number,
offset: Number,
},
data: {
viewStyle: '',
},
methods: {
setGutter: function (gutter) {
var padding = gutter / 2 + 'px';
var viewStyle = gutter
? 'padding-left: ' + padding + '; padding-right: ' + padding + ';'
: '';
if (viewStyle !== this.data.viewStyle) {
this.setData({ viewStyle: viewStyle });
}
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
style="{{ viewStyle }}"
>
<slot />
</view>
@import '../common/index.wxss';.van-col{float:left;box-sizing:border-box}.van-col--1{width:4.16666667%}.van-col--offset-1{margin-left:4.16666667%}.van-col--2{width:8.33333333%}.van-col--offset-2{margin-left:8.33333333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66666667%}.van-col--offset-4{margin-left:16.66666667%}.van-col--5{width:20.83333333%}.van-col--offset-5{margin-left:20.83333333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16666667%}.van-col--offset-7{margin-left:29.16666667%}.van-col--8{width:33.33333333%}.van-col--offset-8{margin-left:33.33333333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66666667%}.van-col--offset-10{margin-left:41.66666667%}.van-col--11{width:45.83333333%}.van-col--offset-11{margin-left:45.83333333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16666667%}.van-col--offset-13{margin-left:54.16666667%}.van-col--14{width:58.33333333%}.van-col--offset-14{margin-left:58.33333333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66666667%}.van-col--offset-16{margin-left:66.66666667%}.van-col--17{width:70.83333333%}.van-col--offset-17{margin-left:70.83333333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16666667%}.van-col--offset-19{margin-left:79.16666667%}.van-col--20{width:83.33333333%}.van-col--offset-20{margin-left:83.33333333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66666667%}.van-col--offset-22{margin-left:91.66666667%}.van-col--23{width:95.83333333%}.van-col--offset-23{margin-left:95.83333333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
classes: ['title-class', 'content-class'],
relation: {
name: 'collapse',
type: 'ancestor',
current: 'collapse-item',
},
props: {
name: null,
title: null,
value: null,
icon: String,
label: String,
disabled: Boolean,
clickable: Boolean,
border: {
type: Boolean,
value: true,
},
isLink: {
type: Boolean,
value: true,
},
},
data: {
expanded: false,
},
created: function () {
this.animation = wx.createAnimation({
duration: 0,
timingFunction: 'ease-in-out',
});
},
mounted: function () {
this.updateExpanded();
this.inited = true;
},
methods: {
updateExpanded: function () {
if (!this.parent) {
return Promise.resolve();
}
var _a = this.parent.data,
value = _a.value,
accordion = _a.accordion;
var _b = this.parent.children,
children = _b === void 0 ? [] : _b;
var name = this.data.name;
var index = children.indexOf(this);
var currentName = name == null ? index : name;
var expanded = accordion
? value === currentName
: (value || []).some(function (name) {
return name === currentName;
});
if (expanded !== this.data.expanded) {
this.updateStyle(expanded);
}
this.setData({ index: index, expanded: expanded });
},
updateStyle: function (expanded) {
var _this = this;
var inited = this.inited;
this.getRect('.van-collapse-item__content')
.then(function (rect) {
return rect.height;
})
.then(function (height) {
var animation = _this.animation;
if (expanded) {
if (height === 0) {
animation.height('auto').top(1).step();
} else {
animation
.height(height)
.top(1)
.step({
duration: inited ? 300 : 1,
})
.height('auto')
.step();
}
_this.setData({
animation: animation.export(),
});
return;
}
animation.height(height).top(0).step({ duration: 1 }).height(0).step({
duration: 300,
});
_this.setData({
animation: animation.export(),
});
});
},
onClick: function () {
if (this.data.disabled) {
return;
}
var _a = this.data,
name = _a.name,
expanded = _a.expanded;
var index = this.parent.children.indexOf(this);
var currentName = name == null ? index : name;
this.parent.switch(currentName, !expanded);
},
},
});
{
"component": true,
"usingComponents": {
"van-cell": "../cell/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="van-collapse-item custom-class {{ index !== 0 ? 'van-hairline--top' : '' }}">
<van-cell
title="{{ title }}"
title-class="title-class"
icon="{{ icon }}"
value="{{ value }}"
label="{{ label }}"
is-link="{{ isLink }}"
clickable="{{ clickable }}"
border="{{ border && expanded }}"
class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
right-icon-class="van-cell__right-icon"
custom-class="van-cell"
hover-class="van-cell--hover"
bind:click="onClick"
>
<slot
name="title"
slot="title"
/>
<slot
name="icon"
slot="icon"
/>
<slot name="value" />
<slot
name="right-icon"
slot="right-icon"
/>
</van-cell>
<view
class="{{ utils.bem('collapse-item__wrapper') }}"
style="height: 0;"
animation="{{ animation }}"
>
<view
class="van-collapse-item__content content-class"
>
<slot />
</view>
</view>
</view>
@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;transition:-webkit-transform var(--collapse-item-transition-duration,.3s);transition:transform var(--collapse-item-transition-duration,.3s);transition:transform var(--collapse-item-transition-duration,.3s),-webkit-transform var(--collapse-item-transition-duration,.3s)}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c8c9cc!important;color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important;background-color:var(--white,#fff)!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__content{padding:15px;padding:var(--collapse-item-content-padding,15px);color:#969799;color:var(--collapse-item-content-text-color,#969799);font-size:13px;font-size:var(--collapse-item-content-font-size,13px);line-height:1.5;line-height:var(--collapse-item-content-line-height,1.5);background-color:#fff;background-color:var(--collapse-item-content-background-color,#fff)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
relation: {
name: 'collapse-item',
type: 'descendant',
current: 'collapse',
},
props: {
value: {
type: null,
observer: 'updateExpanded',
},
accordion: {
type: Boolean,
observer: 'updateExpanded',
},
border: {
type: Boolean,
value: true,
},
},
methods: {
updateExpanded: function () {
this.children.forEach(function (child) {
child.updateExpanded();
});
},
switch: function (name, expanded) {
var _a = this.data,
accordion = _a.accordion,
value = _a.value;
var changeItem = name;
if (!accordion) {
name = expanded
? (value || []).concat(name)
: (value || []).filter(function (activeName) {
return activeName !== name;
});
} else {
name = expanded ? name : '';
}
if (expanded) {
this.$emit('open', changeItem);
} else {
this.$emit('close', changeItem);
}
this.$emit('change', name);
this.$emit('input', name);
},
},
});
<view class="custom-class van-collapse {{ border ? 'van-hairline--top-bottom' : '' }}">
<slot />
</view>
@import '../common/index.wxss';
\ No newline at end of file
export const RED = '#ee0a24'; 'use strict';
export const BLUE = '#1989fa'; Object.defineProperty(exports, '__esModule', { value: true });
export const WHITE = '#fff'; exports.GRAY_DARK = exports.GRAY = exports.ORANGE = exports.GREEN = exports.WHITE = exports.BLUE = exports.RED = void 0;
export const GREEN = '#07c160'; exports.RED = '#ee0a24';
export const ORANGE = '#ff976a'; exports.BLUE = '#1989fa';
export const GRAY = '#323233'; exports.WHITE = '#fff';
export const GRAY_DARK = '#969799'; exports.GREEN = '#07c160';
exports.ORANGE = '#ff976a';
exports.GRAY = '#323233';
exports.GRAY_DARK = '#969799';
import { basic } from '../mixins/basic'; 'use strict';
const relationFunctions = { Object.defineProperty(exports, '__esModule', { value: true });
ancestor: { exports.VantComponent = void 0;
linked(parent) { var basic_1 = require('../mixins/basic');
this.parent = parent; var relationFunctions = {
}, ancestor: {
unlinked() { linked: function (parent) {
this.parent = null; this.parent = parent;
},
}, },
descendant: { unlinked: function () {
linked(child) { this.parent = null;
this.children = this.children || [];
this.children.push(child);
},
unlinked(child) {
this.children = (this.children || []).filter(it => it !== child);
},
}, },
},
descendant: {
linked: function (child) {
this.children = this.children || [];
this.children.push(child);
},
unlinked: function (child) {
this.children = (this.children || []).filter(function (it) {
return it !== child;
});
},
},
}; };
function mapKeys(source, target, map) { function mapKeys(source, target, map) {
Object.keys(map).forEach(key => { Object.keys(map).forEach(function (key) {
if (source[key]) { if (source[key]) {
target[map[key]] = source[key]; target[map[key]] = source[key];
} }
}); });
} }
function makeRelation(options, vantOptions, relation) { function makeRelation(options, vantOptions, relation) {
const { type, name, linked, unlinked, linkChanged } = relation; var _a;
const { beforeCreate, destroyed } = vantOptions; var type = relation.type,
if (type === 'descendant') { name = relation.name,
options.created = function () { linked = relation.linked,
beforeCreate && beforeCreate.bind(this)(); unlinked = relation.unlinked,
this.children = this.children || []; linkChanged = relation.linkChanged;
}; var beforeCreate = vantOptions.beforeCreate,
options.detached = function () { destroyed = vantOptions.destroyed;
this.children = []; if (type === 'descendant') {
destroyed && destroyed.bind(this)(); options.created = function () {
}; beforeCreate && beforeCreate.bind(this)();
} this.children = this.children || [];
options.relations = Object.assign(options.relations || {}, { };
[`../${name}/index`]: { options.detached = function () {
type, this.children = [];
linked(node) { destroyed && destroyed.bind(this)();
relationFunctions[type].linked.bind(this)(node); };
linked && linked.bind(this)(node); }
}, options.relations = Object.assign(
linkChanged(node) { options.relations || {},
linkChanged && linkChanged.bind(this)(node); ((_a = {}),
}, (_a['../' + name + '/index'] = {
unlinked(node) { type: type,
relationFunctions[type].unlinked.bind(this)(node); linked: function (node) {
unlinked && unlinked.bind(this)(node); relationFunctions[type].linked.bind(this)(node);
}, linked && linked.bind(this)(node);
} },
}); linkChanged: function (node) {
linkChanged && linkChanged.bind(this)(node);
},
unlinked: function (node) {
relationFunctions[type].unlinked.bind(this)(node);
unlinked && unlinked.bind(this)(node);
},
}),
_a)
);
} }
function VantComponent(vantOptions = {}) { function VantComponent(vantOptions) {
const options = {}; if (vantOptions === void 0) {
mapKeys(vantOptions, options, { vantOptions = {};
data: 'data', }
props: 'properties', var options = {};
mixins: 'behaviors', mapKeys(vantOptions, options, {
methods: 'methods', data: 'data',
beforeCreate: 'created', props: 'properties',
created: 'attached', mixins: 'behaviors',
mounted: 'ready', methods: 'methods',
relations: 'relations', beforeCreate: 'created',
destroyed: 'detached', created: 'attached',
classes: 'externalClasses' mounted: 'ready',
relations: 'relations',
destroyed: 'detached',
classes: 'externalClasses',
});
var relation = vantOptions.relation;
if (relation) {
makeRelation(options, vantOptions, relation);
}
// add default externalClasses
options.externalClasses = options.externalClasses || [];
options.externalClasses.push('custom-class');
// add default behaviors
options.behaviors = options.behaviors || [];
options.behaviors.push(basic_1.basic);
// map field to form-field behavior
if (vantOptions.field) {
options.behaviors.push('wx://form-field');
}
if (options.properties) {
Object.keys(options.properties).forEach(function (name) {
if (Array.isArray(options.properties[name])) {
// miniprogram do not allow multi type
options.properties[name] = null;
}
}); });
const { relation } = vantOptions; }
if (relation) { // add default options
makeRelation(options, vantOptions, relation); options.options = {
} multipleSlots: true,
// add default externalClasses addGlobalClass: true,
options.externalClasses = options.externalClasses || []; };
options.externalClasses.push('custom-class'); Component(options);
// add default behaviors
options.behaviors = options.behaviors || [];
options.behaviors.push(basic);
// map field to form-field behavior
if (vantOptions.field) {
options.behaviors.push('wx://form-field');
}
// add default options
options.options = {
multipleSlots: true,
addGlobalClass: true
};
Component(options);
} }
export { VantComponent }; exports.VantComponent = VantComponent;
.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}.van-clearfix:after{display:table;clear:both;content:""}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #eee;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px} .van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}.van-clearfix:after{display:table;clear:both;content:""}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
\ No newline at end of file \ No newline at end of file
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #eee;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px} .van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
\ No newline at end of file \ No newline at end of file
page{font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Segoe UI,Arial,Roboto,PingFang SC,Hiragino Sans GB,Microsoft Yahei,sans-serif}
\ No newline at end of file
...@@ -4,5 +4,5 @@ export declare function isObj(x: any): boolean; ...@@ -4,5 +4,5 @@ export declare function isObj(x: any): boolean;
export declare function isNumber(value: any): boolean; export declare function isNumber(value: any): boolean;
export declare function range(num: number, min: number, max: number): number; export declare function range(num: number, min: number, max: number): number;
export declare function nextTick(fn: Function): void; export declare function nextTick(fn: Function): void;
export declare function getSystemInfoSync(): WechatMiniprogram.GetSystemInfoSuccessCallbackResult; export declare function getSystemInfoSync(): WechatMiniprogram.GetSystemInfoSyncResult;
export declare function addUnit(value?: string | number): string | undefined; export declare function addUnit(value?: string | number): string | undefined;
export function isDef(value) { 'use strict';
return value !== undefined && value !== null; Object.defineProperty(exports, '__esModule', { value: true });
} exports.requestAnimationFrame = exports.addUnit = exports.getSystemInfoSync = exports.nextTick = exports.range = exports.isNumber = exports.isObj = exports.isDef = void 0;
export function isObj(x) { function isDef(value) {
const type = typeof x; return value !== undefined && value !== null;
return x !== null && (type === 'object' || type === 'function');
}
export function isNumber(value) {
return /^\d+(\.\d+)?$/.test(value);
}
export function range(num, min, max) {
return Math.min(Math.max(num, min), max);
}
export function nextTick(fn) {
setTimeout(() => {
fn();
}, 1000 / 30);
}
let systemInfo = null;
export function getSystemInfoSync() {
if (systemInfo == null) {
systemInfo = wx.getSystemInfoSync();
}
return systemInfo;
}
export function addUnit(value) {
if (!isDef(value)) {
return undefined;
}
value = String(value);
return isNumber(value) ? `${value}px` : value;
} }
exports.isDef = isDef;
function isObj(x) {
var type = typeof x;
return x !== null && (type === 'object' || type === 'function');
}
exports.isObj = isObj;
function isNumber(value) {
return /^\d+(\.\d+)?$/.test(value);
}
exports.isNumber = isNumber;
function range(num, min, max) {
return Math.min(Math.max(num, min), max);
}
exports.range = range;
function nextTick(fn) {
setTimeout(function () {
fn();
}, 1000 / 30);
}
exports.nextTick = nextTick;
var systemInfo = null;
function getSystemInfoSync() {
if (systemInfo == null) {
systemInfo = wx.getSystemInfoSync();
}
return systemInfo;
}
exports.getSystemInfoSync = getSystemInfoSync;
function addUnit(value) {
if (!isDef(value)) {
return undefined;
}
value = String(value);
return isNumber(value) ? value + 'px' : value;
}
exports.addUnit = addUnit;
function requestAnimationFrame(cb) {
var systemInfo = getSystemInfoSync();
if (systemInfo.platform === 'devtools') {
return nextTick(cb);
}
return wx
.createSelectorQuery()
.selectViewport()
.boundingClientRect()
.exec(function () {
cb();
});
}
exports.requestAnimationFrame = requestAnimationFrame;
export declare function canIUseModel(): boolean;
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.canIUseFormFieldButton = exports.canIUseModel = void 0;
var utils_1 = require('./utils');
function compareVersion(v1, v2) {
v1 = v1.split('.');
v2 = v2.split('.');
var len = Math.max(v1.length, v2.length);
while (v1.length < len) {
v1.push('0');
}
while (v2.length < len) {
v2.push('0');
}
for (var i = 0; i < len; i++) {
var num1 = parseInt(v1[i], 10);
var num2 = parseInt(v2[i], 10);
if (num1 > num2) {
return 1;
}
if (num1 < num2) {
return -1;
}
}
return 0;
}
function canIUseModel() {
var system = utils_1.getSystemInfoSync();
return compareVersion(system.SDKVersion, '2.9.3') >= 0;
}
exports.canIUseModel = canIUseModel;
function canIUseFormFieldButton() {
var system = utils_1.getSystemInfoSync();
return compareVersion(system.SDKVersion, '2.10.3') >= 0;
}
exports.canIUseFormFieldButton = canIUseFormFieldButton;
import { VantComponent } from '../common/component'; 'use strict';
import { isSameSecond, parseFormat, parseTimeData } from './utils'; Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var utils_1 = require('./utils');
function simpleTick(fn) { function simpleTick(fn) {
return setTimeout(fn, 30); return setTimeout(fn, 30);
} }
VantComponent({ component_1.VantComponent({
props: { props: {
useSlot: Boolean, useSlot: Boolean,
millisecond: Boolean, millisecond: Boolean,
time: { time: {
type: Number, type: Number,
observer: 'reset' observer: 'reset',
}, },
format: { format: {
type: String, type: String,
value: 'HH:mm:ss' value: 'HH:mm:ss',
}, },
autoStart: { autoStart: {
type: Boolean, type: Boolean,
value: true value: true,
}
}, },
data: { },
timeData: parseTimeData(0), data: {
formattedTime: '0' timeData: utils_1.parseTimeData(0),
formattedTime: '0',
},
destroyed: function () {
clearTimeout(this.tid);
this.tid = null;
},
methods: {
// 开始
start: function () {
if (this.counting) {
return;
}
this.counting = true;
this.endTime = Date.now() + this.remain;
this.tick();
}, },
destroyed() { // 暂停
clearTimeout(this.tid); pause: function () {
this.tid = null; this.counting = false;
clearTimeout(this.tid);
}, },
methods: { // 重置
// 开始 reset: function () {
start() { this.pause();
if (this.counting) { this.remain = this.data.time;
return; this.setRemain(this.remain);
} if (this.data.autoStart) {
this.counting = true; this.start();
this.endTime = Date.now() + this.remain; }
this.tick(); },
}, tick: function () {
// 暂停 if (this.data.millisecond) {
pause() { this.microTick();
this.counting = false; } else {
clearTimeout(this.tid); this.macroTick();
}, }
// 重置 },
reset() { microTick: function () {
this.pause(); var _this = this;
this.remain = this.data.time; this.tid = simpleTick(function () {
this.setRemain(this.remain); _this.setRemain(_this.getRemain());
if (this.data.autoStart) { if (_this.remain !== 0) {
this.start(); _this.microTick();
}
},
tick() {
if (this.data.millisecond) {
this.microTick();
}
else {
this.macroTick();
}
},
microTick() {
this.tid = simpleTick(() => {
this.setRemain(this.getRemain());
if (this.remain !== 0) {
this.microTick();
}
});
},
macroTick() {
this.tid = simpleTick(() => {
const remain = this.getRemain();
if (!isSameSecond(remain, this.remain) || remain === 0) {
this.setRemain(remain);
}
if (this.remain !== 0) {
this.macroTick();
}
});
},
getRemain() {
return Math.max(this.endTime - Date.now(), 0);
},
setRemain(remain) {
this.remain = remain;
const timeData = parseTimeData(remain);
if (this.data.useSlot) {
this.$emit('change', timeData);
}
this.setData({
formattedTime: parseFormat(this.data.format, timeData)
});
if (remain === 0) {
this.pause();
this.$emit('finish');
}
} }
} });
},
macroTick: function () {
var _this = this;
this.tid = simpleTick(function () {
var remain = _this.getRemain();
if (!utils_1.isSameSecond(remain, _this.remain) || remain === 0) {
_this.setRemain(remain);
}
if (_this.remain !== 0) {
_this.macroTick();
}
});
},
getRemain: function () {
return Math.max(this.endTime - Date.now(), 0);
},
setRemain: function (remain) {
this.remain = remain;
var timeData = utils_1.parseTimeData(remain);
if (this.data.useSlot) {
this.$emit('change', timeData);
}
this.setData({
formattedTime: utils_1.parseFormat(this.data.format, timeData),
});
if (remain === 0) {
this.pause();
this.$emit('finish');
}
},
},
}); });
function padZero(num, targetLength = 2) { 'use strict';
let str = num + ''; Object.defineProperty(exports, '__esModule', { value: true });
while (str.length < targetLength) { exports.isSameSecond = exports.parseFormat = exports.parseTimeData = void 0;
str = '0' + str; function padZero(num, targetLength) {
} if (targetLength === void 0) {
return str; targetLength = 2;
}
var str = num + '';
while (str.length < targetLength) {
str = '0' + str;
}
return str;
} }
const SECOND = 1000; var SECOND = 1000;
const MINUTE = 60 * SECOND; var MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE; var HOUR = 60 * MINUTE;
const DAY = 24 * HOUR; var DAY = 24 * HOUR;
export function parseTimeData(time) { function parseTimeData(time) {
const days = Math.floor(time / DAY); var days = Math.floor(time / DAY);
const hours = Math.floor((time % DAY) / HOUR); var hours = Math.floor((time % DAY) / HOUR);
const minutes = Math.floor((time % HOUR) / MINUTE); var minutes = Math.floor((time % HOUR) / MINUTE);
const seconds = Math.floor((time % MINUTE) / SECOND); var seconds = Math.floor((time % MINUTE) / SECOND);
const milliseconds = Math.floor(time % SECOND); var milliseconds = Math.floor(time % SECOND);
return { return {
days, days: days,
hours, hours: hours,
minutes, minutes: minutes,
seconds, seconds: seconds,
milliseconds milliseconds: milliseconds,
}; };
} }
export function parseFormat(format, timeData) { exports.parseTimeData = parseTimeData;
const { days } = timeData; function parseFormat(format, timeData) {
let { hours, minutes, seconds, milliseconds } = timeData; var days = timeData.days;
if (format.indexOf('DD') === -1) { var hours = timeData.hours,
hours += days * 24; minutes = timeData.minutes,
} seconds = timeData.seconds,
else { milliseconds = timeData.milliseconds;
format = format.replace('DD', padZero(days)); if (format.indexOf('DD') === -1) {
} hours += days * 24;
if (format.indexOf('HH') === -1) { } else {
minutes += hours * 60; format = format.replace('DD', padZero(days));
} }
else { if (format.indexOf('HH') === -1) {
format = format.replace('HH', padZero(hours)); minutes += hours * 60;
} } else {
if (format.indexOf('mm') === -1) { format = format.replace('HH', padZero(hours));
seconds += minutes * 60; }
} if (format.indexOf('mm') === -1) {
else { seconds += minutes * 60;
format = format.replace('mm', padZero(minutes)); } else {
} format = format.replace('mm', padZero(minutes));
if (format.indexOf('ss') === -1) { }
milliseconds += seconds * 1000; if (format.indexOf('ss') === -1) {
} milliseconds += seconds * 1000;
else { } else {
format = format.replace('ss', padZero(seconds)); format = format.replace('ss', padZero(seconds));
} }
return format.replace('SSS', padZero(milliseconds, 3)); return format.replace('SSS', padZero(milliseconds, 3));
} }
export function isSameSecond(time1, time2) { exports.parseFormat = parseFormat;
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000); function isSameSecond(time1, time2) {
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
} }
exports.isSameSecond = isSameSecond;
'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);
};
var __spreadArrays =
(this && this.__spreadArrays) ||
function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var utils_1 = require('../common/utils');
var shared_1 = require('../picker/shared');
var currentYear = new Date().getFullYear();
function isValidDate(date) {
return utils_1.isDef(date) && !isNaN(new Date(date).getTime());
}
function range(num, min, max) {
return Math.min(Math.max(num, min), max);
}
function padZero(val) {
return ('00' + val).slice(-2);
}
function times(n, iteratee) {
var index = -1;
var result = Array(n < 0 ? 0 : n);
while (++index < n) {
result[index] = iteratee(index);
}
return result;
}
function getTrueValue(formattedValue) {
if (!formattedValue) return;
while (isNaN(parseInt(formattedValue, 10))) {
formattedValue = formattedValue.slice(1);
}
return parseInt(formattedValue, 10);
}
function getMonthEndDay(year, month) {
return 32 - new Date(year, month - 1, 32).getDate();
}
var defaultFormatter = function (_, value) {
return value;
};
component_1.VantComponent({
classes: ['active-class', 'toolbar-class', 'column-class'],
props: __assign(__assign({}, shared_1.pickerProps), {
value: {
type: null,
observer: 'updateValue',
},
filter: null,
type: {
type: String,
value: 'datetime',
observer: 'updateValue',
},
showToolbar: {
type: Boolean,
value: true,
},
formatter: {
type: null,
value: defaultFormatter,
},
minDate: {
type: Number,
value: new Date(currentYear - 10, 0, 1).getTime(),
observer: 'updateValue',
},
maxDate: {
type: Number,
value: new Date(currentYear + 10, 11, 31).getTime(),
observer: 'updateValue',
},
minHour: {
type: Number,
value: 0,
observer: 'updateValue',
},
maxHour: {
type: Number,
value: 23,
observer: 'updateValue',
},
minMinute: {
type: Number,
value: 0,
observer: 'updateValue',
},
maxMinute: {
type: Number,
value: 59,
observer: 'updateValue',
},
}),
data: {
innerValue: Date.now(),
columns: [],
},
methods: {
updateValue: function () {
var _this = this;
var data = this.data;
var val = this.correctValue(data.value);
var isEqual = val === data.innerValue;
if (!isEqual) {
this.updateColumnValue(val).then(function () {
_this.$emit('input', val);
});
} else {
this.updateColumns();
}
},
getPicker: function () {
if (this.picker == null) {
this.picker = this.selectComponent('.van-datetime-picker');
var picker_1 = this.picker;
var setColumnValues_1 = picker_1.setColumnValues;
picker_1.setColumnValues = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return setColumnValues_1.apply(
picker_1,
__spreadArrays(args, [false])
);
};
}
return this.picker;
},
updateColumns: function () {
var _a = this.data.formatter,
formatter = _a === void 0 ? defaultFormatter : _a;
var results = this.getOriginColumns().map(function (column) {
return {
values: column.values.map(function (value) {
return formatter(column.type, value);
}),
};
});
return this.set({ columns: results });
},
getOriginColumns: function () {
var filter = this.data.filter;
var results = this.getRanges().map(function (_a) {
var type = _a.type,
range = _a.range;
var values = times(range[1] - range[0] + 1, function (index) {
var value = range[0] + index;
value = type === 'year' ? '' + value : padZero(value);
return value;
});
if (filter) {
values = filter(type, values);
}
return { type: type, values: values };
});
return results;
},
getRanges: function () {
var data = this.data;
if (data.type === 'time') {
return [
{
type: 'hour',
range: [data.minHour, data.maxHour],
},
{
type: 'minute',
range: [data.minMinute, data.maxMinute],
},
];
}
var _a = this.getBoundary('max', data.innerValue),
maxYear = _a.maxYear,
maxDate = _a.maxDate,
maxMonth = _a.maxMonth,
maxHour = _a.maxHour,
maxMinute = _a.maxMinute;
var _b = this.getBoundary('min', data.innerValue),
minYear = _b.minYear,
minDate = _b.minDate,
minMonth = _b.minMonth,
minHour = _b.minHour,
minMinute = _b.minMinute;
var result = [
{
type: 'year',
range: [minYear, maxYear],
},
{
type: 'month',
range: [minMonth, maxMonth],
},
{
type: 'day',
range: [minDate, maxDate],
},
{
type: 'hour',
range: [minHour, maxHour],
},
{
type: 'minute',
range: [minMinute, maxMinute],
},
];
if (data.type === 'date') result.splice(3, 2);
if (data.type === 'year-month') result.splice(2, 3);
return result;
},
correctValue: function (value) {
var data = this.data;
// validate value
var isDateType = data.type !== 'time';
if (isDateType && !isValidDate(value)) {
value = data.minDate;
} else if (!isDateType && !value) {
var minHour = data.minHour;
value = padZero(minHour) + ':00';
}
// time type
if (!isDateType) {
var _a = value.split(':'),
hour = _a[0],
minute = _a[1];
hour = padZero(range(hour, data.minHour, data.maxHour));
minute = padZero(range(minute, data.minMinute, data.maxMinute));
return hour + ':' + minute;
}
// date type
value = Math.max(value, data.minDate);
value = Math.min(value, data.maxDate);
return value;
},
getBoundary: function (type, innerValue) {
var _a;
var value = new Date(innerValue);
var boundary = new Date(this.data[type + 'Date']);
var year = boundary.getFullYear();
var month = 1;
var date = 1;
var hour = 0;
var minute = 0;
if (type === 'max') {
month = 12;
date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
hour = 23;
minute = 59;
}
if (value.getFullYear() === year) {
month = boundary.getMonth() + 1;
if (value.getMonth() + 1 === month) {
date = boundary.getDate();
if (value.getDate() === date) {
hour = boundary.getHours();
if (value.getHours() === hour) {
minute = boundary.getMinutes();
}
}
}
}
return (
(_a = {}),
(_a[type + 'Year'] = year),
(_a[type + 'Month'] = month),
(_a[type + 'Date'] = date),
(_a[type + 'Hour'] = hour),
(_a[type + 'Minute'] = minute),
_a
);
},
onCancel: function () {
this.$emit('cancel');
},
onConfirm: function () {
this.$emit('confirm', this.data.innerValue);
},
onChange: function () {
var _this = this;
var data = this.data;
var value;
var picker = this.getPicker();
var originColumns = this.getOriginColumns();
if (data.type === 'time') {
var indexes = picker.getIndexes();
value =
+originColumns[0].values[indexes[0]] +
':' +
+originColumns[1].values[indexes[1]];
} else {
var indexes = picker.getIndexes();
var values = indexes.map(function (value, index) {
return originColumns[index].values[value];
});
var year = getTrueValue(values[0]);
var month = getTrueValue(values[1]);
var maxDate = getMonthEndDay(year, month);
var date = getTrueValue(values[2]);
if (data.type === 'year-month') {
date = 1;
}
date = date > maxDate ? maxDate : date;
var hour = 0;
var minute = 0;
if (data.type === 'datetime') {
hour = getTrueValue(values[3]);
minute = getTrueValue(values[4]);
}
value = new Date(year, month - 1, date, hour, minute);
}
value = this.correctValue(value);
this.updateColumnValue(value).then(function () {
_this.$emit('input', value);
_this.$emit('change', picker);
});
},
updateColumnValue: function (value) {
var _this = this;
var values = [];
var type = this.data.type;
var formatter = this.data.formatter || defaultFormatter;
var picker = this.getPicker();
if (type === 'time') {
var pair = value.split(':');
values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
} else {
var date = new Date(value);
values = [
formatter('year', '' + date.getFullYear()),
formatter('month', padZero(date.getMonth() + 1)),
];
if (type === 'date') {
values.push(formatter('day', padZero(date.getDate())));
}
if (type === 'datetime') {
values.push(
formatter('day', padZero(date.getDate())),
formatter('hour', padZero(date.getHours())),
formatter('minute', padZero(date.getMinutes()))
);
}
}
return this.set({ innerValue: value })
.then(function () {
return _this.updateColumns();
})
.then(function () {
return picker.setValues(values);
});
},
},
created: function () {
var _this = this;
var innerValue = this.correctValue(this.data.value);
this.updateColumnValue(innerValue).then(function () {
_this.$emit('input', innerValue);
});
},
});
{
"component": true,
"usingComponents": {
"van-picker": "../picker/index"
}
}
<van-picker
class="van-datetime-picker"
active-class="active-class"
toolbar-class="toolbar-class"
column-class="column-class"
title="{{ title }}"
columns="{{ columns }}"
item-height="{{ itemHeight }}"
show-toolbar="{{ showToolbar }}"
visible-item-count="{{ visibleItemCount }}"
confirm-button-text="{{ confirmButtonText }}"
cancel-button-text="{{ cancelButtonText }}"
bind:change="onChange"
bind:confirm="onConfirm"
bind:cancel="onCancel"
/>
@import '../common/index.wxss';
\ No newline at end of file
/// <reference types="miniprogram-api-typings" />
import { Weapp } from './weapp';
declare type RecordToAny<T> = {
[K in keyof T]: any;
};
export declare type CombinedComponentInstance<Data, Props, Methods> = Methods & WechatMiniprogram.Component.TrivialInstance & Weapp.FormField & {
data: Data & RecordToAny<Props>;
};
export interface VantComponentOptions<Data, Props, Methods, Instance> {
data?: Data;
field?: boolean;
classes?: string[];
mixins?: string[];
props?: Props & Weapp.PropertyOption;
relation?: Weapp.RelationOption<Instance> & {
type: 'ancestor' | 'descendant';
name: string;
current: string;
};
relations?: {
[componentName: string]: Weapp.RelationOption<Instance>;
};
methods?: Methods & Weapp.MethodOption<Instance>;
beforeCreate?: (this: Instance) => void;
created?: (this: Instance) => void;
mounted?: (this: Instance) => void;
destroyed?: (this: Instance) => void;
}
export {};
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/// <reference types="miniprogram-api-typings" />
export declare namespace Weapp {
export interface FormField {
data: {
name: string;
value: any;
};
}
interface Target {
id: string;
tagName: string;
dataset: {
[key: string]: any;
};
}
export interface Event {
/**
* 代表事件的类型。
*/
type: string;
/**
* 页面打开到触发事件所经过的毫秒数。
*/
timeStamp: number;
/**
* 触发事件的源组件。
*/
target: Target;
/**
* 事件绑定的当前组件。
*/
currentTarget: Target;
/**
* 额外的信息
*/
detail: any;
}
interface Touch {
/**
* 触摸点的标识符
*/
identifier: number;
/**
* 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
*/
pageX: number;
/**
* 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
*/
pageY: number;
/**
* 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴
*/
clientX: number;
/**
* 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴
*/
clientY: number;
}
export interface TouchEvent extends Event {
touches: Array<Touch>;
changedTouches: Array<Touch>;
}
/**
* relation定义,miniprogram-api-typings缺少this定义
*/
export interface RelationOption<Instance> {
/** 目标组件的相对关系 */
type: 'parent' | 'child' | 'ancestor' | 'descendant';
/** 关系生命周期函数,当关系被建立在页面节点树中时触发,触发时机在组件attached生命周期之后 */
linked?(this: Instance, target: WechatMiniprogram.Component.TrivialInstance): void;
/** 关系生命周期函数,当关系在页面节点树中发生改变时触发,触发时机在组件moved生命周期之后 */
linkChanged?(this: Instance, target: WechatMiniprogram.Component.TrivialInstance): void;
/** 关系生命周期函数,当关系脱离页面节点树时触发,触发时机在组件detached生命周期之后 */
unlinked?(this: Instance, target: WechatMiniprogram.Component.TrivialInstance): void;
/** 如果这一项被设置,则它表示关联的目标节点所应具有的behavior,所有拥有这一behavior的组件节点都会被关联 */
target?: string;
}
/**
* obverser定义,miniprogram-api-typings缺少this定义
*/
type Observer<Instance, T> = (this: Instance, newVal: T, oldVal: T, changedPath: Array<string | number>) => void;
/**
* methods定义,miniprogram-api-typings缺少this定义
*/
export interface MethodOption<Instance> {
[name: string]: (this: Instance, ...args: any[]) => any;
}
export interface ComputedOption<Instance> {
[name: string]: (this: Instance) => any;
}
type PropertyType = StringConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | FunctionConstructor | null;
export interface PropertyOption {
[name: string]: PropertyType | PropertyType[] | {
/** 属性类型 */
type: PropertyType | PropertyType[];
/** 属性初始值 */
value?: any;
/** 属性值被更改时的响应函数 */
observer?: string | Observer<WechatMiniprogram.Component.TrivialInstance, any>;
/** 属性的类型(可以指定多个) */
optionalTypes?: PropertyType[];
};
}
export {};
}
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/// <reference types="miniprogram-api-typings" />
declare type DialogAction = 'confirm' | 'cancel';
declare type DialogOptions = {
lang?: string;
show?: boolean;
title?: string;
width?: string | number;
zIndex?: number;
context?: WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
message?: string;
overlay?: boolean;
selector?: string;
ariaLabel?: string;
className?: string;
customStyle?: string;
transition?: string;
asyncClose?: boolean;
businessId?: number;
sessionFrom?: string;
overlayStyle?: string;
appParameter?: string;
messageAlign?: string;
sendMessageImg?: string;
showMessageCard?: boolean;
sendMessagePath?: string;
sendMessageTitle?: string;
confirmButtonText?: string;
cancelButtonText?: string;
showConfirmButton?: boolean;
showCancelButton?: boolean;
closeOnClickOverlay?: boolean;
confirmButtonOpenType?: string;
};
interface Dialog {
(options: DialogOptions): Promise<DialogAction>;
alert?: (options: DialogOptions) => Promise<DialogAction>;
confirm?: (options: DialogOptions) => Promise<DialogAction>;
close?: () => void;
stopLoading?: () => void;
install?: () => void;
setDefaultOptions?: (options: DialogOptions) => void;
resetDefaultOptions?: () => void;
defaultOptions?: DialogOptions;
currentOptions?: DialogOptions;
}
declare const Dialog: Dialog;
export default Dialog;
'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 });
var queue = [];
function getContext() {
var pages = getCurrentPages();
return pages[pages.length - 1];
}
var Dialog = function (options) {
options = __assign(__assign({}, Dialog.currentOptions), options);
return new Promise(function (resolve, reject) {
var context = options.context || getContext();
var dialog = context.selectComponent(options.selector);
delete options.context;
delete options.selector;
if (dialog) {
dialog.setData(
__assign({ onCancel: reject, onConfirm: resolve }, options)
);
wx.nextTick(function () {
dialog.setData({ show: true });
});
queue.push(dialog);
} else {
console.warn(
'未找到 van-dialog 节点,请确认 selector 及 context 是否正确'
);
}
});
};
Dialog.defaultOptions = {
show: false,
title: '',
width: null,
theme: 'default',
message: '',
zIndex: 100,
overlay: true,
selector: '#van-dialog',
className: '',
asyncClose: false,
transition: 'scale',
customStyle: '',
messageAlign: '',
overlayStyle: '',
confirmButtonText: '确认',
cancelButtonText: '取消',
showConfirmButton: true,
showCancelButton: false,
closeOnClickOverlay: false,
confirmButtonOpenType: '',
};
Dialog.alert = Dialog;
Dialog.confirm = function (options) {
return Dialog(__assign({ showCancelButton: true }, options));
};
Dialog.close = function () {
queue.forEach(function (dialog) {
dialog.close();
});
queue = [];
};
Dialog.stopLoading = function () {
queue.forEach(function (dialog) {
dialog.stopLoading();
});
};
Dialog.setDefaultOptions = function (options) {
Object.assign(Dialog.currentOptions, options);
};
Dialog.resetDefaultOptions = function () {
Dialog.currentOptions = __assign({}, Dialog.defaultOptions);
};
Dialog.resetDefaultOptions();
exports.default = Dialog;
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var button_1 = require('../mixins/button');
var open_type_1 = require('../mixins/open-type');
var color_1 = require('../common/color');
component_1.VantComponent({
mixins: [button_1.button, open_type_1.openType],
props: {
show: {
type: Boolean,
observer: function (show) {
!show && this.stopLoading();
},
},
title: String,
message: String,
theme: {
type: String,
value: 'default',
},
useSlot: Boolean,
className: String,
customStyle: String,
asyncClose: Boolean,
messageAlign: String,
overlayStyle: String,
useTitleSlot: Boolean,
showCancelButton: Boolean,
closeOnClickOverlay: Boolean,
confirmButtonOpenType: String,
width: null,
zIndex: {
type: Number,
value: 2000,
},
confirmButtonText: {
type: String,
value: '确认',
},
cancelButtonText: {
type: String,
value: '取消',
},
confirmButtonColor: {
type: String,
value: color_1.RED,
},
cancelButtonColor: {
type: String,
value: color_1.GRAY,
},
showConfirmButton: {
type: Boolean,
value: true,
},
overlay: {
type: Boolean,
value: true,
},
transition: {
type: String,
value: 'scale',
},
},
data: {
loading: {
confirm: false,
cancel: false,
},
},
methods: {
onConfirm: function () {
this.handleAction('confirm');
},
onCancel: function () {
this.handleAction('cancel');
},
onClickOverlay: function () {
this.onClose('overlay');
},
handleAction: function (action) {
var _a;
if (this.data.asyncClose) {
this.setData(((_a = {}), (_a['loading.' + action] = true), _a));
}
this.onClose(action);
},
close: function () {
this.setData({
show: false,
});
},
stopLoading: function () {
this.setData({
loading: {
confirm: false,
cancel: false,
},
});
},
onClose: function (action) {
if (!this.data.asyncClose) {
this.close();
}
this.$emit('close', action);
// 把 dialog 实例传递出去,可以通过 stopLoading() 在外部关闭按钮的 loading
this.$emit(action, { dialog: this });
var callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];
if (callback) {
callback(this);
}
},
},
});
{
"component": true,
"usingComponents": {
"van-popup": "../popup/index",
"van-button": "../button/index",
"van-goods-action": "../goods-action//index",
"van-goods-action-button": "../goods-action-button/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<van-popup
show="{{ show }}"
z-index="{{ zIndex }}"
overlay="{{ overlay }}"
transition="{{ transition }}"
custom-class="van-dialog van-dialog--{{ theme }} {{ className }}"
custom-style="width: {{ utils.addUnit(width) }};{{ customStyle }}"
overlay-style="{{ overlayStyle }}"
close-on-click-overlay="{{ closeOnClickOverlay }}"
bind:close="onClickOverlay"
>
<view
wx:if="{{ title || useTitleSlot }}"
class="{{ utils.bem('dialog__header', { isolated: !(message || useSlot) }) }}"
>
<slot wx:if="{{ useTitleSlot }}" name="title" />
<block wx:elif="{{ title }}">{{ title }}</block>
</view>
<slot wx:if="{{ useSlot }}" />
<view
wx:elif="{{ message }}"
class="{{ utils.bem('dialog__message', [theme, messageAlign, { hasTitle: title }]) }}"
>
<text class="van-dialog__message-text">{{ message }}</text>
</view>
<van-goods-action wx:if="{{ theme === 'round-button' }}" custom-class="van-dialog__footer--round-button">
<van-goods-action-button
wx:if="{{ showCancelButton }}"
size="large"
loading="{{ loading.cancel }}"
class="van-dialog__button van-hairline--right"
custom-class="van-dialog__cancel"
custom-style="color: {{ cancelButtonColor }}"
bind:click="onCancel"
>
{{ cancelButtonText }}
</van-goods-action-button>
<van-goods-action-button
wx:if="{{ showConfirmButton }}"
size="large"
class="van-dialog__button"
loading="{{ loading.confirm }}"
custom-class="van-dialog__confirm"
custom-style="color: {{ confirmButtonColor }}"
open-type="{{ confirmButtonOpenType }}"
lang="{{ lang }}"
business-id="{{ businessId }}"
session-from="{{ sessionFrom }}"
send-message-title="{{ sendMessageTitle }}"
send-message-path="{{ sendMessagePath }}"
send-message-img="{{ sendMessageImg }}"
show-message-card="{{ showMessageCard }}"
app-parameter="{{ appParameter }}"
bind:click="onConfirm"
bindgetuserinfo="bindGetUserInfo"
bindcontact="bindContact"
bindgetphonenumber="bindGetPhoneNumber"
binderror="bindError"
bindlaunchapp="bindLaunchApp"
bindopensetting="bindOpenSetting"
>
{{ confirmButtonText }}
</van-goods-action-button>
</van-goods-action>
<view wx:else class="van-hairline--top van-dialog__footer">
<van-button
wx:if="{{ showCancelButton }}"
size="large"
loading="{{ loading.cancel }}"
class="van-dialog__button van-hairline--right"
custom-class="van-dialog__cancel"
custom-style="color: {{ cancelButtonColor }}"
bind:click="onCancel"
>
{{ cancelButtonText }}
</van-button>
<van-button
wx:if="{{ showConfirmButton }}"
size="large"
class="van-dialog__button"
loading="{{ loading.confirm }}"
custom-class="van-dialog__confirm"
custom-style="color: {{ confirmButtonColor }}"
open-type="{{ confirmButtonOpenType }}"
lang="{{ lang }}"
business-id="{{ businessId }}"
session-from="{{ sessionFrom }}"
send-message-title="{{ sendMessageTitle }}"
send-message-path="{{ sendMessagePath }}"
send-message-img="{{ sendMessageImg }}"
show-message-card="{{ showMessageCard }}"
app-parameter="{{ appParameter }}"
bind:click="onConfirm"
bindgetuserinfo="bindGetUserInfo"
bindcontact="bindContact"
bindgetphonenumber="bindGetPhoneNumber"
binderror="bindError"
bindlaunchapp="bindLaunchApp"
bindopensetting="bindOpenSetting"
>
{{ confirmButtonText }}
</van-button>
</view>
</van-popup>
@import '../common/index.wxss';.van-dialog{top:45%!important;overflow:hidden;width:320px;width:var(--dialog-width,320px);font-size:16px;font-size:var(--dialog-font-size,16px);border-radius:16px;border-radius:var(--dialog-border-radius,16px);background-color:#fff;background-color:var(--dialog-background-color,#fff)}@media (max-width:321px){.van-dialog{width:90%;width:var(--dialog-small-screen-width,90%)}}.van-dialog__header{text-align:center;padding-top:24px;padding-top:var(--dialog-header-padding-top,24px);font-weight:500;font-weight:var(--dialog-header-font-weight,500);line-height:24px;line-height:var(--dialog-header-line-height,24px)}.van-dialog__header--isolated{padding:24px 0;padding:var(--dialog-header-isolated-padding,24px 0)}.van-dialog__message{overflow-y:auto;text-align:center;-webkit-overflow-scrolling:touch;font-size:14px;font-size:var(--dialog-message-font-size,14px);line-height:20px;line-height:var(--dialog-message-line-height,20px);max-height:60vh;max-height:var(--dialog-message-max-height,60vh);padding:24px;padding:var(--dialog-message-padding,24px)}.van-dialog__message-text{word-wrap:break-word}.van-dialog__message--hasTitle{padding-top:8px;padding-top:var(--dialog-has-title-message-padding-top,8px);color:#646566;color:var(--dialog-has-title-message-text-color,#646566)}.van-dialog__message--round-button{padding-bottom:16px;color:#323233}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__footer--round-button{position:relative!important;padding:8px 24px 16px!important}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
props: {
dashed: {
type: Boolean,
value: false,
},
hairline: {
type: Boolean,
value: false,
},
contentPosition: {
type: String,
value: '',
},
fontSize: {
type: Number,
value: '',
},
borderColor: {
type: String,
value: '',
},
textColor: {
type: String,
value: '',
},
customStyle: {
type: String,
value: '',
},
},
});
{
"component": true,
"usingComponents": {}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="custom-class {{ utils.bem('divider', [{dashed, hairline}, contentPosition]) }}"
style="{{ borderColor ? 'border-color: ' + borderColor + ';' : '' }}{{ textColor ? 'color: ' + textColor + ';' : '' }} {{ fontSize ? 'font-size: ' + fontSize + 'px;' : '' }} {{ customStyle }}"
>
<slot />
</view>
@import '../common/index.wxss';.van-divider{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin:16px 0;margin:var(--divider-margin,16px 0);color:#969799;color:var(--divider-text-color,#969799);font-size:14px;font-size:var(--divider-font-size,14px);line-height:24px;line-height:var(--divider-line-height,24px);border:0 solid #ebedf0;border-color:var(--divider-border-color,#ebedf0)}.van-divider:after,.van-divider:before{display:block;-webkit-flex:1;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:1px 0 0}.van-divider:before{content:""}.van-divider--hairline:after,.van-divider--hairline:before{-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-divider--dashed{border-style:dashed}.van-divider--center:before,.van-divider--left:before,.van-divider--right:before{margin-right:16px;margin-right:var(--divider-content-padding,16px)}.van-divider--center:after,.van-divider--left:after,.van-divider--right:after{content:"";margin-left:16px;margin-left:var(--divider-content-padding,16px)}.van-divider--left:before{max-width:10%;max-width:var(--divider-content-left-width,10%)}.van-divider--right:after{max-width:10%;max-width:var(--divider-content-right-width,10%)}
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
VantComponent({ Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
field: true, field: true,
relation: { relation: {
name: 'dropdown-menu', name: 'dropdown-menu',
type: 'ancestor', type: 'ancestor',
current: 'dropdown-item', current: 'dropdown-item',
linked() { linked: function () {
this.updateDataFromParent(); this.updateDataFromParent();
}, },
}, },
...@@ -37,55 +39,59 @@ VantComponent({ ...@@ -37,55 +39,59 @@ VantComponent({
displayTitle: '', displayTitle: '',
}, },
methods: { methods: {
rerender() { rerender: function () {
wx.nextTick(() => { var _this = this;
this.parent && this.parent.updateItemListData(); wx.nextTick(function () {
_this.parent && _this.parent.updateItemListData();
}); });
}, },
updateDataFromParent() { updateDataFromParent: function () {
if (this.parent) { if (this.parent) {
const { var _a = this.parent.data,
overlay, overlay = _a.overlay,
duration, duration = _a.duration,
activeColor, activeColor = _a.activeColor,
closeOnClickOverlay, closeOnClickOverlay = _a.closeOnClickOverlay,
direction, direction = _a.direction;
} = this.parent.data;
this.setData({ this.setData({
overlay, overlay: overlay,
duration, duration: duration,
activeColor, activeColor: activeColor,
closeOnClickOverlay, closeOnClickOverlay: closeOnClickOverlay,
direction, direction: direction,
}); });
} }
}, },
onOpen() { onOpen: function () {
this.$emit('open'); this.$emit('open');
}, },
onOpened() { onOpened: function () {
this.$emit('opened'); this.$emit('opened');
}, },
onClose() { onClose: function () {
this.$emit('close'); this.$emit('close');
}, },
onClosed() { onClosed: function () {
this.$emit('closed'); this.$emit('closed');
this.setData({ showWrapper: false }); this.setData({ showWrapper: false });
}, },
onOptionTap(event) { onOptionTap: function (event) {
const { option } = event.currentTarget.dataset; var option = event.currentTarget.dataset.option;
const { value } = option; var value = option.value;
const shouldEmitChange = this.data.value !== value; var shouldEmitChange = this.data.value !== value;
this.setData({ showPopup: false, value }); this.setData({ showPopup: false, value: value });
this.$emit('close'); this.$emit('close');
this.rerender(); this.rerender();
if (shouldEmitChange) { if (shouldEmitChange) {
this.$emit('change', value); this.$emit('change', value);
} }
}, },
toggle(show, options = {}) { toggle: function (show, options) {
const { showPopup } = this.data; var _this = this;
if (options === void 0) {
options = {};
}
var showPopup = this.data.showPopup;
if (typeof show !== 'boolean') { if (typeof show !== 'boolean') {
show = !showPopup; show = !showPopup;
} }
...@@ -97,9 +103,9 @@ VantComponent({ ...@@ -97,9 +103,9 @@ VantComponent({
showPopup: show, showPopup: show,
}); });
if (show) { if (show) {
this.parent.getChildWrapperStyle().then((wrapperStyle) => { this.parent.getChildWrapperStyle().then(function (wrapperStyle) {
this.setData({ wrapperStyle, showWrapper: true }); _this.setData({ wrapperStyle: wrapperStyle, showWrapper: true });
this.rerender(); _this.rerender();
}); });
} else { } else {
this.rerender(); this.rerender();
......
import { VantComponent } from '../common/component'; 'use strict';
import { addUnit } from '../common/utils'; Object.defineProperty(exports, '__esModule', { value: true });
let ARRAY = []; var component_1 = require('../common/component');
VantComponent({ var utils_1 = require('../common/utils');
var ARRAY = [];
component_1.VantComponent({
field: true, field: true,
relation: { relation: {
name: 'dropdown-item', name: 'dropdown-item',
type: 'descendant', type: 'descendant',
current: 'dropdown-menu', current: 'dropdown-menu',
linked() { linked: function () {
this.updateItemListData(); this.updateItemListData();
}, },
unlinked() { unlinked: function () {
this.updateItemListData(); this.updateItemListData();
}, },
}, },
...@@ -51,28 +53,33 @@ VantComponent({ ...@@ -51,28 +53,33 @@ VantComponent({
data: { data: {
itemListData: [], itemListData: [],
}, },
beforeCreate() { beforeCreate: function () {
const { windowHeight } = wx.getSystemInfoSync(); var windowHeight = wx.getSystemInfoSync().windowHeight;
this.windowHeight = windowHeight; this.windowHeight = windowHeight;
ARRAY.push(this); ARRAY.push(this);
}, },
destroyed() { destroyed: function () {
ARRAY = ARRAY.filter((item) => item !== this); var _this = this;
ARRAY = ARRAY.filter(function (item) {
return item !== _this;
});
}, },
methods: { methods: {
updateItemListData() { updateItemListData: function () {
this.setData({ this.setData({
itemListData: this.children.map((child) => child.data), itemListData: this.children.map(function (child) {
return child.data;
}),
}); });
}, },
updateChildrenData() { updateChildrenData: function () {
this.children.forEach((child) => { this.children.forEach(function (child) {
child.updateDataFromParent(); child.updateDataFromParent();
}); });
}, },
toggleItem(active) { toggleItem: function (active) {
this.children.forEach((item, index) => { this.children.forEach(function (item, index) {
const { showPopup } = item.data; var showPopup = item.data.showPopup;
if (index === active) { if (index === active) {
item.toggle(); item.toggle();
} else if (showPopup) { } else if (showPopup) {
...@@ -80,34 +87,41 @@ VantComponent({ ...@@ -80,34 +87,41 @@ VantComponent({
} }
}); });
}, },
close() { close: function () {
this.children.forEach((child) => { this.children.forEach(function (child) {
child.toggle(false, { immediate: true }); child.toggle(false, { immediate: true });
}); });
}, },
getChildWrapperStyle() { getChildWrapperStyle: function () {
const { zIndex, direction } = this.data; var _this = this;
return this.getRect('.van-dropdown-menu').then((rect) => { var _a = this.data,
const { top = 0, bottom = 0 } = rect; zIndex = _a.zIndex,
const offset = direction === 'down' ? bottom : this.windowHeight - top; direction = _a.direction;
let wrapperStyle = `z-index: ${zIndex};`; return this.getRect('.van-dropdown-menu').then(function (rect) {
var _a = rect.top,
top = _a === void 0 ? 0 : _a,
_b = rect.bottom,
bottom = _b === void 0 ? 0 : _b;
var offset = direction === 'down' ? bottom : _this.windowHeight - top;
var wrapperStyle = 'z-index: ' + zIndex + ';';
if (direction === 'down') { if (direction === 'down') {
wrapperStyle += `top: ${addUnit(offset)};`; wrapperStyle += 'top: ' + utils_1.addUnit(offset) + ';';
} else { } else {
wrapperStyle += `bottom: ${addUnit(offset)};`; wrapperStyle += 'bottom: ' + utils_1.addUnit(offset) + ';';
} }
return wrapperStyle; return wrapperStyle;
}); });
}, },
onTitleTap(event) { onTitleTap: function (event) {
const { index } = event.currentTarget.dataset; var _this = this;
const child = this.children[index]; var index = event.currentTarget.dataset.index;
var child = this.children[index];
if (!child.data.disabled) { if (!child.data.disabled) {
ARRAY.forEach((menuItem) => { ARRAY.forEach(function (menuItem) {
if ( if (
menuItem && menuItem &&
menuItem.data.closeOnClickOutside && menuItem.data.closeOnClickOutside &&
menuItem !== this menuItem !== _this
) { ) {
menuItem.close(); menuItem.close();
} }
......
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var PRESETS = ['error', 'search', 'default', 'network'];
component_1.VantComponent({
props: {
description: String,
image: {
type: String,
value: 'default',
},
},
created: function () {
if (PRESETS.indexOf(this.data.image) !== -1) {
this.setData({
imageUrl:
'https://img.yzcdn.cn/vant/empty-image-' + this.data.image + '.png',
});
} else {
this.setData({ imageUrl: this.data.image });
}
},
});
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="custom-class van-empty">
<view class="van-empty__image">
<slot name="image"></slot>
</view>
<view class="van-empty__image">
<image wx:if="{{ imageUrl }}" class="van-empty__image__img" src="{{ imageUrl }}" />
</view>
<view class="van-empty__description">
<slot name="description"></slot>
</view>
<view class="van-empty__description">
{{ description }}
</view>
<view class="van-empty__bottom">
<slot></slot>
</view>
</view>
@import '../common/index.wxss';.van-empty{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;padding:32px 0}.van-empty__image{width:160px;height:160px}.van-empty__image:empty{display:none}.van-empty__image__img{width:100%;height:100%}.van-empty__image:not(:empty)+.van-empty__image{display:none}.van-empty__description{margin-top:16px;padding:0 60px;color:#969799;font-size:14px;line-height:20px}.van-empty__description:empty,.van-empty__description:not(:empty)+.van-empty__description{display:none}.van-empty__bottom{margin-top:24px}
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
import { getSystemInfoSync } from '../common/utils'; var __assign =
VantComponent({ (this && this.__assign) ||
field: true, function () {
classes: ['input-class', 'right-icon-class'], __assign =
props: { Object.assign ||
size: String, function (t) {
icon: String, for (var s, i = 1, n = arguments.length; i < n; i++) {
label: String, s = arguments[i];
error: Boolean, for (var p in s)
fixed: Boolean, if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
focus: Boolean,
center: Boolean,
isLink: Boolean,
leftIcon: String,
rightIcon: String,
disabled: Boolean,
autosize: Boolean,
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,
placeholderStyle: String,
errorMessageAlign: String,
selectionEnd: {
type: Number,
value: -1
},
selectionStart: {
type: Number,
value: -1
},
showConfirmBar: {
type: Boolean,
value: true
},
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,
value: '90px'
} }
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var props_1 = require('./props');
component_1.VantComponent({
field: true,
classes: ['input-class', 'right-icon-class', 'label-class'],
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],
required: Boolean,
iconClass: String,
clickable: Boolean,
inputAlign: String,
customStyle: String,
errorMessage: String,
arrowDirection: String,
showWordLimit: Boolean,
errorMessageAlign: String,
readonly: {
type: Boolean,
observer: 'setShowClear',
},
clearable: {
type: Boolean,
observer: 'setShowClear',
},
border: {
type: Boolean,
value: true,
},
titleWidth: {
type: String,
value: '6.2em',
},
}
),
data: {
focused: false,
innerValue: '',
showClear: false,
},
created: function () {
this.value = this.data.value;
this.setData({ innerValue: this.value });
},
methods: {
onInput: function (event) {
var _a = (event.detail || {}).value,
value = _a === void 0 ? '' : _a;
this.value = value;
this.setShowClear();
this.emitChange();
}, },
data: { onFocus: function (event) {
focused: false, this.focused = true;
system: getSystemInfoSync().system.split(' ').shift().toLowerCase() this.setShowClear();
this.$emit('focus', event.detail);
}, },
methods: { onBlur: function (event) {
onInput(event) { this.focused = false;
const { value = '' } = event.detail || {}; this.setShowClear();
this.setData({ value }); this.$emit('blur', event.detail);
wx.nextTick(() => { },
this.emitChange(value); onClickIcon: function () {
}); this.$emit('click-icon');
}, },
onFocus(event) { onClear: function () {
this.setData({ focused: true }); var _this = this;
this.$emit('focus', event.detail); this.setData({ innerValue: '' });
}, this.value = '';
onBlur(event) { this.setShowClear();
this.setData({ focused: false }); wx.nextTick(function () {
this.$emit('blur', event.detail); _this.emitChange();
}, _this.$emit('clear', '');
onClickIcon() { });
this.$emit('click-icon'); },
}, onConfirm: function (event) {
onClear() { var _a = (event.detail || {}).value,
this.setData({ value: '' }); value = _a === void 0 ? '' : _a;
wx.nextTick(() => { this.value = value;
this.emitChange(''); this.setShowClear();
this.$emit('clear', ''); this.$emit('confirm', value);
}); },
}, setValue: function (value) {
onConfirm() { this.value = value;
this.$emit('confirm', this.data.value); this.setShowClear();
}, if (value === '') {
emitChange(value) { this.setData({ innerValue: '' });
this.$emit('input', value); }
this.$emit('change', value); this.emitChange();
}, },
noop() { } onLineChange: function (event) {
} this.$emit('linechange', event.detail);
},
onKeyboardHeightChange: function (event) {
this.$emit('keyboardheightchange', event.detail);
},
emitChange: function () {
var _this = this;
this.setData({ value: this.value });
wx.nextTick(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 () {},
},
}); });
...@@ -4,4 +4,4 @@ ...@@ -4,4 +4,4 @@
"van-cell": "../cell/index", "van-cell": "../cell/index",
"van-icon": "../icon/index" "van-icon": "../icon/index"
} }
} }
\ No newline at end of file
<wxs src="../wxs/utils.wxs" module="utils" /> <wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="computed" />
<van-cell <van-cell
size="{{ size }}" size="{{ size }}"
icon="{{ leftIcon }}" icon="{{ leftIcon }}"
title="{{ label }}"
center="{{ center }}" center="{{ center }}"
border="{{ border }}" border="{{ border }}"
is-link="{{ isLink }}" is-link="{{ isLink }}"
required="{{ required }}" required="{{ required }}"
clickable="{{ clickable }}" clickable="{{ clickable }}"
title-width="{{ titleWidth }}" title-width="{{ titleWidth }}"
title-style="margin-right: 12px;"
custom-style="{{ customStyle }}" custom-style="{{ customStyle }}"
arrow-direction="{{ arrowDirection }}" arrow-direction="{{ arrowDirection }}"
custom-class="van-field" custom-class="van-field"
title-class="label-class"
> >
<slot name="left-icon" slot="icon" /> <slot name="left-icon" slot="icon" />
<slot name="label" slot="title" /> <view wx:if="{{ label }}" class="{{ utils.bem('field__label', { disabled }) }}" slot="title">
<view class="{{ utils.bem('field__body', [type, system]) }}"> {{ label }}
</view>
<slot wx:else name="label" slot="title" />
<view class="{{ utils.bem('field__body', [type]) }}">
<textarea <textarea
wx:if="{{ type === 'textarea' }}" wx:if="{{ type === 'textarea' }}"
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 }}"
placeholder-style="{{ placeholderStyle }}" placeholder-style="{{ placeholderStyle }}"
placeholder-class="{{ utils.bem('field__placeholder', { error }) }}" placeholder-class="{{ utils.bem('field__placeholder', { error, disabled }) }}"
auto-height="{{ autosize }}" auto-height="{{ !!autosize }}"
style="{{ computed.inputStyle(autosize) }}"
cursor-spacing="{{ cursorSpacing }}" cursor-spacing="{{ cursorSpacing }}"
adjust-position="{{ adjustPosition }}" adjust-position="{{ adjustPosition }}"
show-confirm-bar="{{ showConfirmBar }}" show-confirm-bar="{{ showConfirmBar }}"
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
...@@ -46,7 +57,9 @@ ...@@ -46,7 +57,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 }}"
...@@ -61,13 +74,13 @@ ...@@ -61,13 +74,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 }}"
size="16px"
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"
...@@ -75,7 +88,6 @@ ...@@ -75,7 +88,6 @@
<view class="van-field__icon-container" bind:tap="onClickIcon"> <view class="van-field__icon-container" bind:tap="onClickIcon">
<van-icon <van-icon
wx:if="{{ rightIcon || icon }}" wx:if="{{ rightIcon || icon }}"
size="16px"
name="{{ rightIcon || icon }}" name="{{ rightIcon || icon }}"
class="van-field__icon-root {{ iconClass }}" class="van-field__icon-root {{ iconClass }}"
custom-class="right-icon-class" custom-class="right-icon-class"
...@@ -87,7 +99,10 @@ ...@@ -87,7 +99,10 @@
<slot name="button" /> <slot name="button" />
</view> </view>
</view> </view>
<view wx:if="{{ errorMessage }}" class="van-field__error-message {{ utils.bem('field__error', [errorMessageAlign, { disabled, error }]) }}"> <view wx:if="{{ showWordLimit && maxlength }}" class="van-field__word-limit">
<view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length }}</view>/{{ maxlength }}
</view>
<view wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
{{ errorMessage }} {{ errorMessage }}
</view> </view>
</van-cell> </van-cell>
/* eslint-disable */
var utils = require('../wxs/utils.wxs');
function inputStyle(autosize) {
if (autosize && autosize.constructor === 'Object') {
var style = '';
if (autosize.minHeight) {
style += 'min-height:' + utils.addUnit(autosize.minHeight) + ';';
}
if (autosize.maxHeight) {
style += 'max-height:' + utils.addUnit(autosize.maxHeight) + ';';
}
return style;
}
return '';
}
module.exports = {
inputStyle: inputStyle
};
@import '../common/index.wxss';.van-field__body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-field__body--textarea{line-height:1.2em;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__body--textarea.van-field__body--ios{margin-top:-4.5px}.van-field__input{position:relative;display:block;box-sizing:border-box;width:100%;margin:0;padding:0;line-height:inherit;text-align:left;background-color:initial;border:0;resize:none;color:#323233;color:var(--field-input-text-color,#323233);height:24px;height:var(--cell-line-height,24px);min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__input--textarea{height:18px;height:var(--field-text-area-min-height,18px);min-height:18px;min-height:var(--field-text-area-min-height,18px)}.van-field__input--error{color:#ee0a24;color:var(--field-input-error-text-color,#ee0a24)}.van-field__input--disabled{background-color:initial;opacity:1;color:#969799;color:var(--field-input-disabled-text-color,#969799)}.van-field__input--center{text-align:center}.van-field__input--right{text-align:right}.van-field__placeholder{position:absolute;top:0;right:0;left:0;pointer-events:none;color:#969799;color:var(--field-placeholder-text-color,#969799)}.van-field__placeholder--error{color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__icon-root{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__clear-root,.van-field__icon-container{line-height:inherit;vertical-align:middle;padding:0 8px;padding:0 var(--padding-xs,8px);margin-right:-8px;margin-right:-var(--padding-xs,8px)}.van-field__button,.van-field__clear-root,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear-root{color:#c8c9cc;color:var(--field-clear-icon-color,#c8c9cc)}.van-field__icon-container{color:#969799;color:var(--field-icon-container-color,#969799)}.van-field__icon-container:empty{display:none}.van-field__button{padding-left:8px;padding-left:var(--padding-xs,8px)}.van-field__button:empty{display:none}.van-field__error-message{text-align:left;font-size:12px;font-size:var(--field-error-message-text-font-size,12px);color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right} @import '../common/index.wxss';.van-field{--cell-icon-size:16px;--cell-icon-size:var(--field-icon-size,16px)}.van-field__label{color:#646566;color:var(--field-label-color,#646566)}.van-field__label--disabled{color:#c8c9cc;color:var(--field-disabled-text-color,#c8c9cc)}.van-field__body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-field__body--textarea{padding:3.6px 0;line-height:1.2em}.van-field__body--textarea,.van-field__input{box-sizing:border-box;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__input{position:relative;display:block;width:100%;margin:0;padding:0;line-height:inherit;text-align:left;background-color:initial;border:0;resize:none;color:#323233;color:var(--field-input-text-color,#323233);height:24px;height:var(--cell-line-height,24px)}.van-field__input--textarea{height:18px;height:var(--field-text-area-min-height,18px);min-height:18px;min-height:var(--field-text-area-min-height,18px)}.van-field__input--error{color:#ee0a24;color:var(--field-input-error-text-color,#ee0a24)}.van-field__input--disabled{background-color:initial;opacity:1;color:#c8c9cc;color:var(--field-input-disabled-text-color,#c8c9cc)}.van-field__input--center{text-align:center}.van-field__input--right{text-align:right}.van-field__placeholder{position:absolute;top:0;right:0;left:0;pointer-events:none;color:#c8c9cc;color:var(--field-placeholder-text-color,#c8c9cc)}.van-field__placeholder--error{color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__icon-root{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__clear-root,.van-field__icon-container{line-height:inherit;vertical-align:middle;padding:0 8px;padding:0 var(--padding-xs,8px);margin-right:-8px;margin-right:-var(--padding-xs,8px)}.van-field__button,.van-field__clear-root,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear-root{font-size:16px;font-size:var(--field-clear-icon-size,16px);color:#c8c9cc;color:var(--field-clear-icon-color,#c8c9cc)}.van-field__icon-container{font-size:16px;font-size:var(--field-icon-size,16px);color:#969799;color:var(--field-icon-container-color,#969799)}.van-field__icon-container:empty{display:none}.van-field__button{padding-left:8px;padding-left:var(--padding-xs,8px)}.van-field__button:empty{display:none}.van-field__error-message{text-align:left;font-size:12px;font-size:var(--field-error-message-text-font-size,12px);color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{text-align:right;margin-top:4px;margin-top:var(--padding-base,4px);color:#646566;color:var(--field-word-limit-color,#646566);font-size:12px;font-size:var(--field-word-limit-font-size,12px);line-height:16px;line-height:var(--field-word-limit-line-height,16px)}.van-field__word-num{display:inline}.van-field__word-num--full{color:#ee0a24;color:var(--field-word-num-full-color,#ee0a24)}
\ No newline at end of file \ No newline at end of file
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;
};
};
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.textareaProps = exports.inputProps = exports.commonProps = void 0;
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,
},
};
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var link_1 = require('../mixins/link');
var button_1 = require('../mixins/button');
var open_type_1 = require('../mixins/open-type');
component_1.VantComponent({
mixins: [link_1.link, button_1.button, open_type_1.openType],
relation: {
type: 'ancestor',
name: 'goods-action',
current: 'goods-action-button',
},
props: {
text: String,
color: String,
loading: Boolean,
disabled: Boolean,
plain: Boolean,
type: {
type: String,
value: 'danger',
},
},
methods: {
onClick: function (event) {
this.$emit('click', event.detail);
this.jumpLink();
},
updateStyle: function () {
if (this.parent == null) {
return;
}
var _a = this.parent.children,
children = _a === void 0 ? [] : _a;
var length = children.length;
var index = children.indexOf(this);
this.setData({
isFirst: index === 0,
isLast: index === length - 1,
});
},
},
});
{
"component": true,
"usingComponents": {
"van-button": "../button/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<van-button
id="{{ id }}"
lang="{{ lang }}"
type="{{ type }}"
color="{{ color }}"
plain="{{ plain }}"
loading="{{ loading }}"
disabled="{{ disabled }}"
open-type="{{ openType }}"
class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast, plain: plain }])}}"
custom-class="van-goods-action-button__inner"
business-id="{{ businessId }}"
session-from="{{ sessionFrom }}"
app-parameter="{{ appParameter }}"
send-message-img="{{ sendMessageImg }}"
send-message-path="{{ sendMessagePath }}"
show-message-card="{{ showMessageCard }}"
send-message-title="{{ sendMessageTitle }}"
bind:click="onClick"
binderror="bindError"
bindcontact="bindContact"
bindopensetting="bindOpenSetting"
bindgetuserinfo="bindGetUserInfo"
bindgetphonenumber="bindGetPhoneNumber"
bindlaunchapp="bindLaunchApp"
>
{{ text }}
<slot></slot>
</van-button>
@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-goods-action-button{--button-warning-background-color:linear-gradient(90deg,#ffd01e,#ff8917);--button-warning-background-color:var(--goods-action-button-warning-color,linear-gradient(90deg,#ffd01e,#ff8917));--button-danger-background-color:linear-gradient(90deg,#ff6034,#ee0a24);--button-danger-background-color:var(--goods-action-button-danger-color,linear-gradient(90deg,#ff6034,#ee0a24));--button-default-height:40px;--button-default-height:var(--goods-action-button-height,40px);--button-line-height:20px;--button-line-height:var(--goods-action-button-line-height,20px);--button-plain-background-color:#fff;--button-plain-background-color:var(--goods-action-button-plain-color,#fff);display:block;--button-border-width:0}.van-goods-action-button--first{margin-left:5px;--button-border-radius:20px 0 0 20px;--button-border-radius:var(--goods-action-button-border-radius,20px) 0 0 var(--goods-action-button-border-radius,20px)}.van-goods-action-button--last{margin-right:5px;--button-border-radius:0 20px 20px 0;--button-border-radius:0 var(--goods-action-button-border-radius,20px) var(--goods-action-button-border-radius,20px) 0}.van-goods-action-button--first.van-goods-action-button--last{--button-border-radius:20px;--button-border-radius:var(--goods-action-button-border-radius,20px)}.van-goods-action-button--plain{--button-border-width:1px}.van-goods-action-button__inner{width:100%;font-weight:500!important;font-weight:var(--font-weight-bold,500)!important}@media (max-width:321px){.van-goods-action-button{font-size:13px}}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var link_1 = require('../mixins/link');
var button_1 = require('../mixins/button');
var open_type_1 = require('../mixins/open-type');
component_1.VantComponent({
classes: ['icon-class', 'text-class'],
mixins: [link_1.link, button_1.button, open_type_1.openType],
props: {
text: String,
dot: Boolean,
info: String,
icon: String,
disabled: Boolean,
loading: Boolean,
},
methods: {
onClick: function (event) {
this.$emit('click', event.detail);
this.jumpLink();
},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index",
"van-button": "../button/index"
}
}
<van-button
square
id="{{ id }}"
size="large"
lang="{{ lang }}"
loading="{{ loading }}"
disabled="{{ disabled }}"
open-type="{{ openType }}"
business-id="{{ businessId }}"
custom-class="van-goods-action-icon"
session-from="{{ sessionFrom }}"
app-parameter="{{ appParameter }}"
send-message-img="{{ sendMessageImg }}"
send-message-path="{{ sendMessagePath }}"
show-message-card="{{ showMessageCard }}"
send-message-title="{{ sendMessageTitle }}"
bind:click="onClick"
binderror="bindError"
bindcontact="bindContact"
bindopensetting="bindOpenSetting"
bindgetuserinfo="bindGetUserInfo"
bindgetphonenumber="bindGetPhoneNumber"
bindlaunchapp="bindLaunchApp"
>
<view class="van-goods-action-icon__content">
<van-icon
wx:if="{{ icon }}"
size="20px"
name="{{ icon }}"
dot="{{ dot }}"
info="{{ info }}"
class="van-goods-action-icon__icon"
custom-class="icon-class"
/>
<slot name="icon" />
<text class="text-class">{{ text }}</text>
</view>
</van-button>
@import '../common/index.wxss';.van-goods-action-icon{border:none!important;width:50px!important;width:var(--goods-action-icon-height,50px)!important}.van-goods-action-icon__content{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;height:100%;line-height:1;font-size:10px;font-size:var(--goods-action-icon-font-size,10px);color:#646566;color:var(--goods-action-icon-text-color,#646566)}.van-goods-action-icon__icon{margin-bottom:4px}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
relation: {
type: 'descendant',
name: 'goods-action-button',
current: 'goods-action',
linked: function () {
this.updateStyle();
},
unlinked: function () {
this.updateStyle();
},
linkChanged: function () {
this.updateStyle();
},
},
props: {
safeAreaInsetBottom: {
type: Boolean,
value: true,
},
},
methods: {
updateStyle: function () {
var _this = this;
wx.nextTick(function () {
_this.children.forEach(function (child) {
child.updateStyle();
});
});
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="custom-class {{ utils.bem('goods-action', { safe: safeAreaInsetBottom }) }}">
<slot />
</view>
@import '../common/index.wxss';.van-goods-action{position:fixed;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;background-color:#fff;background-color:var(--goods-action-background-color,#fff)}.van-goods-action--safe{padding-bottom:env(safe-area-inset-bottom)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var link_1 = require('../mixins/link');
var component_1 = require('../common/component');
var utils_1 = require('../common/utils');
component_1.VantComponent({
relation: {
name: 'grid',
type: 'ancestor',
current: 'grid-item',
},
classes: ['content-class', 'icon-class', 'text-class'],
mixins: [link_1.link],
props: {
icon: String,
iconColor: String,
dot: Boolean,
info: null,
badge: null,
text: String,
useSlot: Boolean,
},
data: {
viewStyle: '',
},
mounted: function () {
this.updateStyle();
},
methods: {
updateStyle: function () {
if (!this.parent) {
return;
}
var _a = this.parent,
data = _a.data,
children = _a.children;
var columnNum = data.columnNum,
border = data.border,
square = data.square,
gutter = data.gutter,
clickable = data.clickable,
center = data.center,
direction = data.direction,
iconSize = data.iconSize;
var width = 100 / columnNum + '%';
var styleWrapper = [];
styleWrapper.push('width: ' + width);
if (square) {
styleWrapper.push('padding-top: ' + width);
}
if (gutter) {
var gutterValue = utils_1.addUnit(gutter);
styleWrapper.push('padding-right: ' + gutterValue);
var index = children.indexOf(this);
if (index >= columnNum && !square) {
styleWrapper.push('margin-top: ' + gutterValue);
}
}
var contentStyle = '';
if (square && gutter) {
var gutterValue = utils_1.addUnit(gutter);
contentStyle =
'\n right: ' +
gutterValue +
';\n bottom: ' +
gutterValue +
';\n height: auto;\n ';
}
this.setData({
viewStyle: styleWrapper.join('; '),
contentStyle: contentStyle,
center: center,
border: border,
square: square,
gutter: gutter,
clickable: clickable,
direction: direction,
iconSize: iconSize,
});
},
onClick: function () {
this.$emit('click');
this.jumpLink();
},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="custom-class {{ utils.bem('grid-item', { square }) }}" style="{{ viewStyle }}" bindtap="onClick">
<view
class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
style="{{ contentStyle }}"
>
<block wx:if="{{ useSlot }}">
<slot />
</block>
<block wx:else>
<view class="van-grid-item__icon icon-class">
<van-icon wx:if="{{ icon }}" name="{{ icon }}" color="{{ iconColor }}" dot="{{ dot }}" info="{{ badge || info }}" size="{{ iconSize }}" />
<slot wx:else name="icon"></slot>
</view>
<view class="van-grid-item__text text-class">
<text wx:if="{{ text }}">{{ text }}</text>
<slot wx:else name="text"></slot>
</view>
</block>
</view>
</view>
@import '../common/index.wxss';.van-grid-item{position:relative;float:left;box-sizing:border-box}.van-grid-item--square{height:0}.van-grid-item__content{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;box-sizing:border-box;height:100%;padding:16px 8px;padding:var(--grid-item-content-padding,16px 8px);background-color:#fff;background-color:var(--grid-item-content-background-color,#fff)}.van-grid-item__content:after{z-index:1;border-width:0 1px 1px 0;border-bottom-width:var(--border-width-base,1px);border-right-width:var(--border-width-base,1px);border-top-width:0}.van-grid-item__content--surround:after{border-width:1px;border-width:var(--border-width-base,1px)}.van-grid-item__content--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-grid-item__content--square{position:absolute;top:0;right:0;left:0}.van-grid-item__content--horizontal{-webkit-flex-direction:row;flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__icon+.van-grid-item__text{margin-top:0;margin-left:8px}.van-grid-item__content--clickable:active{background-color:#f2f3f5;background-color:var(--grid-item-content-active-color,#f2f3f5)}.van-grid-item__icon{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:26px;font-size:var(--grid-item-icon-size,26px);height:26px;height:var(--grid-item-icon-size,26px)}.van-grid-item__text{word-wrap:break-word;color:#646566;color:var(--grid-item-text-color,#646566);font-size:12px;font-size:var(--grid-item-text-font-size,12px)}.van-grid-item__icon+.van-grid-item__text{margin-top:8px}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var utils_1 = require('../common/utils');
component_1.VantComponent({
relation: {
name: 'grid-item',
type: 'descendant',
current: 'grid',
},
props: {
square: {
type: Boolean,
observer: 'updateChildren',
},
gutter: {
type: [Number, String],
value: 0,
observer: 'updateChildren',
},
clickable: {
type: Boolean,
observer: 'updateChildren',
},
columnNum: {
type: Number,
value: 4,
observer: 'updateChildren',
},
center: {
type: Boolean,
value: true,
observer: 'updateChildren',
},
border: {
type: Boolean,
value: true,
observer: 'updateChildren',
},
direction: {
type: String,
observer: 'updateChildren',
},
iconSize: {
type: String,
observer: 'updateChildren',
},
},
data: {
viewStyle: '',
},
created: function () {
var gutter = this.data.gutter;
if (gutter) {
this.setData({
viewStyle: 'padding-left: ' + utils_1.addUnit(gutter),
});
}
},
methods: {
updateChildren: function () {
this.children.forEach(function (child) {
child.updateStyle();
});
},
},
});
<view class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}" style="{{ viewStyle }}">
<slot />
</view>
@import '../common/index.wxss';.van-grid{position:relative;box-sizing:border-box;overflow:hidden}
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
VantComponent({ Object.defineProperty(exports, '__esModule', { value: true });
props: { var component_1 = require('../common/component');
dot: Boolean, component_1.VantComponent({
info: null, props: {
size: null, dot: Boolean,
color: String, info: null,
customStyle: String, size: null,
classPrefix: { color: String,
type: String, customStyle: String,
value: 'van-icon' classPrefix: {
}, type: String,
name: { value: 'van-icon',
type: String,
observer(val) {
this.setData({
isImageName: val.indexOf('/') !== -1
});
}
}
}, },
methods: { name: {
onClick() { type: String,
this.$emit('click'); observer: function (val) {
} this.setData({
} isImageName: val.indexOf('/') !== -1,
});
},
},
},
methods: {
onClick: function () {
this.$emit('click');
},
},
}); });
@import '../common/index.wxss';@font-face{font-weight:400;font-family:vant-icon;font-style:normal;font-display:auto;src:url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff2) format("woff2"),url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff) format("woff"),url(https://img.yzcdn.cn/vant/vant-icon-d3825a.ttf) format("truetype")}.van-icon{position:relative;font:normal normal normal 14px/1 vant-icon;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased}.van-icon,.van-icon:before{display:inline-block}.van-icon-add-o:before{content:"\F000"}.van-icon-add-square:before{content:"\F001"}.van-icon-add:before{content:"\F002"}.van-icon-after-sale:before{content:"\F003"}.van-icon-aim:before{content:"\F004"}.van-icon-alipay:before{content:"\F005"}.van-icon-apps-o:before{content:"\F006"}.van-icon-arrow-down:before{content:"\F007"}.van-icon-arrow-left:before{content:"\F008"}.van-icon-arrow-up:before{content:"\F009"}.van-icon-arrow:before{content:"\F00A"}.van-icon-ascending:before{content:"\F00B"}.van-icon-audio:before{content:"\F00C"}.van-icon-award-o:before{content:"\F00D"}.van-icon-award:before{content:"\F00E"}.van-icon-bag-o:before{content:"\F00F"}.van-icon-bag:before{content:"\F010"}.van-icon-balance-list-o:before{content:"\F011"}.van-icon-balance-list:before{content:"\F012"}.van-icon-balance-o:before{content:"\F013"}.van-icon-balance-pay:before{content:"\F014"}.van-icon-bar-chart-o:before{content:"\F015"}.van-icon-bars:before{content:"\F016"}.van-icon-bell:before{content:"\F017"}.van-icon-bill-o:before{content:"\F018"}.van-icon-bill:before{content:"\F019"}.van-icon-birthday-cake-o:before{content:"\F01A"}.van-icon-bookmark-o:before{content:"\F01B"}.van-icon-bookmark:before{content:"\F01C"}.van-icon-browsing-history-o:before{content:"\F01D"}.van-icon-browsing-history:before{content:"\F01E"}.van-icon-brush-o:before{content:"\F01F"}.van-icon-bulb-o:before{content:"\F020"}.van-icon-bullhorn-o:before{content:"\F021"}.van-icon-calender-o:before{content:"\F022"}.van-icon-card:before{content:"\F023"}.van-icon-cart-circle-o:before{content:"\F024"}.van-icon-cart-circle:before{content:"\F025"}.van-icon-cart-o:before{content:"\F026"}.van-icon-cart:before{content:"\F027"}.van-icon-cash-back-record:before{content:"\F028"}.van-icon-cash-on-deliver:before{content:"\F029"}.van-icon-cashier-o:before{content:"\F02A"}.van-icon-certificate:before{content:"\F02B"}.van-icon-chart-trending-o:before{content:"\F02C"}.van-icon-chat-o:before{content:"\F02D"}.van-icon-chat:before{content:"\F02E"}.van-icon-checked:before{content:"\F02F"}.van-icon-circle:before{content:"\F030"}.van-icon-clear:before{content:"\F031"}.van-icon-clock-o:before{content:"\F032"}.van-icon-clock:before{content:"\F033"}.van-icon-close:before{content:"\F034"}.van-icon-closed-eye:before{content:"\F035"}.van-icon-cluster-o:before{content:"\F036"}.van-icon-cluster:before{content:"\F037"}.van-icon-column:before{content:"\F038"}.van-icon-comment-circle-o:before{content:"\F039"}.van-icon-comment-circle:before{content:"\F03A"}.van-icon-comment-o:before{content:"\F03B"}.van-icon-comment:before{content:"\F03C"}.van-icon-completed:before{content:"\F03D"}.van-icon-contact:before{content:"\F03E"}.van-icon-coupon-o:before{content:"\F03F"}.van-icon-coupon:before{content:"\F040"}.van-icon-credit-pay:before{content:"\F041"}.van-icon-cross:before{content:"\F042"}.van-icon-debit-pay:before{content:"\F043"}.van-icon-delete:before{content:"\F044"}.van-icon-descending:before{content:"\F045"}.van-icon-description:before{content:"\F046"}.van-icon-desktop-o:before{content:"\F047"}.van-icon-diamond-o:before{content:"\F048"}.van-icon-diamond:before{content:"\F049"}.van-icon-discount:before{content:"\F04A"}.van-icon-down:before{content:"\F04B"}.van-icon-ecard-pay:before{content:"\F04C"}.van-icon-edit:before{content:"\F04D"}.van-icon-ellipsis:before{content:"\F04E"}.van-icon-empty:before{content:"\F04F"}.van-icon-envelop-o:before{content:"\F050"}.van-icon-exchange:before{content:"\F051"}.van-icon-expand-o:before{content:"\F052"}.van-icon-expand:before{content:"\F053"}.van-icon-eye-o:before{content:"\F054"}.van-icon-eye:before{content:"\F055"}.van-icon-fail:before{content:"\F056"}.van-icon-failure:before{content:"\F057"}.van-icon-filter-o:before{content:"\F058"}.van-icon-fire-o:before{content:"\F059"}.van-icon-fire:before{content:"\F05A"}.van-icon-flag-o:before{content:"\F05B"}.van-icon-flower-o:before{content:"\F05C"}.van-icon-free-postage:before{content:"\F05D"}.van-icon-friends-o:before{content:"\F05E"}.van-icon-friends:before{content:"\F05F"}.van-icon-gem-o:before{content:"\F060"}.van-icon-gem:before{content:"\F061"}.van-icon-gift-card-o:before{content:"\F062"}.van-icon-gift-card:before{content:"\F063"}.van-icon-gift-o:before{content:"\F064"}.van-icon-gift:before{content:"\F065"}.van-icon-gold-coin-o:before{content:"\F066"}.van-icon-gold-coin:before{content:"\F067"}.van-icon-good-job-o:before{content:"\F068"}.van-icon-good-job:before{content:"\F069"}.van-icon-goods-collect-o:before{content:"\F06A"}.van-icon-goods-collect:before{content:"\F06B"}.van-icon-graphic:before{content:"\F06C"}.van-icon-home-o:before{content:"\F06D"}.van-icon-hot-o:before{content:"\F06E"}.van-icon-hot-sale-o:before{content:"\F06F"}.van-icon-hot-sale:before{content:"\F070"}.van-icon-hot:before{content:"\F071"}.van-icon-hotel-o:before{content:"\F072"}.van-icon-idcard:before{content:"\F073"}.van-icon-info-o:before{content:"\F074"}.van-icon-info:before{content:"\F075"}.van-icon-invition:before{content:"\F076"}.van-icon-label-o:before{content:"\F077"}.van-icon-label:before{content:"\F078"}.van-icon-like-o:before{content:"\F079"}.van-icon-like:before{content:"\F07A"}.van-icon-live:before{content:"\F07B"}.van-icon-location-o:before{content:"\F07C"}.van-icon-location:before{content:"\F07D"}.van-icon-lock:before{content:"\F07E"}.van-icon-logistics:before{content:"\F07F"}.van-icon-manager-o:before{content:"\F080"}.van-icon-manager:before{content:"\F081"}.van-icon-map-marked:before{content:"\F082"}.van-icon-medal-o:before{content:"\F083"}.van-icon-medal:before{content:"\F084"}.van-icon-more-o:before{content:"\F085"}.van-icon-more:before{content:"\F086"}.van-icon-music-o:before{content:"\F087"}.van-icon-music:before{content:"\F088"}.van-icon-new-arrival-o:before{content:"\F089"}.van-icon-new-arrival:before{content:"\F08A"}.van-icon-new-o:before{content:"\F08B"}.van-icon-new:before{content:"\F08C"}.van-icon-newspaper-o:before{content:"\F08D"}.van-icon-notes-o:before{content:"\F08E"}.van-icon-orders-o:before{content:"\F08F"}.van-icon-other-pay:before{content:"\F090"}.van-icon-paid:before{content:"\F091"}.van-icon-passed:before{content:"\F092"}.van-icon-pause-circle-o:before{content:"\F093"}.van-icon-pause-circle:before{content:"\F094"}.van-icon-pause:before{content:"\F095"}.van-icon-peer-pay:before{content:"\F096"}.van-icon-pending-payment:before{content:"\F097"}.van-icon-phone-circle-o:before{content:"\F098"}.van-icon-phone-circle:before{content:"\F099"}.van-icon-phone-o:before{content:"\F09A"}.van-icon-phone:before{content:"\F09B"}.van-icon-photo-o:before{content:"\F09C"}.van-icon-photo:before{content:"\F09D"}.van-icon-photograph:before{content:"\F09E"}.van-icon-play-circle-o:before{content:"\F09F"}.van-icon-play-circle:before{content:"\F0A0"}.van-icon-play:before{content:"\F0A1"}.van-icon-plus:before{content:"\F0A2"}.van-icon-point-gift-o:before{content:"\F0A3"}.van-icon-point-gift:before{content:"\F0A4"}.van-icon-points:before{content:"\F0A5"}.van-icon-printer:before{content:"\F0A6"}.van-icon-qr-invalid:before{content:"\F0A7"}.van-icon-qr:before{content:"\F0A8"}.van-icon-question-o:before{content:"\F0A9"}.van-icon-question:before{content:"\F0AA"}.van-icon-records:before{content:"\F0AB"}.van-icon-refund-o:before{content:"\F0AC"}.van-icon-replay:before{content:"\F0AD"}.van-icon-scan:before{content:"\F0AE"}.van-icon-search:before{content:"\F0AF"}.van-icon-send-gift-o:before{content:"\F0B0"}.van-icon-send-gift:before{content:"\F0B1"}.van-icon-service-o:before{content:"\F0B2"}.van-icon-service:before{content:"\F0B3"}.van-icon-setting-o:before{content:"\F0B4"}.van-icon-setting:before{content:"\F0B5"}.van-icon-share:before{content:"\F0B6"}.van-icon-shop-collect-o:before{content:"\F0B7"}.van-icon-shop-collect:before{content:"\F0B8"}.van-icon-shop-o:before{content:"\F0B9"}.van-icon-shop:before{content:"\F0BA"}.van-icon-shopping-cart-o:before{content:"\F0BB"}.van-icon-shopping-cart:before{content:"\F0BC"}.van-icon-shrink:before{content:"\F0BD"}.van-icon-sign:before{content:"\F0BE"}.van-icon-smile-comment-o:before{content:"\F0BF"}.van-icon-smile-comment:before{content:"\F0C0"}.van-icon-smile-o:before{content:"\F0C1"}.van-icon-smile:before{content:"\F0C2"}.van-icon-star-o:before{content:"\F0C3"}.van-icon-star:before{content:"\F0C4"}.van-icon-stop-circle-o:before{content:"\F0C5"}.van-icon-stop-circle:before{content:"\F0C6"}.van-icon-stop:before{content:"\F0C7"}.van-icon-success:before{content:"\F0C8"}.van-icon-thumb-circle-o:before{content:"\F0C9"}.van-icon-thumb-circle:before{content:"\F0CA"}.van-icon-todo-list-o:before{content:"\F0CB"}.van-icon-todo-list:before{content:"\F0CC"}.van-icon-tosend:before{content:"\F0CD"}.van-icon-tv-o:before{content:"\F0CE"}.van-icon-umbrella-circle:before{content:"\F0CF"}.van-icon-underway-o:before{content:"\F0D0"}.van-icon-underway:before{content:"\F0D1"}.van-icon-upgrade:before{content:"\F0D2"}.van-icon-user-circle-o:before{content:"\F0D3"}.van-icon-user-o:before{content:"\F0D4"}.van-icon-video-o:before{content:"\F0D5"}.van-icon-video:before{content:"\F0D6"}.van-icon-vip-card-o:before{content:"\F0D7"}.van-icon-vip-card:before{content:"\F0D8"}.van-icon-volume-o:before{content:"\F0D9"}.van-icon-volume:before{content:"\F0DA"}.van-icon-wap-home-o:before{content:"\F0DB"}.van-icon-wap-home:before{content:"\F0DC"}.van-icon-wap-nav:before{content:"\F0DD"}.van-icon-warn-o:before{content:"\F0DE"}.van-icon-warning-o:before{content:"\F0DF"}.van-icon-warning:before{content:"\F0E0"}.van-icon-weapp-nav:before{content:"\F0E1"}.van-icon-wechat:before{content:"\F0E2"}.van-icon-youzan-shield:before{content:"\F0E3"}:host{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-icon--image{width:1em;height:1em}.van-icon__image{width:100%;height:100%}.van-icon__info{z-index:1} @import '../common/index.wxss';@font-face{font-weight:400;font-family:vant-icon;font-style:normal;font-display:auto;src:url(https://img.yzcdn.cn/vant/vant-icon-eeb192.woff2) format("woff2"),url(https://img.yzcdn.cn/vant/vant-icon-eeb192.woff) format("woff"),url(https://img.yzcdn.cn/vant/vant-icon-eeb192.ttf) format("truetype")}.van-icon{position:relative;font:normal normal normal 14px/1 vant-icon;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased}.van-icon,.van-icon:before{display:inline-block}.van-icon-add-o:before{content:"\F000"}.van-icon-add-square:before{content:"\F001"}.van-icon-add:before{content:"\F002"}.van-icon-after-sale:before{content:"\F003"}.van-icon-aim:before{content:"\F004"}.van-icon-alipay:before{content:"\F005"}.van-icon-apps-o:before{content:"\F006"}.van-icon-arrow-down:before{content:"\F007"}.van-icon-arrow-left:before{content:"\F008"}.van-icon-arrow-up:before{content:"\F009"}.van-icon-arrow:before{content:"\F00A"}.van-icon-ascending:before{content:"\F00B"}.van-icon-audio:before{content:"\F00C"}.van-icon-award-o:before{content:"\F00D"}.van-icon-award:before{content:"\F00E"}.van-icon-back-top:before{content:"\F0E6"}.van-icon-bag-o:before{content:"\F00F"}.van-icon-bag:before{content:"\F010"}.van-icon-balance-list-o:before{content:"\F011"}.van-icon-balance-list:before{content:"\F012"}.van-icon-balance-o:before{content:"\F013"}.van-icon-balance-pay:before{content:"\F014"}.van-icon-bar-chart-o:before{content:"\F015"}.van-icon-bars:before{content:"\F016"}.van-icon-bell:before{content:"\F017"}.van-icon-bill-o:before{content:"\F018"}.van-icon-bill:before{content:"\F019"}.van-icon-birthday-cake-o:before{content:"\F01A"}.van-icon-bookmark-o:before{content:"\F01B"}.van-icon-bookmark:before{content:"\F01C"}.van-icon-browsing-history-o:before{content:"\F01D"}.van-icon-browsing-history:before{content:"\F01E"}.van-icon-brush-o:before{content:"\F01F"}.van-icon-bulb-o:before{content:"\F020"}.van-icon-bullhorn-o:before{content:"\F021"}.van-icon-calender-o:before{content:"\F022"}.van-icon-card:before{content:"\F023"}.van-icon-cart-circle-o:before{content:"\F024"}.van-icon-cart-circle:before{content:"\F025"}.van-icon-cart-o:before{content:"\F026"}.van-icon-cart:before{content:"\F027"}.van-icon-cash-back-record:before{content:"\F028"}.van-icon-cash-on-deliver:before{content:"\F029"}.van-icon-cashier-o:before{content:"\F02A"}.van-icon-certificate:before{content:"\F02B"}.van-icon-chart-trending-o:before{content:"\F02C"}.van-icon-chat-o:before{content:"\F02D"}.van-icon-chat:before{content:"\F02E"}.van-icon-checked:before{content:"\F02F"}.van-icon-circle:before{content:"\F030"}.van-icon-clear:before{content:"\F031"}.van-icon-clock-o:before{content:"\F032"}.van-icon-clock:before{content:"\F033"}.van-icon-close:before{content:"\F034"}.van-icon-closed-eye:before{content:"\F035"}.van-icon-cluster-o:before{content:"\F036"}.van-icon-cluster:before{content:"\F037"}.van-icon-column:before{content:"\F038"}.van-icon-comment-circle-o:before{content:"\F039"}.van-icon-comment-circle:before{content:"\F03A"}.van-icon-comment-o:before{content:"\F03B"}.van-icon-comment:before{content:"\F03C"}.van-icon-completed:before{content:"\F03D"}.van-icon-contact:before{content:"\F03E"}.van-icon-coupon-o:before{content:"\F03F"}.van-icon-coupon:before{content:"\F040"}.van-icon-credit-pay:before{content:"\F041"}.van-icon-cross:before{content:"\F042"}.van-icon-debit-pay:before{content:"\F043"}.van-icon-delete:before{content:"\F044"}.van-icon-descending:before{content:"\F045"}.van-icon-description:before{content:"\F046"}.van-icon-desktop-o:before{content:"\F047"}.van-icon-diamond-o:before{content:"\F048"}.van-icon-diamond:before{content:"\F049"}.van-icon-discount:before{content:"\F04A"}.van-icon-down:before{content:"\F04B"}.van-icon-ecard-pay:before{content:"\F04C"}.van-icon-edit:before{content:"\F04D"}.van-icon-ellipsis:before{content:"\F04E"}.van-icon-empty:before{content:"\F04F"}.van-icon-enlarge:before{content:"\F0E4"}.van-icon-envelop-o:before{content:"\F050"}.van-icon-exchange:before{content:"\F051"}.van-icon-expand-o:before{content:"\F052"}.van-icon-expand:before{content:"\F053"}.van-icon-eye-o:before{content:"\F054"}.van-icon-eye:before{content:"\F055"}.van-icon-fail:before{content:"\F056"}.van-icon-failure:before{content:"\F057"}.van-icon-filter-o:before{content:"\F058"}.van-icon-fire-o:before{content:"\F059"}.van-icon-fire:before{content:"\F05A"}.van-icon-flag-o:before{content:"\F05B"}.van-icon-flower-o:before{content:"\F05C"}.van-icon-free-postage:before{content:"\F05D"}.van-icon-friends-o:before{content:"\F05E"}.van-icon-friends:before{content:"\F05F"}.van-icon-gem-o:before{content:"\F060"}.van-icon-gem:before{content:"\F061"}.van-icon-gift-card-o:before{content:"\F062"}.van-icon-gift-card:before{content:"\F063"}.van-icon-gift-o:before{content:"\F064"}.van-icon-gift:before{content:"\F065"}.van-icon-gold-coin-o:before{content:"\F066"}.van-icon-gold-coin:before{content:"\F067"}.van-icon-good-job-o:before{content:"\F068"}.van-icon-good-job:before{content:"\F069"}.van-icon-goods-collect-o:before{content:"\F06A"}.van-icon-goods-collect:before{content:"\F06B"}.van-icon-graphic:before{content:"\F06C"}.van-icon-home-o:before{content:"\F06D"}.van-icon-hot-o:before{content:"\F06E"}.van-icon-hot-sale-o:before{content:"\F06F"}.van-icon-hot-sale:before{content:"\F070"}.van-icon-hot:before{content:"\F071"}.van-icon-hotel-o:before{content:"\F072"}.van-icon-idcard:before{content:"\F073"}.van-icon-info-o:before{content:"\F074"}.van-icon-info:before{content:"\F075"}.van-icon-invition:before{content:"\F076"}.van-icon-label-o:before{content:"\F077"}.van-icon-label:before{content:"\F078"}.van-icon-like-o:before{content:"\F079"}.van-icon-like:before{content:"\F07A"}.van-icon-live:before{content:"\F07B"}.van-icon-location-o:before{content:"\F07C"}.van-icon-location:before{content:"\F07D"}.van-icon-lock:before{content:"\F07E"}.van-icon-logistics:before{content:"\F07F"}.van-icon-manager-o:before{content:"\F080"}.van-icon-manager:before{content:"\F081"}.van-icon-map-marked:before{content:"\F082"}.van-icon-medal-o:before{content:"\F083"}.van-icon-medal:before{content:"\F084"}.van-icon-more-o:before{content:"\F085"}.van-icon-more:before{content:"\F086"}.van-icon-music-o:before{content:"\F087"}.van-icon-music:before{content:"\F088"}.van-icon-new-arrival-o:before{content:"\F089"}.van-icon-new-arrival:before{content:"\F08A"}.van-icon-new-o:before{content:"\F08B"}.van-icon-new:before{content:"\F08C"}.van-icon-newspaper-o:before{content:"\F08D"}.van-icon-notes-o:before{content:"\F08E"}.van-icon-orders-o:before{content:"\F08F"}.van-icon-other-pay:before{content:"\F090"}.van-icon-paid:before{content:"\F091"}.van-icon-passed:before{content:"\F092"}.van-icon-pause-circle-o:before{content:"\F093"}.van-icon-pause-circle:before{content:"\F094"}.van-icon-pause:before{content:"\F095"}.van-icon-peer-pay:before{content:"\F096"}.van-icon-pending-payment:before{content:"\F097"}.van-icon-phone-circle-o:before{content:"\F098"}.van-icon-phone-circle:before{content:"\F099"}.van-icon-phone-o:before{content:"\F09A"}.van-icon-phone:before{content:"\F09B"}.van-icon-photo-fail:before{content:"\F0E5"}.van-icon-photo-o:before{content:"\F09C"}.van-icon-photo:before{content:"\F09D"}.van-icon-photograph:before{content:"\F09E"}.van-icon-play-circle-o:before{content:"\F09F"}.van-icon-play-circle:before{content:"\F0A0"}.van-icon-play:before{content:"\F0A1"}.van-icon-plus:before{content:"\F0A2"}.van-icon-point-gift-o:before{content:"\F0A3"}.van-icon-point-gift:before{content:"\F0A4"}.van-icon-points:before{content:"\F0A5"}.van-icon-printer:before{content:"\F0A6"}.van-icon-qr-invalid:before{content:"\F0A7"}.van-icon-qr:before{content:"\F0A8"}.van-icon-question-o:before{content:"\F0A9"}.van-icon-question:before{content:"\F0AA"}.van-icon-records:before{content:"\F0AB"}.van-icon-refund-o:before{content:"\F0AC"}.van-icon-replay:before{content:"\F0AD"}.van-icon-scan:before{content:"\F0AE"}.van-icon-search:before{content:"\F0AF"}.van-icon-send-gift-o:before{content:"\F0B0"}.van-icon-send-gift:before{content:"\F0B1"}.van-icon-service-o:before{content:"\F0B2"}.van-icon-service:before{content:"\F0B3"}.van-icon-setting-o:before{content:"\F0B4"}.van-icon-setting:before{content:"\F0B5"}.van-icon-share:before{content:"\F0B6"}.van-icon-shop-collect-o:before{content:"\F0B7"}.van-icon-shop-collect:before{content:"\F0B8"}.van-icon-shop-o:before{content:"\F0B9"}.van-icon-shop:before{content:"\F0BA"}.van-icon-shopping-cart-o:before{content:"\F0BB"}.van-icon-shopping-cart:before{content:"\F0BC"}.van-icon-shrink:before{content:"\F0BD"}.van-icon-sign:before{content:"\F0BE"}.van-icon-smile-comment-o:before{content:"\F0BF"}.van-icon-smile-comment:before{content:"\F0C0"}.van-icon-smile-o:before{content:"\F0C1"}.van-icon-smile:before{content:"\F0C2"}.van-icon-star-o:before{content:"\F0C3"}.van-icon-star:before{content:"\F0C4"}.van-icon-stop-circle-o:before{content:"\F0C5"}.van-icon-stop-circle:before{content:"\F0C6"}.van-icon-stop:before{content:"\F0C7"}.van-icon-success:before{content:"\F0C8"}.van-icon-thumb-circle-o:before{content:"\F0C9"}.van-icon-thumb-circle:before{content:"\F0CA"}.van-icon-todo-list-o:before{content:"\F0CB"}.van-icon-todo-list:before{content:"\F0CC"}.van-icon-tosend:before{content:"\F0CD"}.van-icon-tv-o:before{content:"\F0CE"}.van-icon-umbrella-circle:before{content:"\F0CF"}.van-icon-underway-o:before{content:"\F0D0"}.van-icon-underway:before{content:"\F0D1"}.van-icon-upgrade:before{content:"\F0D2"}.van-icon-user-circle-o:before{content:"\F0D3"}.van-icon-user-o:before{content:"\F0D4"}.van-icon-video-o:before{content:"\F0D5"}.van-icon-video:before{content:"\F0D6"}.van-icon-vip-card-o:before{content:"\F0D7"}.van-icon-vip-card:before{content:"\F0D8"}.van-icon-volume-o:before{content:"\F0D9"}.van-icon-volume:before{content:"\F0DA"}.van-icon-wap-home-o:before{content:"\F0DB"}.van-icon-wap-home:before{content:"\F0DC"}.van-icon-wap-nav:before{content:"\F0DD"}.van-icon-warn-o:before{content:"\F0DE"}.van-icon-warning-o:before{content:"\F0DF"}.van-icon-warning:before{content:"\F0E0"}.van-icon-weapp-nav:before{content:"\F0E1"}.van-icon-wechat:before{content:"\F0E2"}.van-icon-youzan-shield:before{content:"\F0E3"}:host{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-icon--image{width:1em;height:1em}.van-icon__image{width:100%;height:100%}.van-icon__info{z-index:1}
\ No newline at end of file \ No newline at end of file
import { addUnit, isDef } from '../common/utils'; 'use strict';
import { VantComponent } from '../common/component'; Object.defineProperty(exports, '__esModule', { value: true });
import { button } from '../mixins/button'; var utils_1 = require('../common/utils');
import { openType } from '../mixins/open-type'; var component_1 = require('../common/component');
const FIT_MODE_MAP = { var button_1 = require('../mixins/button');
none: 'center', var open_type_1 = require('../mixins/open-type');
fill: 'scaleToFill', var FIT_MODE_MAP = {
cover: 'aspectFill', none: 'center',
contain: 'aspectFit' fill: 'scaleToFill',
cover: 'aspectFill',
contain: 'aspectFit',
widthFix: 'widthFix',
heightFix: 'heightFix',
}; };
VantComponent({ component_1.VantComponent({
mixins: [button, openType], mixins: [button_1.button, open_type_1.openType],
classes: ['custom-class', 'loading-class', 'error-class', 'image-class'], classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
props: { props: {
src: { src: {
type: String, type: String,
observer() { observer: function () {
this.setData({ this.setData({
error: false, error: false,
loading: true loading: true,
}); });
} },
},
round: Boolean,
width: {
type: null,
observer: 'setStyle'
},
height: {
type: null,
observer: 'setStyle'
},
radius: null,
lazyLoad: Boolean,
useErrorSlot: Boolean,
useLoadingSlot: Boolean,
showMenuByLongpress: Boolean,
fit: {
type: String,
value: 'fill',
observer: 'setMode'
},
showError: {
type: Boolean,
value: true
},
showLoading: {
type: Boolean,
value: true
}
}, },
data: { round: Boolean,
error: false, width: {
loading: true, type: null,
viewStyle: '', observer: 'setStyle',
}, },
mounted() { height: {
this.setMode(); type: null,
this.setStyle(); observer: 'setStyle',
}, },
methods: { radius: null,
setMode() { lazyLoad: Boolean,
this.setData({ useErrorSlot: Boolean,
mode: FIT_MODE_MAP[this.data.fit], useLoadingSlot: Boolean,
}); showMenuByLongpress: Boolean,
}, fit: {
setStyle() { type: String,
const { width, height, radius } = this.data; value: 'fill',
let style = ''; observer: 'setMode',
if (isDef(width)) { },
style += `width: ${addUnit(width)};`; showError: {
} type: Boolean,
if (isDef(height)) { value: true,
style += `height: ${addUnit(height)};`; },
} showLoading: {
if (isDef(radius)) { type: Boolean,
style += 'overflow: hidden;'; value: true,
style += `border-radius: ${addUnit(radius)};`; },
} },
this.setData({ viewStyle: style }); data: {
}, error: false,
onLoad(event) { loading: true,
this.setData({ viewStyle: '',
loading: false },
}); mounted: function () {
this.$emit('load', event.detail); this.setMode();
}, this.setStyle();
onError(event) { },
this.setData({ methods: {
loading: false, setMode: function () {
error: true this.setData({
}); mode: FIT_MODE_MAP[this.data.fit],
this.$emit('error', event.detail); });
}, },
onClick(event) { setStyle: function () {
this.$emit('click', event.detail); var _a = this.data,
} width = _a.width,
} height = _a.height,
radius = _a.radius;
var style = '';
if (utils_1.isDef(width)) {
style += 'width: ' + utils_1.addUnit(width) + ';';
}
if (utils_1.isDef(height)) {
style += 'height: ' + utils_1.addUnit(height) + ';';
}
if (utils_1.isDef(radius)) {
style += 'overflow: hidden;';
style += 'border-radius: ' + utils_1.addUnit(radius) + ';';
}
this.setData({ viewStyle: style });
},
onLoad: function (event) {
this.setData({
loading: false,
});
this.$emit('load', event.detail);
},
onError: function (event) {
this.setData({
loading: false,
error: true,
});
this.$emit('error', event.detail);
},
onClick: function (event) {
this.$emit('click', event.detail);
},
},
}); });
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
relation: {
name: 'index-bar',
type: 'ancestor',
current: 'index-anchor',
},
props: {
useSlot: Boolean,
index: null,
},
data: {
active: false,
wrapperStyle: '',
anchorStyle: '',
},
methods: {
scrollIntoView: function (scrollTop) {
var _this = this;
this.getBoundingClientRect().then(function (rect) {
wx.pageScrollTo({
duration: 0,
scrollTop: scrollTop + rect.top - _this.parent.data.stickyOffsetTop,
});
});
},
getBoundingClientRect: function () {
return this.getRect('.van-index-anchor-wrapper');
},
},
});
<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>
@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)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var color_1 = require('../common/color');
var page_scroll_1 = require('../mixins/page-scroll');
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',
current: 'index-bar',
linked: 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,
},
stickyOffsetTop: {
type: Number,
value: 0,
},
indexList: {
type: Array,
value: indexList(),
},
},
mixins: [
page_scroll_1.pageScrollMixin(function (event) {
this.scrollTop = event.scrollTop || 0;
this.onScroll();
}),
],
data: {
activeAnchorIndex: null,
showSidebar: false,
},
created: function () {
this.scrollTop = 0;
},
methods: {
updateData: function () {
var _this = this;
wx.nextTick(function () {
if (_this.timer != null) {
clearTimeout(_this.timer);
}
_this.timer = setTimeout(function () {
_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.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.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 _a = this,
children = _a.children,
scrollTop = _a.scrollTop;
var _b = this.data,
sticky = _b.sticky,
stickyOffsetTop = _b.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,
_b = _a.children,
children = _b === void 0 ? [] : _b,
scrollTop = _a.scrollTop;
if (!children.length) {
return;
}
var _c = this.data,
sticky = _c.sticky,
stickyOffsetTop = _c.stickyOffsetTop,
zIndex = _c.zIndex,
highlightColor = _c.highlightColor;
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.find(function (item) {
return item.data.index === _this.data.indexList[index];
});
if (anchor) {
anchor.scrollIntoView(this.scrollTop);
this.$emit('select', anchor.data.index);
}
},
},
});
<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>
@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)}
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
VantComponent({ Object.defineProperty(exports, '__esModule', { value: true });
props: { var component_1 = require('../common/component');
dot: Boolean, component_1.VantComponent({
info: null, props: {
customStyle: String dot: Boolean,
} info: null,
customStyle: String,
},
}); });
@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;box-sizing:border-box;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:PingFang SC,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,PingFang SC,Helvetica Neue,Arial,sans-serif);line-height:14px;line-height:calc(var(--info-size, 16px) - var(--info-border-width, 1px)*2);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)} @import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;box-sizing:border-box;line-height:1.2;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:-apple-system-font,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,-apple-system-font,Helvetica Neue,Arial,sans-serif);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)}
\ No newline at end of file \ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
VantComponent({ Object.defineProperty(exports, '__esModule', { value: true });
props: { var component_1 = require('../common/component');
color: String, component_1.VantComponent({
vertical: Boolean, props: {
type: { color: String,
type: String, vertical: Boolean,
value: 'circular' type: {
}, type: String,
size: String, value: 'circular',
textSize: String
},
data: {
array12: Array.from({ length: 12 }),
}, },
size: String,
textSize: String,
},
data: {
array12: Array.from({ length: 12 }),
},
}); });
{ {
"component": true "component": true
} }
\ No newline at end of file
export const basic = Behavior({ 'use strict';
methods: { Object.defineProperty(exports, '__esModule', { value: true });
$emit(...args) { exports.basic = void 0;
this.triggerEvent(...args); exports.basic = Behavior({
}, methods: {
set(data, callback) { $emit: function () {
this.setData(data, callback); var args = [];
return new Promise(resolve => wx.nextTick(resolve)); for (var _i = 0; _i < arguments.length; _i++) {
}, args[_i] = arguments[_i];
getRect(selector, all) { }
return new Promise(resolve => { this.triggerEvent.apply(this, args);
wx.createSelectorQuery() },
.in(this)[all ? 'selectAll' : 'select'](selector) set: function (data, callback) {
.boundingClientRect(rect => { this.setData(data, callback);
if (all && Array.isArray(rect) && rect.length) { return new Promise(function (resolve) {
resolve(rect); return wx.nextTick(resolve);
} });
if (!all && rect) { },
resolve(rect); getRect: function (selector, all) {
} var _this = this;
}) return new Promise(function (resolve) {
.exec(); wx.createSelectorQuery()
}); .in(_this)
} [all ? 'selectAll' : 'select'](selector)
} .boundingClientRect(function (rect) {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect);
}
if (!all && rect) {
resolve(rect);
}
})
.exec();
});
},
},
}); });
export const button = Behavior({ 'use strict';
externalClasses: ['hover-class'], Object.defineProperty(exports, '__esModule', { value: true });
properties: { exports.button = void 0;
id: String, exports.button = Behavior({
lang: { externalClasses: ['hover-class'],
type: String, properties: {
value: 'en' id: String,
}, lang: String,
businessId: Number, businessId: Number,
sessionFrom: String, sessionFrom: String,
sendMessageTitle: String, sendMessageTitle: String,
sendMessagePath: String, sendMessagePath: String,
sendMessageImg: String, sendMessageImg: String,
showMessageCard: Boolean, showMessageCard: Boolean,
appParameter: String, appParameter: String,
ariaLabel: String ariaLabel: String,
} },
}); });
export const link = Behavior({ 'use strict';
properties: { Object.defineProperty(exports, '__esModule', { value: true });
url: String, exports.link = void 0;
linkType: { exports.link = Behavior({
type: String, properties: {
value: 'navigateTo' url: String,
} linkType: {
type: String,
value: 'navigateTo',
}, },
methods: { },
jumpLink(urlKey = 'url') { methods: {
const url = this.data[urlKey]; jumpLink: function (urlKey) {
if (url) { if (urlKey === void 0) {
wx[this.data.linkType]({ url }); urlKey = 'url';
} }
} var url = this.data[urlKey];
} if (url) {
wx[this.data.linkType]({ url: url });
}
},
},
}); });
export const openType = Behavior({ 'use strict';
properties: { Object.defineProperty(exports, '__esModule', { value: true });
openType: String exports.openType = void 0;
exports.openType = Behavior({
properties: {
openType: String,
},
methods: {
bindGetUserInfo: function (event) {
this.$emit('getuserinfo', event.detail);
}, },
methods: { bindContact: function (event) {
bindGetUserInfo(event) { this.$emit('contact', event.detail);
this.$emit('getuserinfo', event.detail); },
}, bindGetPhoneNumber: function (event) {
bindContact(event) { this.$emit('getphonenumber', event.detail);
this.$emit('contact', event.detail); },
}, bindError: function (event) {
bindGetPhoneNumber(event) { this.$emit('error', event.detail);
this.$emit('getphonenumber', event.detail); },
}, bindLaunchApp: function (event) {
bindError(event) { this.$emit('launchapp', event.detail);
this.$emit('error', event.detail); },
}, bindOpenSetting: function (event) {
bindLaunchApp(event) { this.$emit('opensetting', event.detail);
this.$emit('launchapp', event.detail); },
}, },
bindOpenSetting(event) {
this.$emit('opensetting', event.detail);
},
}
}); });
/// <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 {};
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.pageScrollMixin = void 0;
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 =
typeof page.onPageScroll === 'function'
? [page.onPageScroll.bind(page), scroller.bind(this)]
: [scroller.bind(this)];
}
page.onPageScroll = onPageScroll;
},
detached: function () {
var page = getCurrentPage();
page.vanPageScroller = (page.vanPageScroller || []).filter(function (
item
) {
return item !== scroller;
});
},
});
};
const MIN_DISTANCE = 10; 'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.touch = void 0;
var MIN_DISTANCE = 10;
function getDirection(x, y) { function getDirection(x, y) {
if (x > y && x > MIN_DISTANCE) { if (x > y && x > MIN_DISTANCE) {
return 'horizontal'; return 'horizontal';
} }
if (y > x && y > MIN_DISTANCE) { if (y > x && y > MIN_DISTANCE) {
return 'vertical'; return 'vertical';
} }
return ''; return '';
} }
export const touch = Behavior({ exports.touch = Behavior({
methods: { methods: {
resetTouchStatus() { resetTouchStatus: function () {
this.direction = ''; this.direction = '';
this.deltaX = 0; this.deltaX = 0;
this.deltaY = 0; this.deltaY = 0;
this.offsetX = 0; this.offsetX = 0;
this.offsetY = 0; this.offsetY = 0;
}, },
touchStart(event) { touchStart: function (event) {
this.resetTouchStatus(); this.resetTouchStatus();
const touch = event.touches[0]; var touch = event.touches[0];
this.startX = touch.clientX; this.startX = touch.clientX;
this.startY = touch.clientY; this.startY = touch.clientY;
}, },
touchMove(event) { touchMove: function (event) {
const touch = event.touches[0]; var touch = event.touches[0];
this.deltaX = touch.clientX - this.startX; this.deltaX = touch.clientX - this.startX;
this.deltaY = touch.clientY - this.startY; this.deltaY = touch.clientY - this.startY;
this.offsetX = Math.abs(this.deltaX); this.offsetX = Math.abs(this.deltaX);
this.offsetY = Math.abs(this.deltaY); this.offsetY = Math.abs(this.deltaY);
this.direction = this.direction || getDirection(this.offsetX, this.offsetY); this.direction =
} this.direction || getDirection(this.offsetX, this.offsetY);
} },
},
}); });
export declare const transition: (showDefaultValue: boolean) => any; export declare const transition: (showDefaultValue: boolean) => string;
import { isObj } from '../common/utils'; 'use strict';
const getClassNames = (name) => ({ Object.defineProperty(exports, '__esModule', { value: true });
enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`, exports.transition = void 0;
'enter-to': `van-${name}-enter-to van-${name}-enter-active enter-to-class enter-active-class`, var utils_1 = require('../common/utils');
leave: `van-${name}-leave van-${name}-leave-active leave-class leave-active-class`, var getClassNames = function (name) {
'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class` return {
}); enter:
const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 30)); 'van-' +
export const transition = function (showDefaultValue) { name +
return Behavior({ '-enter van-' +
properties: { name +
customStyle: String, '-enter-active enter-class enter-active-class',
// @ts-ignore 'enter-to':
show: { 'van-' +
type: Boolean, name +
value: showDefaultValue, '-enter-to van-' +
observer: 'observeShow' name +
}, '-enter-active enter-to-class enter-active-class',
// @ts-ignore leave:
duration: { 'van-' +
type: null, name +
value: 300, '-leave van-' +
observer: 'observeDuration' name +
}, '-leave-active leave-class leave-active-class',
name: { 'leave-to':
type: String, 'van-' +
value: 'fade' name +
} '-leave-to van-' +
}, name +
data: { '-leave-active leave-to-class leave-active-class',
type: '', };
inited: false, };
display: false exports.transition = function (showDefaultValue) {
}, return Behavior({
methods: { properties: {
observeShow(value, old) { customStyle: String,
if (value === old) { // @ts-ignore
return; show: {
} type: Boolean,
value ? this.enter() : this.leave(); value: showDefaultValue,
}, observer: 'observeShow',
enter() { },
const { duration, name } = this.data; // @ts-ignore
const classNames = getClassNames(name); duration: {
const currentDuration = isObj(duration) ? duration.enter : duration; type: null,
this.status = 'enter'; value: 300,
this.$emit('before-enter'); observer: 'observeDuration',
Promise.resolve() },
.then(nextTick) name: {
.then(() => { type: String,
this.checkStatus('enter'); value: 'fade',
this.$emit('enter'); },
this.setData({ },
inited: true, data: {
display: true, type: '',
classes: classNames.enter, inited: false,
currentDuration display: false,
}); },
}) methods: {
.then(nextTick) observeShow: function (value, old) {
.then(() => { if (value === old) {
this.checkStatus('enter'); return;
this.transitionEnded = false; }
this.setData({ value ? this.enter() : this.leave();
classes: classNames['enter-to'] },
}); enter: function () {
}) var _this = this;
.catch(() => { }); var _a = this.data,
}, duration = _a.duration,
leave() { name = _a.name;
if (!this.data.display) { var classNames = getClassNames(name);
return; var currentDuration = utils_1.isObj(duration)
} ? duration.enter
const { duration, name } = this.data; : duration;
const classNames = getClassNames(name); this.status = 'enter';
const currentDuration = isObj(duration) ? duration.leave : duration; this.$emit('before-enter');
this.status = 'leave'; utils_1.requestAnimationFrame(function () {
this.$emit('before-leave'); _this.checkStatus('enter');
Promise.resolve() _this.$emit('enter');
.then(nextTick) _this.setData({
.then(() => { inited: true,
this.checkStatus('leave'); display: true,
this.$emit('leave'); classes: classNames.enter,
this.setData({ currentDuration: currentDuration,
classes: classNames.leave, });
currentDuration utils_1.requestAnimationFrame(function () {
}); _this.checkStatus('enter');
}) _this.transitionEnded = false;
.then(nextTick) _this.setData({ classes: classNames['enter-to'] });
.then(() => { });
this.checkStatus('leave'); });
this.transitionEnded = false; },
setTimeout(() => this.onTransitionEnd(), currentDuration); leave: function () {
this.setData({ var _this = this;
classes: classNames['leave-to'] if (!this.data.display) {
}); return;
}) }
.catch(() => { }); var _a = this.data,
}, duration = _a.duration,
checkStatus(status) { name = _a.name;
if (status !== this.status) { var classNames = getClassNames(name);
throw new Error(`incongruent status: ${status}`); var currentDuration = utils_1.isObj(duration)
} ? duration.leave
}, : duration;
onTransitionEnd() { this.status = 'leave';
if (this.transitionEnded) { this.$emit('before-leave');
return; utils_1.requestAnimationFrame(function () {
} _this.checkStatus('leave');
this.transitionEnded = true; _this.$emit('leave');
this.$emit(`after-${this.status}`); _this.setData({
const { show, display } = this.data; classes: classNames.leave,
if (!show && display) { currentDuration: currentDuration,
this.setData({ display: false }); });
} utils_1.requestAnimationFrame(function () {
} _this.checkStatus('leave');
_this.transitionEnded = false;
setTimeout(function () {
return _this.onTransitionEnd();
}, currentDuration);
_this.setData({ classes: classNames['leave-to'] });
});
});
},
checkStatus: function (status) {
if (status !== this.status) {
throw new Error('incongruent status: ' + status);
}
},
onTransitionEnd: function () {
if (this.transitionEnded) {
return;
}
this.transitionEnded = true;
this.$emit('after-' + this.status);
var _a = this.data,
show = _a.show,
display = _a.display;
if (!show && display) {
this.setData({ display: false });
} }
}); },
},
});
}; };
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var utils_1 = require('../common/utils');
component_1.VantComponent({
classes: ['title-class'],
props: {
title: String,
fixed: {
type: Boolean,
observer: 'setHeight',
},
placeholder: {
type: Boolean,
observer: 'setHeight',
},
leftText: String,
rightText: String,
customStyle: String,
leftArrow: Boolean,
border: {
type: Boolean,
value: true,
},
zIndex: {
type: Number,
value: 1,
},
safeAreaInsetTop: {
type: Boolean,
value: true,
},
},
data: {
statusBarHeight: 0,
height: 44,
baseStyle: '',
},
created: function () {
var statusBarHeight = utils_1.getSystemInfoSync().statusBarHeight;
var _a = this.data,
safeAreaInsetTop = _a.safeAreaInsetTop,
zIndex = _a.zIndex;
var paddingTop = safeAreaInsetTop ? statusBarHeight : 0;
var baseStyle =
'z-index: ' + zIndex + ';padding-top: ' + paddingTop + 'px;';
this.setData({
statusBarHeight: statusBarHeight,
height: 44 + statusBarHeight,
baseStyle: baseStyle,
});
},
mounted: function () {
this.setHeight();
},
methods: {
onClickLeft: function () {
this.$emit('click-left');
},
onClickRight: function () {
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 });
});
});
},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view wx:if="{{ fixed && placeholder }}" style="height: {{ height }}px;" />
<view
class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
style="{{ baseStyle }}; {{ customStyle }}"
>
<view class="van-nav-bar__content">
<view class="van-nav-bar__left" bind:tap="onClickLeft">
<block wx:if="{{ leftArrow || leftText }}">
<van-icon
wx:if="{{ leftArrow }}"
size="16px"
name="arrow-left"
custom-class="van-nav-bar__arrow"
/>
<view
wx:if="{{ leftText }}"
class="van-nav-bar__text"
hover-class="van-nav-bar__text--hover"
hover-stay-time="70"
>{{ leftText }}</view>
</block>
<slot wx:else name="left" />
</view>
<view class="van-nav-bar__title title-class van-ellipsis">
<block wx:if="{{ title }}">{{ title }}</block>
<slot wx:else name="title" />
</view>
<view class="van-nav-bar__right" bind:tap="onClickRight">
<view
wx:if="{{ rightText }}"
class="van-nav-bar__text"
hover-class="van-nav-bar__text--hover"
hover-stay-time="70"
>{{ rightText }}</view>
<slot wx:else name="right" />
</view>
</view>
</view>
@import '../common/index.wxss';.van-nav-bar{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,.van-nav-bar__content{position:relative}.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;top:0;bottom:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;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)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var utils_1 = require('../common/utils');
component_1.VantComponent({
props: {
text: {
type: String,
value: '',
observer: function () {
var _this = this;
wx.nextTick(function () {
_this.init();
});
},
},
mode: {
type: String,
value: '',
},
url: {
type: String,
value: '',
},
openType: {
type: String,
value: 'navigate',
},
delay: {
type: Number,
value: 1,
},
speed: {
type: Number,
value: 50,
observer: function () {
var _this = this;
wx.nextTick(function () {
_this.init();
});
},
},
scrollable: {
type: Boolean,
value: true,
},
leftIcon: {
type: String,
value: '',
},
color: String,
backgroundColor: String,
background: String,
wrapable: Boolean,
},
data: {
show: true,
},
created: function () {
this.resetAnimation = wx.createAnimation({
duration: 0,
timingFunction: 'linear',
});
},
destroyed: function () {
this.timer && clearTimeout(this.timer);
},
methods: {
init: function () {
var _this = this;
Promise.all([
this.getRect('.van-notice-bar__content'),
this.getRect('.van-notice-bar__wrap'),
]).then(function (rects) {
var contentRect = rects[0],
wrapRect = rects[1];
if (
contentRect == null ||
wrapRect == null ||
!contentRect.width ||
!wrapRect.width
) {
return;
}
var _a = _this.data,
speed = _a.speed,
scrollable = _a.scrollable,
delay = _a.delay;
if (scrollable && wrapRect.width < contentRect.width) {
var duration = (contentRect.width / speed) * 1000;
_this.wrapWidth = wrapRect.width;
_this.contentWidth = contentRect.width;
_this.duration = duration;
_this.animation = wx.createAnimation({
duration: duration,
timingFunction: 'linear',
delay: delay,
});
_this.scroll();
}
});
},
scroll: function () {
var _this = this;
this.timer && clearTimeout(this.timer);
this.timer = null;
this.setData({
animationData: this.resetAnimation
.translateX(this.wrapWidth)
.step()
.export(),
});
utils_1.requestAnimationFrame(function () {
_this.setData({
animationData: _this.animation
.translateX(-_this.contentWidth)
.step()
.export(),
});
});
this.timer = setTimeout(function () {
_this.scroll();
}, this.duration);
},
onClickIcon: function (event) {
if (this.data.mode === 'closeable') {
this.timer && clearTimeout(this.timer);
this.timer = null;
this.setData({ show: false });
this.$emit('close', event.detail);
}
},
onClick: function (event) {
this.$emit('click', event);
},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view
wx:if="{{ show }}"
class="custom-class {{ utils.bem('notice-bar', { withicon: mode, wrapable }) }}"
style="color: {{ color }}; background-color: {{ backgroundColor }}; background: {{ background }}"
bind:tap="onClick"
>
<van-icon
wx:if="{{ leftIcon }}"
size="16px"
name="{{ leftIcon }}"
class="van-notice-bar__left-icon"
/>
<slot wx:else name="left-icon" />
<view class="van-notice-bar__wrap">
<view class="van-notice-bar__content {{ !scrollable && !wrapable ? 'van-ellipsis' : '' }}" animation="{{ animationData }}">
{{ text }}
</view>
</view>
<van-icon
wx:if="{{ mode === 'closeable' }}"
class="van-notice-bar__right-icon"
name="cross"
catch:tap="onClickIcon"
/>
<navigator
wx:elif="{{ mode === 'link' }}"
url="{{ url }}"
open-type="{{ openType }}"
>
<van-icon class="van-notice-bar__right-icon" name="arrow" />
</navigator>
<slot wx:else name="right-icon" />
</view>
@import '../common/index.wxss';.van-notice-bar{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:40px;height:var(--notice-bar-height,40px);padding:0 16px;padding:var(--notice-bar-padding,0 16px);font-size:14px;font-size:var(--notice-bar-font-size,14px);color:#ed6a0c;color:var(--notice-bar-text-color,#ed6a0c);line-height:24px;line-height:var(--notice-bar-line-height,24px);background-color:#fffbe8;background-color:var(--notice-bar-background-color,#fffbe8)}.van-notice-bar--withicon{position:relative;padding-right:40px}.van-notice-bar--wrapable{height:auto;padding:8px 16px;padding:var(--notice-bar-wrapable-padding,8px 16px)}.van-notice-bar--wrapable .van-notice-bar__wrap{height:auto}.van-notice-bar--wrapable .van-notice-bar__content{position:relative;white-space:normal}.van-notice-bar__left-icon{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin-right:4px;vertical-align:middle}.van-notice-bar__left-icon,.van-notice-bar__right-icon{font-size:16px;font-size:var(--notice-bar-icon-size,16px);min-width:22px;min-width:var(--notice-bar-icon-min-width,22px)}.van-notice-bar__right-icon{position:absolute;top:10px;right:15px}.van-notice-bar__wrap{position:relative;-webkit-flex:1;flex:1;overflow:hidden;height:24px;height:var(--notice-bar-line-height,24px)}.van-notice-bar__content{position:absolute;white-space:nowrap}.van-notice-bar__content.van-ellipsis{max-width:100%}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var color_1 = require('../common/color');
component_1.VantComponent({
props: {
message: String,
background: String,
type: {
type: String,
value: 'danger',
},
color: {
type: String,
value: color_1.WHITE,
},
duration: {
type: Number,
value: 3000,
},
zIndex: {
type: Number,
value: 110,
},
safeAreaInsetTop: {
type: Boolean,
value: false,
},
top: null,
},
data: {
show: false,
},
created: function () {
var statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
this.setData({ statusBarHeight: statusBarHeight });
},
methods: {
show: function () {
var _this = this;
var _a = this.data,
duration = _a.duration,
onOpened = _a.onOpened;
clearTimeout(this.timer);
this.setData({ show: true });
wx.nextTick(onOpened);
if (duration > 0 && duration !== Infinity) {
this.timer = setTimeout(function () {
_this.hide();
}, duration);
}
},
hide: function () {
var onClose = this.data.onClose;
clearTimeout(this.timer);
this.setData({ show: false });
wx.nextTick(onClose);
},
onTap: function (event) {
var onClick = this.data.onClick;
if (onClick) {
onClick(event.detail);
}
},
},
});
{
"component": true,
"usingComponents": {
"van-transition": "../transition/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<van-transition
name="slide-down"
show="{{ show }}"
custom-class="van-notify__container"
custom-style="z-index: {{ zIndex }}; top: {{ utils.addUnit(top) }}"
bind:tap="onTap"
>
<view
class="van-notify van-notify--{{ type }}"
style="background:{{ background }};color:{{ color }};"
>
<view
wx:if="{{ safeAreaInsetTop }}"
style="height: {{ statusBarHeight }}px"
/>
<text>{{ message }}</text>
</view>
</van-transition>
@import '../common/index.wxss';.van-notify{text-align:center;word-wrap:break-word;padding:6px 15px;padding:var(--notify-padding,6px 15px);font-size:14px;font-size:var(--notify-font-size,14px);line-height:20px;line-height:var(--notify-line-height,20px)}.van-notify__container{position:fixed;top:0;box-sizing:border-box;width:100%}.van-notify--primary{background-color:#1989fa;background-color:var(--notify-primary-background-color,#1989fa)}.van-notify--success{background-color:#07c160;background-color:var(--notify-success-background-color,#07c160)}.van-notify--danger{background-color:#ee0a24;background-color:var(--notify-danger-background-color,#ee0a24)}.van-notify--warning{background-color:#ff976a;background-color:var(--notify-warning-background-color,#ff976a)}
\ No newline at end of file
interface NotifyOptions {
type?: 'primary' | 'success' | 'danger' | 'warning';
color?: string;
zIndex?: number;
top?: number;
message: string;
context?: any;
duration?: number;
selector?: string;
background?: string;
safeAreaInsetTop?: boolean;
onClick?: () => void;
onOpened?: () => void;
onClose?: () => void;
}
declare function Notify(options: NotifyOptions | string): any;
declare namespace Notify {
var clear: (options?: NotifyOptions) => void;
}
export default Notify;
'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 });
var color_1 = require('../common/color');
var defaultOptions = {
selector: '#van-notify',
type: 'danger',
message: '',
background: '',
duration: 3000,
zIndex: 110,
top: 0,
color: color_1.WHITE,
safeAreaInsetTop: false,
onClick: function () {},
onOpened: function () {},
onClose: function () {},
};
function parseOptions(message) {
return typeof message === 'string' ? { message: message } : message;
}
function getContext() {
var pages = getCurrentPages();
return pages[pages.length - 1];
}
function Notify(options) {
options = __assign(__assign({}, defaultOptions), parseOptions(options));
var context = options.context || getContext();
var notify = context.selectComponent(options.selector);
delete options.context;
delete options.selector;
if (notify) {
notify.setData(options);
notify.show();
return notify;
}
console.warn('未找到 van-notify 节点,请确认 selector 及 context 是否正确');
}
exports.default = Notify;
Notify.clear = function (options) {
options = __assign(__assign({}, defaultOptions), parseOptions(options));
var context = options.context || getContext();
var notify = context.selectComponent(options.selector);
if (notify) {
notify.hide();
}
};
import { VantComponent } from '../common/component'; 'use strict';
VantComponent({ Object.defineProperty(exports, '__esModule', { value: true });
props: { var component_1 = require('../common/component');
show: Boolean, component_1.VantComponent({
customStyle: String, props: {
duration: { show: Boolean,
type: null, customStyle: String,
value: 300 duration: {
}, type: null,
zIndex: { value: 300,
type: Number,
value: 1
}
}, },
methods: { zIndex: {
onClick() { type: Number,
this.$emit('click'); value: 1,
}, },
// for prevent touchmove },
noop() { } methods: {
} onClick: function () {
this.$emit('click');
},
// for prevent touchmove
noop: function () {},
},
}); });
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
classes: ['header-class', 'footer-class'],
props: {
desc: String,
title: String,
status: String,
useFooterSlot: Boolean,
},
});
{
"component": true,
"usingComponents": {
"van-cell": "../cell/index"
}
}
<view class="van-panel van-hairline--top-bottom custom-class">
<van-cell
wx:if="{{ title || desc || status }}"
title="{{ title }}"
label="{{ desc }}"
value="{{ status }}"
custom-class="header-class"
value-class="van-panel__header-value"
/>
<slot wx:else name="header" />
<view class="van-panel__content">
<slot />
</view>
<view wx:if="{{ useFooterSlot }}" class="van-panel__footer van-hairline--top footer-class">
<slot name="footer" />
</view>
</view>
@import '../common/index.wxss';.van-panel{background:#fff;background:var(--panel-background-color,#fff)}.van-panel__header-value{color:#ee0a24;color:var(--panel-header-value-color,#ee0a24)}.van-panel__footer{padding:8px 16px;padding:var(--panel-footer-padding,8px 16px)}
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
import { isObj, range } from '../common/utils'; Object.defineProperty(exports, '__esModule', { value: true });
const DEFAULT_DURATION = 200; var component_1 = require('../common/component');
VantComponent({ var utils_1 = require('../common/utils');
classes: ['active-class'], var DEFAULT_DURATION = 200;
props: { component_1.VantComponent({
valueKey: String, classes: ['active-class'],
className: String, props: {
itemHeight: Number, valueKey: String,
visibleItemCount: Number, className: String,
initialOptions: { itemHeight: Number,
type: Array, visibleItemCount: Number,
value: [] initialOptions: {
}, type: Array,
defaultIndex: { value: [],
type: Number, },
value: 0, defaultIndex: {
observer(value) { type: Number,
this.setIndex(value); value: 0,
} observer: function (value) {
} this.setIndex(value);
},
},
},
data: {
startY: 0,
offset: 0,
duration: 0,
startOffset: 0,
options: [],
currentIndex: 0,
},
created: function () {
var _this = this;
var _a = this.data,
defaultIndex = _a.defaultIndex,
initialOptions = _a.initialOptions;
this.set({
currentIndex: defaultIndex,
options: initialOptions,
}).then(function () {
_this.setIndex(defaultIndex);
});
},
methods: {
getCount: function () {
return this.data.options.length;
}, },
data: { onTouchStart: function (event) {
startY: 0, this.setData({
offset: 0, startY: event.touches[0].clientY,
startOffset: this.data.offset,
duration: 0, duration: 0,
startOffset: 0, });
options: [], },
currentIndex: 0 onTouchMove: function (event) {
var data = this.data;
var deltaY = event.touches[0].clientY - data.startY;
this.setData({
offset: utils_1.range(
data.startOffset + deltaY,
-(this.getCount() * data.itemHeight),
data.itemHeight
),
});
},
onTouchEnd: function () {
var data = this.data;
if (data.offset !== data.startOffset) {
this.setData({ duration: DEFAULT_DURATION });
var index = utils_1.range(
Math.round(-data.offset / data.itemHeight),
0,
this.getCount() - 1
);
this.setIndex(index, true);
}
},
onClickItem: function (event) {
var index = event.currentTarget.dataset.index;
this.setIndex(index, true);
}, },
created() { adjustIndex: function (index) {
const { defaultIndex, initialOptions } = this.data; var data = this.data;
this.set({ var count = this.getCount();
currentIndex: defaultIndex, index = utils_1.range(index, 0, count);
options: initialOptions for (var i = index; i < count; i++) {
}).then(() => { if (!this.isDisabled(data.options[i])) return i;
this.setIndex(defaultIndex); }
}); for (var i = index - 1; i >= 0; i--) {
if (!this.isDisabled(data.options[i])) return i;
}
}, },
methods: { isDisabled: function (option) {
getCount() { return utils_1.isObj(option) && option.disabled;
return this.data.options.length; },
}, getOptionText: function (option) {
onTouchStart(event) { var data = this.data;
this.setData({ return utils_1.isObj(option) && data.valueKey in option
startY: event.touches[0].clientY, ? option[data.valueKey]
startOffset: this.data.offset, : option;
duration: 0 },
}); setIndex: function (index, userAction) {
}, var _this = this;
onTouchMove(event) { var data = this.data;
const { data } = this; index = this.adjustIndex(index) || 0;
const deltaY = event.touches[0].clientY - data.startY; var offset = -index * data.itemHeight;
this.setData({ if (index !== data.currentIndex) {
offset: range(data.startOffset + deltaY, -(this.getCount() * data.itemHeight), data.itemHeight) return this.set({ offset: offset, currentIndex: index }).then(
}); function () {
}, userAction && _this.$emit('change', index);
onTouchEnd() { }
const { data } = this; );
if (data.offset !== data.startOffset) { }
this.setData({ duration: DEFAULT_DURATION }); return this.set({ offset: offset });
const index = range(Math.round(-data.offset / data.itemHeight), 0, this.getCount() - 1); },
this.setIndex(index, true); setValue: function (value) {
} var options = this.data.options;
}, for (var i = 0; i < options.length; i++) {
onClickItem(event) { if (this.getOptionText(options[i]) === value) {
const { index } = event.currentTarget.dataset; return this.setIndex(i);
this.setIndex(index, true);
},
adjustIndex(index) {
const { data } = this;
const count = this.getCount();
index = range(index, 0, count);
for (let i = index; i < count; i++) {
if (!this.isDisabled(data.options[i]))
return i;
}
for (let i = index - 1; i >= 0; i--) {
if (!this.isDisabled(data.options[i]))
return i;
}
},
isDisabled(option) {
return isObj(option) && option.disabled;
},
getOptionText(option) {
const { data } = this;
return isObj(option) && data.valueKey in option
? option[data.valueKey]
: option;
},
setIndex(index, userAction) {
const { data } = this;
index = this.adjustIndex(index) || 0;
const offset = -index * data.itemHeight;
if (index !== data.currentIndex) {
return this.set({ offset, currentIndex: index }).then(() => {
userAction && this.$emit('change', index);
});
}
return this.set({ offset });
},
setValue(value) {
const { options } = this.data;
for (let i = 0; i < options.length; i++) {
if (this.getOptionText(options[i]) === value) {
return this.setIndex(i);
}
}
return Promise.resolve();
},
getValue() {
const { data } = this;
return data.options[data.currentIndex];
} }
} }
return Promise.resolve();
},
getValue: function () {
var data = this.data;
return data.options[data.currentIndex];
},
},
}); });
{ {
"component": true "component": true
} }
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
import { pickerProps } from './shared'; var __assign =
VantComponent({ (this && this.__assign) ||
classes: ['active-class', 'toolbar-class', 'column-class'], function () {
props: Object.assign(Object.assign({}, pickerProps), { valueKey: { __assign =
type: String, Object.assign ||
value: 'text' function (t) {
}, toolbarPosition: { for (var s, i = 1, n = arguments.length; i < n; i++) {
type: String, s = arguments[i];
value: 'top' for (var p in s)
}, defaultIndex: { if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
type: Number,
value: 0
}, columns: {
type: Array,
value: [],
observer(columns = []) {
this.simple = columns.length && !columns[0].values;
this.children = this.selectAllComponents('.van-picker__column');
if (Array.isArray(this.children) && this.children.length) {
this.setColumns().catch(() => { });
}
}
} }),
beforeCreate() {
this.children = [];
},
methods: {
noop() { },
setColumns() {
const { data } = this;
const columns = this.simple ? [{ values: data.columns }] : data.columns;
const stack = columns.map((column, index) => this.setColumnValues(index, column.values));
return Promise.all(stack);
},
emit(event) {
const { type } = event.currentTarget.dataset;
if (this.simple) {
this.$emit(type, {
value: this.getColumnValue(0),
index: this.getColumnIndex(0)
});
}
else {
this.$emit(type, {
value: this.getValues(),
index: this.getIndexes()
});
}
},
onChange(event) {
if (this.simple) {
this.$emit('change', {
picker: this,
value: this.getColumnValue(0),
index: this.getColumnIndex(0)
});
}
else {
this.$emit('change', {
picker: this,
value: this.getValues(),
index: event.currentTarget.dataset.index
});
}
},
// get column instance by index
getColumn(index) {
return this.children[index];
},
// get column value by index
getColumnValue(index) {
const column = this.getColumn(index);
return column && column.getValue();
},
// set column value by index
setColumnValue(index, value) {
const column = this.getColumn(index);
if (column == null) {
return Promise.reject(new Error('setColumnValue: 对应列不存在'));
}
return column.setValue(value);
},
// get column option index by column index
getColumnIndex(columnIndex) {
return (this.getColumn(columnIndex) || {}).data.currentIndex;
},
// set column option index by column index
setColumnIndex(columnIndex, optionIndex) {
const column = this.getColumn(columnIndex);
if (column == null) {
return Promise.reject(new Error('setColumnIndex: 对应列不存在'));
}
return column.setIndex(optionIndex);
},
// get options of column by index
getColumnValues(index) {
return (this.children[index] || {}).data.options;
},
// set options of column by index
setColumnValues(index, options, needReset = true) {
const column = this.children[index];
if (column == null) {
return Promise.reject(new Error('setColumnValues: 对应列不存在'));
}
const isSame = JSON.stringify(column.data.options) === JSON.stringify(options);
if (isSame) {
return Promise.resolve();
}
return column.set({ options }).then(() => {
if (needReset) {
column.setIndex(0);
}
});
},
// get values of all columns
getValues() {
return this.children.map((child) => child.getValue());
},
// set values of all columns
setValues(values) {
const stack = values.map((value, index) => this.setColumnValue(index, value));
return Promise.all(stack);
},
// get indexes of all columns
getIndexes() {
return this.children.map((child) => child.data.currentIndex);
},
// set indexes of all columns
setIndexes(indexes) {
const stack = indexes.map((optionIndex, columnIndex) => this.setColumnIndex(columnIndex, optionIndex));
return Promise.all(stack);
} }
} return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var shared_1 = require('./shared');
component_1.VantComponent({
classes: ['active-class', 'toolbar-class', 'column-class'],
props: __assign(__assign({}, shared_1.pickerProps), {
valueKey: {
type: String,
value: 'text',
},
toolbarPosition: {
type: String,
value: 'top',
},
defaultIndex: {
type: Number,
value: 0,
},
columns: {
type: Array,
value: [],
observer: function (columns) {
if (columns === void 0) {
columns = [];
}
this.simple = columns.length && !columns[0].values;
this.children = this.selectAllComponents('.van-picker__column');
if (Array.isArray(this.children) && this.children.length) {
this.setColumns().catch(function () {});
}
},
},
}),
beforeCreate: function () {
this.children = [];
},
methods: {
noop: function () {},
setColumns: function () {
var _this = this;
var data = this.data;
var columns = this.simple ? [{ values: data.columns }] : data.columns;
var stack = columns.map(function (column, index) {
return _this.setColumnValues(index, column.values);
});
return Promise.all(stack);
},
emit: function (event) {
var type = event.currentTarget.dataset.type;
if (this.simple) {
this.$emit(type, {
value: this.getColumnValue(0),
index: this.getColumnIndex(0),
});
} else {
this.$emit(type, {
value: this.getValues(),
index: this.getIndexes(),
});
}
},
onChange: function (event) {
if (this.simple) {
this.$emit('change', {
picker: this,
value: this.getColumnValue(0),
index: this.getColumnIndex(0),
});
} else {
this.$emit('change', {
picker: this,
value: this.getValues(),
index: event.currentTarget.dataset.index,
});
}
},
// get column instance by index
getColumn: function (index) {
return this.children[index];
},
// get column value by index
getColumnValue: function (index) {
var column = this.getColumn(index);
return column && column.getValue();
},
// set column value by index
setColumnValue: function (index, value) {
var column = this.getColumn(index);
if (column == null) {
return Promise.reject(new Error('setColumnValue: 对应列不存在'));
}
return column.setValue(value);
},
// get column option index by column index
getColumnIndex: function (columnIndex) {
return (this.getColumn(columnIndex) || {}).data.currentIndex;
},
// set column option index by column index
setColumnIndex: function (columnIndex, optionIndex) {
var column = this.getColumn(columnIndex);
if (column == null) {
return Promise.reject(new Error('setColumnIndex: 对应列不存在'));
}
return column.setIndex(optionIndex);
},
// get options of column by index
getColumnValues: function (index) {
return (this.children[index] || {}).data.options;
},
// set options of column by index
setColumnValues: function (index, options, needReset) {
if (needReset === void 0) {
needReset = true;
}
var column = this.children[index];
if (column == null) {
return Promise.reject(new Error('setColumnValues: 对应列不存在'));
}
var isSame =
JSON.stringify(column.data.options) === JSON.stringify(options);
if (isSame) {
return Promise.resolve();
}
return column.set({ options: options }).then(function () {
if (needReset) {
column.setIndex(0);
}
});
},
// get values of all columns
getValues: function () {
return this.children.map(function (child) {
return child.getValue();
});
},
// set values of all columns
setValues: function (values) {
var _this = this;
var stack = values.map(function (value, index) {
return _this.setColumnValue(index, value);
});
return Promise.all(stack);
},
// get indexes of all columns
getIndexes: function () {
return this.children.map(function (child) {
return child.data.currentIndex;
});
},
// set indexes of all columns
setIndexes: function (indexes) {
var _this = this;
var stack = indexes.map(function (optionIndex, columnIndex) {
return _this.setColumnIndex(columnIndex, optionIndex);
});
return Promise.all(stack);
},
},
}); });
<import src="./toolbar" /> <import src="./toolbar.wxml" />
<view class="van-picker custom-class"> <view class="van-picker custom-class">
<template is="toolbar" wx:if="{{ toolbarPosition === 'top' }}" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template> <template is="toolbar" wx:if="{{ toolbarPosition === 'top' }}" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template>
......
@import '../common/index.wxss';.van-picker{position:relative;overflow:hidden;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;background-color:#fff;background-color:var(--picker-background-color,#fff)}.van-picker__toolbar{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;height:44px;height:var(--picker-toolbar-height,44px);line-height:44px;line-height:var(--picker-toolbar-height,44px)}.van-picker__cancel,.van-picker__confirm{padding:0 16px;padding:var(--picker-action-padding,0 16px);font-size:14px;font-size:var(--picker-action-font-size,14px);color:#1989fa;color:var(--picker-action-text-color,#1989fa)}.van-picker__cancel--hover,.van-picker__confirm--hover{background-color:#f2f3f5;background-color:var(--picker-action-active-color,#f2f3f5)}.van-picker__title{max-width:50%;text-align:center;font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--picker-option-font-size,16px)}.van-picker__columns{position:relative;display:-webkit-flex;display:flex}.van-picker__column{-webkit-flex:1 1;flex:1 1;width:0}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background-color:hsla(0,0%,100%,.9);background-color:var(--picker-loading-mask-color,hsla(0,0%,100%,.9))}.van-picker__mask{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none}.van-picker__frame,.van-picker__loading .van-loading{position:absolute;top:50%;left:0;z-index:1;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none} @import '../common/index.wxss';.van-picker{position:relative;overflow:hidden;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;background-color:#fff;background-color:var(--picker-background-color,#fff)}.van-picker__toolbar{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;height:44px;height:var(--picker-toolbar-height,44px);line-height:44px;line-height:var(--picker-toolbar-height,44px)}.van-picker__cancel,.van-picker__confirm{padding:0 16px;padding:var(--picker-action-padding,0 16px);font-size:14px;font-size:var(--picker-action-font-size,14px)}.van-picker__cancel--hover,.van-picker__confirm--hover{opacity:.7}.van-picker__confirm{color:#576b95;color:var(--picker-confirm-action-color,#576b95)}.van-picker__cancel{color:#969799;color:var(--picker-cancel-action-color,#969799)}.van-picker__title{max-width:50%;text-align:center;font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--picker-option-font-size,16px)}.van-picker__columns{position:relative;display:-webkit-flex;display:flex}.van-picker__column{-webkit-flex:1 1;flex:1 1;width:0}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background-color:hsla(0,0%,100%,.9);background-color:var(--picker-loading-mask-color,hsla(0,0%,100%,.9))}.van-picker__mask{top:0;left:0;z-index:2;width:100%;height:100%;background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden}.van-picker__frame,.van-picker__mask{position:absolute;pointer-events:none}.van-picker__frame{top:50%;right:16px;left:16px;z-index:1;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
\ No newline at end of file \ No newline at end of file
export const pickerProps = { 'use strict';
title: String, Object.defineProperty(exports, '__esModule', { value: true });
loading: Boolean, exports.pickerProps = void 0;
showToolbar: Boolean, exports.pickerProps = {
cancelButtonText: { title: String,
type: String, loading: Boolean,
value: '取消' showToolbar: Boolean,
}, cancelButtonText: {
confirmButtonText: { type: String,
type: String, value: '取消',
value: '确认' },
}, confirmButtonText: {
visibleItemCount: { type: String,
type: Number, value: '确认',
value: 5 },
}, visibleItemCount: {
itemHeight: { type: Number,
type: Number, value: 6,
value: 44 },
} itemHeight: {
type: Number,
value: 44,
},
}; };
<template name="toolbar"> <template name="toolbar">
<view <view
wx:if="{{ showToolbar }}" wx:if="{{ showToolbar }}"
class="van-picker__toolbar van-hairline--top-bottom toolbar-class" class="van-picker__toolbar toolbar-class"
> >
<view <view
class="van-picker__cancel" class="van-picker__cancel"
......
import { VantComponent } from '../common/component'; 'use strict';
import { transition } from '../mixins/transition'; Object.defineProperty(exports, '__esModule', { value: true });
VantComponent({ var component_1 = require('../common/component');
classes: [ var transition_1 = require('../mixins/transition');
'enter-class', component_1.VantComponent({
'enter-active-class', classes: [
'enter-to-class', 'enter-class',
'leave-class', 'enter-active-class',
'leave-active-class', 'enter-to-class',
'leave-to-class' 'leave-class',
], 'leave-active-class',
mixins: [transition(false)], 'leave-to-class',
props: { 'close-icon-class',
round: Boolean, ],
closeable: Boolean, mixins: [transition_1.transition(false)],
customStyle: String, props: {
overlayStyle: String, round: Boolean,
transition: { closeable: Boolean,
type: String, customStyle: String,
observer: 'observeClass' overlayStyle: String,
}, transition: {
zIndex: { type: String,
type: Number, observer: 'observeClass',
value: 100
},
overlay: {
type: Boolean,
value: true
},
closeIcon: {
type: String,
value: 'cross'
},
closeIconPosition: {
type: String,
value: 'top-right'
},
closeOnClickOverlay: {
type: Boolean,
value: true
},
position: {
type: String,
value: 'center',
observer: 'observeClass'
},
safeAreaInsetBottom: {
type: Boolean,
value: true
},
safeAreaInsetTop: {
type: Boolean,
value: false
}
}, },
created() { zIndex: {
this.observeClass(); type: Number,
value: 100,
}, },
methods: { overlay: {
onClickCloseIcon() { type: Boolean,
this.$emit('close'); value: true,
}, },
onClickOverlay() { closeIcon: {
this.$emit('click-overlay'); type: String,
if (this.data.closeOnClickOverlay) { value: 'cross',
this.$emit('close'); },
} closeIconPosition: {
}, type: String,
observeClass() { value: 'top-right',
const { transition, position } = this.data; },
const updateData = { closeOnClickOverlay: {
name: transition || position type: Boolean,
}; value: true,
if (transition === 'none') { },
updateData.duration = 0; position: {
} type: String,
this.setData(updateData); value: 'center',
} observer: 'observeClass',
} },
safeAreaInsetBottom: {
type: Boolean,
value: true,
},
safeAreaInsetTop: {
type: Boolean,
value: false,
},
},
created: function () {
this.observeClass();
},
methods: {
onClickCloseIcon: function () {
this.$emit('close');
},
onClickOverlay: function () {
this.$emit('click-overlay');
if (this.data.closeOnClickOverlay) {
this.$emit('close');
}
},
observeClass: function () {
var _a = this.data,
transition = _a.transition,
position = _a.position,
duration = _a.duration;
var updateData = {
name: transition || position,
};
if (transition === 'none') {
updateData.duration = 0;
this.originDuration = duration;
} else if (this.originDuration != null) {
updateData.duration = this.originDuration;
}
this.setData(updateData);
},
},
}); });
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<van-icon <van-icon
wx:if="{{ closeable }}" wx:if="{{ closeable }}"
name="{{ closeIcon }}" name="{{ closeIcon }}"
class="van-popup__close-icon van-popup__close-icon--{{ closeIconPosition }}" class="close-icon-class van-popup__close-icon van-popup__close-icon--{{ closeIconPosition }}"
bind:tap="onClickCloseIcon" bind:tap="onClickCloseIcon"
/> />
</view> </view>
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var color_1 = require('../common/color');
component_1.VantComponent({
props: {
inactive: Boolean,
percentage: Number,
pivotText: String,
pivotColor: String,
trackColor: String,
showPivot: {
type: Boolean,
value: true,
},
color: {
type: String,
value: color_1.BLUE,
},
textColor: {
type: String,
value: '#fff',
},
strokeWidth: {
type: null,
value: 4,
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="getters" />
<view
class="van-progress custom-class"
style="height: {{ utils.addUnit(strokeWidth) }}; {{ trackColor ? 'background: ' + trackColor : '' }}"
>
<view
class="van-progress__portion"
style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
>
<view
wx:if="{{ showPivot && getters.text(pivotText, percentage) }}"
style="color: {{ textColor }}; background: {{ pivotColor ? pivotColor : inactive ? '#cacaca' : color }}"
class="van-progress__pivot"
>
{{ getters.text(pivotText, percentage) }}
</view>
</view>
</view>
module.exports = {
text: function(pivotText, percentage) {
return pivotText || percentage + '%';
}
};
@import '../common/index.wxss';.van-progress{position:relative;height:4px;height:var(--progress-height,4px);border-radius:4px;border-radius:var(--progress-height,4px);background:#ebedf0;background:var(--progress-background-color,#ebedf0)}.van-progress__portion{position:absolute;left:0;height:100%;border-radius:inherit;background:#1989fa;background:var(--progress-color,#1989fa)}.van-progress__pivot{position:absolute;top:50%;right:0;box-sizing:border-box;min-width:2em;text-align:center;word-break:keep-all;border-radius:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#fff;color:var(--progress-pivot-text-color,#fff);padding:0 5px;padding:var(--progress-pivot-padding,0 5px);font-size:10px;font-size:var(--progress-pivot-font-size,10px);line-height:1.6;line-height:var(--progress-pivot-line-height,1.6);background-color:#1989fa;background-color:var(--progress-pivot-background-color,#1989fa)}
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
VantComponent({ Object.defineProperty(exports, '__esModule', { value: true });
field: true, var component_1 = require('../common/component');
relation: { component_1.VantComponent({
name: 'radio', field: true,
type: 'descendant', relation: {
current: 'radio-group', name: 'radio',
linked(target) { type: 'descendant',
this.updateChild(target); current: 'radio-group',
}, linked: function (target) {
this.updateChild(target);
}, },
props: { },
value: { props: {
type: null, value: {
observer: 'updateChildren' type: null,
}, observer: 'updateChildren',
disabled: {
type: Boolean,
observer: 'updateChildren'
}
}, },
methods: { disabled: {
updateChildren() { type: Boolean,
(this.children || []).forEach((child) => this.updateChild(child)); observer: 'updateChildren',
}, },
updateChild(child) { },
const { value, disabled } = this.data; methods: {
child.setData({ updateChildren: function () {
value, var _this = this;
disabled: disabled || child.data.disabled (this.children || []).forEach(function (child) {
}); return _this.updateChild(child);
} });
} },
updateChild: function (child) {
var _a = this.data,
value = _a.value,
disabled = _a.disabled;
child.setData({
value: value,
disabled: disabled || child.data.disabled,
});
},
},
}); });
import { VantComponent } from '../common/component'; 'use strict';
VantComponent({ Object.defineProperty(exports, '__esModule', { value: true });
field: true, var component_1 = require('../common/component');
relation: { component_1.VantComponent({
name: 'radio-group', field: true,
type: 'ancestor', relation: {
current: 'radio', name: 'radio-group',
type: 'ancestor',
current: 'radio',
},
classes: ['icon-class', 'label-class'],
props: {
name: null,
value: null,
disabled: Boolean,
useIconSlot: Boolean,
checkedColor: String,
labelPosition: {
type: String,
value: 'right',
}, },
classes: ['icon-class', 'label-class'], labelDisabled: Boolean,
props: { shape: {
name: null, type: String,
value: null, value: 'round',
disabled: Boolean,
useIconSlot: Boolean,
checkedColor: String,
labelPosition: {
type: String,
value: 'right'
},
labelDisabled: Boolean,
shape: {
type: String,
value: 'round'
},
iconSize: {
type: null,
value: 20
}
}, },
methods: { iconSize: {
emitChange(value) { type: null,
const instance = this.parent || this; value: 20,
instance.$emit('input', value); },
instance.$emit('change', value); },
}, methods: {
onChange() { emitChange: function (value) {
if (!this.data.disabled) { var instance = this.parent || this;
this.emitChange(this.data.name); instance.$emit('input', value);
} instance.$emit('change', value);
}, },
onClickLabel() { onChange: function () {
const { disabled, labelDisabled, name } = this.data; if (!this.data.disabled) {
if (!disabled && !labelDisabled) { this.emitChange(this.data.name);
this.emitChange(name); }
} },
} onClickLabel: function () {
} var _a = this.data,
disabled = _a.disabled,
labelDisabled = _a.labelDisabled,
name = _a.name;
if (!disabled && !labelDisabled) {
this.emitChange(name);
}
},
},
}); });
'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 });
var component_1 = require('../common/component');
var version_1 = require('../common/version');
component_1.VantComponent({
field: true,
classes: ['icon-class'],
props: {
value: {
type: Number,
observer: function (value) {
if (value !== this.data.innerValue) {
this.setData({ innerValue: value });
}
},
},
readonly: Boolean,
disabled: Boolean,
allowHalf: Boolean,
size: null,
icon: {
type: String,
value: 'star',
},
voidIcon: {
type: String,
value: 'star-o',
},
color: {
type: String,
value: '#ffd21e',
},
voidColor: {
type: String,
value: '#c7c7c7',
},
disabledColor: {
type: String,
value: '#bdbdbd',
},
count: {
type: Number,
value: 5,
observer: function (value) {
this.setData({ innerCountArray: Array.from({ length: value }) });
},
},
gutter: null,
touchable: {
type: Boolean,
value: true,
},
},
data: {
innerValue: 0,
innerCountArray: Array.from({ length: 5 }),
},
methods: {
onSelect: function (event) {
var _this = this;
var data = this.data;
var score = event.currentTarget.dataset.score;
if (!data.disabled && !data.readonly) {
this.setData({ innerValue: score + 1 });
if (version_1.canIUseModel()) {
this.setData({ value: score + 1 });
}
wx.nextTick(function () {
_this.$emit('input', score + 1);
_this.$emit('change', score + 1);
});
}
},
onTouchMove: function (event) {
var _this = this;
var touchable = this.data.touchable;
if (!touchable) return;
var clientX = event.touches[0].clientX;
this.getRect('.van-rate__icon', true).then(function (list) {
var target = list
.sort(function (item) {
return item.right - item.left;
})
.find(function (item) {
return clientX >= item.left && clientX <= item.right;
});
if (target != null) {
_this.onSelect(
__assign(__assign({}, event), { currentTarget: target })
);
}
});
},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="van-rate custom-class"
bind:touchmove="onTouchMove"
>
<view
class="van-rate__item"
wx:for="{{ innerCountArray }}"
wx:key="index"
style="padding-right: {{ index !== count - 1 ? utils.addUnit(gutter) : '' }}"
>
<van-icon
name="{{ index + 1 <= innerValue ? icon : voidIcon }}"
class="van-rate__icon"
style="font-size: {{ utils.addUnit(size) }}"
custom-class="icon-class"
data-score="{{ index }}"
color="{{ disabled ? disabledColor : index + 1 <= innerValue ? color : voidColor }}"
bind:click="onSelect"
/>
<van-icon
wx:if="{{ allowHalf }}"
name="{{ index + 0.5 <= innerValue ? icon : voidIcon }}"
class="{{ utils.bem('rate__icon', ['half']) }}"
style="font-size: {{ utils.addUnit(size) }}"
custom-class="icon-class"
data-score="{{ index - 0.5 }}"
color="{{ disabled ? disabledColor : index + 0.5 <= innerValue ? color : voidColor }}"
bind:click="onSelect"
/>
</view>
</view>
@import '../common/index.wxss';.van-rate{display:-webkit-inline-flex;display:inline-flex;-webkit-user-select:none;user-select:none}.van-rate__item{position:relative;padding:0 2px;padding:0 var(--rate-horizontal-padding,2px)}.van-rate__icon{display:block;height:1em;font-size:20px;font-size:var(--rate-icon-size,20px)}.van-rate__icon--half{position:absolute;top:0;width:.5em;overflow:hidden;left:2px;left:var(--rate-horizontal-padding,2px)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
relation: {
name: 'col',
type: 'descendant',
current: 'row',
linked: function (target) {
if (this.data.gutter) {
target.setGutter(this.data.gutter);
}
},
},
props: {
gutter: {
type: Number,
observer: 'setGutter',
},
},
data: {
viewStyle: '',
},
mounted: function () {
if (this.data.gutter) {
this.setGutter();
}
},
methods: {
setGutter: function () {
var _this = this;
var gutter = this.data.gutter;
var margin = '-' + Number(gutter) / 2 + 'px';
var viewStyle = gutter
? 'margin-right: ' + margin + '; margin-left: ' + margin + ';'
: '';
this.setData({ viewStyle: viewStyle });
this.getRelationNodes('../col/index').forEach(function (col) {
col.setGutter(_this.data.gutter);
});
},
},
});
<view class="custom-class van-row" style="{{ viewStyle }}">
<slot />
</view>
@import '../common/index.wxss';.van-row:after{display:table;clear:both;content:""}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var version_1 = require('../common/version');
component_1.VantComponent({
field: true,
classes: ['field-class', 'input-class', 'cancel-class'],
props: {
label: String,
focus: Boolean,
error: Boolean,
disabled: Boolean,
readonly: Boolean,
inputAlign: String,
showAction: Boolean,
useActionSlot: Boolean,
useLeftIconSlot: Boolean,
useRightIconSlot: Boolean,
leftIcon: {
type: String,
value: 'search',
},
rightIcon: String,
placeholder: String,
placeholderStyle: String,
actionText: {
type: String,
value: '取消',
},
background: {
type: String,
value: '#ffffff',
},
maxlength: {
type: Number,
value: -1,
},
shape: {
type: String,
value: 'square',
},
clearable: {
type: Boolean,
value: true,
},
},
methods: {
onChange: function (event) {
if (version_1.canIUseModel()) {
this.setData({ value: event.detail });
}
this.$emit('change', event.detail);
},
onCancel: function () {
var _this = this;
/**
* 修复修改输入框值时,输入框失焦和赋值同时触发,赋值失效
* https://github.com/youzan/@vant/weapp/issues/1768
*/
setTimeout(function () {
if (version_1.canIUseModel()) {
_this.setData({ value: '' });
}
_this.$emit('cancel');
_this.$emit('change', '');
}, 200);
},
onSearch: function (event) {
this.$emit('search', event.detail);
},
onFocus: function (event) {
this.$emit('focus', event.detail);
},
onBlur: function (event) {
this.$emit('blur', event.detail);
},
onClear: function (event) {
this.$emit('clear', event.detail);
},
},
});
{
"component": true,
"usingComponents": {
"van-field": "../field/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="{{ utils.bem('search', { withaction: showAction || useActionSlot }) }} custom-class"
style="background: {{ background }}"
>
<view class="{{ utils.bem('search__content', [shape]) }}">
<view class="van-search__label" wx:if="{{ label }}">{{ label }}</view>
<slot wx:else name="label" />
<van-field
type="search"
left-icon="{{ !useLeftIconSlot ? leftIcon : '' }}"
right-icon="{{ !useRightIconSlot ? rightIcon : '' }}"
focus="{{ focus }}"
error="{{ error }}"
border="{{ false }}"
confirm-type="search"
class="van-search__field field-class"
value="{{ value }}"
disabled="{{ disabled }}"
readonly="{{ readonly }}"
clearable="{{ clearable }}"
maxlength="{{ maxlength }}"
input-align="{{ inputAlign }}"
input-class="input-class"
placeholder="{{ placeholder }}"
placeholder-style="{{ placeholderStyle }}"
custom-style="padding: 5px 10px 5px 0; background-color: transparent;"
bind:blur="onBlur"
bind:focus="onFocus"
bind:change="onChange"
bind:confirm="onSearch"
bind:clear="onClear"
>
<slot wx:if="{{ useLeftIconSlot }}" name="left-icon" slot="left-icon" />
<slot wx:if="{{ useRightIconSlot }}" name="right-icon" slot="right-icon" />
</van-field>
</view>
<view
wx:if="{{ showAction || useActionSlot }}"
class="van-search__action"
hover-class="van-search__action--hover"
hover-stay-time="70"
>
<slot wx:if="{{ useActionSlot }}" name="action" />
<view wx:else bind:tap="onCancel" class="cancel-class">{{ actionText }}</view>
</view>
</view>
@import '../common/index.wxss';.van-search{-webkit-align-items:center;align-items:center;box-sizing:border-box;padding:10px 12px;padding:var(--search-padding,10px 12px)}.van-search,.van-search__content{display:-webkit-flex;display:flex}.van-search__content{-webkit-flex:1;flex:1;padding-left:8px;padding-left:var(--padding-xs,8px);border-radius:2px;border-radius:var(--border-radius-sm,2px);background-color:#f7f8fa;background-color:var(--search-background-color,#f7f8fa)}.van-search__content--round{border-radius:17px;border-radius:calc(var(--search-input-height, 34px)/2)}.van-search__label{padding:0 5px;padding:var(--search-label-padding,0 5px);font-size:14px;font-size:var(--search-label-font-size,14px);line-height:34px;line-height:var(--search-input-height,34px);color:#323233;color:var(--search-label-color,#323233)}.van-search__field{-webkit-flex:1;flex:1}.van-search__field__left-icon{color:#969799;color:var(--search-left-icon-color,#969799)}.van-search--withaction{padding-right:0}.van-search__action{padding:0 8px;padding:var(--search-action-padding,0 8px);font-size:14px;font-size:var(--search-action-font-size,14px);line-height:34px;line-height:var(--search-input-height,34px);color:#323233;color:var(--search-action-text-color,#323233)}.van-search__action--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
props: {
// whether to show popup
show: Boolean,
// overlay custom style
overlayStyle: Object,
// z-index
zIndex: [Number, String],
title: String,
cancelText: {
type: String,
value: '取消',
},
description: String,
options: {
type: Array,
value: [],
},
overlay: {
type: Boolean,
value: true,
},
safeAreaInsetBottom: {
type: Boolean,
value: true,
},
closeOnClickOverlay: {
type: Boolean,
value: true,
},
duration: {
type: null,
value: 300,
},
},
methods: {
onClickOverlay: function () {
this.$emit('click-overlay');
},
onCancel: function () {
this.onClose();
this.$emit('cancel');
},
onSelect: function (event) {
this.$emit('select', event.detail);
},
onClose: function () {
this.$emit('close');
},
},
});
{
"component": true,
"usingComponents": {
"van-popup": "../popup/index",
"options": "./options"
}
}
<wxs src="./index.wxs" module="computed" />
<van-popup
round
class="van-share-sheet"
show="{{ show }}"
position="bottom"
overlay="{{ overlay }}"
duration="{{ duration }}"
z-index="{{ zIndex }}"
overlay-style="{{ overlayStyle }}"
close-on-click-overlay="{{ closeOnClickOverlay }}"
safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
bind:close="onClose"
bind:click-overlay="onClickOverlay"
>
<view class="van-share-sheet__header">
<view class="van-share-sheet__title">
<slot name="title" />
</view>
<view wx:if="{{ title }}" class="van-share-sheet__title">{{ title }}</view>
<view class="van-share-sheet__description">
<slot name="description" />
</view>
<view wx:if="{{ description }}" class="van-share-sheet__description">
{{ description }}
</view>
</view>
<block wx:if="{{ computed.isMulti(options) }}">
<options
wx:for="{{ options }}"
show-border="{{ index !== 0 }}"
wx:key="index"
options="{{ item }}"
bind:select="onSelect"
/>
</block>
<options wx:else options="{{ options }}" bind:select="onSelect" />
<button type="button" class="van-share-sheet__cancel" bindtap="onCancel">
{{ cancelText }}
</button>
</van-popup>
/* eslint-disable */
function isMulti(options) {
if (options == null || options[0] == null) {
return false;
}
return "Array" === options.constructor && "Array" === options[0].constructor;
}
module.exports = {
isMulti: isMulti
};
@import '../common/index.wxss';.van-share-sheet__header{padding:12px 16px 4px;text-align:center}.van-share-sheet__title{margin-top:8px;color:#323233;font-weight:400;font-size:14px;line-height:20px}.van-share-sheet__title:empty,.van-share-sheet__title:not(:empty)+.van-share-sheet__title{display:none}.van-share-sheet__description{display:block;margin-top:8px;color:#969799;font-size:12px;line-height:16px}.van-share-sheet__description:empty,.van-share-sheet__description:not(:empty)+.van-share-sheet__description{display:none}.van-share-sheet__cancel{display:block;box-sizing:initial;width:100%;height:auto;padding:0;font-size:16px;line-height:48px;text-align:center;background:#fff;border:none}.van-share-sheet__cancel:before{display:block;height:8px;background-color:#f7f8fa;content:" "}.van-share-sheet__cancel:after{display:none}.van-share-sheet__cancel:active{background-color:#f2f3f5}
\ No newline at end of file
'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 });
var component_1 = require('../common/component');
component_1.VantComponent({
props: {
options: Array,
showBorder: Boolean,
},
methods: {
onSelect: function (event) {
var index = event.currentTarget.dataset.index;
var option = this.data.options[index];
this.$emit('select', __assign(__assign({}, option), { index: index }));
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./options.wxs" module="computed" />
<view class="{{ utils.bem('share-sheet__options', { border: showBorder }) }}">
<view
wx:for="{{ options }}"
wx:key="index"
class="van-share-sheet__option"
data-index="{{ index }}"
bindtap="onSelect"
>
<image src="{{ computed.getIconURL(item.icon) }}" class="van-share-sheet__icon" />
<view wx:if="{{ item.name }}" class="van-share-sheet__name">{{ item.name }}</view>
<view wx:if="{{ item.description }}" class="van-share-sheet__option-description">
{{ item.description }}
</view>
</view>
</view>
/* eslint-disable */
var PRESET_ICONS = ['qq', 'weibo', 'wechat', 'link', 'qrcode', 'poster'];
function getIconURL(icon) {
if (PRESET_ICONS.indexOf(icon) !== -1) {
return 'https://img.yzcdn.cn/vant/share-icon-' + icon + '.png';
}
return icon;
}
module.exports = {
getIconURL: getIconURL,
};
@import '../common/index.wxss';.van-share-sheet__options{position:relative;display:-webkit-flex;display:flex;padding:16px 0 16px 8px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.van-share-sheet__options--border:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:16px;border-top:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-share-sheet__options::-webkit-scrollbar{height:0}.van-share-sheet__option{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-user-select:none;user-select:none}.van-share-sheet__option:active{opacity:.7}.van-share-sheet__icon{width:48px;height:48px;margin:0 16px}.van-share-sheet__name{margin-top:8px;padding:0 4px;color:#646566;font-size:12px}.van-share-sheet__option-description{padding:0 4px;color:#c8c9cc;font-size:12px}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
classes: ['active-class', 'disabled-class'],
relation: {
type: 'ancestor',
name: 'sidebar',
current: 'sidebar-item',
},
props: {
dot: Boolean,
badge: null,
info: null,
title: String,
disabled: Boolean,
},
methods: {
onClick: function () {
var _this = this;
var parent = this.parent;
if (!parent || this.data.disabled) {
return;
}
var index = parent.children.indexOf(this);
parent.setActive(index).then(function () {
_this.$emit('click', index);
parent.$emit('change', index);
});
},
setActive: function (selected) {
return this.setData({ selected: selected });
},
},
});
{
"component": true,
"usingComponents": {
"van-info": "../info/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="{{ utils.bem('sidebar-item', { selected, disabled }) }} {{ selected ? 'active-class' : '' }} {{ disabled ? 'disabled-class' : '' }} custom-class"
hover-class="van-sidebar-item--hover"
hover-stay-time="70"
bind:tap="onClick"
>
<view class="van-sidebar-item__text">
<van-info
wx:if="{{ badge != null || info !== null || dot }}"
dot="{{ dot }}"
info="{{ badge != null ? badge : info }}"
/>
<view wx:if="{{ title }}">{{ title }}</view>
<slot wx:else name="title" />
</view>
</view>
@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)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
relation: {
name: 'sidebar-item',
type: 'descendant',
current: 'sidebar',
linked: function () {
this.setActive(this.data.activeKey);
},
unlinked: function () {
this.setActive(this.data.activeKey);
},
},
props: {
activeKey: {
type: Number,
value: 0,
observer: 'setActive',
},
},
beforeCreate: function () {
this.currentActive = -1;
},
methods: {
setActive: function (activeKey) {
var _a = this,
children = _a.children,
currentActive = _a.currentActive;
if (!children.length) {
return Promise.resolve();
}
this.currentActive = activeKey;
var stack = [];
if (currentActive !== activeKey && children[currentActive]) {
stack.push(children[currentActive].setActive(false));
}
if (children[activeKey]) {
stack.push(children[activeKey].setActive(true));
}
return Promise.all(stack);
},
},
});
<view class="van-sidebar custom-class">
<slot />
</view>
@import '../common/index.wxss';.van-sidebar{width:85px;width:var(--sidebar-width,85px)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
classes: ['avatar-class', 'title-class', 'row-class'],
props: {
row: {
type: Number,
value: 0,
observer: function (value) {
this.setData({ rowArray: Array.from({ length: value }) });
},
},
title: Boolean,
avatar: Boolean,
loading: {
type: Boolean,
value: true,
},
animate: {
type: Boolean,
value: true,
},
avatarSize: {
type: String,
value: '32px',
},
avatarShape: {
type: String,
value: 'round',
},
titleWidth: {
type: String,
value: '40%',
},
rowWidth: {
type: null,
value: '100%',
observer: function (val) {
this.setData({ isArray: val instanceof Array });
},
},
},
data: {
isArray: false,
rowArray: [],
},
});
{
"component": true,
"usingComponents": {}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view
wx:if="{{ loading }}"
class="custom-class {{ utils.bem('skeleton', [{animate}]) }}"
>
<view
wx:if="{{ avatar }}"
class="avatar-class {{ utils.bem('skeleton__avatar', [avatarShape])}}"
style="{{ 'width:' + avatarSize + ';height:' + avatarSize }}"
/>
<view class="{{ utils.bem('skeleton__content')}}">
<view
wx:if="{{ title }}"
class="title-class {{ utils.bem('skeleton__title') }}"
style="{{ 'width:' + titleWidth }}"
/>
<view
wx:for="{{ rowArray }}"
wx:key="index"
wx:for-index="index"
class="row-class {{ utils.bem('skeleton__row') }}"
style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}"
/>
</view>
</view>
<view wx:else class="{{ utils.bem('skeleton__content')}}">
<slot />
</view>
@import '../common/index.wxss';.van-skeleton{display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:0 16px;padding:var(--skeleton-padding,0 16px)}.van-skeleton__avatar{-webkit-flex-shrink:0;flex-shrink:0;margin-right:16px;margin-right:var(--padding-md,16px);background-color:#f2f3f5;background-color:var(--skeleton-avatar-background-color,#f2f3f5)}.van-skeleton__avatar--round{border-radius:100%}.van-skeleton__content{-webkit-flex:1;flex:1}.van-skeleton__avatar+.van-skeleton__content{padding-top:8px;padding-top:var(--padding-xs,8px)}.van-skeleton__row,.van-skeleton__title{height:16px;height:var(--skeleton-row-height,16px);background-color:#f2f3f5;background-color:var(--skeleton-row-background-color,#f2f3f5)}.van-skeleton__title{margin:0}.van-skeleton__row:not(:first-child){margin-top:12px;margin-top:var(--skeleton-row-margin-top,12px)}.van-skeleton__title+.van-skeleton__row{margin-top:20px}.van-skeleton--animate{-webkit-animation:van-skeleton-blink 1.2s ease-in-out infinite;animation:van-skeleton-blink 1.2s ease-in-out infinite}@-webkit-keyframes van-skeleton-blink{50%{opacity:.6}}@keyframes van-skeleton-blink{50%{opacity:.6}}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var touch_1 = require('../mixins/touch');
var version_1 = require('../common/version');
component_1.VantComponent({
mixins: [touch_1.touch],
props: {
disabled: Boolean,
useButtonSlot: Boolean,
activeColor: String,
inactiveColor: String,
max: {
type: Number,
value: 100,
},
min: {
type: Number,
value: 0,
},
step: {
type: Number,
value: 1,
},
value: {
type: Number,
value: 0,
observer: function (val) {
if (val !== this.value) {
this.updateValue(val);
}
},
},
barHeight: {
type: null,
value: 2,
},
},
created: function () {
this.updateValue(this.data.value);
},
methods: {
onTouchStart: function (event) {
if (this.data.disabled) return;
this.touchStart(event);
this.startValue = this.format(this.value);
this.dragStatus = 'start';
},
onTouchMove: function (event) {
var _this = this;
if (this.data.disabled) return;
if (this.dragStatus === 'start') {
this.$emit('drag-start');
}
this.touchMove(event);
this.dragStatus = 'draging';
this.getRect('.van-slider').then(function (rect) {
var diff = (_this.deltaX / rect.width) * 100;
_this.newValue = _this.startValue + diff;
_this.updateValue(_this.newValue, false, true);
});
},
onTouchEnd: function () {
if (this.data.disabled) return;
if (this.dragStatus === 'draging') {
this.updateValue(this.newValue, true);
this.$emit('drag-end');
}
},
onClick: function (event) {
var _this = this;
if (this.data.disabled) return;
var min = this.data.min;
this.getRect('.van-slider').then(function (rect) {
var value =
((event.detail.x - rect.left) / rect.width) * _this.getRange() + min;
_this.updateValue(value, true);
});
},
updateValue: function (value, end, drag) {
value = this.format(value);
var min = this.data.min;
var width = ((value - min) * 100) / this.getRange() + '%';
this.value = value;
this.setData({
barStyle:
'\n width: ' +
width +
';\n ' +
(drag ? 'transition: none;' : '') +
'\n ',
});
if (drag) {
this.$emit('drag', { value: value });
}
if (end) {
this.$emit('change', value);
}
if ((drag || end) && version_1.canIUseModel()) {
this.setData({ value: value });
}
},
getRange: function () {
var _a = this.data,
max = _a.max,
min = _a.min;
return max - min;
},
format: function (value) {
var _a = this.data,
max = _a.max,
min = _a.min,
step = _a.step;
return Math.round(Math.max(min, Math.min(value, max)) / step) * step;
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="computed" />
<view
class="custom-class {{ utils.bem('slider', { disabled }) }}"
style="{{ inactiveColor ? 'background:' + inactiveColor : '' }}"
bind:tap="onClick"
>
<view
class="van-slider__bar"
style="{{ barStyle }};{{ computed.barStyle(barHeight, activeColor) }}"
>
<view
class="van-slider__button-wrapper"
bind:touchstart="onTouchStart"
catch:touchmove="onTouchMove"
bind:touchend="onTouchEnd"
bind:touchcancel="onTouchEnd"
>
<slot
wx:if="{{ useButtonSlot }}"
name="button"
/>
<view
wx:else
class="van-slider__button"
/>
</view>
</view>
</view>
/* eslint-disable */
var utils = require('../wxs/utils.wxs');
function barStyle(barHeight, activeColor) {
var styles = [['height', utils.addUnit(barHeight)]];
if (activeColor) {
styles.push(['background', activeColor]);
}
return styles
.map(function (item) {
return item.join(':');
})
.join(';');
}
module.exports = {
barStyle: barStyle,
};
@import '../common/index.wxss';.van-slider{position:relative;border-radius:999px;border-radius:var(--border-radius-max,999px);background-color:#ebedf0;background-color:var(--slider-inactive-background-color,#ebedf0)}.van-slider:before{position:absolute;right:0;left:0;content:"";top:-8px;top:-var(--padding-xs,8px);bottom:-8px;bottom:-var(--padding-xs,8px)}.van-slider__bar{position:relative;border-radius:inherit;transition:width .2s;transition:width var(--animation-duration-fast,.2s);background-color:#1989fa;background-color:var(--slider-active-background-color,#1989fa)}.van-slider__button{width:24px;height:24px;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.5);background-color:#fff;background-color:var(--slider-button-background-color,#fff)}.van-slider__button-wrapper{position:absolute;top:50%;right:0;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0)}.van-slider--disabled{opacity:.5}
\ No newline at end of file
'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 });
var component_1 = require('../common/component');
var utils_1 = require('../common/utils');
var LONG_PRESS_START_TIME = 600;
var LONG_PRESS_INTERVAL = 200;
// add num and avoid float number
function add(num1, num2) {
var cardinal = Math.pow(10, 10);
return Math.round((num1 + num2) * cardinal) / cardinal;
}
function equal(value1, value2) {
return String(value1) === String(value2);
}
component_1.VantComponent({
field: true,
classes: ['input-class', 'plus-class', 'minus-class'],
props: {
value: {
type: null,
observer: function (value) {
if (!equal(value, this.data.currentValue)) {
this.setData({ currentValue: this.format(value) });
}
},
},
integer: {
type: Boolean,
observer: 'check',
},
disabled: Boolean,
inputWidth: null,
buttonSize: null,
asyncChange: Boolean,
disableInput: Boolean,
decimalLength: {
type: Number,
value: null,
observer: 'check',
},
min: {
type: null,
value: 1,
observer: 'check',
},
max: {
type: null,
value: Number.MAX_SAFE_INTEGER,
observer: 'check',
},
step: {
type: null,
value: 1,
},
showPlus: {
type: Boolean,
value: true,
},
showMinus: {
type: Boolean,
value: true,
},
disablePlus: Boolean,
disableMinus: Boolean,
longPress: {
type: Boolean,
value: true,
},
},
data: {
currentValue: '',
},
created: function () {
this.setData({
currentValue: this.format(this.data.value),
});
},
methods: {
check: function () {
var val = this.format(this.data.currentValue);
if (!equal(val, this.data.currentValue)) {
this.setData({ currentValue: val });
}
},
isDisabled: function (type) {
if (type === 'plus') {
return (
this.data.disabled ||
this.data.disablePlus ||
this.data.currentValue >= this.data.max
);
}
return (
this.data.disabled ||
this.data.disableMinus ||
this.data.currentValue <= this.data.min
);
},
onFocus: function (event) {
this.$emit('focus', event.detail);
},
onBlur: function (event) {
var value = this.format(event.detail.value);
this.emitChange(value);
this.$emit(
'blur',
__assign(__assign({}, event.detail), { value: value })
);
},
// filter illegal characters
filter: function (value) {
value = String(value).replace(/[^0-9.-]/g, '');
if (this.data.integer && value.indexOf('.') !== -1) {
value = value.split('.')[0];
}
return value;
},
// limit value range
format: function (value) {
value = this.filter(value);
// format range
value = value === '' ? 0 : +value;
value = Math.max(Math.min(this.data.max, value), this.data.min);
// format decimal
if (utils_1.isDef(this.data.decimalLength)) {
value = value.toFixed(this.data.decimalLength);
}
return value;
},
onInput: function (event) {
var _a = (event.detail || {}).value,
value = _a === void 0 ? '' : _a;
// allow input to be empty
if (value === '') {
return;
}
var formatted = this.filter(value);
// limit max decimal length
if (
utils_1.isDef(this.data.decimalLength) &&
formatted.indexOf('.') !== -1
) {
var pair = formatted.split('.');
formatted = pair[0] + '.' + pair[1].slice(0, this.data.decimalLength);
}
this.emitChange(formatted);
},
emitChange: function (value) {
if (!this.data.asyncChange) {
this.setData({ currentValue: value });
}
this.$emit('change', value);
},
onChange: function () {
var type = this.type;
if (this.isDisabled(type)) {
this.$emit('overlimit', type);
return;
}
var diff = type === 'minus' ? -this.data.step : +this.data.step;
var value = this.format(add(+this.data.currentValue, diff));
this.emitChange(value);
this.$emit(type);
},
longPressStep: function () {
var _this = this;
this.longPressTimer = setTimeout(function () {
_this.onChange();
_this.longPressStep();
}, LONG_PRESS_INTERVAL);
},
onTap: function (event) {
var type = event.currentTarget.dataset.type;
this.type = type;
this.onChange();
},
onTouchStart: function (event) {
var _this = this;
if (!this.data.longPress) {
return;
}
clearTimeout(this.longPressTimer);
var type = event.currentTarget.dataset.type;
this.type = type;
this.isLongPress = false;
this.longPressTimer = setTimeout(function () {
_this.isLongPress = true;
_this.onChange();
_this.longPressStep();
}, LONG_PRESS_START_TIME);
},
onTouchEnd: function () {
if (!this.data.longPress) {
return;
}
clearTimeout(this.longPressTimer);
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="van-stepper custom-class">
<view
wx:if="{{ showMinus }}"
data-type="minus"
style="width: {{ utils.addUnit(buttonSize) }}; height: {{ utils.addUnit(buttonSize) }}"
class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || disableMinus || currentValue <= min }) }}"
hover-class="van-stepper__minus--hover"
hover-stay-time="70"
bind:tap="onTap"
bind:touchstart="onTouchStart"
bind:touchend="onTouchEnd"
/>
<input
type="{{ integer ? 'number' : 'digit' }}"
class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
style="width: {{ utils.addUnit(inputWidth) }}; height: {{ utils.addUnit(buttonSize) }}"
value="{{ currentValue }}"
focus="{{ focus }}"
disabled="{{ disabled || disableInput }}"
bindinput="onInput"
bind:focus="onFocus"
bind:blur="onBlur"
/>
<view
wx:if="{{ showPlus }}"
data-type="plus"
style="width: {{ utils.addUnit(buttonSize) }}; height: {{ utils.addUnit(buttonSize) }}"
class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || disablePlus || currentValue >= max }) }}"
hover-class="van-stepper__plus--hover"
hover-stay-time="70"
bind:tap="onTap"
bind:touchstart="onTouchStart"
bind:touchend="onTouchEnd"
/>
</view>
@import '../common/index.wxss';.van-stepper{font-size:0}.van-stepper__minus,.van-stepper__plus{position:relative;display:inline-block;box-sizing:border-box;margin:1px;vertical-align:middle;border:0;background-color:#f2f3f5;background-color:var(--stepper-background-color,#f2f3f5);color:#323233;color:var(--stepper-button-icon-color,#323233);width:28px;width:var(--stepper-input-height,28px);height:28px;height:var(--stepper-input-height,28px);padding:4px;padding:var(--padding-base,4px)}.van-stepper__minus:before,.van-stepper__plus:before{width:9px;height:1px}.van-stepper__minus:after,.van-stepper__plus:after{width:1px;height:9px}.van-stepper__minus:after,.van-stepper__minus:before,.van-stepper__plus:after,.van-stepper__plus:before{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-color:currentColor;content:""}.van-stepper__minus--hover,.van-stepper__plus--hover{background-color:#e8e8e8;background-color:var(--stepper-active-color,#e8e8e8)}.van-stepper__minus--disabled,.van-stepper__plus--disabled{color:#c8c9cc;color:var(--stepper-button-disabled-icon-color,#c8c9cc)}.van-stepper__minus--disabled,.van-stepper__minus--disabled.van-stepper__minus--hover,.van-stepper__minus--disabled.van-stepper__plus--hover,.van-stepper__plus--disabled,.van-stepper__plus--disabled.van-stepper__minus--hover,.van-stepper__plus--disabled.van-stepper__plus--hover{background-color:#f7f8fa;background-color:var(--stepper-button-disabled-color,#f7f8fa)}.van-stepper__minus{border-radius:4px 0 0 4px;border-radius:var(--stepper-border-radius,4px) 0 0 var(--stepper-border-radius,4px)}.van-stepper__minus:after{display:none}.van-stepper__plus{border-radius:0 4px 4px 0;border-radius:0 var(--stepper-border-radius,4px) var(--stepper-border-radius,4px) 0}.van-stepper__input{display:inline-block;box-sizing:border-box;min-height:0;margin:1px;padding:1px;text-align:center;vertical-align:middle;border:0;border-width:1px 0;border-radius:0;-webkit-appearance:none;font-size:14px;font-size:var(--stepper-input-font-size,14px);color:#323233;color:var(--stepper-input-text-color,#323233);background-color:#f2f3f5;background-color:var(--stepper-background-color,#f2f3f5);width:32px;width:var(--stepper-input-width,32px);height:28px;height:var(--stepper-input-height,28px)}.van-stepper__input--disabled{color:#c8c9cc;color:var(--stepper-input-disabled-text-color,#c8c9cc);background-color:#f2f3f5;background-color:var(--stepper-input-disabled-background-color,#f2f3f5)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var color_1 = require('../common/color');
component_1.VantComponent({
classes: ['desc-class'],
props: {
icon: String,
steps: Array,
active: Number,
direction: {
type: String,
value: 'horizontal',
},
activeColor: {
type: String,
value: color_1.GREEN,
},
inactiveColor: {
type: String,
value: color_1.GRAY_DARK,
},
activeIcon: {
type: String,
value: 'checked',
},
inactiveIcon: String,
},
methods: {
onClick: function (event) {
var index = event.currentTarget.dataset.index;
this.$emit('click-step', index);
},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="custom-class {{ utils.bem('steps', [direction]) }}">
<view class="van-step__wrapper">
<view
wx:for="{{ steps }}"
wx:key="index"
bindtap="onClick"
data-index="{{ index }}"
class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}"
>
<view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
<view>{{ item.text }}</view>
<view class="desc-class">{{ item.desc }}</view>
</view>
<view class="van-step__circle-container">
<block wx:if="{{ index !== active }}">
<van-icon
wx:if="{{ item.inactiveIcon || inactiveIcon }}"
color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}"
name="{{ item.inactiveIcon || inactiveIcon }}"
custom-class="van-step__icon"
/>
<view
wx:else
class="van-step__circle"
style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
/>
</block>
<van-icon wx:else name="{{ item.activeIcon || activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
</view>
<view
wx:if="{{ index !== steps.length - 1 }}"
class="van-step__line" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
/>
</view>
</view>
</view>
<wxs module="status">
function get(index, active) {
if (index < active) {
return 'finish';
} else if (index === active) {
return 'process';
}
return 'inactive';
}
module.exports = get;
</wxs>
@import '../common/index.wxss';.van-steps{overflow:hidden;background-color:#fff;background-color:var(--steps-background-color,#fff)}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{position:relative;display:-webkit-flex;display:flex;overflow:hidden}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{position:relative;-webkit-flex:1;flex:1;font-size:14px;font-size:var(--step-font-size,14px);color:#969799;color:var(--step-text-color,#969799)}.van-step--finish{color:#323233;color:var(--step-finish-text-color,#323233)}.van-step__circle{border-radius:50%;width:5px;width:var(--step-circle-size,5px);height:5px;height:var(--step-circle-size,5px);background-color:#969799;background-color:var(--step-circle-color,#969799)}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{-webkit-transform:none;transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;-webkit-transform:none;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:0;padding:0 0 0 8px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{position:absolute;bottom:6px;z-index:1;-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0);background-color:#fff;background-color:var(--white,#fff);padding:0 8px;padding:0 var(--padding-xs,8px)}.van-step--horizontal .van-step__title{display:inline-block;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);font-size:12px;font-size:var(--step-horizontal-title-font-size,12px)}.van-step--horizontal .van-step__line{position:absolute;right:0;bottom:6px;left:0;height:1px;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);background-color:#ebedf0;background-color:var(--step-line-color,#ebedf0)}.van-step--horizontal.van-step--process{color:#323233;color:var(--step-process-text-color,#323233)}.van-step--horizontal.van-step--process .van-step__icon{display:block;line-height:1;font-size:12px;font-size:var(--step-icon-size,12px)}.van-step--vertical{padding:10px 10px 10px 0;line-height:18px}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{position:absolute;top:0;left:-15px;z-index:1;width:1px;height:20px;content:"";background-color:#fff;background-color:var(--white,#fff)}.van-step--vertical .van-step__circle,.van-step--vertical .van-step__icon,.van-step--vertical .van-step__line{position:absolute;top:19px;left:-14px;z-index:2;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-step--vertical .van-step__icon{line-height:1;font-size:12px;font-size:var(--step-icon-size,12px)}.van-step--vertical .van-step__line{z-index:1;width:1px;height:100%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);background-color:#ebedf0;background-color:var(--step-line-color,#ebedf0)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var page_scroll_1 = require('../mixins/page-scroll');
var ROOT_ELEMENT = '.van-sticky';
component_1.VantComponent({
props: {
zIndex: {
type: Number,
value: 99,
},
offsetTop: {
type: Number,
value: 0,
observer: 'onScroll',
},
disabled: {
type: Boolean,
observer: 'onScroll',
},
container: {
type: null,
observer: 'onScroll',
},
scrollTop: {
type: null,
observer: function (val) {
this.onScroll({ scrollTop: val });
},
},
},
mixins: [
page_scroll_1.pageScrollMixin(function (event) {
if (this.data.scrollTop != null) {
return;
}
this.onScroll(event);
}),
],
data: {
height: 0,
fixed: false,
transform: 0,
},
mounted: function () {
this.onScroll();
},
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 () {
var nodesRef = this.data.container();
return new Promise(function (resolve) {
return nodesRef.boundingClientRect(resolve).exec();
});
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="computed" />
<view class="custom-class van-sticky" style="{{ computed.containerStyle({ fixed, height, zIndex }) }}">
<view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ computed.wrapStyle({ fixed, offsetTop, transform, zIndex }) }}">
<slot />
</view>
</view>
/* eslint-disable */
function wrapStyle(data) {
var style = '';
if (data.transform) {
style += 'transform: translate3d(0, ' + data.transform + 'px, 0);';
}
if (data.fixed) {
style += 'top: ' + data.offsetTop + 'px;';
}
if (data.zIndex) {
style += 'z-index: ' + data.zIndex + ';';
}
return style;
}
function containerStyle(data) {
var style = '';
if (data.fixed) {
style += 'height: ' + data.height + 'px;';
}
if (data.zIndex) {
style += 'z-index: ' + data.zIndex + ';';
}
return style;
}
module.exports = {
wrapStyle: wrapStyle,
containerStyle: containerStyle
};
@import '../common/index.wxss';.van-sticky{position:relative}.van-sticky-wrap--fixed{position:fixed;right:0;left:0}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
classes: ['bar-class', 'price-class', 'button-class'],
props: {
tip: {
type: null,
observer: 'updateTip',
},
tipIcon: String,
type: Number,
price: {
type: null,
observer: 'updatePrice',
},
label: String,
loading: Boolean,
disabled: Boolean,
buttonText: String,
currency: {
type: String,
value: '¥',
},
buttonType: {
type: String,
value: 'danger',
},
decimalLength: {
type: Number,
value: 2,
observer: 'updatePrice',
},
suffixLabel: String,
safeAreaInsetBottom: {
type: Boolean,
value: true,
},
},
methods: {
updatePrice: function () {
var _a = this.data,
price = _a.price,
decimalLength = _a.decimalLength;
var priceStrArr =
typeof price === 'number' &&
(price / 100).toFixed(decimalLength).split('.');
this.setData({
hasPrice: typeof price === 'number',
integerStr: priceStrArr && priceStrArr[0],
decimalStr: decimalLength && priceStrArr ? '.' + priceStrArr[1] : '',
});
},
updateTip: function () {
this.setData({ hasTip: typeof this.data.tip === 'string' });
},
onSubmit: function (event) {
this.$emit('submit', event.detail);
},
},
});
{
"component": true,
"usingComponents": {
"van-button": "../button/index",
"van-icon": "../icon/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="van-submit-bar custom-class">
<slot name="top" />
<view class="van-submit-bar__tip">
<van-icon
wx:if="{{ tipIcon }}"
size="12px"
name="{{ tipIcon }}"
custom-class="van-submit-bar__tip-icon"
/>
<view wx:if="{{ hasTip }}" class="van-submit-bar__tip-text">
{{ tip }}
</view>
<slot name="tip" />
</view>
<view class="bar-class van-submit-bar__bar">
<slot />
<view wx:if="{{ hasPrice }}" class="van-submit-bar__text">
<text>{{ label || '合计:' }}</text>
<text class="van-submit-bar__price price-class">
<text class="van-submit-bar__currency">{{ currency }} </text>
<text class="van-submit-bar__price-integer">{{ integerStr }}</text><text>{{decimalStr}}</text>
</text>
<text class="van-submit-bar__suffix-label">{{ suffixLabel }}</text>
</view>
<van-button
round
type="{{ buttonType }}"
loading="{{ loading }}"
disabled="{{ disabled }}"
class="van-submit-bar__button"
custom-class="button-class"
custom-style="width: 100%;"
bind:click="onSubmit"
>
{{ loading ? '' : buttonText }}
</van-button>
</view>
<view wx:if="{{ safeAreaInsetBottom }}" class="van-submit-bar__safe" />
</view>
@import '../common/index.wxss';.van-submit-bar{position:fixed;bottom:0;left:0;width:100%;-webkit-user-select:none;user-select:none;z-index:100;z-index:var(--submit-bar-z-index,100);background-color:#fff;background-color:var(--submit-bar-background-color,#fff)}.van-submit-bar__tip{padding:10px;padding:var(--submit-bar-tip-padding,10px);color:#f56723;color:var(--submit-bar-tip-color,#f56723);font-size:12px;font-size:var(--submit-bar-tip-font-size,12px);line-height:1.5;line-height:var(--submit-bar-tip-line-height,1.5);background-color:#fff7cc;background-color:var(--submit-bar-tip-background-color,#fff7cc)}.van-submit-bar__tip:empty{display:none}.van-submit-bar__tip-icon{width:12px;height:12px;margin-right:4px;vertical-align:middle;font-size:12px;font-size:var(--submit-bar-tip-icon-size,12px);min-width:18px;min-width:calc(var(--submit-bar-tip-icon-size, 12px)*1.5)}.van-submit-bar__tip-text{display:inline;vertical-align:middle}.van-submit-bar__bar{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-end;justify-content:flex-end;padding:0 16px;padding:var(--submit-bar-padding,0 16px);height:50px;height:var(--submit-bar-height,50px);font-size:14px;font-size:var(--submit-bar-text-font-size,14px);background-color:#fff;background-color:var(--submit-bar-background-color,#fff)}.van-submit-bar__safe{height:constant(safe-area-inset-bottom);height:env(safe-area-inset-bottom)}.van-submit-bar__text{-webkit-flex:1;flex:1;text-align:right;color:#323233;color:var(--submit-bar-text-color,#323233);padding-right:12px;padding-right:var(--padding-sm,12px)}.van-submit-bar__price,.van-submit-bar__text{font-weight:500;font-weight:var(--font-weight-bold,500)}.van-submit-bar__price{color:#ee0a24;color:var(--submit-bar-price-color,#ee0a24);font-size:12px;font-size:var(--submit-bar-price-font-size,12px)}.van-submit-bar__price-integer{font-size:20px;font-family:Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif}.van-submit-bar__currency{font-size:12px;font-size:var(--submit-bar-currency-font-size,12px)}.van-submit-bar__suffix-label{margin-left:5px}.van-submit-bar__button{width:110px;width:var(--submit-bar-button-width,110px);font-weight:500;font-weight:var(--font-weight-bold,500);--button-default-height:40px!important;--button-default-height:var(--submit-bar-button-height,40px)!important;--button-line-height:40px!important;--button-line-height:var(--submit-bar-button-height,40px)!important}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var touch_1 = require('../mixins/touch');
var utils_1 = require('../common/utils');
var THRESHOLD = 0.3;
var ARRAY = [];
component_1.VantComponent({
props: {
disabled: Boolean,
leftWidth: {
type: Number,
value: 0,
observer: function (leftWidth) {
if (leftWidth === void 0) {
leftWidth = 0;
}
if (this.offset > 0) {
this.swipeMove(leftWidth);
}
},
},
rightWidth: {
type: Number,
value: 0,
observer: function (rightWidth) {
if (rightWidth === void 0) {
rightWidth = 0;
}
if (this.offset < 0) {
this.swipeMove(-rightWidth);
}
},
},
asyncClose: Boolean,
name: {
type: [Number, String],
value: '',
},
},
mixins: [touch_1.touch],
data: {
catchMove: false,
},
created: function () {
this.offset = 0;
ARRAY.push(this);
},
destroyed: function () {
var _this = this;
ARRAY = ARRAY.filter(function (item) {
return item !== _this;
});
},
methods: {
open: function (position) {
var _a = this.data,
leftWidth = _a.leftWidth,
rightWidth = _a.rightWidth;
var offset = position === 'left' ? leftWidth : -rightWidth;
this.swipeMove(offset);
this.$emit('open', {
position: position,
name: this.data.name,
});
},
close: function () {
this.swipeMove(0);
},
swipeMove: function (offset) {
if (offset === void 0) {
offset = 0;
}
this.offset = utils_1.range(
offset,
-this.data.rightWidth,
this.data.leftWidth
);
var transform = 'translate3d(' + this.offset + 'px, 0, 0)';
var transition = this.dragging
? 'none'
: 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
this.setData({
wrapperStyle:
'\n -webkit-transform: ' +
transform +
';\n -webkit-transition: ' +
transition +
';\n transform: ' +
transform +
';\n transition: ' +
transition +
';\n ',
});
},
swipeLeaveTransition: function () {
var _a = this.data,
leftWidth = _a.leftWidth,
rightWidth = _a.rightWidth;
var offset = this.offset;
if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
this.open('right');
} else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
this.open('left');
} else {
this.swipeMove(0);
}
this.setData({ catchMove: false });
},
startDrag: function (event) {
if (this.data.disabled) {
return;
}
this.startOffset = this.offset;
this.touchStart(event);
},
noop: function () {},
onDrag: function (event) {
var _this = this;
if (this.data.disabled) {
return;
}
this.touchMove(event);
if (this.direction !== 'horizontal') {
return;
}
this.dragging = true;
ARRAY.filter(function (item) {
return item !== _this;
}).forEach(function (item) {
return item.close();
});
this.setData({ catchMove: true });
this.swipeMove(this.startOffset + this.deltaX);
},
endDrag: function () {
if (this.data.disabled) {
return;
}
this.dragging = false;
this.swipeLeaveTransition();
},
onClick: function (event) {
var _a = event.currentTarget.dataset.key,
position = _a === void 0 ? 'outside' : _a;
this.$emit('click', position);
if (!this.offset) {
return;
}
if (this.data.asyncClose) {
this.$emit('close', {
position: position,
instance: this,
name: this.data.name,
});
} else {
this.swipeMove(0);
}
},
},
});
<view
class="van-swipe-cell"
data-key="cell"
catchtap="onClick"
bindtouchstart="startDrag"
catchtouchmove="{{ catchMove ? 'noop' : '' }}"
capture-bind:touchmove="onDrag"
bindtouchend="endDrag"
bindtouchcancel="endDrag"
>
<view style="{{ wrapperStyle }}">
<view wx:if="{{ leftWidth }}" class="van-swipe-cell__left" data-key="left" catch:tap="onClick">
<slot name="left" />
</view>
<slot />
<view wx:if="{{ rightWidth }}" class="van-swipe-cell__right" data-key="right" catch:tap="onClick">
<slot name="right" />
</view>
</view>
</view>
@import '../common/index.wxss';.van-swipe-cell{position:relative;overflow:hidden}.van-swipe-cell__left,.van-swipe-cell__right{position:absolute;top:0;height:100%}.van-swipe-cell__left{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.van-swipe-cell__right{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var color_1 = require('../common/color');
component_1.VantComponent({
field: true,
classes: ['node-class'],
props: {
checked: {
type: null,
observer: function (value) {
var loadingColor = this.getLoadingColor(value);
this.setData({ value: value, loadingColor: loadingColor });
},
},
loading: Boolean,
disabled: Boolean,
activeColor: String,
inactiveColor: String,
size: {
type: String,
value: '30px',
},
activeValue: {
type: null,
value: true,
},
inactiveValue: {
type: null,
value: false,
},
},
created: function () {
var value = this.data.checked;
var loadingColor = this.getLoadingColor(value);
this.setData({ value: value, loadingColor: loadingColor });
},
methods: {
getLoadingColor: function (checked) {
var _a = this.data,
activeColor = _a.activeColor,
inactiveColor = _a.inactiveColor;
return checked
? activeColor || color_1.BLUE
: inactiveColor || color_1.GRAY_DARK;
},
onClick: function () {
var _a = this.data,
activeValue = _a.activeValue,
inactiveValue = _a.inactiveValue;
if (!this.data.disabled && !this.data.loading) {
var checked = this.data.checked === activeValue;
var value = checked ? inactiveValue : activeValue;
this.$emit('input', value);
this.$emit('change', value);
}
},
},
});
{
"component": true,
"usingComponents": {
"van-loading": "../loading/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="custom-class {{ utils.bem('switch', { on: value === activeValue, disabled }) }}"
style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}"
bind:tap="onClick"
>
<view class="van-switch__node node-class">
<van-loading wx:if="{{ loading }}" color="{{ loadingColor }}" custom-class="van-switch__loading" />
</view>
</view>
@import '../common/index.wxss';.van-switch{position:relative;display:inline-block;box-sizing:initial;width:2em;width:var(--switch-width,2em);height:1em;height:var(--switch-height,1em);background-color:#fff;background-color:var(--switch-background-color,#fff);border:1px solid rgba(0,0,0,.1);border:var(--switch-border,1px solid rgba(0,0,0,.1));border-radius:1em;border-radius:var(--switch-node-size,1em);transition:background-color .3s;transition:background-color var(--switch-transition-duration,.3s)}.van-switch__node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;z-index:var(--switch-node-z-index,1);width:1em;width:var(--switch-node-size,1em);height:1em;height:var(--switch-node-size,1em);background-color:#fff;background-color:var(--switch-node-background-color,#fff);box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));transition:-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:transform .3s cubic-bezier(.3,1.05,.4,1.05),-webkit-transform .3s cubic-bezier(.3,1.05,.4,1.05);transition:-webkit-transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);transition:transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);transition:transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05),-webkit-transform var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05)}.van-switch__loading{position:absolute!important;top:25%;left:25%;width:50%;height:50%}.van-switch--on{background-color:#1989fa;background-color:var(--switch-on-background-color,#1989fa)}.van-switch--on .van-switch__node{-webkit-transform:translateX(1em);transform:translateX(1em);-webkit-transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)));transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)))}.van-switch--disabled{opacity:.4;opacity:var(--switch-disabled-opacity,.4)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
relation: {
name: 'tabs',
type: 'ancestor',
current: 'tab',
},
props: {
dot: {
type: Boolean,
observer: 'update',
},
info: {
type: null,
observer: 'update',
},
title: {
type: String,
observer: 'update',
},
disabled: {
type: Boolean,
observer: 'update',
},
titleStyle: {
type: String,
observer: 'update',
},
name: {
type: [Number, String],
value: '',
},
},
data: {
active: false,
},
methods: {
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,
shouldShow: active || parentData.animated,
});
},
update: function () {
if (this.parent) {
this.parent.updateTabs();
}
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}"
style="{{ shouldShow ? '' : 'display: none;' }}"
>
<slot wx:if="{{ shouldRender }}" />
</view>
@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;-webkit-overflow-scrolling:touch}.van-tab__pane--active{height:auto}.van-tab__pane--inactive{height:0;overflow:visible}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
props: {
info: null,
name: null,
icon: String,
dot: Boolean,
},
relation: {
name: 'tabbar',
type: 'ancestor',
current: 'tabbar-item',
},
data: {
active: false,
},
methods: {
onClick: function () {
if (this.parent) {
this.parent.onChange(this);
}
this.$emit('click');
},
updateFromParent: function () {
var parent = this.parent;
if (!parent) {
return;
}
var index = parent.children.indexOf(this);
var parentData = parent.data;
var data = this.data;
var active = (data.name || index) === parentData.active;
var patch = {};
if (active !== data.active) {
patch.active = active;
}
if (parentData.activeColor !== data.activeColor) {
patch.activeColor = parentData.activeColor;
}
if (parentData.inactiveColor !== data.inactiveColor) {
patch.inactiveColor = parentData.inactiveColor;
}
return Object.keys(patch).length > 0
? this.set(patch)
: Promise.resolve();
},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index",
"van-info": "../info/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="{{ utils.bem('tabbar-item', { active }) }} custom-class"
style="color: {{ active ? activeColor : inactiveColor }}"
bind:tap="onClick"
>
<view class="van-tabbar-item__icon">
<van-icon
wx:if="{{ icon }}"
name="{{ icon }}"
custom-class="van-tabbar-item__icon__inner"
/>
<block wx:else>
<slot
wx:if="{{ active }}"
name="icon-active"
/>
<slot wx:else name="icon" />
</block>
<van-info
dot="{{ dot }}"
info="{{ info }}"
custom-class="van-tabbar-item__info"
/>
</view>
<view class="van-tabbar-item__text">
<slot />
</view>
</view>
@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-tabbar-item{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;height:100%;color:#646566;color:var(--tabbar-item-text-color,#646566);font-size:12px;font-size:var(--tabbar-item-font-size,12px);line-height:1;line-height:var(--tabbar-item-line-height,1)}.van-tabbar-item__icon{position:relative;margin-bottom:5px;margin-bottom:var(--tabbar-item-margin-bottom,5px);font-size:18px;font-size:var(--tabbar-item-icon-size,18px)}.van-tabbar-item__icon__inner{display:block;min-width:1em}.van-tabbar-item--active{color:#1989fa;color:var(--tabbar-item-active-color,#1989fa)}.van-tabbar-item__info{margin-top:2px}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
relation: {
name: 'tabbar-item',
type: 'descendant',
current: 'tabbar',
linked: function (target) {
target.parent = this;
target.updateFromParent();
},
unlinked: function () {
this.updateChildren();
},
},
props: {
active: {
type: null,
observer: 'updateChildren',
},
activeColor: {
type: String,
observer: 'updateChildren',
},
inactiveColor: {
type: String,
observer: 'updateChildren',
},
fixed: {
type: Boolean,
value: true,
},
border: {
type: Boolean,
value: true,
},
zIndex: {
type: Number,
value: 1,
},
safeAreaInsetBottom: {
type: Boolean,
value: true,
},
},
methods: {
updateChildren: function () {
var children = this.children;
if (!Array.isArray(children) || !children.length) {
return Promise.resolve();
}
return Promise.all(
children.map(function (child) {
return child.updateFromParent();
})
);
},
onChange: function (child) {
var index = this.children.indexOf(child);
var active = child.data.name || index;
if (active !== this.data.active) {
this.$emit('change', active);
}
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<view
class="custom-class {{ border ? 'van-hairline--top-bottom' : '' }} {{ utils.bem('tabbar', { fixed, safe: safeAreaInsetBottom }) }}"
style="{{ zIndex ? 'z-index: ' + zIndex : '' }}"
>
<slot />
</view>
@import '../common/index.wxss';.van-tabbar{display:-webkit-flex;display:flex;box-sizing:initial;width:100%;height:50px;height:var(--tabbar-height,50px);background-color:#fff;background-color:var(--tabbar-background-color,#fff)}.van-tabbar--fixed{position:fixed;bottom:0;left:0}.van-tabbar--safe{padding-bottom:env(safe-area-inset-bottom)}
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
var touch_1 = require('../mixins/touch');
var utils_1 = require('../common/utils');
component_1.VantComponent({
mixins: [touch_1.touch],
classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
relation: {
name: 'tab',
type: 'descendant',
current: 'tabs',
linked: function (target) {
target.index = this.children.length - 1;
this.updateTabs();
},
unlinked: function () {
this.children = this.children.map(function (child, index) {
child.index = index;
return child;
});
this.updateTabs();
},
},
props: {
sticky: Boolean,
border: Boolean,
swipeable: Boolean,
titleActiveColor: String,
titleInactiveColor: String,
color: {
type: String,
observer: 'setLine',
},
animated: {
type: Boolean,
observer: function () {
var _this = this;
this.children.forEach(function (child, index) {
return child.updateRender(index === _this.data.currentIndex, _this);
});
},
},
lineWidth: {
type: [String, Number],
value: 40,
observer: 'setLine',
},
lineHeight: {
type: [String, Number],
value: -1,
observer: 'setLine',
},
active: {
type: [String, Number],
value: 0,
observer: function (name) {
if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name);
}
},
},
type: {
type: String,
value: 'line',
},
ellipsis: {
type: Boolean,
value: true,
},
duration: {
type: Number,
value: 0.3,
},
zIndex: {
type: Number,
value: 1,
},
swipeThreshold: {
type: Number,
value: 5,
observer: function (value) {
this.setData({
scrollable: this.children.length > value || !this.data.ellipsis,
});
},
},
offsetTop: {
type: Number,
value: 0,
},
lazyRender: {
type: Boolean,
value: true,
},
},
data: {
tabs: [],
lineStyle: '',
scrollLeft: 0,
scrollable: false,
trackStyle: '',
currentIndex: null,
container: null,
},
mounted: function () {
var _this = this;
wx.nextTick(function () {
_this.setLine(true);
_this.scrollIntoView();
});
},
methods: {
updateContainer: function () {
var _this = this;
this.setData({
container: function () {
return _this.createSelectorQuery().select('.van-tabs');
},
});
},
updateTabs: function () {
var _a = this,
_b = _a.children,
children = _b === void 0 ? [] : _b,
data = _a.data;
this.setData({
tabs: children.map(function (child) {
return child.data;
}),
scrollable:
this.children.length > data.swipeThreshold || !data.ellipsis,
});
this.setCurrentIndexByName(this.getCurrentName() || data.active);
},
trigger: function (eventName, child) {
var currentIndex = this.data.currentIndex;
var currentChild = child || this.children[currentIndex];
if (!utils_1.isDef(currentChild)) {
return;
}
this.$emit(eventName, {
index: currentChild.index,
name: currentChild.getComputedName(),
title: currentChild.data.title,
});
},
onTap: function (event) {
var _this = this;
var index = event.currentTarget.dataset.index;
var child = this.children[index];
if (child.data.disabled) {
this.trigger('disabled', child);
} else {
this.setCurrentIndex(index);
wx.nextTick(function () {
_this.trigger('click');
});
}
},
// 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;
});
if (matched.length) {
this.setCurrentIndex(matched[0].index);
}
},
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;
}
children.forEach(function (item, index) {
var active = index === currentIndex;
if (active !== item.data.active || !item.inited) {
item.updateRender(active, _this);
}
});
if (currentIndex === data.currentIndex) {
return;
}
var shouldEmitChange = data.currentIndex !== null;
this.setData({ currentIndex: currentIndex });
wx.nextTick(function () {
_this.setLine();
_this.scrollIntoView();
_this.updateContainer();
_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) {
var _this = this;
if (this.data.type !== 'line') {
return;
}
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 height =
lineHeight !== -1
? 'height: ' +
utils_1.addUnit(lineHeight) +
'; border-radius: ' +
utils_1.addUnit(lineHeight) +
';'
: '';
var left = rects.slice(0, currentIndex).reduce(function (prev, curr) {
return prev + curr.width;
}, 0);
left += (rect.width - lineWidth) / 2;
var transition = skipTransition
? ''
: 'transition-duration: ' +
duration +
's; -webkit-transition-duration: ' +
duration +
's;';
_this.setData({
lineStyle:
'\n ' +
height +
'\n width: ' +
utils_1.addUnit(lineWidth) +
';\n background-color: ' +
color +
';\n -webkit-transform: translateX(' +
left +
'px);\n transform: translateX(' +
left +
'px);\n ' +
transition +
'\n ',
});
});
},
// scroll active tab into view
scrollIntoView: function () {
var _this = this;
var _a = this.data,
currentIndex = _a.currentIndex,
scrollable = _a.scrollable;
if (!scrollable) {
return;
}
Promise.all([
this.getRect('.van-tab', true),
this.getRect('.van-tabs__nav'),
]).then(function (_a) {
var tabRects = _a[0],
navRect = _a[1];
var tabRect = tabRects[currentIndex];
var offsetLeft = tabRects
.slice(0, currentIndex)
.reduce(function (prev, curr) {
return prev + curr.width;
}, 0);
_this.setData({
scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
});
});
},
onTouchScroll: function (event) {
this.$emit('scroll', event.detail);
},
onTouchStart: function (event) {
if (!this.data.swipeable) return;
this.touchStart(event);
},
onTouchMove: function (event) {
if (!this.data.swipeable) return;
this.touchMove(event);
},
// watch swipe touch end
onTouchEnd: function () {
if (!this.data.swipeable) return;
var _a = this,
direction = _a.direction,
deltaX = _a.deltaX,
offsetX = _a.offsetX;
var minSwipeDistance = 50;
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
var index = this.getAvaiableTab(deltaX);
if (index !== -1) {
this.setCurrentIndex(index);
}
}
},
getAvaiableTab: function (direction) {
var _a = this.data,
tabs = _a.tabs,
currentIndex = _a.currentIndex;
var step = direction > 0 ? -1 : 1;
for (
var i = step;
currentIndex + i < tabs.length && currentIndex + i >= 0;
i += step
) {
var index = currentIndex + i;
if (
index >= 0 &&
index < tabs.length &&
tabs[index] &&
!tabs[index].disabled
) {
return index;
}
}
return -1;
},
},
});
{
"component": true,
"usingComponents": {
"van-info": "../info/index",
"van-sticky": "../sticky/index"
}
}
<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 }}"
container="{{ container }}"
bind:scroll="onTouchScroll"
>
<view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
<slot name="nav-left" />
<scroll-view
scroll-x="{{ scrollable }}"
scroll-with-animation
scroll-left="{{ scrollLeft }}"
class="{{ utils.bem('tabs__scroll', [type]) }}"
style="{{ color ? 'border-color: ' + color : '' }}"
>
<view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
<view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
<view
wx:for="{{ tabs }}"
wx:key="index"
data-index="{{ index }}"
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="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
{{ item.title }}
<van-info
wx:if="{{ item.info !== null || item.dot }}"
info="{{ item.info }}"
dot="{{ item.dot }}"
custom-class="van-tab__title__info"
/>
</view>
</view>
</view>
</scroll-view>
<slot name="nav-right" />
</view>
</van-sticky>
<view
class="van-tabs__content"
bind:touchstart="onTouchStart"
bind:touchmove="onTouchMove"
bind:touchend="onTouchEnd"
bind:touchcancel="onTouchEnd"
>
<view
class="{{ utils.bem('tabs__track', [{ animated }]) }} van-tabs__track"
style="{{ getters.trackStyle({ duration, currentIndex, animated }) }}"
>
<slot />
</view>
</view>
</view>
/* 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(';');
}
function tabCardTypeBorderStyle(color, type) {
var isCard = type === 'card';
var styles = [];
if (isCard && color) {
styles.push('border-color:' + color);
}
return styles.join(';');
}
function trackStyle(data) {
if (!data.animated) {
return '';
}
return [
'transform: translate3d(' + -100 * data.currentIndex + '%, 0, 0)',
'-webkit-transition-duration: ' + data.duration + 's',
'transition-duration: ' + data.duration + 's'
].join(';');
}
module.exports.tabClass = tabClass;
module.exports.tabStyle = tabStyle;
module.exports.trackStyle = trackStyle;
module.exports.tabCardTypeBorderStyle = tabCardTypeBorderStyle;
@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__wrap--scrollable .van-tab--complete{-webkit-flex:1 0 auto!important;flex:1 0 auto!important;padding:0 12px}.van-tabs__wrap--scrollable .van-tabs__nav--complete{padding-right:8px;padding-left:8px}.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__scroll::-webkit-scrollbar{display:none}.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;width:100%;height:100%}.van-tabs__track--animated{display:-webkit-flex;display:flex;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:#646566;color:var(--tab-text-color,#646566);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}
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
VantComponent({ Object.defineProperty(exports, '__esModule', { value: true });
props: { var component_1 = require('../common/component');
size: String, component_1.VantComponent({
mark: Boolean, props: {
color: String, size: String,
plain: Boolean, mark: Boolean,
round: Boolean, color: String,
textColor: String, plain: Boolean,
type: { round: Boolean,
type: String, textColor: String,
value: 'default' type: {
}, type: String,
closeable: Boolean value: 'default',
}, },
methods: { closeable: Boolean,
onClose() { },
this.$emit('close'); methods: {
} onClose: function () {
} this.$emit('close');
},
},
}); });
<wxs src="../wxs/utils.wxs" module="utils" /> <wxs src="../wxs/utils.wxs" module="utils" />
<view <view
class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }} {{ plain ? 'van-hairline--surround' : '' }}" class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }}"
style="{{ color && !plain ? 'background-color: ' + color + ';' : '' }}{{ textColor || (color && plain) ? 'color: ' + (textColor || color) : '' }}" style="{{ color && !plain ? 'background-color: ' + color + ';' : '' }}{{ textColor || (color && plain) ? 'color: ' + (textColor || color) : '' }}"
> >
<slot /> <slot />
......
@import '../common/index.wxss';.van-tag{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;line-height:normal;padding:.2em .5em;padding:var(--tag-padding,.2em .5em);color:#fff;color:var(--tag-text-color,#fff);font-size:10px;font-size:var(--tag-font-size,10px);border-radius:.2em;border-radius:var(--tag-border-radius,.2em)}.van-tag:after{border-color:currentColor;border-radius:.2em * 2;border-radius:var(--tag-border-radius,.2em) * 2}.van-tag--default{background-color:#969799;background-color:var(--tag-default-color,#969799)}.van-tag--default.van-tag--plain{color:#969799;color:var(--tag-default-color,#969799)}.van-tag--danger{background-color:#ee0a24;background-color:var(--tag-dander-color,#ee0a24)}.van-tag--danger.van-tag--plain{color:#ee0a24;color:var(--tag-dander-color,#ee0a24)}.van-tag--primary{background-color:#1989fa;background-color:var(--tag-primary-color,#1989fa)}.van-tag--primary.van-tag--plain{color:#1989fa;color:var(--tag-primary-color,#1989fa)}.van-tag--success{background-color:#07c160;background-color:var(--tag-success-color,#07c160)}.van-tag--success.van-tag--plain{color:#07c160;color:var(--tag-success-color,#07c160)}.van-tag--warning{background-color:#ff976a;background-color:var(--tag-warning-color,#ff976a)}.van-tag--warning.van-tag--plain{color:#ff976a;color:var(--tag-warning-color,#ff976a)}.van-tag--plain{background-color:#fff;background-color:var(--tag-plain-background-color,#fff)}.van-tag--mark{padding-right:.7em}.van-tag--mark,.van-tag--mark:after{border-radius:0 999px 999px 0;border-radius:0 var(--tag-round-border-radius,999px) var(--tag-round-border-radius,999px) 0}.van-tag--round,.van-tag--round:after{border-radius:999px;border-radius:var(--tag-round-border-radius,999px)}.van-tag--medium{font-size:12px;font-size:var(--tag-medium-font-size,12px)}.van-tag--large{font-size:14px;font-size:var(--tag-large-font-size,14px)}.van-tag__close{margin-left:2px} @import '../common/index.wxss';.van-tag{position:relative;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;padding:0 4px;padding:var(--tag-padding,0 4px);color:#fff;color:var(--tag-text-color,#fff);font-size:12px;font-size:var(--tag-font-size,12px);line-height:16px;line-height:var(--tag-line-height,16px);border-radius:2px;border-radius:var(--tag-border-radius,2px)}.van-tag--default{background-color:#969799;background-color:var(--tag-default-color,#969799)}.van-tag--default.van-tag--plain{color:#969799;color:var(--tag-default-color,#969799)}.van-tag--danger{background-color:#ee0a24;background-color:var(--tag-danger-color,#ee0a24)}.van-tag--danger.van-tag--plain{color:#ee0a24;color:var(--tag-danger-color,#ee0a24)}.van-tag--primary{background-color:#1989fa;background-color:var(--tag-primary-color,#1989fa)}.van-tag--primary.van-tag--plain{color:#1989fa;color:var(--tag-primary-color,#1989fa)}.van-tag--success{background-color:#07c160;background-color:var(--tag-success-color,#07c160)}.van-tag--success.van-tag--plain{color:#07c160;color:var(--tag-success-color,#07c160)}.van-tag--warning{background-color:#ff976a;background-color:var(--tag-warning-color,#ff976a)}.van-tag--warning.van-tag--plain{color:#ff976a;color:var(--tag-warning-color,#ff976a)}.van-tag--plain{background-color:#fff;background-color:var(--tag-plain-background-color,#fff)}.van-tag--plain:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:inherit;content:"";pointer-events:none}.van-tag--medium{padding:2px 6px;padding:var(--tag-medium-padding,2px 6px)}.van-tag--large{padding:4px 8px;padding:var(--tag-large-padding,4px 8px);font-size:14px;font-size:var(--tag-large-font-size,14px);border-radius:4px;border-radius:var(--tag-large-border-radius,4px)}.van-tag--mark{border-radius:0 999px 999px 0;border-radius:0 var(--tag-round-border-radius,999px) var(--tag-round-border-radius,999px) 0}.van-tag--mark:after{display:block;width:2px;content:""}.van-tag--round{border-radius:999px;border-radius:var(--tag-round-border-radius,999px)}.van-tag__close{min-width:1em;margin-left:2px}
\ No newline at end of file \ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
props: {
show: Boolean,
mask: Boolean,
message: String,
forbidClick: Boolean,
zIndex: {
type: Number,
value: 1000,
},
type: {
type: String,
value: 'text',
},
loadingType: {
type: String,
value: 'circular',
},
position: {
type: String,
value: 'middle',
},
},
methods: {
// for prevent touchmove
noop: function () {},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index",
"van-loading": "../loading/index",
"van-overlay": "../overlay/index",
"van-transition": "../transition/index"
}
}
<van-overlay
wx:if="{{ mask || forbidClick }}"
show="{{ show }}"
z-index="{{ zIndex }}"
custom-style="{{ mask ? '' : 'background-color: transparent;' }}"
/>
<van-transition
show="{{ show }}"
custom-style="z-index: {{ zIndex }}"
custom-class="van-toast__container"
>
<view
class="van-toast van-toast--{{ type === 'text' ? 'text' : 'icon' }} van-toast--{{ position }}"
catch:touchmove="noop"
>
<!-- text only -->
<text wx:if="{{ type === 'text' }}">{{ message }}</text>
<!-- with icon -->
<block wx:else>
<van-loading
wx:if="{{ type === 'loading' }}"
color="white"
type="{{ loadingType }}"
custom-class="van-toast__loading"
/>
<van-icon wx:else class="van-toast__icon" name="{{ type }}" />
<text wx:if="{{ message }}" class="van-toast__text">{{ message }}</text>
</block>
<slot />
</view>
</van-transition>
@import '../common/index.wxss';.van-toast{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:initial;color:#fff;color:var(--toast-text-color,#fff);font-size:14px;font-size:var(--toast-font-size,14px);line-height:20px;line-height:var(--toast-line-height,20px);white-space:pre-wrap;word-wrap:break-word;background-color:rgba(0,0,0,.7);background-color:var(--toast-background-color,rgba(0,0,0,.7));border-radius:8px;border-radius:var(--toast-border-radius,8px)}.van-toast__container{position:fixed;top:50%;left:50%;width:-webkit-fit-content;width:fit-content;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:70%;max-width:var(--toast-max-width,70%)}.van-toast--text{min-width:96px;min-width:var(--toast-text-min-width,96px);padding:8px 12px;padding:var(--toast-text-padding,8px 12px)}.van-toast--icon{width:88px;width:var(--toast-default-width,88px);min-height:88px;min-height:var(--toast-default-min-height,88px);padding:16px;padding:var(--toast-default-padding,16px)}.van-toast--icon .van-toast__icon{font-size:36px;font-size:var(--toast-icon-size,36px)}.van-toast--icon .van-toast__text{padding-top:8px}.van-toast__loading{margin:10px 0}.van-toast--top{-webkit-transform:translateY(-30vh);transform:translateY(-30vh)}.van-toast--bottom{-webkit-transform:translateY(30vh);transform:translateY(30vh)}
\ No newline at end of file
/// <reference types="miniprogram-api-typings" />
declare type ToastMessage = string | number;
interface ToastOptions {
show?: boolean;
type?: string;
mask?: boolean;
zIndex?: number;
context?: WechatMiniprogram.Component.TrivialInstance | WechatMiniprogram.Page.TrivialInstance;
position?: string;
duration?: number;
selector?: string;
forbidClick?: boolean;
loadingType?: string;
message?: ToastMessage;
onClose?: () => void;
}
declare function Toast(toastOptions: ToastOptions | ToastMessage): WechatMiniprogram.Component.TrivialInstance;
declare namespace Toast {
var loading: (options: string | number | ToastOptions) => WechatMiniprogram.Component.Instance<Record<string, any>, Record<string, any>, Record<string, any>>;
var success: (options: string | number | ToastOptions) => WechatMiniprogram.Component.Instance<Record<string, any>, Record<string, any>, Record<string, any>>;
var fail: (options: string | number | ToastOptions) => WechatMiniprogram.Component.Instance<Record<string, any>, Record<string, any>, Record<string, any>>;
var clear: () => void;
var setDefaultOptions: (options: ToastOptions) => void;
var resetDefaultOptions: () => void;
}
export default Toast;
'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 });
var utils_1 = require('../common/utils');
var defaultOptions = {
type: 'text',
mask: false,
message: '',
show: true,
zIndex: 1000,
duration: 2000,
position: 'middle',
forbidClick: false,
loadingType: 'circular',
selector: '#van-toast',
};
var queue = [];
var currentOptions = __assign({}, defaultOptions);
function parseOptions(message) {
return utils_1.isObj(message) ? message : { message: message };
}
function getContext() {
var pages = getCurrentPages();
return pages[pages.length - 1];
}
function Toast(toastOptions) {
var options = __assign(
__assign({}, currentOptions),
parseOptions(toastOptions)
);
var context = options.context || getContext();
var toast = context.selectComponent(options.selector);
if (!toast) {
console.warn('未找到 van-toast 节点,请确认 selector 及 context 是否正确');
return;
}
delete options.context;
delete options.selector;
toast.clear = function () {
toast.setData({ show: false });
if (options.onClose) {
options.onClose();
}
};
queue.push(toast);
toast.setData(options);
clearTimeout(toast.timer);
if (options.duration > 0) {
toast.timer = setTimeout(function () {
toast.clear();
queue = queue.filter(function (item) {
return item !== toast;
});
}, options.duration);
}
return toast;
}
var createMethod = function (type) {
return function (options) {
return Toast(__assign({ type: type }, parseOptions(options)));
};
};
Toast.loading = createMethod('loading');
Toast.success = createMethod('success');
Toast.fail = createMethod('fail');
Toast.clear = function () {
queue.forEach(function (toast) {
toast.clear();
});
queue = [];
};
Toast.setDefaultOptions = function (options) {
Object.assign(currentOptions, options);
};
Toast.resetDefaultOptions = function () {
currentOptions = __assign({}, defaultOptions);
};
exports.default = Toast;
import { VantComponent } from '../common/component'; 'use strict';
import { transition } from '../mixins/transition'; Object.defineProperty(exports, '__esModule', { value: true });
VantComponent({ var component_1 = require('../common/component');
classes: [ var transition_1 = require('../mixins/transition');
'enter-class', component_1.VantComponent({
'enter-active-class', classes: [
'enter-to-class', 'enter-class',
'leave-class', 'enter-active-class',
'leave-active-class', 'enter-to-class',
'leave-to-class' 'leave-class',
], 'leave-active-class',
mixins: [transition(true)] 'leave-to-class',
],
mixins: [transition_1.transition(true)],
}); });
{ {
"component": true "component": true
} }
\ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var component_1 = require('../common/component');
component_1.VantComponent({
classes: [
'main-item-class',
'content-item-class',
'main-active-class',
'content-active-class',
'main-disabled-class',
'content-disabled-class',
],
props: {
items: {
type: Array,
observer: 'updateSubItems',
},
activeId: null,
mainActiveIndex: {
type: Number,
value: 0,
observer: 'updateSubItems',
},
height: {
type: [Number, String],
value: 300,
},
max: {
type: Number,
value: Infinity,
},
selectedIcon: {
type: String,
value: 'success',
},
},
data: {
subItems: [],
},
methods: {
// 当一个子项被选择时
onSelectItem: function (event) {
var item = event.currentTarget.dataset.item;
var isArray = Array.isArray(this.data.activeId);
// 判断有没有超出右侧选择的最大数
var isOverMax = isArray && this.data.activeId.length >= this.data.max;
// 判断该项有没有被选中, 如果有被选中,则忽视是否超出的条件
var isSelected = isArray
? this.data.activeId.indexOf(item.id) > -1
: this.data.activeId === item.id;
if (!item.disabled && (!isOverMax || isSelected)) {
this.$emit('click-item', item);
}
},
// 当一个导航被点击时
onClickNav: function (event) {
var index = event.detail;
var item = this.data.items[index];
if (!item.disabled) {
this.$emit('click-nav', { index: index });
}
},
// 更新子项列表
updateSubItems: function () {
var _a = this.data,
items = _a.items,
mainActiveIndex = _a.mainActiveIndex;
var _b = (items[mainActiveIndex] || {}).children,
children = _b === void 0 ? [] : _b;
return this.set({ subItems: children });
},
},
});
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index",
"van-sidebar": "../sidebar/index",
"van-sidebar-item": "../sidebar-item/index"
}
}
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="wxs" />
<view
class="van-tree-select"
style="height: {{ utils.addUnit(height) }}"
>
<scroll-view scroll-y class="van-tree-select__nav">
<van-sidebar active-key="{{ mainActiveIndex }}" bind:change="onClickNav" custom-class="van-tree-select__nav__inner">
<van-sidebar-item
wx:for="{{ items }}"
wx:key="index"
custom-class="main-item-class"
active-class="main-active-class"
disabled-class="main-disabled-class"
badge="{{ item.badge }}"
dot="{{ item.dot }}"
title="{{ item.text }}"
disabled="{{ item.disabled }}"
/>
</van-sidebar>
</scroll-view>
<scroll-view scroll-y class="van-tree-select__content">
<slot name="content" />
<view
wx:for="{{ subItems }}"
wx:key="id"
class="van-ellipsis content-item-class {{ utils.bem('tree-select__item', { active: wxs.isActive(activeId, item.id), disabled: item.disabled }) }} {{ wxs.isActive(activeId, item.id) ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
data-item="{{ item }}"
bind:tap="onSelectItem"
>
{{ item.text }}
<van-icon
wx:if="{{ wxs.isActive(activeId, item.id) }}"
name="{{ selectedIcon }}"
size="16px"
class="van-tree-select__selected"
/>
</view>
</scroll-view>
</view>
/* eslint-disable */
var array = require('../wxs/array.wxs');
function isActive (activeList, itemId) {
if (array.isArray(activeList)) {
return activeList.indexOf(itemId) > -1;
}
return activeList === itemId;
}
module.exports.isActive = isActive;
@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)}
\ No newline at end of file
import { VantComponent } from '../common/component'; 'use strict';
import { isImageFile, isVideo, chooseFile, isPromise } from './utils'; var __assign =
import { chooseImageProps, chooseVideoProps } from './shared'; (this && this.__assign) ||
VantComponent({ function () {
props: Object.assign( __assign =
Object.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 });
var component_1 = require('../common/component');
var utils_1 = require('./utils');
var shared_1 = require('./shared');
component_1.VantComponent({
props: __assign(
__assign(
{ {
disabled: Boolean, disabled: Boolean,
multiple: Boolean, multiple: Boolean,
...@@ -13,7 +30,7 @@ VantComponent({ ...@@ -13,7 +30,7 @@ VantComponent({
beforeRead: null, beforeRead: null,
previewSize: { previewSize: {
type: null, type: null,
value: 90, value: 80,
}, },
name: { name: {
type: [Number, String], type: [Number, String],
...@@ -61,66 +78,81 @@ VantComponent({ ...@@ -61,66 +78,81 @@ VantComponent({
value: 'photograph', value: 'photograph',
}, },
}, },
chooseImageProps shared_1.chooseImageProps
), ),
chooseVideoProps shared_1.chooseVideoProps
), ),
data: { data: {
lists: [], lists: [],
isInCount: true, isInCount: true,
}, },
methods: { methods: {
formatFileList() { formatFileList: function () {
const { fileList = [], maxCount } = this.data; var _a = this.data,
const lists = fileList.map((item) => _b = _a.fileList,
Object.assign(Object.assign({}, item), { fileList = _b === void 0 ? [] : _b,
maxCount = _a.maxCount;
var lists = fileList.map(function (item) {
return __assign(__assign({}, item), {
isImage: isImage:
typeof item.isImage === 'undefined' typeof item.isImage === 'undefined'
? isImageFile(item) ? utils_1.isImageFile(item)
: item.isImage, : item.isImage,
}) deletable:
); typeof item.deletable === 'undefined' ? true : item.deletable,
this.setData({ lists, isInCount: lists.length < maxCount }); });
});
this.setData({ lists: lists, isInCount: lists.length < maxCount });
}, },
getDetail(index) { getDetail: function (index) {
return { return {
name: this.data.name, name: this.data.name,
index: index == null ? this.data.fileList.length : index, index: index == null ? this.data.fileList.length : index,
}; };
}, },
startUpload() { startUpload: function () {
const { maxCount, multiple, accept, lists, disabled } = this.data; var _this = this;
var _a = this.data,
maxCount = _a.maxCount,
multiple = _a.multiple,
accept = _a.accept,
lists = _a.lists,
disabled = _a.disabled;
if (disabled) return; if (disabled) return;
chooseFile( utils_1
Object.assign(Object.assign({}, this.data), { .chooseFile(
maxCount: maxCount - lists.length, __assign(__assign({}, this.data), {
}) maxCount: maxCount - lists.length,
) })
.then((res) => { )
let file = null; .then(function (res) {
if (isVideo(res, accept)) { var file = null;
file = Object.assign({ path: res.tempFilePath }, res); if (utils_1.isVideo(res, accept)) {
file = __assign({ path: res.tempFilePath }, res);
} else { } else {
file = multiple ? res.tempFiles : res.tempFiles[0]; file = multiple ? res.tempFiles : res.tempFiles[0];
} }
this.onBeforeRead(file); _this.onBeforeRead(file);
}) })
.catch((error) => { .catch(function (error) {
this.$emit('error', error); _this.$emit('error', error);
}); });
}, },
onBeforeRead(file) { onBeforeRead: function (file) {
const { beforeRead, useBeforeRead } = this.data; var _this = this;
let res = true; var _a = this.data,
beforeRead = _a.beforeRead,
useBeforeRead = _a.useBeforeRead;
var res = true;
if (typeof beforeRead === 'function') { if (typeof beforeRead === 'function') {
res = beforeRead(file, this.getDetail()); res = beforeRead(file, this.getDetail());
} }
if (useBeforeRead) { if (useBeforeRead) {
res = new Promise((resolve, reject) => { res = new Promise(function (resolve, reject) {
this.$emit( _this.$emit(
'before-read', 'before-read',
Object.assign(Object.assign({ file }, this.getDetail()), { __assign(__assign({ file: file }, _this.getDetail()), {
callback: (ok) => { callback: function (ok) {
ok ? resolve() : reject(); ok ? resolve() : reject();
}, },
}) })
...@@ -130,56 +162,64 @@ VantComponent({ ...@@ -130,56 +162,64 @@ VantComponent({
if (!res) { if (!res) {
return; return;
} }
if (isPromise(res)) { if (utils_1.isPromise(res)) {
res.then((data) => this.onAfterRead(data || file)); res.then(function (data) {
return _this.onAfterRead(data || file);
});
} else { } else {
this.onAfterRead(file); this.onAfterRead(file);
} }
}, },
onAfterRead(file) { onAfterRead: function (file) {
const { maxSize } = this.data; var maxSize = this.data.maxSize;
const oversize = Array.isArray(file) var oversize = Array.isArray(file)
? file.some((item) => item.size > maxSize) ? file.some(function (item) {
return item.size > maxSize;
})
: file.size > maxSize; : file.size > maxSize;
if (oversize) { if (oversize) {
this.$emit('oversize', Object.assign({ file }, this.getDetail())); this.$emit('oversize', __assign({ file: file }, this.getDetail()));
return; return;
} }
if (typeof this.data.afterRead === 'function') { if (typeof this.data.afterRead === 'function') {
this.data.afterRead(file, this.getDetail()); this.data.afterRead(file, this.getDetail());
} }
this.$emit('after-read', Object.assign({ file }, this.getDetail())); this.$emit('after-read', __assign({ file: file }, this.getDetail()));
}, },
deleteItem(event) { deleteItem: function (event) {
const { index } = event.currentTarget.dataset; var index = event.currentTarget.dataset.index;
this.$emit( this.$emit(
'delete', 'delete',
Object.assign(Object.assign({}, this.getDetail(index)), { __assign(__assign({}, this.getDetail(index)), {
file: this.data.fileList[index], file: this.data.fileList[index],
}) })
); );
}, },
onPreviewImage(event) { onPreviewImage: function (event) {
if (!this.data.previewFullImage) return; if (!this.data.previewFullImage) return;
const { index } = event.currentTarget.dataset; var index = event.currentTarget.dataset.index;
const { lists } = this.data; var lists = this.data.lists;
const item = lists[index]; var item = lists[index];
wx.previewImage({ wx.previewImage({
urls: lists urls: lists
.filter((item) => item.isImage) .filter(function (item) {
.map((item) => item.url || item.path), return item.isImage;
})
.map(function (item) {
return item.url || item.path;
}),
current: item.url || item.path, current: item.url || item.path,
fail() { fail: function () {
wx.showToast({ title: '预览图片失败', icon: 'none' }); wx.showToast({ title: '预览图片失败', icon: 'none' });
}, },
}); });
}, },
onClickPreview(event) { onClickPreview: function (event) {
const { index } = event.currentTarget.dataset; var index = event.currentTarget.dataset.index;
const item = this.data.lists[index]; var item = this.data.lists[index];
this.$emit( this.$emit(
'click-preview', 'click-preview',
Object.assign(Object.assign({}, item), this.getDetail(index)) __assign(__assign({}, item), this.getDetail(index))
); );
}, },
}, },
......
...@@ -33,17 +33,18 @@ ...@@ -33,17 +33,18 @@
wx:if="{{ item.status === 'uploading' || item.status === 'failed' }}" wx:if="{{ item.status === 'uploading' || item.status === 'failed' }}"
class="van-uploader__mask" class="van-uploader__mask"
> >
<van-icon wx:if="{{ item.status === 'failed' }}" name="warning-o" class="van-uploader__mask-icon" /> <van-icon wx:if="{{ item.status === 'failed' }}" name="close" class="van-uploader__mask-icon" />
<van-loading wx:else class="van-uploader__loading" /> <van-loading wx:else custom-class="van-uploader__loading" />
<text wx:if="{{ item.message }}" class="van-uploader__upload-text">{{ item.message }}</text> <text wx:if="{{ item.message }}" class="van-uploader__mask-message">{{ item.message }}</text>
</view> </view>
<van-icon <view
wx:if="{{ deletable }}" wx:if="{{ deletable && item.deletable }}"
name="clear"
class="van-uploader__preview-delete"
data-index="{{ index }}" data-index="{{ index }}"
bind:tap="deleteItem" class="van-uploader__preview-delete"
/> catch:tap="deleteItem"
>
<van-icon name="cross" class="van-uploader__preview-delete-icon" />
</view>
</view> </view>
<!-- 上传样式 --> <!-- 上传样式 -->
...@@ -57,7 +58,7 @@ ...@@ -57,7 +58,7 @@
wx:if="{{ showUpload }}" wx:if="{{ showUpload }}"
class="van-uploader__upload {{ disabled ? 'van-uploader__upload--disabled': ''}}" class="van-uploader__upload {{ disabled ? 'van-uploader__upload--disabled': ''}}"
style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};" style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
bind:tap="startUpload" bindtap="startUpload"
> >
<van-icon name="{{ uploadIcon }}" class="van-uploader__upload-icon" /> <van-icon name="{{ uploadIcon }}" class="van-uploader__upload-icon" />
<text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text> <text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text>
......
@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} @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}.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}.van-uploader__preview-delete{position:absolute;top:0;right:0;width:14px;height:14px;background-color:rgba(0,0,0,.7);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:-2px;right:-2px;color:#fff;font-size:16px;-webkit-transform:scale(.5);transform:scale(.5)}.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}.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)}.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!important}
\ No newline at end of file \ No newline at end of file
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.chooseVideoProps = exports.chooseImageProps = void 0;
// props for choose image // props for choose image
export const chooseImageProps = { exports.chooseImageProps = {
sizeType: { sizeType: {
type: Array, type: Array,
value: ['original', 'compressed'], value: ['original', 'compressed'],
...@@ -10,7 +13,7 @@ export const chooseImageProps = { ...@@ -10,7 +13,7 @@ export const chooseImageProps = {
}, },
}; };
// props for choose video // props for choose video
export const chooseVideoProps = { exports.chooseVideoProps = {
capture: { capture: {
type: Array, type: Array,
value: ['album', 'camera'], value: ['album', 'camera'],
......
const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i; 'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
exports.isPromise = exports.isObject = exports.isFunction = exports.chooseFile = exports.isVideo = exports.isImageFile = void 0;
var IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
function isImageUrl(url) { function isImageUrl(url) {
return IMAGE_REGEXP.test(url); return IMAGE_REGEXP.test(url);
} }
export function isImageFile(item) { function isImageFile(item) {
if (item.type) { if (item.type) {
return item.type.indexOf('image') === 0; return item.type.indexOf('image') === 0;
} }
...@@ -14,55 +17,56 @@ export function isImageFile(item) { ...@@ -14,55 +17,56 @@ export function isImageFile(item) {
} }
return false; return false;
} }
export function isVideo(res, accept) { exports.isImageFile = isImageFile;
function isVideo(res, accept) {
return accept === 'video'; return accept === 'video';
} }
export function chooseFile({ exports.isVideo = isVideo;
accept, function chooseFile(_a) {
multiple, var accept = _a.accept,
capture, multiple = _a.multiple,
compressed, capture = _a.capture,
maxDuration, compressed = _a.compressed,
sizeType, maxDuration = _a.maxDuration,
camera, sizeType = _a.sizeType,
maxCount, camera = _a.camera,
}) { maxCount = _a.maxCount;
switch (accept) { switch (accept) {
case 'image': case 'image':
return new Promise((resolve, reject) => { return new Promise(function (resolve, reject) {
wx.chooseImage({ wx.chooseImage({
count: multiple ? Math.min(maxCount, 9) : 1, count: multiple ? Math.min(maxCount, 9) : 1,
sourceType: capture, sourceType: capture,
sizeType, sizeType: sizeType,
success: resolve, success: resolve,
fail: reject, fail: reject,
}); });
}); });
case 'media': case 'media':
return new Promise((resolve, reject) => { return new Promise(function (resolve, reject) {
wx.chooseMedia({ wx.chooseMedia({
count: multiple ? Math.min(maxCount, 9) : 1, count: multiple ? Math.min(maxCount, 9) : 1,
sourceType: capture, sourceType: capture,
maxDuration, maxDuration: maxDuration,
sizeType, sizeType: sizeType,
camera, camera: camera,
success: resolve, success: resolve,
fail: reject, fail: reject,
}); });
}); });
case 'video': case 'video':
return new Promise((resolve, reject) => { return new Promise(function (resolve, reject) {
wx.chooseVideo({ wx.chooseVideo({
sourceType: capture, sourceType: capture,
compressed, compressed: compressed,
maxDuration, maxDuration: maxDuration,
camera, camera: camera,
success: resolve, success: resolve,
fail: reject, fail: reject,
}); });
}); });
default: default:
return new Promise((resolve, reject) => { return new Promise(function (resolve, reject) {
wx.chooseMessageFile({ wx.chooseMessageFile({
count: multiple ? maxCount : 1, count: multiple ? maxCount : 1,
type: 'file', type: 'file',
...@@ -72,12 +76,16 @@ export function chooseFile({ ...@@ -72,12 +76,16 @@ export function chooseFile({
}); });
} }
} }
export function isFunction(val) { exports.chooseFile = chooseFile;
function isFunction(val) {
return typeof val === 'function'; return typeof val === 'function';
} }
export function isObject(val) { exports.isFunction = isFunction;
function isObject(val) {
return val !== null && typeof val === 'object'; return val !== null && typeof val === 'object';
} }
export function isPromise(val) { exports.isObject = isObject;
function isPromise(val) {
return isObject(val) && isFunction(val.then) && isFunction(val.catch); return isObject(val) && isFunction(val.then) && isFunction(val.catch);
} }
exports.isPromise = isPromise;
const app = getApp()
import {
Base
} from '../../../utils/base.js';
const base = new Base()
const util = require('../../../utils/util');
Page({ Page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
isOpen: false, coach_id: '5',
daysColor: [ isOpen: false,
{ daysColor: [{
month: 'current', month: 'current',
day: '12', day: '12',
color: '#fff', color: '#fff',
background: 'linear-gradient(#5791FE 0%, #3E63F8 100%);' background: '#FF6E00'
}, },
{ {
month: 'current', month: 'current',
day: '10', day: '10',
color: '#fff', color: '#fff',
background: 'linear-gradient(#5791FE 0%, #3E63F8 100%);' background: 'linear-gradient(#5791FE 0%, #3E63F8 100%);'
}, },
{ {
month: 'current', month: 'current',
day: '8', day: '8',
color: '#fff', color: '#fff',
background: 'linear-gradient(#5791FE 0%, #3E63F8 100%);' background: 'linear-gradient(#5791FE 0%, #3E63F8 100%);'
} }
] ],
}, curDate: '',
list: [],
allList: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.showLoading({
title: '加载中...',
})
this.setData({
curDate: util.formatTime(new Date())
})
this.getAllList()
this.getList()
},
getAllList() {
let params = {
url: 'coach/timetable',
data: {
coach_id: this.data.coach_id,
},
callback: (data) => {
console.log(data)
wx.hideLoading()
let daysColor = [];
data.forEach(function (el, index) {
daysColor.push({
month: 'current',
day: el.class_date.split('-')[2],
color: '#fff',
background: '#B4BC4D'
})
})
this.setData({
daysColor: daysColor,
allList: data
})
console.log(this.data.daysColor)
/** }
* 生命周期函数--监听页面加载 }
*/ base.newRequest(params)
onLoad: function (options) { },
getList() {
let params = {
url: 'coach/schedule',
data: {
coach_id: this.data.coach_id,
date: this.data.curDate
},
callback: (data) => {
this.setData({
list: data,
locked: false
})
}
}
base.newRequest(params)
},
onChange(e) {
let index = e.currentTarget.dataset.index
let list = this.data.classlist
list[index].timeData = e.detail
this.setData({
classlist: list
})
},
changeTab(e) {
let index = e.currentTarget.dataset.index
if (this.data.activeIndex != index) {
this.setData({
activeIndex: index
})
}
},
// 日历展开与否
open() {
this.setData({
isOpen: !this.data.isOpen
})
}, },
goclassManagement:function(){
prev: function (event) {
let currentMonth = util.formatNumber(event.detail.currentMonth)
this.setData({
month: event.detail.currentYear + '-' + currentMonth
})
this.getAllList();
},
next: function (event) {
let currentMonth = util.formatNumber(event.detail.currentMonth)
this.setData({
month: event.detail.currentYear + '-' + currentMonth
})
this.getAllList();
},
dayClick: function (event) {
console.log(event)
this.setData({
curDate: event.detail.year + '-' + util.formatNumber(event.detail.month) + '-' + util.formatNumber(event.detail.day)
})
if (!this.data.locked) {
this.setData({
locked: true,
courseList: [],
})
this.getList();
}
},
onChange(e) {
let index = e.currentTarget.dataset.index
let list = this.data.classlist
list[index].timeData = e.detail
this.setData({
classlist: list
})
},
changeTab(e) {
let index = e.currentTarget.dataset.index
if (this.data.activeIndex != index) {
this.setData({
activeIndex: index
})
}
},
// 日历展开与否
open() {
this.setData({
isOpen: !this.data.isOpen
})
},
goclassManagement: function () {
wx.navigateTo({ wx.navigateTo({
url: '../../index/classManagement/classManagement', url: '../../index/classManagement/classManagement',
}) })
}, },
goclassDetail:function(){ goclassDetail: function () {
wx.navigateTo({ wx.navigateTo({
url: '../../index/classDetail/classDetail', url: '../../index/classDetail/classDetail',
}) })
} },
goDetail(e) {
let item = e.currentTarget.dataset.item
console.log(item)
wx.navigateTo({
url: '/pages/index/classDetail/classDetail',
})
},
}) })
\ No newline at end of file
{ {
"usingComponents": { "usingComponents": {
"van-count-down": "/components/vant/count-down/index", "van-count-down": "/components/vant/count-down/index",
"calendar": "plugin://calendar/calendar" "calendar": "plugin://calendar/calendar",
"van-empty": "/components/vant/empty/index"
}, },
"navigationBarTitleText": "课表" "navigationBarTitleText": "课表"
} }
\ No newline at end of file
<view> <view class="tabContent">
<view> <view class="rili">
<view class="tabContent"> <calendar weeks-type='cn' calendar-style="calendar" header-style="rili_header"
<view class="rili"> board-style="board {{isOpen? 'heightBoard' : ''}}" show-more-days='true' active-type='rounded'
<calendar weeks-type='cn' calendar-style="calendar" header-style="rili_header" board-style="board {{isOpen? 'heightBoard' : ''}}" show-more-days='true' active-type='rounded' days-color='{{daysColor}}' cell-size='29' /> days-color='{{daysColor}}' cell-size='29' bindprevMonth="prev" bindnextMonth="next" binddayClick="dayClick"/>
<view class="riliShow"> <view class="riliShow">
<view class="flex-h flex-vc flex-hc" catchtap="open"> <view class="flex-h flex-vc flex-hc" catchtap="open">
<text>{{isOpen ? '收起':'更多日期'}}</text> <text>{{isOpen ? '收起':'更多日期'}}</text>
<text class="iconfont icongengduo {{isOpen ? 'up': 'down'}}"></text> <text class="iconfont icongengduo {{isOpen ? 'up': 'down'}}"></text>
</view>
</view>
</view>
<view class="cont" catchtap="goclassDetail">
<view class="top">
<view class="time_title">篮球课</view>
<view class="state">即将开课</view>
</view>
<view class="time">上课时间:2020-10-21 09:00-10:00 </view>
<view class="place">上课地点:新天际众美幼稚园</view>
<view class="manage" catchtap="goclassManagement">管理</view>
</view> </view>
<view class="cont" catchtap="goclassDetail"> </view>
</view>
<view wx:if='{{list.length > 0}}'>
<block wx:for="{{list}}" wx:key='index' >
<view class="cont flex-v flex-hb" catchtap="goclassDetail">
<view class="top"> <view class="top">
<view class="time_title">足球课</view> <view class="time_title">{{item.course.name}}</view>
<view class="inclass">上课中</view> <view class="over" wx:if="{{item.class_status_display == '已结束'}}">{{item.class_status_display}}</view>
<view wx:else>
<view class="state">{{item.class_status_display}}</view>
<view class="inclass">上课中</view>
</view>
</view> </view>
<view class="time">上课时间:2020-10-21 09:00-10:00 </view> <view class="time">上课时间:{{item.class_date}} {{item.start_time}}-{{item.end_time}} </view>
<view class="place">上课地点:新天际众美幼稚园</view> <view class="place">上课地点:{{item.stadium.name}}</view>
<view class="manage" catchtap="goclassManagement">管理</view> <view>
</view> <view class="manage1" catchtap="goDetail" wx:if="{{item.class_status_display == '已结束'}}" data-item='{{item}}'>查看详情</view>
<view class="cont"> <view wx:else class="manage" catchtap="goclassManagement">管理</view>
<view class="top">
<view class="time_title">轮滑课</view>
<view class="over">已结束</view>
</view> </view>
<view class="time">上课时间:2020-10-21 09:00-10:00 </view>
<view class="place">上课地点:新天际众美幼稚园</view>
<view class="manage" catchtap="goclassManagement">查看详情</view>
</view> </view>
</view> </block>
</view>
<view wx:else class="empty">
<van-empty
class="custom-image"
image="/images/without.png"
description="暂无课表"
/>
</view> </view>
</view> </view>
\ No newline at end of file
...@@ -86,12 +86,13 @@ ...@@ -86,12 +86,13 @@
background: #FFFFFF; background: #FFFFFF;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 10rpx 20rpx 10rpx rgba(239, 240, 241, 0.72); box-shadow: 0 10rpx 20rpx 10rpx rgba(239, 240, 241, 0.72);
padding:20rpx; padding: 30rpx 20rpx;
margin: 0 auto 24rpx; margin: 0 auto 24rpx;
position: relative; position: relative;
} }
.cont .top{ .cont .top{
overflow: hidden; overflow: hidden;
margin-bottom: 20rpx;
} }
.cont .top .time_title{ .cont .top .time_title{
float: left; float: left;
...@@ -120,12 +121,11 @@ ...@@ -120,12 +121,11 @@
.cont .time{ .cont .time{
color: #999999; color: #999999;
font-size: 24rpx; font-size: 24rpx;
margin-bottom: 30rpx; margin-bottom: 15rpx;
} }
.cont .place{ .cont .place{
color: #999999; color: #999999;
font-size: 24rpx; font-size: 24rpx;
margin-top: -14rpx;
} }
.cont .manage{ .cont .manage{
width: 136rpx; width: 136rpx;
...@@ -137,7 +137,20 @@ ...@@ -137,7 +137,20 @@
line-height: 48rpx; line-height: 48rpx;
text-align: center; text-align: center;
position: absolute; position: absolute;
bottom: 40rpx; bottom: 30rpx;
right: 20rpx;
}
.manage1 {
width: 136rpx;
height: 48rpx;
border: 1px solid #B4BC4D;
border-radius: 24px;
color: #B4BC4D;
font-size: 24rpx;
line-height: 48rpx;
text-align: center;
position: absolute;
bottom: 30rpx;
right: 20rpx; right: 20rpx;
} }
......
// 公共函数库 // 公共函数库
var app = getApp()
const qiniuUploader = require("./qiniuUploader.js");
class Base { class Base {
constructor() { constructor() {
// this.baseUrl = 'https://wandoutiyu.xueyoubangedu.com/api/' //线上接口 // this.baseUrl = 'https://wandoutiyu.xueyoubangedu.com/api/' //线上接口
...@@ -138,8 +140,8 @@ class Base { ...@@ -138,8 +140,8 @@ class Base {
//七牛上传 //七牛上传
initQiniu() { initQiniu() {
var options = { var options = {
uptokenURL: 'https://fenghexm.xueyoubangedu.com/api/v1.0/upload/token', uptokenURL: 'https://wandoutiyu.test.xueyoubangedu.com/api/get_upload_token',
domain: 'https://fhxm.xueyoubangedu.com/', domain: 'https://wandoutiyu.test.xueyoubangedu.com/',
uploadURL: 'https://up-z1.qiniup.com' uploadURL: 'https://up-z1.qiniup.com'
}; };
qiniuUploader.init(options); qiniuUploader.init(options);
......
...@@ -5,8 +5,7 @@ const formatTime = date => { ...@@ -5,8 +5,7 @@ const formatTime = date => {
const hour = date.getHours() const hour = date.getHours()
const minute = date.getMinutes() const minute = date.getMinutes()
const second = date.getSeconds() const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('-')
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
} }
const formatNumber = n => { const formatNumber = n => {
...@@ -15,5 +14,6 @@ const formatNumber = n => { ...@@ -15,5 +14,6 @@ const formatNumber = n => {
} }
module.exports = { module.exports = {
formatTime: formatTime formatTime: formatTime,
formatNumber: formatNumber
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment