mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
Merge branch 'dev' of https://github.com/youzan/vant-weapp into dev
This commit is contained in:
陈嘉涵
commit
c1faa8b130
@ -4,7 +4,7 @@
|
||||
<van-badge title="标签名称" />
|
||||
<van-badge title="标签名称" info="8" />
|
||||
<van-badge title="标签名称" info="99" />
|
||||
<van-badge title="标签名称" info="199" />
|
||||
<van-badge title="标签名称" info="99+" />
|
||||
</van-badge-group>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
@ -1,37 +1,31 @@
|
||||
<demo-block title="基础用法">
|
||||
<van-collapse value="{{ active1 }}" data-key="active1" bind:change="onChange">
|
||||
<van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item
|
||||
title="{{ title3 }}"
|
||||
content-class="van-collapse-item__content"
|
||||
disabled
|
||||
>
|
||||
{{ content3 }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}" disabled>{{ content3 }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="手风琴">
|
||||
<van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange">
|
||||
<van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义标题内容">
|
||||
<van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange">
|
||||
<van-collapse-item content-class="van-collapse-item__content">
|
||||
<van-collapse-item>
|
||||
<view slot="title">{{ title1 }}<van-icon name="question" custom-class="van-icon-question" /></view>
|
||||
{{ content1 }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item
|
||||
title="{{ title2 }}"
|
||||
content-class="van-collapse-item__content"
|
||||
|
||||
value="内容"
|
||||
icon="shop"
|
||||
>{{ content2 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
|
||||
<van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
@ -1,9 +1,3 @@
|
||||
.van-collapse-item__content {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.van-icon-question {
|
||||
margin-left: 5px;
|
||||
font-size: 15px !important;
|
||||
|
||||
@ -21,12 +21,27 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="高级用法" padding>
|
||||
<demo-block title="自定义大小" padding>
|
||||
<van-switch
|
||||
checked="{{ checked }}"
|
||||
size="24px"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色" padding>
|
||||
<van-switch
|
||||
checked="{{ checked }}"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="异步控制" padding>
|
||||
<van-switch
|
||||
checked="{{ checked2 }}"
|
||||
size="36px"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
bind:change="onChange2"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<demo-block title="自定义图标">
|
||||
<van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
|
||||
<van-tabbar-item>
|
||||
<van-tabbar-item info="3">
|
||||
<span>自定义</span>
|
||||
<image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
|
||||
<image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />
|
||||
|
||||
@ -30,7 +30,8 @@
|
||||
<van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="标签大小" padding>
|
||||
|
||||
@ -57,11 +57,10 @@
|
||||
|
||||
&__item {
|
||||
padding: 0 5px;
|
||||
color: @gray-dark;
|
||||
color: @text-color;
|
||||
|
||||
&--selected {
|
||||
font-weight: 500;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
|
||||
@ -33,13 +33,6 @@ VantComponent({
|
||||
columns: []
|
||||
},
|
||||
|
||||
computed: {
|
||||
displayColumns() {
|
||||
const { columns = [], columnsNum } = this.data;
|
||||
return columns.slice(0, +columnsNum);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(value) {
|
||||
this.code = value;
|
||||
@ -68,7 +61,8 @@ VantComponent({
|
||||
|
||||
onChange(event: Weapp.Event) {
|
||||
const { value } = event.detail;
|
||||
const { pickerValue, displayColumns } = this.data;
|
||||
const { pickerValue } = this.data;
|
||||
const displayColumns = this.getDisplayColumns();
|
||||
const index = pickerValue.findIndex(
|
||||
(item, index) => item !== value[index]
|
||||
);
|
||||
@ -159,7 +153,8 @@ VantComponent({
|
||||
},
|
||||
|
||||
getValues() {
|
||||
const { displayColumns = [], pickerValue = [] } = this.data;
|
||||
const { pickerValue = [] } = this.data;
|
||||
const displayColumns = this.getDisplayColumns();
|
||||
return displayColumns
|
||||
.map((option, index) => option[pickerValue[index]])
|
||||
.filter(value => !!value);
|
||||
@ -201,6 +196,11 @@ VantComponent({
|
||||
reset() {
|
||||
this.code = '';
|
||||
this.setValues();
|
||||
},
|
||||
|
||||
getDisplayColumns() {
|
||||
const { columns = [], columnsNum } = this.data;
|
||||
return columns.slice(0, +columnsNum);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -17,7 +17,8 @@
|
||||
class="van-picker__columns"
|
||||
>
|
||||
<picker-view-column
|
||||
wx:for="{{ displayColumns }}"
|
||||
wx:if="{{ rowIndex < columnsNum }}"
|
||||
wx:for="{{ columns }}"
|
||||
wx:for-item="row"
|
||||
wx:for-index="rowIndex"
|
||||
wx:key="rowIndex"
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<van-badge title="标签名称" />
|
||||
<van-badge title="标签名称" info="8" />
|
||||
<van-badge title="标签名称" info="99" />
|
||||
<van-badge title="标签名称" info="199" />
|
||||
<van-badge title="标签名称" info="99+" />
|
||||
</van-badge-group>
|
||||
```
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"component": true
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-info": "../info/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,20 +36,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 2px;
|
||||
color: @white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
transform: scale(0.8);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
min-width: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: @red;
|
||||
&__text {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ VantComponent({
|
||||
},
|
||||
|
||||
props: {
|
||||
info: Number,
|
||||
info: null,
|
||||
title: String
|
||||
},
|
||||
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onClick">
|
||||
<view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
|
||||
{{ title }}
|
||||
<view class="van-badge__text">
|
||||
<van-info
|
||||
wx:if="{{ info !== null }}"
|
||||
info="{{ info }}"
|
||||
custom-style="right: 4px"
|
||||
/>
|
||||
{{ title }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -16,9 +16,9 @@ VantComponent({
|
||||
},
|
||||
|
||||
props: {
|
||||
max: Number,
|
||||
value: Array,
|
||||
disabled: Boolean,
|
||||
max: Number
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
@checkbox-size: 20px;
|
||||
|
||||
.van-checkbox {
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
@ -14,15 +12,15 @@
|
||||
}
|
||||
|
||||
&__icon {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
border: 1px solid @gray-light;
|
||||
color: transparent;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
transition: .2s;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @checkbox-border-color;
|
||||
transition: @checkbox-transition-duration;
|
||||
|
||||
&--round {
|
||||
border-radius: 100%;
|
||||
@ -30,28 +28,31 @@
|
||||
|
||||
&--checked {
|
||||
color: @white;
|
||||
border-color: @blue;
|
||||
background-color: @blue;
|
||||
border-color: @checkbox-checked-icon-color;
|
||||
background-color: @checkbox-checked-icon-color;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
border-color: @border-color;
|
||||
background-color: currentColor;
|
||||
color: @background-color;
|
||||
border-color: @checkbox-disabled-icon-color;
|
||||
background-color: @checkbox-disabled-background-color;
|
||||
}
|
||||
|
||||
&--disabled&--checked {
|
||||
border-color: @border-color;
|
||||
background-color: @border-color;
|
||||
color: @checkbox-disabled-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-left: 10px;
|
||||
color: @checkbox-label-color;
|
||||
margin-left: @checkbox-label-margin;
|
||||
|
||||
&--left {
|
||||
margin: 0 10px 0 0;
|
||||
float: left;
|
||||
margin: 0 @checkbox-label-margin 0 0;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: @checkbox-disabled-label-color;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
|
||||
@ -23,16 +23,6 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
iconStyle(): string {
|
||||
const { value, disabled, checkedColor } = this.data;
|
||||
if (checkedColor && value && !disabled) {
|
||||
return `border-color: ${checkedColor}; background-color: ${checkedColor}`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
emitChange(value) {
|
||||
const parent = this.getRelationNodes('../checkbox-group/index')[0];
|
||||
|
||||
@ -7,12 +7,12 @@
|
||||
wx:else
|
||||
name="success"
|
||||
class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
|
||||
style="{{ iconStyle }}"
|
||||
style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
|
||||
custom-class="icon-class"
|
||||
custom-style="line-height: 20px;"
|
||||
/>
|
||||
</view>
|
||||
<view class="van-checkbox__label van-checkbox__label--{{ labelPosition }} label-class" bindtap="onClickLabel">
|
||||
<view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
&__title {
|
||||
.van-cell__right-icon {
|
||||
transform: rotate(90deg);
|
||||
transition: 0.3s;
|
||||
transition: @collapse-item-transition-duration;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
@ -14,12 +14,12 @@
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
& .van-cell,
|
||||
& .van-cell__right-icon {
|
||||
color: @gray !important;
|
||||
.van-cell,
|
||||
.van-cell__right-icon {
|
||||
color: @collapse-item-title-disabled-color !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
.van-cell:active {
|
||||
background-color: @white !important;
|
||||
}
|
||||
}
|
||||
@ -28,11 +28,14 @@
|
||||
&__wrapper {
|
||||
overflow: hidden;
|
||||
will-change: max-height;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
transition: max-height @collapse-item-transition-duration ease-in-out;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 15px;
|
||||
background-color: @white;
|
||||
color: @collapse-item-content-text-color;
|
||||
padding: @collapse-item-content-padding;
|
||||
font-size: @collapse-item-content-font-size;
|
||||
line-height: @collapse-item-content-line-height;
|
||||
background-color: @collapse-item-content-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,8 +98,6 @@ Page({
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Collapse API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|
||||
@ -37,11 +37,58 @@
|
||||
@button-bottom-action-primary-color: @white;
|
||||
@button-bottom-action-primary-background-color: @red;
|
||||
|
||||
// Checkbox
|
||||
@checkbox-size: 20px;
|
||||
@checkbox-border-color: @gray-light;
|
||||
@checkbox-transition-duration: .2s;
|
||||
@checkbox-label-margin: 10px;
|
||||
@checkbox-label-color: @text-color;
|
||||
@checkbox-checked-icon-color: @blue;
|
||||
@checkbox-disabled-icon-color: @gray;
|
||||
@checkbox-disabled-label-color: @gray;
|
||||
@checkbox-disabled-background-color: @border-color;
|
||||
|
||||
// Collapse
|
||||
@collapse-item-transition-duration: .3s;
|
||||
@collapse-item-content-padding: 15px;
|
||||
@collapse-item-content-font-size: 13px;
|
||||
@collapse-item-content-line-height: 1.5;
|
||||
@collapse-item-content-text-color: @gray-dark;
|
||||
@collapse-item-content-background-color: @white;
|
||||
@collapse-item-title-disabled-color: @gray;
|
||||
|
||||
// Info
|
||||
@info-size: 16px;
|
||||
@info-color: @white;
|
||||
@info-padding: 0 3px;
|
||||
@info-font-size: 12px;
|
||||
@info-font-weight: 500;
|
||||
@info-border-width: 1px;
|
||||
@info-background-color: @red;
|
||||
@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
|
||||
|
||||
// Notify
|
||||
@notify-padding: 6px 15px;
|
||||
@notify-font-size: 14px;
|
||||
@notify-line-height: 20px;
|
||||
|
||||
// Switch
|
||||
@switch-width: 2em;
|
||||
@switch-height: 1em;
|
||||
@switch-node-size: 1em;
|
||||
@switch-node-z-index: 1;
|
||||
@switch-node-background-color: @white;
|
||||
@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);
|
||||
@switch-background-color: @white;
|
||||
@switch-on-background-color: @blue;
|
||||
@switch-transition-duration: .3s;
|
||||
@switch-disabled-opacity: .4;
|
||||
@switch-border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
// SwitchCell
|
||||
@switch-cell-padding-top: 9px;
|
||||
@switch-cell-padding-bottom: 9px;
|
||||
|
||||
// Toast
|
||||
@toast-max-width: 70%;
|
||||
@toast-font-size: 14px;
|
||||
@ -49,7 +96,7 @@
|
||||
@toast-line-height: 20px;
|
||||
@toast-border-radius: 4px;
|
||||
@toast-background-color: rgba(0, 0, 0, .7);
|
||||
@toast-icon-size: 50px;
|
||||
@toast-icon-size: 48px;
|
||||
@toast-text-min-width: 96px;
|
||||
@toast-text-padding: 8px 12px;
|
||||
@toast-default-padding: 15px;
|
||||
|
||||
@ -39,6 +39,7 @@ Dialog.alert({
|
||||
```
|
||||
|
||||
#### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮
|
||||
|
||||
```javascript
|
||||
@ -127,6 +128,7 @@ Page({
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | 标题 | `String` | - |
|
||||
| message | 内容 | `String` | - |
|
||||
| messageAlign | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
|
||||
| zIndex | z-index 层级 | `Number` | `100` |
|
||||
| selector | 自定义选择器 | `String` | `van-dialog` |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
|
||||
@ -149,6 +151,7 @@ Page({
|
||||
| show | 是否显示弹窗 | `Boolean` | - |
|
||||
| title | 标题 | `String` | - |
|
||||
| message | 内容 | `String` | - |
|
||||
| message-align | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
|
||||
| z-index | z-index 层级 | `Number` | `100` |
|
||||
| show-confirm-button | 是否展示确认按钮 | `Boolean` | `true` |
|
||||
| show-cancel-button | 是否展示取消按钮 | `Boolean` | `false` |
|
||||
|
||||
@ -11,6 +11,7 @@ type DialogOptions = {
|
||||
selector?: string;
|
||||
transition?: string;
|
||||
asyncClose?: boolean;
|
||||
messageAlign?: string;
|
||||
confirmButtonText?: string;
|
||||
cancelButtonText?: string;
|
||||
showConfirmButton?: boolean;
|
||||
@ -68,6 +69,7 @@ Dialog.defaultOptions = {
|
||||
zIndex: 100,
|
||||
overlay: true,
|
||||
asyncClose: false,
|
||||
messageAlign: '',
|
||||
transition: 'scale',
|
||||
selector: '#van-dialog',
|
||||
confirmButtonText: '确认',
|
||||
|
||||
@ -23,12 +23,21 @@
|
||||
line-height: 1.5;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&--has-title {
|
||||
padding-top: 12px;
|
||||
color: @gray-darker;
|
||||
}
|
||||
|
||||
&--left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
|
||||
@ -10,6 +10,7 @@ VantComponent({
|
||||
message: String,
|
||||
useSlot: Boolean,
|
||||
asyncClose: Boolean,
|
||||
messageAlign: String,
|
||||
showCancelButton: Boolean,
|
||||
closeOnClickOverlay: Boolean,
|
||||
confirmButtonOpenType: String,
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<slot wx:if="{{ useSlot }}" />
|
||||
<view
|
||||
wx:elif="{{ message }}"
|
||||
class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }}"
|
||||
class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
|
||||
>
|
||||
<text>{{ message }}</text>
|
||||
</view>
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"component": true
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-info": "../info/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,26 +30,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -8px;
|
||||
color: @white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 3px;
|
||||
min-width: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid @white;
|
||||
border-radius: 16px;
|
||||
background-color: @red;
|
||||
transform: translateX(50%);
|
||||
transform-origin: 100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -5,12 +5,10 @@
|
||||
style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + size + ';' : '' }}{{ customStyle }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view
|
||||
<van-info
|
||||
wx:if="{{ info !== null }}"
|
||||
class="van-icon__info"
|
||||
>
|
||||
{{ info }}
|
||||
</view>
|
||||
info="{{ info }}"
|
||||
/>
|
||||
<image
|
||||
wx:if="{{ utils.isSrc(name) }}"
|
||||
src="{{ name }}"
|
||||
|
||||
3
packages/info/index.json
Normal file
3
packages/info/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
21
packages/info/index.less
Normal file
21
packages/info/index.less
Normal file
@ -0,0 +1,21 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-info {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -@info-size / 2;
|
||||
color: @info-color;
|
||||
font-size: @info-font-size;
|
||||
font-weight: @info-font-weight;
|
||||
font-family: @info-font-family;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: @info-padding;
|
||||
min-width: @info-size;
|
||||
line-height: @info-size - @info-border-width * 2;
|
||||
border: @info-border-width solid @white;
|
||||
border-radius: @info-size;
|
||||
background-color: @info-background-color;
|
||||
transform: translateX(50%);
|
||||
transform-origin: 100%;
|
||||
}
|
||||
8
packages/info/index.ts
Normal file
8
packages/info/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { VantComponent } from '../common/component';
|
||||
|
||||
VantComponent({
|
||||
props: {
|
||||
info: null,
|
||||
customStyle: String
|
||||
}
|
||||
});
|
||||
7
packages/info/index.wxml
Normal file
7
packages/info/index.wxml
Normal file
@ -0,0 +1,7 @@
|
||||
<view
|
||||
wx:if="{{ info !== null }}"
|
||||
class="custom-class van-info"
|
||||
style="{{ customStyle }}"
|
||||
>
|
||||
{{ info }}
|
||||
</view>
|
||||
@ -66,7 +66,9 @@ Page({
|
||||
| title | 左侧标题 | `String` | `''` |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` |
|
||||
| size | 开关尺寸 | `String` | `26px` |
|
||||
| size | 开关尺寸 | `String` | `24px` |
|
||||
| active-color | 开关打开时的背景色 | `String` | `#1989fa` |
|
||||
| inactive-color | 开关关闭时的背景色 | `String` | `#fff` |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-switch-cell {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: @switch-cell-padding-top;
|
||||
padding-bottom: @switch-cell-padding-bottom;
|
||||
|
||||
&__switch {
|
||||
vertical-align: middle;
|
||||
|
||||
@ -9,9 +9,11 @@ VantComponent({
|
||||
checked: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
activeColor: String,
|
||||
inactiveColor: String,
|
||||
size: {
|
||||
type: String,
|
||||
value: '26px'
|
||||
value: '24px'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
checked="{{ checked }}"
|
||||
loading="{{ loading }}"
|
||||
disabled="{{ disabled }}"
|
||||
active-color="{{ activeColor }}"
|
||||
inactive-color="{{ inactiveColor }}"
|
||||
custom-class="van-switch-cell__switch"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
|
||||
@ -42,14 +42,27 @@ Page({
|
||||
<van-switch checked="{{ checked }}" loading />
|
||||
```
|
||||
|
||||
#### 高级用法
|
||||
#### 自定义大小
|
||||
|
||||
```html
|
||||
<van-switch checked="{{ checked }}" size="24px" />
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
size="36px"
|
||||
checked="{{ checked }}"
|
||||
active-color="#4b0"
|
||||
inactive-color="#f44"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 异步控制
|
||||
|
||||
```html
|
||||
<van-switch
|
||||
checked="{{ checked }}"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -1,27 +1,27 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-switch {
|
||||
height: 1em;
|
||||
width: 1.8em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 1em;
|
||||
width: @switch-width;
|
||||
height: @switch-height;
|
||||
border: @switch-border;
|
||||
border-radius: @switch-node-size;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
background-color: @white;
|
||||
transition: background-color .3s;
|
||||
background-color: @switch-background-color;
|
||||
transition: background-color @switch-transition-duration;
|
||||
|
||||
&__node {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
transition: .3s;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
background-color: @white;
|
||||
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);
|
||||
width: @switch-node-size;
|
||||
height: @switch-node-size;
|
||||
z-index: @switch-node-z-index;
|
||||
transition: @switch-transition-duration;
|
||||
box-shadow: @switch-node-box-shadow;
|
||||
background-color: @switch-node-background-color;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
@ -31,14 +31,14 @@
|
||||
}
|
||||
|
||||
&--on {
|
||||
background-color: @blue;
|
||||
background-color: @switch-on-background-color;
|
||||
|
||||
.van-switch__node {
|
||||
transform: translateX(.8em);
|
||||
transform: translateX(@switch-width - @switch-node-size);
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .4;
|
||||
opacity: @switch-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,13 +23,6 @@ VantComponent({
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
const backgroundColor = this.data.checked ? this.data.activeColor : this.data.inactiveColor;
|
||||
return `font-size: ${this.data.size}; ${ backgroundColor ? `background-color: ${backgroundColor}` : '' }`
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.set({ value: this.data.checked });
|
||||
},
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
style="{{ style }}"
|
||||
class="custom-class {{ utils.bem('switch', { on: checked, disabled }) }}"
|
||||
style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<view class="van-switch__node node-class">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index"
|
||||
"van-icon": "../icon/index",
|
||||
"van-info": "../info/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,27 +19,6 @@
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
|
||||
.van-icon {
|
||||
display: block;
|
||||
|
||||
&__info {
|
||||
color: @white;
|
||||
left: 100%;
|
||||
top: -.5em;
|
||||
font-size: .6em;
|
||||
padding: 0 .25em;
|
||||
text-align: center;
|
||||
min-width: 1.4em;
|
||||
line-height: 1.4;
|
||||
position: absolute;
|
||||
border-radius: .6em;
|
||||
box-sizing: border-box;
|
||||
background-color: @red;
|
||||
transform: translateX(-50%);
|
||||
font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
&--dot {
|
||||
&::after {
|
||||
top: 0;
|
||||
@ -54,8 +33,9 @@
|
||||
}
|
||||
|
||||
image {
|
||||
width: 50px;
|
||||
width: 30px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,14 +6,20 @@
|
||||
<van-icon
|
||||
wx:if="{{ icon }}"
|
||||
name="{{ icon }}"
|
||||
info="{{ info }}"
|
||||
customStyle="display: block"
|
||||
/>
|
||||
<block wx:else>
|
||||
<slot wx:if="{{ active }}" name="icon-active" />
|
||||
<slot
|
||||
wx:if="{{ active }}"
|
||||
name="icon-active"
|
||||
/>
|
||||
<slot wx:else name="icon" />
|
||||
<view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
|
||||
</block>
|
||||
<van-info
|
||||
wx:if="{{ info !== null }}"
|
||||
info="{{ info }}"
|
||||
custom-style="margin-top: 2px"
|
||||
/>
|
||||
</view>
|
||||
<view class="van-tabbar-item__text">
|
||||
<slot />
|
||||
|
||||
@ -42,7 +42,7 @@ Page({
|
||||
|
||||
```html
|
||||
<van-tabbar active="{{ active }}" bind:change="onChange">
|
||||
<van-tabbar-item>
|
||||
<van-tabbar-item info="3">
|
||||
<span>自定义</span>
|
||||
<image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
|
||||
<image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过 type 属性控制 Tag 颜色，默认为灰色
|
||||
|
||||
```html
|
||||
@ -22,6 +23,7 @@
|
||||
```
|
||||
|
||||
#### 空心样式
|
||||
|
||||
设置`plain`属性设置为空心样式
|
||||
|
||||
```html
|
||||
@ -32,6 +34,7 @@
|
||||
```
|
||||
|
||||
#### 圆角样式
|
||||
|
||||
通过`round`设置为圆角样式
|
||||
|
||||
```html
|
||||
@ -42,6 +45,7 @@
|
||||
```
|
||||
|
||||
#### 标记样式
|
||||
|
||||
通过`mark`设置为标记样式(半圆角)
|
||||
|
||||
```html
|
||||
@ -58,6 +62,7 @@
|
||||
<van-tag color="#f2826a" plain>标签</van-tag>
|
||||
<van-tag color="#7232dd">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
|
||||
```
|
||||
|
||||
#### 标签大小
|
||||
@ -74,10 +79,11 @@
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | 类型，可选值为`primary` `success` `danger` | `String` | - |
|
||||
| size | 大小, 可选值为`large` `medium` | `String` | - |
|
||||
| color | 自定义标签颜色 | `String` | - |
|
||||
| color | 标签颜色 | `String` | - |
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` |
|
||||
| round | 是否为圆角样式 | `Boolean` | `false` |
|
||||
| mark | 是否为标记样式 | `Boolean` | `false` |
|
||||
| text-color | 文本颜色，优先级高于`color`属性 | `String` | `white` |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -8,6 +8,10 @@ const COLOR_MAP = {
|
||||
success: GREEN
|
||||
};
|
||||
|
||||
type Style = {
|
||||
[key: string]: string;
|
||||
};
|
||||
|
||||
VantComponent({
|
||||
props: {
|
||||
size: String,
|
||||
@ -15,14 +19,21 @@ VantComponent({
|
||||
mark: Boolean,
|
||||
color: String,
|
||||
plain: Boolean,
|
||||
round: Boolean
|
||||
round: Boolean,
|
||||
textColor: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
|
||||
const key = this.data.plain ? 'color' : 'background-color';
|
||||
return `${key}: ${color}`;
|
||||
const style = { [key]: color } as Style;
|
||||
|
||||
if (this.data.textColor) {
|
||||
style.color = this.data.textColor;
|
||||
}
|
||||
|
||||
return Object.keys(style).map(key => `${key}: ${style[key]}`).join(';');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
function isArray(obj) {
|
||||
return obj && obj.constructor === 'Array';
|
||||
function isArray(array) {
|
||||
return array && array.constructor === 'Array';
|
||||
}
|
||||
|
||||
module.exports.isArray = isArray;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user