18 changed files with 333 additions and 215 deletions
Split View
Diff Options
-
4api/user.js
-
58components/checker/index.js
-
7components/checker/index.json
-
22components/checker/index.wxml
-
12components/checker/index.wxs
-
1components/checker/index.wxss
-
21components/checker/shared.js
-
11components/checker/toolbar.wxml
-
15components/picker/index.js
-
41components/picker/index.wxml
-
27components/picker/toolbar.wxml
-
23components/radio/index.wxml
-
105pages/home/employee-info/index.js
-
5pages/home/employee-info/index.json
-
42pages/home/employee-info/index.wxml
-
151pages/home/employee/index.js
-
1pages/home/employee/index.json
-
2pages/home/employee/index.wxml
@ -0,0 +1,58 @@ |
|||
import { VantComponent } from '../common/component'; |
|||
import { pickerProps } from './shared'; |
|||
|
|||
VantComponent({ |
|||
classes: ['active-class', 'toolbar-class', 'column-class'], |
|||
props: Object.assign(Object.assign({}, pickerProps), { |
|||
max: { |
|||
type: Number, |
|||
value: Infinity, |
|||
}, |
|||
activeId: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
toolbarPosition: { |
|||
type: String, |
|||
value: 'top' |
|||
}, |
|||
defaultIndex: { |
|||
type: Number, |
|||
value: 0 |
|||
}, |
|||
columns: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
selectedIcon: { |
|||
type: String, |
|||
value: 'success', |
|||
} |
|||
}), |
|||
methods: { |
|||
emit(event) { |
|||
const { type } = event.currentTarget.dataset; |
|||
if (this.data.columns.length) { |
|||
this.$emit(type, this.data.activeId ); |
|||
} else { |
|||
this.$emit(type, { }); |
|||
} |
|||
}, |
|||
onSelectItem(event) { |
|||
const { item } = event.currentTarget.dataset; |
|||
const isArray = Array.isArray(this.data.activeId); |
|||
// 判断有没有超出右侧选择的最大数
|
|||
const isOverMax = isArray && this.data.activeId.length >= this.data.max; |
|||
// 判断该项有没有被选中, 如果有被选中,则忽视是否超出的条件
|
|||
const index = this.data.activeId.indexOf(item.id) |
|||
if (!item.disabled && !isOverMax) { |
|||
if(index > -1){ |
|||
this.data.activeId.splice(index, 1) |
|||
} else { |
|||
this.data.activeId.push(item.id) |
|||
} |
|||
this.setData({ activeId: this.data.activeId }); |
|||
} |
|||
}, |
|||
} |
|||
}); |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"van-icon": "../icon/index", |
|||
"loading": "../loading/index" |
|||
} |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
<import src="./toolbar.wxml" /> |
|||
<wxs src="../wxs/utils.wxs" module="utils" /> |
|||
<wxs src="./index.wxs" module="wxs" /> |
|||
|
|||
<view class="van-picker custom-class"> |
|||
<template is="toolbar" wx:if="{{ toolbarPosition === 'top' }}" |
|||
data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template> |
|||
<view wx:if="{{ loading }}" class="van-picker__loading"> |
|||
<loading color="#1989fa" /> |
|||
</view> |
|||
<scroll-view scroll-y class="van-tree-select__content" style="height: {{ itemHeight * visibleItemCount }}px; padding: 0rpx 32rpx"> |
|||
<slot name="content" /> |
|||
<view wx:for="{{ columns }}" 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 }}" style="height: {{ itemHeight }}px;border-bottom: 1rpx solid #f3f3f3" bind:tap="onSelectItem"> |
|||
{{ item.name }} |
|||
<van-icon wx:if="{{ wxs.isActive(activeId, item.id) }}" name="{{ selectedIcon }}" size="16px" class="van-tree-select__selected" /> |
|||
</view> |
|||
</scroll-view> |
|||
<template is="toolbar" wx:if="{{ toolbarPosition === 'bottom' }}" |
|||
data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template> |
|||
</view> |
|||
@ -0,0 +1,12 @@ |
|||
/* 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; |
|||
@ -0,0 +1 @@ |
|||
@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{padding:0 16px;padding:var(--picker-action-padding,0 16px);font-size:14px;font-size:var(--picker-action-font-size,14px);color:#666666;color:var(--picker-action-text-color,#666666)}.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}.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;line-height:44px;line-height:var(--tree-select-item-height,44px)}.van-tree-select__item--active{color:#1989fa;color:var(--tree-select-item-active-color,#1989fa)}.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:0px;} |
|||
@ -0,0 +1,21 @@ |
|||
export const pickerProps = { |
|||
title: String, |
|||
loading: Boolean, |
|||
showToolbar: Boolean, |
|||
cancelButtonText: { |
|||
type: String, |
|||
value: '取消' |
|||
}, |
|||
confirmButtonText: { |
|||
type: String, |
|||
value: '确认' |
|||
}, |
|||
visibleItemCount: { |
|||
type: Number, |
|||
value: 5 |
|||
}, |
|||
itemHeight: { |
|||
type: Number, |
|||
value: 45 |
|||
} |
|||
}; |
|||
@ -0,0 +1,11 @@ |
|||
<template name="toolbar"> |
|||
<view wx:if="{{ showToolbar }}" class="van-picker__toolbar van-hairline--top-bottom toolbar-class"> |
|||
<view class="van-picker__cancel" hover-class="van-picker__cancel--hover" hover-stay-time="70" data-type="cancel" bindtap="emit"> |
|||
{{ cancelButtonText }} |
|||
</view> |
|||
<view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{title}}</view> |
|||
<view class="van-picker__confirm" hover-class="van-picker__confirm--hover" hover-stay-time="70" data-type="confirm" bindtap="emit"> |
|||
{{ confirmButtonText }} |
|||
</view> |
|||
</view> |
|||
</template> |
|||
@ -1,28 +1,11 @@ |
|||
<template name="toolbar"> |
|||
<view |
|||
wx:if="{{ showToolbar }}" |
|||
class="van-picker__toolbar van-hairline--top-bottom toolbar-class" |
|||
> |
|||
<view |
|||
class="van-picker__cancel" |
|||
hover-class="van-picker__cancel--hover" |
|||
hover-stay-time="70" |
|||
data-type="cancel" |
|||
bindtap="emit" |
|||
> |
|||
<view wx:if="{{ showToolbar }}" class="van-picker__toolbar van-hairline--top-bottom toolbar-class"> |
|||
<view class="van-picker__cancel" hover-class="van-picker__cancel--hover" hover-stay-time="70" data-type="cancel" bindtap="emit"> |
|||
{{ cancelButtonText }} |
|||
</view> |
|||
<view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{ |
|||
title |
|||
}}</view> |
|||
<view |
|||
class="van-picker__confirm" |
|||
hover-class="van-picker__confirm--hover" |
|||
hover-stay-time="70" |
|||
data-type="confirm" |
|||
bindtap="emit" |
|||
> |
|||
<view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{title}}</view> |
|||
<view class="van-picker__confirm" hover-class="van-picker__confirm--hover" hover-stay-time="70" data-type="confirm" bindtap="emit"> |
|||
{{ confirmButtonText }} |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</template> |
|||
@ -1,29 +1,20 @@ |
|||
<wxs src="../wxs/utils.wxs" module="utils" /> |
|||
|
|||
<view class="van-radio custom-class"> |
|||
<view |
|||
wx:if="{{ labelPosition === 'left' }}" |
|||
class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}" |
|||
bindtap="onClickLabel" |
|||
> |
|||
<view wx:if="{{ labelPosition === 'left' }}" |
|||
class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel"> |
|||
<slot /> |
|||
</view> |
|||
<view class="van-radio__icon-wrap" style="font-size: {{ utils.addUnit(iconSize) }};" bindtap="onChange"> |
|||
<slot wx:if="{{ useIconSlot }}" name="icon" /> |
|||
<van-icon |
|||
wx:else |
|||
name="success" |
|||
<van-icon wx:else name="success" |
|||
class="{{ utils.bem('radio__icon', [shape, { disabled, checked: value === name }]) }}" |
|||
style="font-size: {{ utils.addUnit(iconSize) }};{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '' }}" |
|||
custom-class="icon-class" |
|||
custom-style="line-height: {{ utils.addUnit(iconSize) }};font-size: .8em;display: block;" |
|||
/> |
|||
custom-style="line-height: {{ utils.addUnit(iconSize) }};font-size: .8em;display: block;" /> |
|||
</view> |
|||
<view |
|||
wx:if="{{ labelPosition === 'right' }}" |
|||
class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}" |
|||
bindtap="onClickLabel" |
|||
> |
|||
<view wx:if="{{ labelPosition === 'right' }}" |
|||
class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel"> |
|||
<slot /> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
Write
Preview
Loading…
Cancel
Save