blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore: merge branch "dev"

Browse Source
This commit is contained in:
陈嘉涵 2019-11-27 11:05:48 +08:00
commit 169cc9aa07
58 changed files with 864 additions and 693 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/markdown/quickstart.zh-CN.md
View File

@ -29,6 +29,17 @@ npm i vant -S
yarn add vant yarn add vant
``` ```
### 示例工程
我们提供了一个基于 Vue Cli 的[示例工程](https://github.com/youzan/vant-demo)，示例工程会帮助你了解如下内容：
- 基于 Vant 搭建单页面应用，配置按需引入组件
- 配置基于 Rem 的适配方案
- 配置基于 Viewport 的适配方案
- 配置基于 TypeScript 的工程
- 配置自定义主题色方案
## 引入组件 ## 引入组件
### 方式一. 自动按需引入组件 (推荐) ### 方式一. 自动按需引入组件 (推荐)

2
docs/markdown/theme.en-US.md
View File

@ -15,7 +15,7 @@ There are some basic variables below, all available variables could be found in
@text-color: #323233; @text-color: #323233;
@border-color: #ebedf0; @border-color: #ebedf0;
@active-color: #f2f3f5; @active-color: #f2f3f5;
@background-color: #f8f8f8; @background-color: #f7f8fa;
@background-color-light: #fafafa; @background-color-light: #fafafa;
``` ```

2
docs/markdown/theme.zh-CN.md
View File

@ -19,7 +19,7 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置
@text-color: #323233; @text-color: #323233;
@border-color: #ebedf0; @border-color: #ebedf0;
@active-color: #f2f3f5; @active-color: #f2f3f5;
@background-color: #f8f8f8; @background-color: #f7f8fa;
@background-color-light: #fafafa; @background-color-light: #fafafa;
``` ```

136
docs/site/components/DemoPages.vue
View File

@ -1,136 +0,0 @@
<template>
<section class="van-doc-demo-pages">
<h1>示例工程</h1>
<div class="card">
<h3>介绍</h3>
<p>
我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为
<a
href="https://github.com/youzan/vant-demo"
target="_blank"
>Vant Demo</a>，示例工程会帮助你了解如下内容：
</p>
<ul>
<li>基于 Vant 搭建单页面应用，配置按需引入组件</li>
<li>配置基于 rem 的适配方案</li>
<li>配置基于 viewport 的适配方案</li>
<li>配置基于 TypeScript 的工程</li>
<li>配置自定义主题色方案</li>
</ul>
</div>
<div class="card">
<h3>示例页面</h3>
<p>下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。</p>
<div class="van-doc-demo-pages__gallery">
<div
:class="['van-doc-demo-pages__item', { 'van-doc-demo-pages__item--active': index === currentDemo }]"
v-for="(demo, index) in demos"
>
<h4>{{ demo.title }}</h4>
<a :href="demo.source" target="_blank">源代码</a>
<img :src="demo.preview" @click="onChangeDemo(demo, index)">
</div>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'van-doc-demo-pages',
data() {
return {
currentDemo: 0
};
},
computed: {
demos() {
return [
{
title: '商品详情',
preview:
'https://img.yzcdn.cn/public_files/2017/10/24/7070a8d1d6504b864c605114d32f2aae.png',
url: '/vant-demo/#/goods',
source:
'https://github.com/youzan/vant-demo/blob/master/base/src/view/goods/index.vue'
},
{
title: '用户中心',
preview:
'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
url: '/vant-demo/#/user',
source:
'https://github.com/youzan/vant-demo/blob/master/base/src/view/user/index.vue'
},
{
title: '购物车',
preview:
'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
url: '/vant-demo/#/cart',
source:
'https://github.com/youzan/vant-demo/blob/master/base/src/view/cart/index.vue'
}
];
}
},
beforeMount() {
this.$emit('changeDemoURL', this.demos[0].url);
},
methods: {
onChangeDemo(demo, index) {
this.currentDemo = index;
this.$emit('changeDemoURL', demo.url);
}
}
};
</script>
<style lang="less">
.van-doc-demo-pages {
&__gallery {
margin-top: 30px;
}
&__item {
display: inline-block;
width: 28%;
margin-bottom: 40px;
text-align: center;
&:nth-child(3n + 1),
&:nth-child(3n + 2) {
margin-right: 4%;
}
h4 {
margin-top: 0;
}
img {
width: 100%;
background-color: #f8f8f8;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
cursor: pointer;
}
a {
display: inline-block;
margin: 4px 0 7px;
font-size: 12px;
}
&--active {
img {
box-shadow: 0 1px 4px rgba(51, 136, 255, 0.4), 0 0 0 1px rgba(51, 136, 255, 0.4);
}
}
}
}
</style>

4
docs/site/doc.config.js
View File

@ -75,10 +75,6 @@ export default {
path: '/style-guide', path: '/style-guide',
title: '风格指南' title: '风格指南'
}, },
{
path: '/demo',
title: '示例工程'
},
{ {
path: '/locale', path: '/locale',
title: '国际化' title: '国际化'

4
docs/site/mobile/App.vue
View File

@ -70,7 +70,7 @@ body {
color: @text-color; color: @text-color;
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif; font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
line-height: 1; line-height: 1;
background-color: #f8f8f8; background-color: #f7f8fa;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@ -89,7 +89,7 @@ body {
} }
.van-icon { .van-icon {
color: @gray-dark; color: @gray-6;
font-size: 24px; font-size: 24px;
cursor: pointer; cursor: pointer;
} }

5
docs/site/router.js
View File

@ -1,7 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
import docConfig from './doc.config'; import docConfig from './doc.config';
import DemoList from './components/DemoList'; import DemoList from './components/DemoList';
import DemoPages from './components/DemoPages';
import { demoWrapper } from './mobile/demo-common'; import { demoWrapper } from './mobile/demo-common';
import { initIframeRouter } from './utils/iframe-router'; import { initIframeRouter } from './utils/iframe-router';
@ -35,9 +34,7 @@ const registerRoute = ({ mobile, componentMap }) => {
path = path.replace('/', ''); path = path.replace('/', '');
let component; let component;
if (path === 'demo') { if (mobile) {
component = DemoPages;
} else if (mobile) {
const module = componentMap[`./${path}/demo/index.vue`]; const module = componentMap[`./${path}/demo/index.vue`];
if (module) { if (module) {

16
packages/vant-touch-emulator/changelog.md Normal file
View File

@ -0,0 +1,16 @@
# Changelog
### [v1.2.0]
`2019-11-22`
- fix incorrect touchmove behaviour in Firefox [\#5118](https://github.com/youzan/vant/pull/5118)
### [v1.1.0]
`2019-06-03`
- skip emulator when browser support touch event
### [v1.0.0]
`2019-05-28`
- initial release

32
packages/vant-touch-emulator/index.js
View File

@ -78,34 +78,30 @@ function TouchList() {
return touchList; return touchList;
} }
/**
* Simple trick to fake touch event support
* this is enough for most libraries like Modernizr and Hammer
*/
function fakeTouchSupport() {
var objs = [window, document.documentElement];
var props = ['ontouchstart', 'ontouchmove', 'ontouchcancel', 'ontouchend'];
for (var o = 0; o < objs.length; o++) {
for (var p = 0; p < props.length; p++) {
if (objs[o] && objs[o][props[p]] === undefined) {
objs[o][props[p]] = null;
}
}
}
}
/** /**
* only trigger touches when the left mousebutton has been pressed * only trigger touches when the left mousebutton has been pressed
* @param touchType * @param touchType
* @returns {Function} * @returns {Function}
*/ */
var initiated = false;
function onMouse(touchType) { function onMouse(touchType) {
return function(ev) { return function(ev) {
// prevent mouse events // prevent mouse events
if (ev.which !== 1) { if (ev.type === 'mousedown') {
return; initiated = true;
}
if (ev.type === 'mouseup') {
initiated = false;
}
if (ev.type === 'mousemove' && !initiated) {
return
} }
// The EventTarget on which the touch point started when it was first placed on the surface, // The EventTarget on which the touch point started when it was first placed on the surface,
@ -173,8 +169,6 @@ function getActiveTouches(mouseEv) {
* TouchEmulator initializer * TouchEmulator initializer
*/ */
function TouchEmulator() { function TouchEmulator() {
fakeTouchSupport();
window.addEventListener('mousedown', onMouse('touchstart'), true); window.addEventListener('mousedown', onMouse('touchstart'), true);
window.addEventListener('mousemove', onMouse('touchmove'), true); window.addEventListener('mousemove', onMouse('touchmove'), true);
window.addEventListener('mouseup', onMouse('touchend'), true); window.addEventListener('mouseup', onMouse('touchend'), true);

2
packages/vant-touch-emulator/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@vant/touch-emulator", "name": "@vant/touch-emulator",
"version": "1.1.0", "version": "1.2.0",
"description": "Vant touch emulator", "description": "Vant touch emulator",
"main": "index.js", "main": "index.js",
"publishConfig": { "publishConfig": {

1
src/action-sheet/index.less
View File

@ -8,6 +8,7 @@
&__cancel { &__cancel {
display: block; display: block;
width: 100%; width: 100%;
padding: 0;
font-size: @action-sheet-item-font-size; font-size: @action-sheet-item-font-size;
line-height: @action-sheet-item-height; line-height: @action-sheet-item-height;
text-align: center; text-align: center;

31
src/address-edit/Detail.js
View File

@ -17,6 +17,12 @@ export default createComponent({
showSearchResult: Boolean showSearchResult: Boolean
}, },
computed: {
shouldShowSearchResult() {
return this.focused && this.searchResult && this.showSearchResult;
}
},
methods: { methods: {
onSelect(express) { onSelect(express) {
this.$emit('select-search', express); this.$emit('select-search', express);
@ -42,19 +48,31 @@ export default createComponent({
}, },
genSearchResult() { genSearchResult() {
const { searchResult } = this; const { value, shouldShowSearchResult, searchResult } = this;
const show = this.focused && searchResult && this.showSearchResult; if (shouldShowSearchResult) {
if (show) {
return searchResult.map(express => ( return searchResult.map(express => (
<Cell <Cell
key={express.name + express.address} key={express.name + express.address}
title={express.name}
label={express.address}
icon="location-o"
clickable clickable
border={false}
icon="location-o"
label={express.address}
class={bem('search-item')}
onClick={() => { onClick={() => {
this.onSelect(express); this.onSelect(express);
}} }}
scopedSlots={{
title: () => {
if (express.name) {
const text = express.name.replace(
value,
`<span class=${bem('keyword')}>${value}</span>`
);
return <div domPropsInnerHTML={text} />;
}
}
}}
/> />
)); ));
} }
@ -72,6 +90,7 @@ export default createComponent({
type="textarea" type="textarea"
value={this.value} value={this.value}
error={this.error} error={this.error}
border={!this.shouldShowSearchResult}
label={t('label')} label={t('label')}
maxlength={this.detailMaxlength} maxlength={this.detailMaxlength}
placeholder={t('placeholder')} placeholder={t('placeholder')}

115
src/address-edit/index.js
View File

@ -251,64 +251,69 @@ export default createComponent({
return ( return (
<div class={bem()}> <div class={bem()}>
<Field <div class={bem('fields')}>
vModel={data.name}
clearable
label={t('name')}
placeholder={t('namePlaceholder')}
error={errorInfo.name}
onFocus={onFocus('name')}
/>
<Field
vModel={data.tel}
clearable
type="tel"
label={t('tel')}
placeholder={t('telPlaceholder')}
error={errorInfo.tel}
onFocus={onFocus('tel')}
/>
<Field
vShow={this.showArea}
readonly
label={t('area')}
placeholder={t('areaPlaceholder')}
value={this.areaText}
onClick={() => {
this.showAreaPopup = true;
}}
/>
<Detail
vShow={this.showDetail}
focused={this.detailFocused}
value={data.addressDetail}
error={errorInfo.addressDetail}
detailRows={this.detailRows}
detailMaxlength={this.detailMaxlength}
searchResult={this.searchResult}
showSearchResult={this.showSearchResult}
onFocus={onFocus('addressDetail')}
onBlur={this.onDetailBlur}
onInput={this.onChangeDetail}
onSelect-search={event => {
this.$emit('select-search', event);
}}
/>
{this.showPostal && (
<Field <Field
vShow={!hideBottomFields} vModel={data.name}
vModel={data.postalCode} clearable
type="tel" label={t('name')}
maxlength="6" placeholder={t('namePlaceholder')}
label={t('postal')} error={errorInfo.name}
placeholder={t('postal')} onFocus={onFocus('name')}
error={errorInfo.postalCode}
onFocus={onFocus('postalCode')}
/> />
)} <Field
{this.slots()} vModel={data.tel}
clearable
type="tel"
label={t('tel')}
placeholder={t('telPlaceholder')}
error={errorInfo.tel}
onFocus={onFocus('tel')}
/>
<Field
vShow={this.showArea}
readonly
clickable
label={t('area')}
placeholder={t('areaPlaceholder')}
rightIcon="arrow"
value={this.areaText}
onClick={() => {
this.showAreaPopup = true;
}}
/>
<Detail
vShow={this.showDetail}
focused={this.detailFocused}
value={data.addressDetail}
error={errorInfo.addressDetail}
detailRows={this.detailRows}
detailMaxlength={this.detailMaxlength}
searchResult={this.searchResult}
showSearchResult={this.showSearchResult}
onFocus={onFocus('addressDetail')}
onBlur={this.onDetailBlur}
onInput={this.onChangeDetail}
onSelect-search={event => {
this.$emit('select-search', event);
}}
/>
{this.showPostal && (
<Field
vShow={!hideBottomFields}
vModel={data.postalCode}
type="tel"
maxlength="6"
label={t('postal')}
placeholder={t('postal')}
error={errorInfo.postalCode}
onFocus={onFocus('postalCode')}
/>
)}
{this.slots()}
</div>
{this.showSetDefault && ( {this.showSetDefault && (
<SwitchCell <SwitchCell
class={bem('default')}
vModel={data.isDefault} vModel={data.isDefault}
vShow={!hideBottomFields} vShow={!hideBottomFields}
title={t('defaultAddress')} title={t('defaultAddress')}
@ -320,6 +325,7 @@ export default createComponent({
<div vShow={!hideBottomFields} class={bem('buttons')}> <div vShow={!hideBottomFields} class={bem('buttons')}>
<Button <Button
block block
round
loading={this.isSaving} loading={this.isSaving}
type="danger" type="danger"
text={this.saveButtonText || t('save')} text={this.saveButtonText || t('save')}
@ -328,6 +334,7 @@ export default createComponent({
{this.showDelete && ( {this.showDelete && (
<Button <Button
block block
round
loading={this.isDeleting} loading={this.isDeleting}
text={this.deleteButtonText || t('delete')} text={this.deleteButtonText || t('delete')}
onClick={this.onDelete} onClick={this.onDelete}

21
src/address-edit/index.less
View File

@ -1,6 +1,19 @@
@import '../style/var'; @import '../style/var';
.van-address-edit { .van-address-edit {
padding: @address-edit-padding;
&__fields {
overflow: hidden;
border-radius: @padding-xs;
}
&__default {
margin-top: @padding-sm;
overflow: hidden;
border-radius: @padding-xs;
}
&__buttons { &__buttons {
padding: @address-edit-buttons-padding; padding: @address-edit-buttons-padding;
@ -12,6 +25,14 @@
&-detail { &-detail {
padding: 0; padding: 0;
&__search-item {
background-color: @gray-2;
}
&__keyword {
color: @red;
}
&__finish { &__finish {
color: @address-edit-detail-finish-color; color: @address-edit-detail-finish-color;
font-size: @address-edit-detail-finish-font-size; font-size: @address-edit-detail-finish-font-size;

63
src/address-edit/test/__snapshots__/demo.spec.js.snap
View File

@ -4,41 +4,46 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell van-field"> <div class="van-address-edit__fields">
<div class="van-cell__title van-field__label"><span>姓名</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
</div>
</div> </div>
</div> <div class="van-cell van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div> </div>
</div> </div>
</div> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div> <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
</div> <!----></i></div>
</div>
<div class="van-cell van-address-edit-detail">
<div class="van-cell__value van-cell__value--alone">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="van-cell van-address-edit-detail">
<div class="van-cell van-field"> <div class="van-cell__value van-cell__value--alone">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div> </div>
</div> </div>
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div> <div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;"> <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
@ -46,7 +51,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block"><span class="van-button__text">删除</span></button></div> <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block van-button--round"><span class="van-button__text">删除</span></button></div>
</div> </div>
</div> </div>
</div> </div>

350
src/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -2,75 +2,85 @@
exports[`create a AddressEdit 1`] = ` exports[`create a AddressEdit 1`] = `
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell van-field"> <div class="van-address-edit__fields">
<div class="van-cell__title van-field__label"><span>姓名</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
</div>
</div> </div>
</div> <div class="van-cell van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div> </div>
</div> </div>
</div> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div> <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
<!----></i></div>
</div>
</div>
</div> </div>
</div> <div class="van-cell van-address-edit-detail">
<div class="van-cell van-address-edit-detail"> <div class="van-cell__value van-cell__value--alone">
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__title van-field__label"><span>详细地址</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div> <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
</div> </div>
`; `;
exports[`create a AddressEdit with props 1`] = ` exports[`create a AddressEdit with props 1`] = `
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell van-field"> <div class="van-address-edit__fields">
<div class="van-cell__title van-field__label"><span>姓名</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
</div>
</div> </div>
</div> <div class="van-cell van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div> </div>
</div> </div>
</div> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div> <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
</div> <!----></i></div>
</div>
<div class="van-cell van-address-edit-detail">
<div class="van-cell__value van-cell__value--alone">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="van-cell van-address-edit-detail">
<div class="van-cell van-field"> <div class="van-cell__value van-cell__value--alone">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div> </div>
</div> </div>
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div> <div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;"> <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@ -78,47 +88,52 @@ exports[`create a AddressEdit with props 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div> <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
</div> </div>
`; `;
exports[`set-default 1`] = ` exports[`set-default 1`] = `
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell van-field"> <div class="van-address-edit__fields">
<div class="van-cell__title van-field__label"><span>姓名</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
</div>
</div> </div>
</div> <div class="van-cell van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div> </div>
</div> </div>
</div> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div> <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
</div> <!----></i></div>
</div>
<div class="van-cell van-address-edit-detail">
<div class="van-cell__value van-cell__value--alone">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="van-cell van-address-edit-detail">
<div class="van-cell van-field"> <div class="van-cell__value van-cell__value--alone">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div> </div>
</div> </div>
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div> <div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;"> <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
@ -126,47 +141,52 @@ exports[`set-default 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div> <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
</div> </div>
`; `;
exports[`show area component 1`] = ` exports[`show area component 1`] = `
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell van-field"> <div class="van-address-edit__fields">
<div class="van-cell__title van-field__label"><span>姓名</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
</div>
</div> </div>
</div> <div class="van-cell van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div> </div>
</div> </div>
</div> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div> <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
</div> <!----></i></div>
</div>
<div class="van-cell van-address-edit-detail">
<div class="van-cell__value van-cell__value--alone">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="van-cell van-address-edit-detail">
<div class="van-cell van-field"> <div class="van-cell__value van-cell__value--alone">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div> </div>
</div> </div>
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div> <div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;"> <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@ -174,47 +194,52 @@ exports[`show area component 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div> <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
</div> </div>
`; `;
exports[`show area component 2`] = ` exports[`show area component 2`] = `
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell van-field"> <div class="van-address-edit__fields">
<div class="van-cell__title van-field__label"><span>姓名</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
</div>
</div> </div>
</div> <div class="van-cell van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div> </div>
</div> </div>
</div> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div> <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
</div> <!----></i></div>
</div>
<div class="van-cell van-address-edit-detail">
<div class="van-cell__value van-cell__value--alone">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="van-cell van-address-edit-detail">
<div class="van-cell van-field"> <div class="van-cell__value van-cell__value--alone">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
</div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
</div>
</div> </div>
</div> </div>
<div class="van-cell van-cell--center van-switch-cell"> <div class="van-cell van-cell--center van-switch-cell van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div> <div class="van-cell__title"><span>设为默认收货地址</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;"> <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
@ -222,40 +247,45 @@ exports[`show area component 2`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div> <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
</div> </div>
`; `;
exports[`valid area placeholder confirm 1`] = ` exports[`valid area placeholder confirm 1`] = `
<div class="van-address-edit"> <div class="van-address-edit">
<div class="van-cell van-field"> <div class="van-address-edit__fields">
<div class="van-cell__title van-field__label"><span>姓名</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
</div>
</div> </div>
</div> <div class="van-cell van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__title van-field__label"><span>电话</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div> </div>
</div> </div>
</div> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__title van-field__label"><span>地区</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
<div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control"></div> <div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
<!----></i></div>
</div>
</div>
</div> </div>
</div> <div class="van-cell van-address-edit-detail">
<div class="van-cell van-address-edit-detail"> <div class="van-cell__value van-cell__value--alone">
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell van-field">
<div class="van-cell van-field"> <div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__title van-field__label"><span>详细地址</span></div> <div class="van-cell__value">
<div class="van-cell__value"> <div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div> <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
</div> </div>
`; `;

16
src/address-list/Item.tsx
View File

@ -3,6 +3,7 @@ import { emit, inherit } from '../utils/functional';
import Icon from '../icon'; import Icon from '../icon';
import Cell from '../cell'; import Cell from '../cell';
import Radio from '../radio'; import Radio from '../radio';
import Tag from '../tag';
// Types // Types
import { CreateElement, RenderContext } from 'vue/types'; import { CreateElement, RenderContext } from 'vue/types';
@ -13,12 +14,14 @@ export type AddressItemData = {
tel: string | number; tel: string | number;
name: string; name: string;
address: string; address: string;
isDefault: boolean;
}; };
export type AddressItemProps = { export type AddressItemProps = {
data: AddressItemData; data: AddressItemData;
disabled?: boolean; disabled?: boolean;
switchable?: boolean; switchable?: boolean;
defaultTagText?: string;
}; };
export type AddressItemEvents = { export type AddressItemEvents = {
@ -60,7 +63,14 @@ function AddressItem(
const genContent = () => { const genContent = () => {
const { data } = props; const { data } = props;
const Info = [ const Info = [
<div class={bem('name')}>{`${data.name}，${data.tel}`}</div>, <div class={bem('name')}>
{`${data.name} ${data.tel}`}
{data.isDefault && props.defaultTagText && (
<Tag type="danger" round class={bem('tag')}>
{props.defaultTagText}
</Tag>
)}
</div>,
<div class={bem('address')}>{data.address}</div> <div class={bem('address')}>{data.address}</div>
]; ];
@ -77,6 +87,7 @@ function AddressItem(
<Cell <Cell
class={bem({ disabled })} class={bem({ disabled })}
valueClass={bem('value')} valueClass={bem('value')}
border={false}
clickable={switchable && !disabled} clickable={switchable && !disabled}
scopedSlots={{ scopedSlots={{
default: genContent, default: genContent,
@ -91,7 +102,8 @@ function AddressItem(
AddressItem.props = { AddressItem.props = {
data: Object, data: Object,
disabled: Boolean, disabled: Boolean,
switchable: Boolean switchable: Boolean,
defaultTagText: String
}; };
export default createComponent<AddressItemProps, AddressItemEvents>(AddressItem); export default createComponent<AddressItemProps, AddressItemEvents>(AddressItem);

2
src/address-list/README.md
View File

@ -77,6 +77,7 @@ export default {
| disabled-text | Disabled text | *string* | - | - | | disabled-text | Disabled text | *string* | - | - |
| switchable | Whether to allow switch address | *boolean* | `true` | - | | switchable | Whether to allow switch address | *boolean* | `true` | - |
| add-button-text | Add button text | *string* | `Add new address` | - | | add-button-text | Add button text | *string* | `Add new address` | - |
| default-tag-text | Default tag text | *string* | - | - |
### Events ### Events
@ -97,6 +98,7 @@ export default {
| name | Name | *string* | | name | Name | *string* |
| tel | Phone | *string \| number* | | tel | Phone | *string \| number* |
| address | Address | *string* | | address | Address | *string* |
| isDefault | Is default address | *boolean* |
### Slots ### Slots

2
src/address-list/README.zh-CN.md
View File

@ -78,6 +78,7 @@ export default {
| disabled-text | 不可配送提示文案 | *string* | - | - | | disabled-text | 不可配送提示文案 | *string* | - | - |
| switchable | 是否允许切换地址 | *boolean* | `true` | - | | switchable | 是否允许切换地址 | *boolean* | `true` | - |
| add-button-text | 底部按钮文字 | *string* | `新增地址` | - | | add-button-text | 底部按钮文字 | *string* | `新增地址` | - |
| default-tag-text | 默认地址标签文字 | *string* | - | - |
### Events ### Events
@ -98,6 +99,7 @@ export default {
| name | 收货人姓名 | *string* | | name | 收货人姓名 | *string* |
| tel | 收货人手机号 | *string \| number* | | tel | 收货人手机号 | *string \| number* |
| address | 收货地址 | *string* | | address | 收货地址 | *string* |
| isDefault | 是否为默认地址 | *boolean* |
### Slots ### Slots

13
src/address-list/demo/index.vue
View File

@ -3,6 +3,7 @@
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-address-list <van-address-list
v-model="chosenAddressId" v-model="chosenAddressId"
:default-tag-text="$t('defaultTagText')"
:list="$t('list')" :list="$t('list')"
:disabled-list="$t('disabledList')" :disabled-list="$t('disabledList')"
:disabled-text="$t('disabledText')" :disabled-text="$t('disabledText')"
@ -22,7 +23,8 @@ export default {
id: '1', id: '1',
name: '张三', name: '张三',
tel: '13000000000', tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室' address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
isDefault: true
}, },
{ {
id: '2', id: '2',
@ -41,7 +43,8 @@ export default {
], ],
add: '新增地址', add: '新增地址',
edit: '编辑地址', edit: '编辑地址',
disabledText: '以下地址超出配送范围' disabledText: '以下地址超出配送范围',
defaultTagText: '默认'
}, },
'en-US': { 'en-US': {
list: [ list: [
@ -49,7 +52,8 @@ export default {
id: '1', id: '1',
name: 'John Snow', name: 'John Snow',
tel: '13000000000', tel: '13000000000',
address: 'Somewhere' address: 'Somewhere',
isDefault: true
}, },
{ {
id: '2', id: '2',
@ -68,7 +72,8 @@ export default {
], ],
add: 'Add', add: 'Add',
edit: 'Edit', edit: 'Edit',
disabledText: 'The following address is out of range' disabledText: 'The following address is out of range',
defaultTagText: 'Default'
} }
}, },

48
src/address-list/index.less
View File

@ -3,17 +3,26 @@
.van-address-list { .van-address-list {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
padding-bottom: 100px; padding: @address-list-padding;
&__add { &__bottom {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @address-list-add-button-z-index; z-index: @address-list-add-button-z-index;
box-sizing: border-box;
width: 100%;
padding: 5px @padding-md;
background-color: @white;
}
&__add {
height: 40px;
line-height: 38px;
} }
&__disabled-text { &__disabled-text {
padding: 0 @padding-md; padding: @address-list-disabled-text-padding;
color: @address-list-disabled-text-color; color: @address-list-disabled-text-color;
font-size: @address-list-disabled-text-font-size; font-size: @address-list-disabled-text-font-size;
line-height: @address-list-disabled-text-line-height; line-height: @address-list-disabled-text-line-height;
@ -22,16 +31,30 @@
.van-address-item { .van-address-item {
padding: @address-list-item-padding; padding: @address-list-item-padding;
border-radius: @border-radius-md;
&:not(:last-child) {
margin-bottom: @padding-sm;
}
&__value { &__value {
padding-right: @padding-xl; padding-right: 44px;
} }
&__name { &__name {
margin-bottom: @padding-base; display: flex;
font-weight: @font-weight-bold; align-items: center;
font-size: @font-size-md; margin-bottom: @padding-xs;
line-height: 20px; font-size: @font-size-lg;
line-height: 22px;
}
&__tag {
flex: none;
margin-left: @padding-xs;
padding-top: 0;
padding-bottom: 0;
line-height: 1.4em;
} }
&__address { &__address {
@ -51,12 +74,21 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
right: @padding-md; right: @padding-md;
color: @gray-6;
font-size: @address-list-edit-icon-size; font-size: @address-list-edit-icon-size;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
.van-radio__label {
margin-left: @padding-sm;
}
.van-radio__icon--checked .van-icon { .van-radio__icon--checked .van-icon {
background-color: @address-list-item-radio-icon-color; background-color: @address-list-item-radio-icon-color;
border-color: @address-list-item-radio-icon-color; border-color: @address-list-item-radio-icon-color;
} }
.van-radio__icon:not(.van-radio__icon--checked) {
visibility: hidden;
}
} }

27
src/address-list/index.tsx
View File

@ -15,6 +15,7 @@ export type AddressListProps = {
addButtonText?: string; addButtonText?: string;
list?: AddressItemData[]; list?: AddressItemData[];
disabledList?: AddressItemData[]; disabledList?: AddressItemData[];
defaultTagText?: string;
}; };
export type AddressListSlots = DefaultSlots & { export type AddressListSlots = DefaultSlots & {
@ -40,6 +41,7 @@ function AddressList(
key={item.id} key={item.id}
disabled={disabled} disabled={disabled}
switchable={props.switchable} switchable={props.switchable}
defaultTagText={props.defaultTagText}
onSelect={() => { onSelect={() => {
emit(ctx, disabled ? 'select-disabled' : 'select', item, index); emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
@ -67,16 +69,18 @@ function AddressList(
{props.disabledText && <div class={bem('disabled-text')}>{props.disabledText}</div>} {props.disabledText && <div class={bem('disabled-text')}>{props.disabledText}</div>}
{DisabledList} {DisabledList}
{slots.default && slots.default()} {slots.default && slots.default()}
<Button <div class={bem('bottom')}>
square <Button
size="large" round
type="danger" block
class={bem('add')} type="danger"
text={props.addButtonText || t('add')} class={bem('add')}
onClick={() => { text={props.addButtonText || t('add')}
emit(ctx, 'add'); onClick={() => {
}} emit(ctx, 'add');
/> }}
/>
</div>
</div> </div>
); );
} }
@ -90,7 +94,8 @@ AddressList.props = {
switchable: { switchable: {
type: Boolean, type: Boolean,
default: true default: true
} },
defaultTagText: String
}; };
export default createComponent<AddressListProps>(AddressList); export default createComponent<AddressListProps>(AddressList);

45
src/address-list/test/__snapshots__/demo.spec.js.snap
View File

@ -5,34 +5,37 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-address-list"> <div class="van-address-list">
<div role="radiogroup" class="van-radio-group"> <div role="radiogroup" class="van-radio-group">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item"> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value"> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio"> <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success"> <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span> <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
</div> </div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
<!----></i> </div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
</div>
</div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i>
</div>
</div>
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
<div class="van-cell van-address-item van-address-item--disabled">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">王五，1320000000</div>
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> </div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i> <!----></i>
</div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button> </div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
</div>
</div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i>
</div>
</div> </div>
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
<div class="van-cell van-cell--borderless van-address-item van-address-item--disabled">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">王五 1320000000</div>
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
</div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i>
</div>
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
</div> </div>
</div> </div>
</div>
`; `;

11
src/address-list/test/__snapshots__/index.spec.js.snap
View File

@ -3,20 +3,21 @@
exports[`unswitchable 1`] = ` exports[`unswitchable 1`] = `
<div class="van-address-list"> <div class="van-address-list">
<div role="radiogroup" class="van-radio-group"> <div role="radiogroup" class="van-radio-group">
<div class="van-cell van-address-item"> <div class="van-cell van-cell--borderless van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value"> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__name">张三 13000000000</div>
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> </div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i> <!----></i>
</div> </div>
<div class="van-cell van-address-item"> <div class="van-cell van-cell--borderless van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value"> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">李四，1310000000</div> <div class="van-address-item__name">李四 1310000000</div>
<div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> </div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i> <!----></i>
</div> </div>
</div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button> </div>
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
</div> </div>
`; `;

2
src/card/index.tsx
View File

@ -51,7 +51,7 @@ function Card(
const showNum = slots.num || isDef(props.num); const showNum = slots.num || isDef(props.num);
const showPrice = slots.price || isDef(props.price); const showPrice = slots.price || isDef(props.price);
const showOriginPrice = slots['origin-price'] || isDef(props.originPrice); const showOriginPrice = slots['origin-price'] || isDef(props.originPrice);
const showBottom = showNum || showPrice || showOriginPrice; const showBottom = showNum || showPrice || showOriginPrice || slots.bottom;
function onThumbClick(event: MouseEvent) { function onThumbClick(event: MouseEvent) {
emit(ctx, 'click-thumb', event); emit(ctx, 'click-thumb', event);

4
src/card/test/__snapshots__/index.spec.js.snap
View File

@ -4,9 +4,7 @@ exports[`render bottom slot 1`] = `
<div class="van-card"> <div class="van-card">
<div class="van-card__header"> <div class="van-card__header">
<div class="van-card__content"> <div class="van-card__content">
<div class="van-card__bottom"> <div class="van-card__bottom">Custom Bottom</div>
<div class="van-card__price">¥ 100</div>Custom Bottom
</div>
</div> </div>
</div> </div>
</div> </div>

3
src/card/test/index.spec.js
View File

@ -65,9 +65,6 @@ test('render origin-price slot', () => {
test('render bottom slot', () => { test('render bottom slot', () => {
const wrapper = mount(Card, { const wrapper = mount(Card, {
propsData: {
price: 100
},
scopedSlots: { scopedSlots: {
bottom: () => 'Custom Bottom' bottom: () => 'Custom Bottom'
} }

3
src/circle/README.md
View File

@ -121,7 +121,8 @@ export default {
| speed | Animate speed（rate/s）| *number* | `0` | - | | speed | Animate speed（rate/s）| *number* | `0` | - |
| text | Text | *string* | - | - | | text | Text | *string* | - | - |
| stroke-width | Stroke width | *number* | `40` | - | | stroke-width | Stroke width | *number* | `40` | - |
| clockwise | Is clockwise | *boolean* | `true` | - | | stroke-linecap | Stroke linecap，can be set to `sqaure` `butt` | *string* | `round` | 2.2.15 |
| clockwise | Whether to be clockwise | *boolean* | `true` | - |
### Slots ### Slots

1
src/circle/README.zh-CN.md
View File

@ -133,6 +133,7 @@ export default {
| speed | 动画速度（单位为 rate/s）| *number* | `0` | - | | speed | 动画速度（单位为 rate/s）| *number* | `0` | - |
| text | 文字 | *string* | - | - | | text | 文字 | *string* | - | - |
| stroke-width | 进度条宽度 | *number* | `40` | - | | stroke-width | 进度条宽度 | *number* | `40` | - |
| stroke-linecap | 进度条端点的形状，可选值为`sqaure` `butt` | *string* | `round` | 2.2.15 |
| clockwise | 是否顺时针增加 | *boolean* | `true` | - | | clockwise | 是否顺时针增加 | *boolean* | `true` | - |
### Slots ### Slots

12
src/circle/index.js
View File

@ -14,12 +14,14 @@ function format(rate) {
function getPath(clockwise, viewBoxSize) { function getPath(clockwise, viewBoxSize) {
const sweepFlag = clockwise ? 1 : 0; const sweepFlag = clockwise ? 1 : 0;
return `M ${viewBoxSize / 2} ${viewBoxSize / 2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`; return `M ${viewBoxSize / 2} ${viewBoxSize /
2} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
} }
export default createComponent({ export default createComponent({
props: { props: {
text: String, text: String,
strokeLinecap: String,
value: { value: {
type: Number, type: Number,
default: 0 default: 0
@ -85,6 +87,7 @@ export default createComponent({
return { return {
stroke: `${this.color}`, stroke: `${this.color}`,
strokeWidth: `${this.strokeWidth + 1}px`, strokeWidth: `${this.strokeWidth + 1}px`,
strokeLinecap: this.strokeLinecap,
strokeDasharray: `${offset}px ${PERIMETER}px` strokeDasharray: `${offset}px ${PERIMETER}px`
}; };
}, },
@ -129,7 +132,9 @@ export default createComponent({
this.startRate = this.value; this.startRate = this.value;
this.endRate = format(this.rate); this.endRate = format(this.rate);
this.increase = this.endRate > this.startRate; this.increase = this.endRate > this.startRate;
this.duration = Math.abs(((this.startRate - this.endRate) * 1000) / this.speed); this.duration = Math.abs(
((this.startRate - this.endRate) * 1000) / this.speed
);
if (this.speed) { if (this.speed) {
cancelRaf(this.rafId); cancelRaf(this.rafId);
@ -168,7 +173,8 @@ export default createComponent({
stroke={this.gradient ? `url(#${this.uid})` : this.color} stroke={this.gradient ? `url(#${this.uid})` : this.color}
/> />
</svg> </svg>
{this.slots() || (this.text && <div class={bem('text')}>{this.text}</div>)} {this.slots() ||
(this.text && <div class={bem('text')}>{this.text}</div>)}
</div> </div>
); );
} }

7
src/circle/test/__snapshots__/index.spec.js.snap
View File

@ -13,3 +13,10 @@ exports[`speed is 0 1`] = `
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
</svg></div> </svg></div>
`; `;
exports[`stroke-linecap prop 1`] = `
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
</svg></div>
`;

10
src/circle/test/index.spec.js
View File

@ -47,3 +47,13 @@ test('size prop', () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('stroke-linecap prop', () => {
const wrapper = mount(Circle, {
propsData: {
strokeLinecap: 'square'
}
});
expect(wrapper).toMatchSnapshot();
});

5
src/contact-card/README.md
View File

@ -155,6 +155,7 @@ export default {
| v-model | Id of chosen contact | *string \| number* | - | - | | v-model | Id of chosen contact | *string \| number* | - | - |
| list | Contact list | *Contact[]* | `[]` | - | | list | Contact list | *Contact[]* | `[]` | - |
| add-text | Add button text | *string* | `Add new contact` | - | | add-text | Add button text | *string* | `Add new contact` | - |
| default-tag-text | Default tag text | *string* | - | - |
### ContactList Events ### ContactList Events
@ -164,6 +165,7 @@ export default {
| edit | Triggered when click edit button | item: contact object，index | | edit | Triggered when click edit button | item: contact object，index |
| select | Triggered when select contact | item: contact object | | select | Triggered when select contact | item: contact object |
### ContactEdit Props ### ContactEdit Props
| Attribute | Description | Type | Default | Version | | Attribute | Description | Type | Default | Version |
@ -173,6 +175,8 @@ export default {
| is-saving | Whether to show save button loading status | *boolean* | `false` | - | | is-saving | Whether to show save button loading status | *boolean* | `false` | - |
| is-deleting | Whether to show delete button loading status | *boolean* | `false` | - | | is-deleting | Whether to show delete button loading status | *boolean* | `false` | - |
| tel-validator | The method to validate tel | *(tel: string) => boolean* | - | - | | tel-validator | The method to validate tel | *(tel: string) => boolean* | - | - |
| show-set-default | Whether to show default contact switch | *boolean* | `false` | - |
| set-default-label | default contact switch label | *string* | - | - |
### ContactEdit Events ### ContactEdit Events
@ -188,3 +192,4 @@ export default {
| id | ID | *string \| number* | | id | ID | *string \| number* |
| name | Name | *string* | | name | Name | *string* |
| tel | Phone | *string* | | tel | Phone | *string* |
| isDefault | Is default contact | *boolean* |

4
src/contact-card/README.zh-CN.md
View File

@ -159,6 +159,7 @@ export default {
| v-model | 当前选中联系人的 id | *string \| number* | - | - | | v-model | 当前选中联系人的 id | *string \| number* | - | - |
| list | 联系人列表 | *Contact[]* | `[]` | - | | list | 联系人列表 | *Contact[]* | `[]` | - |
| add-text | 新建按钮文案 | *string* | `新建联系人` | - | | add-text | 新建按钮文案 | *string* | `新建联系人` | - |
| default-tag-text | 默认联系人标签文案 | *string* | - | - |
### ContactList Events ### ContactList Events
@ -177,6 +178,8 @@ export default {
| is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | - | | is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | - |
| is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | - | | is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | - |
| tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | - | | tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | - |
| show-set-default | 是否显示默认联系人栏 | *boolean* | `false` | - |
| set-default-label | 默认联系人栏文案 | *string* | - | - |
### ContactEdit Events ### ContactEdit Events
@ -192,3 +195,4 @@ export default {
| id | 每位联系人的唯一标识 | *string \| number* | | id | 每位联系人的唯一标识 | *string \| number* |
| name | 联系人姓名 | *string* | | name | 联系人姓名 | *string* |
| tel | 联系人手机号 | *string \| number* | | tel | 联系人手机号 | *string \| number* |
| isDefault | 是否为默认联系人 | *boolean* |

14
src/contact-card/demo/index.vue
View File

@ -16,6 +16,7 @@
<van-contact-list <van-contact-list
v-model="chosenContactId" v-model="chosenContactId"
:list="list" :list="list"
:default-tag-text="$t('defaultTagText')"
@add="onAdd" @add="onAdd"
@edit="onEdit" @edit="onEdit"
@select="onSelect" @select="onSelect"
@ -28,6 +29,8 @@
:lazy-render="false" :lazy-render="false"
> >
<van-contact-edit <van-contact-edit
show-set-default
:set-default-label="$t('defaultLabel')"
:contact-info="editingContact" :contact-info="editingContact"
:is-edit="isEdit" :is-edit="isEdit"
@save="onSave" @save="onSave"
@ -51,10 +54,14 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
name: '张三' name: '张三',
defaultLabel: '设为默认联系人',
defaultTagText: '默认'
}, },
'en-US': { 'en-US': {
name: 'John Snow' name: 'John Snow',
defaultLabel: 'Set as the default contact',
defaultTagText: 'default'
} }
}, },
@ -74,7 +81,8 @@ export default {
return { return {
name: this.$t('name'), name: this.$t('name'),
tel: '13000000000', tel: '13000000000',
id: 0 id: 0,
isDefault: 1
}; };
}, },

42
src/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -11,33 +11,43 @@ exports[`renders demo correctly 1`] = `
<div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom"> <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
<div class="van-contact-list"> <div class="van-contact-list">
<div role="radiogroup" class="van-radio-group van-contact-list__group"> <div role="radiogroup" class="van-radio-group van-contact-list__group">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-contact-list__item"> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span>
</div>
</div><i class="van-icon van-icon-edit van-contact-list__edit">
<!----></i> <!----></i>
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">张三，13000000000<span class="van-tag van-tag--round van-tag--danger van-contact-list__item-tag">默认</span></div>
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div> </div>
</div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button> </div>
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
</div> </div>
</div> </div>
<div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom"> <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
<div class="van-contact-edit"> <div class="van-contact-edit">
<div class="van-cell van-field"> <div class="van-contact-edit__fields">
<div class="van-cell__title van-field__label"><span>张三</span></div> <div class="van-cell van-field">
<div class="van-cell__value"> <div class="van-cell__title van-field__label"><span>张三</span></div>
<div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
</div>
</div> </div>
</div> </div>
<div class="van-cell van-field"> <div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
<div class="van-cell__title van-field__label"><span>电话</span></div> <div class="van-cell__title"><span>设为默认联系人</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div> <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<div class="van-switch__node"></div>
</div>
</div> </div>
</div> </div>
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div> <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
</div> </div>
</div> </div>
</div> </div>

16
src/contact-card/test/__snapshots__/index.spec.js.snap
View File

@ -3,15 +3,15 @@
exports[`ContactList render 1`] = ` exports[`ContactList render 1`] = `
<div class="van-contact-list"> <div class="van-contact-list">
<div role="radiogroup" class="van-radio-group van-contact-list__group"> <div role="radiogroup" class="van-radio-group van-contact-list__group">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-contact-list__item"> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
<!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">test，123123213</div></span>
</div>
</div><i class="van-icon van-icon-edit van-contact-list__edit">
<!----></i> <!----></i>
<div class="van-cell__value van-cell__value--alone van-contact-list__item-value">test，123123213</div>
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
<!----></i></div>
</div>
</div> </div>
</div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button> </div>
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
</div> </div>
`; `;

66
src/contact-edit/index.js
View File

@ -3,6 +3,8 @@ import Button from '../button';
import Field from '../field'; import Field from '../field';
import Toast from '../toast'; import Toast from '../toast';
import Dialog from '../dialog'; import Dialog from '../dialog';
import Switch from '../switch';
import Cell from '../cell';
import { isMobile } from '../utils/validate/mobile'; import { isMobile } from '../utils/validate/mobile';
const [createComponent, bem, t] = createNamespace('contact-edit'); const [createComponent, bem, t] = createNamespace('contact-edit');
@ -17,6 +19,8 @@ export default createComponent({
isEdit: Boolean, isEdit: Boolean,
isSaving: Boolean, isSaving: Boolean,
isDeleting: Boolean, isDeleting: Boolean,
showSetDefault: Boolean,
setDefaultLabel: String,
contactInfo: { contactInfo: {
type: Object, type: Object,
default: () => ({ ...defaultContact }) default: () => ({ ...defaultContact })
@ -94,34 +98,58 @@ export default createComponent({
return ( return (
<div class={bem()}> <div class={bem()}>
<Field <div class={bem('fields')}>
vModel={data.name} <Field
clearable vModel={data.name}
maxlength="30" clearable
label={t('name')} maxlength="30"
placeholder={t('nameEmpty')} label={t('name')}
error={errorInfo.name} placeholder={t('nameEmpty')}
onFocus={onFocus('name')} error={errorInfo.name}
/> onFocus={onFocus('name')}
<Field />
vModel={data.tel} <Field
clearable vModel={data.tel}
type="tel" clearable
label={t('tel')} type="tel"
placeholder={t('telEmpty')} label={t('tel')}
error={errorInfo.tel} placeholder={t('telEmpty')}
onFocus={onFocus('tel')} error={errorInfo.tel}
/> onFocus={onFocus('tel')}
/>
</div>
{this.showSetDefault && (
<Cell
title={this.setDefaultLabel}
class={bem('switch-cell')}
border={false}
>
<Switch
vModel={data.isDefault}
size={24}
onChange={event => {
this.$emit('change-default', event);
}}
/>
</Cell>
)}
<div class={bem('buttons')}> <div class={bem('buttons')}>
<Button <Button
block block
round
type="danger" type="danger"
text={t('save')} text={t('save')}
loading={this.isSaving} loading={this.isSaving}
onClick={this.onSave} onClick={this.onSave}
/> />
{this.isEdit && ( {this.isEdit && (
<Button block text={t('delete')} loading={this.isDeleting} onClick={this.onDelete} /> <Button
block
round
text={t('delete')}
loading={this.isDeleting}
onClick={this.onDelete}
/>
)} )}
</div> </div>
</div> </div>

32
src/contact-edit/index.less
View File

@ -1,15 +1,39 @@
@import '../style/var'; @import '../style/var';
.van-contact-edit { .van-contact-edit {
padding: @contact-edit-padding;
&__fields {
overflow: hidden;
border-radius: @contact-edit-fields-radius;
.van-cell__title {
max-width: @contact-edit-field-label-width;
}
}
&__switch-cell {
margin-top: 10px;
padding-top: 9px;
padding-bottom: 9px;
overflow: hidden;
border-radius: @contact-edit-fields-radius;
.van-cell__value {
flex: none;
}
.van-switch {
vertical-align: top;
}
}
&__buttons { &__buttons {
padding: @contact-edit-buttons-padding; padding: @contact-edit-buttons-padding;
} }
.van-cell__title {
max-width: @contact-edit-field-label-width;
}
.van-button { .van-button {
margin-bottom: @contact-edit-button-margin-bottom; margin-bottom: @contact-edit-button-margin-bottom;
font-size: @contact-edit-button-font-size;
} }
} }

31
src/contact-list/index.less
View File

@ -10,7 +10,18 @@
} }
&__item-value { &__item-value {
display: flex;
align-items: center;
padding-right: @padding-xl; padding-right: @padding-xl;
padding-left: @padding-xs;
}
&__item-tag {
flex: none;
margin-left: @padding-xs;
padding-top: 0;
padding-bottom: 0;
line-height: 1.4em;
} }
&__group { &__group {
@ -20,24 +31,22 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
&__name {
font-weight: @font-weight-bold;
font-size: @font-size-md;
line-height: 20px;
}
&__edit { &__edit {
position: absolute;
top: 50%;
right: @padding-md;
font-size: @contact-list-edit-icon-size; font-size: @contact-list-edit-icon-size;
transform: translate(0, -50%);
} }
&__add { &__bottom {
position: fixed; position: fixed;
right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @contact-list-add-button-z-index; z-index: @contact-list-add-button-z-index;
padding: 5px 16px;
background-color: @white;
}
&__add {
height: 40px;
line-height: 38px;
} }
} }

61
src/contact-list/index.tsx
View File

@ -3,24 +3,27 @@ import { RED } from '../utils/constant';
import { emit, inherit } from '../utils/functional'; import { emit, inherit } from '../utils/functional';
import Icon from '../icon'; import Icon from '../icon';
import Cell from '../cell'; import Cell from '../cell';
import Tag from '../tag';
import Button from '../button'; import Button from '../button';
import Radio from '../radio'; import Radio from '../radio';
import RadioGroup from '../radio-group'; import RadioGroup from '../radio-group';
// Types // Types
import { CreateElement, RenderContext } from 'vue/types'; import { CreateElement, RenderContext, VNode } from 'vue/types';
import { DefaultSlots } from '../utils/types'; import { DefaultSlots } from '../utils/types';
export type ContactListItem = { export type ContactListItem = {
id: string | number; id: string | number;
tel: string | number; tel: string | number;
name: string; name: string;
isDefault: boolean;
}; };
export type ContactListProps = { export type ContactListProps = {
value?: any; value?: any;
list?: ContactListItem[]; list?: ContactListItem[];
addText?: string; addText?: string;
defaultTagText?: string;
}; };
const [createComponent, bem, t] = createNamespace('contact-list'); const [createComponent, bem, t] = createNamespace('contact-list');
@ -39,15 +42,18 @@ function ContactList(
emit(ctx, 'select', item, index); emit(ctx, 'select', item, index);
} }
function Content() { function RightIcon() {
return ( return (
<Radio name={item.id} iconSize={16} checkedColor={RED} onClick={onClick}> <Radio
<div class={bem('name')}>{`${item.name}，${item.tel}`}</div> name={item.id}
</Radio> iconSize={16}
checkedColor={RED}
onClick={onClick}
/>
); );
} }
function RightIcon() { function LeftIcon() {
return ( return (
<Icon <Icon
name="edit" name="edit"
@ -60,15 +66,31 @@ function ContactList(
); );
} }
function Content() {
const nodes = ([`${item.name}，${item.tel}`] as unknown[]) as VNode[];
if (item.isDefault && props.defaultTagText) {
nodes.push(
<Tag type="danger" round class={bem('item-tag')}>
{props.defaultTagText}
</Tag>
);
}
return nodes;
}
return ( return (
<Cell <Cell
key={item.id} key={item.id}
isLink isLink
center
class={bem('item')} class={bem('item')}
valueClass={bem('item-value')} valueClass={bem('item-value')}
scopedSlots={{ scopedSlots={{
icon: LeftIcon,
default: Content, default: Content,
'right-icon': RightIcon 'right-icon': RightIcon,
}} }}
onClick={onClick} onClick={onClick}
/> />
@ -80,16 +102,18 @@ function ContactList(
<RadioGroup value={props.value} class={bem('group')}> <RadioGroup value={props.value} class={bem('group')}>
{List} {List}
</RadioGroup> </RadioGroup>
<Button <div class={bem('bottom')}>
square <Button
size="large" round
type="danger" block
class={bem('add')} type="danger"
text={props.addText || t('addText')} class={bem('add')}
onClick={() => { text={props.addText || t('addText')}
emit(ctx, 'add'); onClick={() => {
}} emit(ctx, 'add');
/> }}
/>
</div>
</div> </div>
); );
} }
@ -97,7 +121,8 @@ function ContactList(
ContactList.props = { ContactList.props = {
value: null as any, value: null as any,
list: Array, list: Array,
addText: String addText: String,
defaultTagText: String
}; };
export default createComponent(ContactList); export default createComponent(ContactList);

2
src/coupon/index.less
View File

@ -33,7 +33,7 @@
} }
p { p {
color: @gray-dark; color: @gray-6;
font-size: @font-size-sm; font-size: @font-size-sm;
line-height: 16px; line-height: 16px;
} }

1
src/field/README.md
View File

@ -152,6 +152,7 @@ Textarea Field can be auto resize when has `autosize` prop
| clearable | Whether to be clearable | *boolean* | `false` | - | | clearable | Whether to be clearable | *boolean* | `false` | - |
| clickable | Whether to show click feedback when clicked | *boolean* | `false` | - | | clickable | Whether to show click feedback when clicked | *boolean* | `false` | - |
| is-link | Whether to show link icon | *boolean* | `false` | - | | is-link | Whether to show link icon | *boolean* | `false` | - |
| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | - |
| show-word-limit | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | 2.2.8 | | show-word-limit | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | 2.2.8 |
| error | Whether to show error info | *boolean* | `false` | - | | error | Whether to show error info | *boolean* | `false` | - |
| arrow-direction | Can be set to `left` `up` `down` | *string* | - | 2.0.4 | | arrow-direction | Can be set to `left` `up` `down` | *string* | - | 2.0.4 |

1
src/field/README.zh-CN.md
View File

@ -158,6 +158,7 @@ Vue.use(Field);
| clearable | 是否启用清除控件 | *boolean* | `false` | - | | clearable | 是否启用清除控件 | *boolean* | `false` | - |
| clickable | 是否开启点击反馈 | *boolean* | `false` | - | | clickable | 是否开启点击反馈 | *boolean* | `false` | - |
| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | - | | is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | - |
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | - |
| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | 2.2.8 | | show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | 2.2.8 |
| error | 是否将输入内容标红 | *boolean* | `false` | - | | error | 是否将输入内容标红 | *boolean* | `false` | - |
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - | 2.0.4 | | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - | 2.0.4 |

2
src/icon/demo/index.vue
View File

@ -123,7 +123,7 @@ export default {
span { span {
display: block; display: block;
padding: 0 5px; padding: 0 5px;
color: @gray-darker; color: @gray-7;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
} }

2
src/image/demo/index.vue
View File

@ -149,7 +149,7 @@ export default {
.text { .text {
margin-top: 5px; margin-top: 5px;
color: @gray-darker; color: @gray-7;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
} }

4
src/list/demo/index.vue
View File

@ -130,7 +130,7 @@ export default {
.page-desc { .page-desc {
margin: 0; margin: 0;
padding: 5px 0; padding: 5px 0;
color: @gray-darker; color: @gray-7;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
@ -144,7 +144,7 @@ export default {
} }
.van-checkbox__label { .van-checkbox__label {
color: @gray-darker; color: @gray-7;
} }
} }
</style> </style>

2
src/number-keyboard/index.js
View File

@ -105,7 +105,7 @@ export default createComponent({
methods: { methods: {
onBlur() { onBlur() {
this.$emit('blur'); this.show && this.$emit('blur');
}, },
onClose() { onClose() {

1
src/search/README.md
View File

@ -70,6 +70,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
| maxlength | Max length of value | *string \| number* | - | - | | maxlength | Max length of value | *string \| number* | - | - |
| placeholder | Placeholder | *string* | - | - | | placeholder | Placeholder | *string* | - | - |
| clearable | Whether to be clearable | *boolean* | `true` | - | | clearable | Whether to be clearable | *boolean* | `true` | - |
| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` | - |
| show-action | Whether to show right action button | *boolean* | `false` | - | | show-action | Whether to show right action button | *boolean* | `false` | - |
| action-text | Text of action button | *boolean* | `Cancel` | 2.2.2 | | action-text | Text of action button | *boolean* | `Cancel` | 2.2.2 |
| disabled | Whether to disable field | *boolean* | `false` | - | | disabled | Whether to disable field | *boolean* | `false` | - |

1
src/search/README.zh-CN.md
View File

@ -65,6 +65,7 @@ Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘
| maxlength | 输入的最大字符数 | *string \| number* | - | - | | maxlength | 输入的最大字符数 | *string \| number* | - | - |
| placeholder | 占位提示文字 | *string* | - | - | | placeholder | 占位提示文字 | *string* | - | - |
| clearable | 是否启用清除控件 | *boolean* | `true` | - | | clearable | 是否启用清除控件 | *boolean* | `true` | - |
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | - |
| show-action | 是否在搜索框右侧显示取消按钮 | *boolean* | `false` | - | | show-action | 是否在搜索框右侧显示取消按钮 | *boolean* | `false` | - |
| action-text | 取消按钮文字 | *boolean* | `取消` | 2.2.2 | | action-text | 取消按钮文字 | *boolean* | `取消` | 2.2.2 |
| disabled | 是否禁用输入框 | *boolean* | `false` | - | | disabled | 是否禁用输入框 | *boolean* | `false` | - |

2
src/sidebar/demo/index.vue
View File

@ -67,7 +67,7 @@ export default {
&-title { &-title {
margin-bottom: 16px; margin-bottom: 16px;
color: @gray-dark; color: @gray-6;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
} }

10
src/sku/index.less
View File

@ -62,7 +62,7 @@
&-header-item { &-header-item {
margin-top: @padding-xs; margin-top: @padding-xs;
color: @gray-dark; color: @gray-6;
font-size: @font-size-sm; font-size: @font-size-sm;
line-height: 16px; line-height: 16px;
} }
@ -178,7 +178,7 @@
} }
&--disabled { &--disabled {
color: @gray; color: @gray-5;
background: @active-color; background: @active-color;
.van-sku-row__item-img { .van-sku-row__item-img {
@ -213,7 +213,7 @@
&__stock { &__stock {
display: inline-block; display: inline-block;
margin-right: @padding-xs; margin-right: @padding-xs;
color: @gray-dark; color: @gray-6;
font-size: @font-size-sm; font-size: @font-size-sm;
&-num--highlight { &-num--highlight {
@ -334,11 +334,11 @@
} }
&--warning { &--warning {
background: linear-gradient(to right, #ffd01e, #ff8917); background: @gradient-orange;
} }
&--danger { &--danger {
background: linear-gradient(to right, #ff6034, #ee0a24); background: @gradient-red;
} }
} }
} }

174
src/style/var.less
View File

@ -1,27 +1,31 @@
// Basic Colors // Color Palette
@black: #000; @black: #000;
@white: #fff; @white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24; @red: #ee0a24;
@blue: #1989fa; @blue: #1989fa;
@orange: #ff976a; @orange: #ff976a;
@orange-dark: #ed6a0c; @orange-dark: #ed6a0c;
@orange-light: #fffbe8; @orange-light: #fffbe8;
@green: #07c160; @green: #07c160;
@gray: #c8c9cc;
@gray-light: #e5e5e5;
@gray-darker: #7d7e80;
@gray-dark: #969799;
// Gradient Colors // Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24); @gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); @gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
// Component Colors // Component Colors
@text-color: #323233; @text-color: @gray-8;
@active-color: #f2f3f5; @active-color: @gray-2;
@active-opacity: .7; @active-opacity: .7;
@disabled-opacity: .5; @disabled-opacity: .5;
@background-color: #f8f8f8; @background-color: @gray-1;
@background-color-light: #fafafa; @background-color-light: #fafafa;
// Padding // Padding
@ -44,7 +48,7 @@
@animation-duration-fast: .2s; @animation-duration-fast: .2s;
// Border // Border
@border-color: #ebedf0; @border-color: @gray-3;
@border-width-base: 1px; @border-width-base: 1px;
@border-radius-sm: 2px; @border-radius-sm: 2px;
@border-radius-md: 4px; @border-radius-md: 4px;
@ -54,40 +58,43 @@
@action-sheet-max-height: 90%; @action-sheet-max-height: 90%;
@action-sheet-header-height: 44px; @action-sheet-header-height: 44px;
@action-sheet-header-font-size: @font-size-lg; @action-sheet-header-font-size: @font-size-lg;
@action-sheet-description-color: @gray-darker; @action-sheet-description-color: @gray-7;
@action-sheet-description-font-size: @font-size-md; @action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: 20px; @action-sheet-description-line-height: 20px;
@action-sheet-item-height: 50px; @action-sheet-item-height: 50px;
@action-sheet-item-background: @white; @action-sheet-item-background: @white;
@action-sheet-item-font-size: @font-size-lg; @action-sheet-item-font-size: @font-size-lg;
@action-sheet-item-text-color: @text-color; @action-sheet-item-text-color: @text-color;
@action-sheet-item-disabled-text-color: @gray; @action-sheet-item-disabled-text-color: @gray-5;
@action-sheet-subname-color: @gray-darker; @action-sheet-subname-color: @gray-7;
@action-sheet-subname-font-size: @font-size-sm; @action-sheet-subname-font-size: @font-size-sm;
@action-sheet-close-icon-size: 18px; @action-sheet-close-icon-size: 18px;
@action-sheet-close-icon-color: @gray-dark; @action-sheet-close-icon-color: @gray-6;
@action-sheet-close-icon-padding: 0 @padding-sm; @action-sheet-close-icon-padding: 0 @padding-sm;
@action-sheet-cancel-padding-top: @padding-xs; @action-sheet-cancel-padding-top: @padding-xs;
@action-sheet-cancel-padding-color: @background-color; @action-sheet-cancel-padding-color: @background-color;
// AddressEdit // AddressEdit
@address-edit-buttons-padding: @padding-xl @padding-md; @address-edit-padding: @padding-sm;
@address-edit-buttons-padding: @padding-xl @padding-base;
@address-edit-button-margin-bottom: @padding-sm; @address-edit-button-margin-bottom: @padding-sm;
@address-edit-detail-finish-color: @blue; @address-edit-detail-finish-color: @blue;
@address-edit-detail-finish-font-size: @font-size-sm; @address-edit-detail-finish-font-size: @font-size-sm;
// AddressList // AddressList
@address-list-disabled-text-color: @gray-dark; @address-list-padding: 12px 7px 100px 17px;
@address-list-disabled-text-font-size: @font-size-sm; @address-list-disabled-text-color: @gray-6;
@address-list-disabled-text-line-height: 30px; @address-list-disabled-text-padding: @padding-base * 5 0 @padding-md;
@address-list-disabled-text-font-size: @font-size-md;
@address-list-disabled-text-line-height: 20px;
@address-list-add-button-z-index: 999; @address-list-add-button-z-index: 999;
@address-list-item-padding: @padding-md; @address-list-item-padding: @padding-sm;
@address-list-item-text-color: @gray-darker; @address-list-item-text-color: @text-color;
@address-list-item-disabled-text-color: @gray-dark; @address-list-item-disabled-text-color: @gray-5;
@address-list-item-font-size: @font-size-sm; @address-list-item-font-size: 13px;
@address-list-item-line-height: 16px; @address-list-item-line-height: 18px;
@address-list-item-radio-icon-color: @red; @address-list-item-radio-icon-color: @red;
@address-list-edit-icon-size: 16px; @address-list-edit-icon-size: 18px;
// Button // Button
@button-mini-height: 22px; @button-mini-height: 22px;
@ -132,10 +139,10 @@
@card-background-color: @background-color-light; @card-background-color: @background-color-light;
@card-thumb-size: 90px; @card-thumb-size: 90px;
@card-title-line-height: 16px; @card-title-line-height: 16px;
@card-desc-color: @gray-darker; @card-desc-color: @gray-7;
@card-desc-line-height: 20px; @card-desc-line-height: 20px;
@card-price-color: @red; @card-price-color: @red;
@card-origin-price-color: @gray-darker; @card-origin-price-color: @gray-7;
@card-origin-price-font-size: @font-size-xs; @card-origin-price-font-size: @font-size-xs;
// Cell // Cell
@ -148,33 +155,33 @@
@cell-border-color: @border-color; @cell-border-color: @border-color;
@cell-active-color: @active-color; @cell-active-color: @active-color;
@cell-required-color: @red; @cell-required-color: @red;
@cell-label-color: @gray-dark; @cell-label-color: @gray-6;
@cell-label-font-size: @font-size-sm; @cell-label-font-size: @font-size-sm;
@cell-label-line-height: 18px; @cell-label-line-height: 18px;
@cell-label-margin-top: 3px; @cell-label-margin-top: 3px;
@cell-value-color: @gray-dark; @cell-value-color: @gray-6;
@cell-icon-size: 16px; @cell-icon-size: 16px;
@cell-right-icon-color: @gray-dark; @cell-right-icon-color: @gray-6;
@cell-large-vertical-padding: @padding-sm; @cell-large-vertical-padding: @padding-sm;
@cell-large-title-font-size: @font-size-lg; @cell-large-title-font-size: @font-size-lg;
@cell-large-label-font-size: @font-size-md; @cell-large-label-font-size: @font-size-md;
// CellGroup // CellGroup
@cell-group-background-color: @white; @cell-group-background-color: @white;
@cell-group-title-color: @gray-dark; @cell-group-title-color: @gray-6;
@cell-group-title-padding: @padding-md @padding-md @padding-xs; @cell-group-title-padding: @padding-md @padding-md @padding-xs;
@cell-group-title-font-size: @font-size-md; @cell-group-title-font-size: @font-size-md;
@cell-group-title-line-height: 16px; @cell-group-title-line-height: 16px;
// Checkbox // Checkbox
@checkbox-size: 20px; @checkbox-size: 20px;
@checkbox-border-color: @gray-light; @checkbox-border-color: @gray-5;
@checkbox-transition-duration: @animation-duration-fast; @checkbox-transition-duration: @animation-duration-fast;
@checkbox-label-margin: @padding-xs; @checkbox-label-margin: @padding-xs;
@checkbox-label-color: @text-color; @checkbox-label-color: @text-color;
@checkbox-checked-icon-color: @blue; @checkbox-checked-icon-color: @blue;
@checkbox-disabled-icon-color: @gray; @checkbox-disabled-icon-color: @gray-5;
@checkbox-disabled-label-color: @gray; @checkbox-disabled-label-color: @gray-5;
@checkbox-disabled-background-color: @border-color; @checkbox-disabled-background-color: @border-color;
// Circle // Circle
@ -188,9 +195,9 @@
@collapse-item-content-padding: @padding-md; @collapse-item-content-padding: @padding-md;
@collapse-item-content-font-size: 13px; @collapse-item-content-font-size: 13px;
@collapse-item-content-line-height: 1.5; @collapse-item-content-line-height: 1.5;
@collapse-item-content-text-color: @gray-dark; @collapse-item-content-text-color: @gray-6;
@collapse-item-content-background-color: @white; @collapse-item-content-background-color: @white;
@collapse-item-title-disabled-color: @gray; @collapse-item-title-disabled-color: @gray-5;
// ContactCard // ContactCard
@contact-card-padding: @padding-md; @contact-card-padding: @padding-md;
@ -199,8 +206,11 @@
@contact-card-value-line-height: 20px; @contact-card-value-line-height: 20px;
// ContactEdit // ContactEdit
@contact-edit-buttons-padding: @padding-xl @padding-md; @contact-edit-padding: @padding-md;
@contact-edit-fields-radius: @border-radius-md;
@contact-edit-buttons-padding: @padding-xl 0;
@contact-edit-button-margin-bottom: @padding-sm; @contact-edit-button-margin-bottom: @padding-sm;
@contact-edit-button-font-size: 16px;
@contact-edit-field-label-width: 65px; @contact-edit-field-label-width: 65px;
// ContactList // ContactList
@ -226,7 +236,7 @@
@coupon-amount-font-size: 24px; @coupon-amount-font-size: 24px;
@coupon-currency-font-size: 50%; @coupon-currency-font-size: 50%;
@coupon-name-font-size: @font-size-lg; @coupon-name-font-size: @font-size-lg;
@coupon-disabled-text-color: @gray-dark; @coupon-disabled-text-color: @gray-6;
@coupon-description-padding: @padding-xs @padding-md; @coupon-description-padding: @padding-xs @padding-md;
@coupon-description-background-color: @background-color-light; @coupon-description-background-color: @background-color-light;
@coupon-description-border-color: @border-color; @coupon-description-border-color: @border-color;
@ -239,7 +249,7 @@
@coupon-list-field-padding: @padding-xs @padding-md; @coupon-list-field-padding: @padding-xs @padding-md;
@coupon-list-exchange-button-height: 32px; @coupon-list-exchange-button-height: 32px;
@coupon-list-empty-image-size: 200px; @coupon-list-empty-image-size: 200px;
@coupon-list-empty-tip-color: @gray-dark; @coupon-list-empty-tip-color: @gray-6;
@coupon-list-empty-tip-font-size: @font-size-md; @coupon-list-empty-tip-font-size: @font-size-md;
@coupon-list-empty-tip-line-height: 20px; @coupon-list-empty-tip-line-height: 20px;
@ -258,13 +268,13 @@
@dialog-message-font-size: @font-size-md; @dialog-message-font-size: @font-size-md;
@dialog-message-line-height: 20px; @dialog-message-line-height: 20px;
@dialog-message-max-height: 60vh; @dialog-message-max-height: 60vh;
@dialog-has-title-message-text-color: @gray-darker; @dialog-has-title-message-text-color: @gray-7;
@dialog-has-title-message-padding-top: @padding-sm; @dialog-has-title-message-padding-top: @padding-sm;
@dialog-confirm-button-text-color: @blue; @dialog-confirm-button-text-color: @blue;
// Divider // Divider
@divider-margin: @padding-md 0; @divider-margin: @padding-md 0;
@divider-text-color: @gray-dark; @divider-text-color: @gray-6;
@divider-font-size: @font-size-md; @divider-font-size: @font-size-md;
@divider-line-height: 24px; @divider-line-height: 24px;
@divider-border-color: @border-color; @divider-border-color: @border-color;
@ -278,7 +288,7 @@
@dropdown-menu-title-font-size: 15px; @dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: @text-color; @dropdown-menu-title-text-color: @text-color;
@dropdown-menu-title-active-text-color: @blue; @dropdown-menu-title-active-text-color: @blue;
@dropdown-menu-title-disabled-text-color: @gray-dark; @dropdown-menu-title-disabled-text-color: @gray-6;
@dropdown-menu-title-padding: 0 @padding-xs; @dropdown-menu-title-padding: 0 @padding-xs;
@dropdown-menu-title-line-height: 18px; @dropdown-menu-title-line-height: 18px;
@dropdown-menu-option-active-color: @blue; @dropdown-menu-option-active-color: @blue;
@ -288,16 +298,16 @@
@field-label-width: 90px; @field-label-width: 90px;
@field-input-text-color: @text-color; @field-input-text-color: @text-color;
@field-input-error-text-color: @red; @field-input-error-text-color: @red;
@field-input-disabled-text-color: @gray-dark; @field-input-disabled-text-color: @gray-6;
@field-placeholder-text-color: @gray-dark; @field-placeholder-text-color: @gray-6;
@field-icon-size: 16px; @field-icon-size: 16px;
@field-clear-icon-size: 16px; @field-clear-icon-size: 16px;
@field-clear-icon-color: @gray; @field-clear-icon-color: @gray-5;
@field-right-icon-color: @gray-dark; @field-right-icon-color: @gray-6;
@field-error-message-color: @red; @field-error-message-color: @red;
@field-error-message-text-color: 12px; @field-error-message-text-color: 12px;
@field-text-area-min-height: 60px; @field-text-area-min-height: 60px;
@field-word-limit-color: @gray-darker; @field-word-limit-color: @gray-7;
@field-word-limit-font-size: @font-size-sm; @field-word-limit-font-size: @font-size-sm;
@field-word-limit-line-height: 16px; @field-word-limit-line-height: 16px;
@ -306,7 +316,7 @@
@grid-item-content-background-color: @white; @grid-item-content-background-color: @white;
@grid-item-content-active-color: @active-color; @grid-item-content-active-color: @active-color;
@grid-item-icon-size: 28px; @grid-item-icon-size: 28px;
@grid-item-text-color: @gray-darker; @grid-item-text-color: @gray-7;
@grid-item-text-font-size: @font-size-sm; @grid-item-text-font-size: @font-size-sm;
// GoodsAction // GoodsAction
@ -317,7 +327,7 @@
@goods-action-icon-size: 18px; @goods-action-icon-size: 18px;
@goods-action-icon-font-size: @font-size-xs; @goods-action-icon-font-size: @font-size-xs;
@goods-action-icon-active-color: @active-color; @goods-action-icon-active-color: @active-color;
@goods-action-icon-text-color: @gray-darker; @goods-action-icon-text-color: @gray-7;
@goods-action-button-height: 40px; @goods-action-button-height: 40px;
@goods-action-button-warning-color: @gradient-orange; @goods-action-button-warning-color: @gradient-orange;
@goods-action-button-danger-color: @gradient-red; @goods-action-button-danger-color: @gradient-red;
@ -348,7 +358,7 @@
@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; @info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
// Image // Image
@image-placeholder-text-color: @gray-dark; @image-placeholder-text-color: @gray-6;
@image-placeholder-font-size: @font-size-md; @image-placeholder-font-size: @font-size-md;
@image-placeholder-background-color: @background-color; @image-placeholder-background-color: @background-color;
@ -359,14 +369,14 @@
// List // List
@list-icon-margin-right: 5px; @list-icon-margin-right: 5px;
@list-text-color: @gray-dark; @list-text-color: @gray-6;
@list-text-font-size: @font-size-md; @list-text-font-size: @font-size-md;
@list-text-line-height: 50px; @list-text-line-height: 50px;
// Loading // Loading
@loading-text-color: @gray-dark; @loading-text-color: @gray-6;
@loading-text-font-size: @font-size-md; @loading-text-font-size: @font-size-md;
@loading-spinner-color: @gray; @loading-spinner-color: @gray-5;
@loading-spinner-size: 30px; @loading-spinner-size: 30px;
@loading-spinner-animation-duration: .8s; @loading-spinner-animation-duration: .8s;
@ -402,11 +412,11 @@
// NumberKeyboard // NumberKeyboard
@number-keyboard-background-color: @white; @number-keyboard-background-color: @white;
@number-keyboard-key-height: 54px; @number-keyboard-key-height: 54px;
@number-keyboard-key-background: #ebedf0; @number-keyboard-key-background: @gray-3;
@number-keyboard-key-font-size: 24px; @number-keyboard-key-font-size: 24px;
@number-keyboard-key-active-color: @active-color; @number-keyboard-key-active-color: @active-color;
@number-keyboard-delete-font-size: @font-size-lg; @number-keyboard-delete-font-size: @font-size-lg;
@number-keyboard-title-color: @gray-darker; @number-keyboard-title-color: @gray-7;
@number-keyboard-title-height: 30px; @number-keyboard-title-height: 30px;
@number-keyboard-title-font-size: @font-size-md; @number-keyboard-title-font-size: @font-size-md;
@number-keyboard-close-padding: 0 @padding-md; @number-keyboard-close-padding: 0 @padding-md;
@ -427,10 +437,10 @@
@pagination-font-size: @font-size-md; @pagination-font-size: @font-size-md;
@pagination-item-width: 36px; @pagination-item-width: 36px;
@pagination-item-default-color: @blue; @pagination-item-default-color: @blue;
@pagination-item-disabled-color: @gray-darker; @pagination-item-disabled-color: @gray-7;
@pagination-item-disabled-background-color: @background-color; @pagination-item-disabled-background-color: @background-color;
@pagination-background-color: @white; @pagination-background-color: @white;
@pagination-desc-color: @gray-darker; @pagination-desc-color: @gray-7;
@pagination-disabled-opacity: @disabled-opacity; @pagination-disabled-opacity: @disabled-opacity;
// Panel // Panel
@ -444,7 +454,7 @@
@password-input-font-size: 20px; @password-input-font-size: 20px;
@password-input-border-radius: 6px; @password-input-border-radius: 6px;
@password-input-background-color: @white; @password-input-background-color: @white;
@password-input-info-color: @gray-dark; @password-input-info-color: @gray-6;
@password-input-info-font-size: @font-size-md; @password-input-info-font-size: @font-size-md;
@password-input-error-info-color: @red; @password-input-error-info-color: @red;
@password-input-dot-size: 10px; @password-input-dot-size: 10px;
@ -469,14 +479,14 @@
@popup-transition: transform @animation-duration-base ease-out; @popup-transition: transform @animation-duration-base ease-out;
@popup-round-border-radius: 20px; @popup-round-border-radius: 20px;
@popup-close-icon-size: 18px; @popup-close-icon-size: 18px;
@popup-close-icon-color: @gray-dark; @popup-close-icon-color: @gray-6;
@popup-close-icon-margin: 16px; @popup-close-icon-margin: 16px;
@popup-close-icon-z-index: 1; @popup-close-icon-z-index: 1;
// Progress // Progress
@progress-height: 4px; @progress-height: 4px;
@progress-color: @blue; @progress-color: @blue;
@progress-background-color: @gray-light; @progress-background-color: @gray-3;
@progress-pivot-padding: 0 5px; @progress-pivot-padding: 0 5px;
@progress-pivot-text-color: @white; @progress-pivot-text-color: @white;
@progress-pivot-font-size: @font-size-xs; @progress-pivot-font-size: @font-size-xs;
@ -486,17 +496,17 @@
// PullRefresh // PullRefresh
@pull-refresh-head-height: 50px; @pull-refresh-head-height: 50px;
@pull-refresh-head-font-size: @font-size-md; @pull-refresh-head-font-size: @font-size-md;
@pull-refresh-head-text-color: @gray-dark; @pull-refresh-head-text-color: @gray-6;
// Radio // Radio
@radio-size: 20px; @radio-size: 20px;
@radio-border-color: @gray-light; @radio-border-color: @gray-5;
@radio-transition-duration: @animation-duration-fast; @radio-transition-duration: @animation-duration-fast;
@radio-label-margin: @padding-xs; @radio-label-margin: @padding-xs;
@radio-label-color: @text-color; @radio-label-color: @text-color;
@radio-checked-icon-color: @blue; @radio-checked-icon-color: @blue;
@radio-disabled-icon-color: @gray; @radio-disabled-icon-color: @gray-5;
@radio-disabled-label-color: @gray; @radio-disabled-label-color: @gray-5;
@radio-disabled-background-color: @border-color; @radio-disabled-background-color: @border-color;
// Rate // Rate
@ -510,7 +520,7 @@
@search-label-padding: 0 5px; @search-label-padding: 0 5px;
@search-label-color: @text-color; @search-label-color: @text-color;
@search-label-font-size: @font-size-md; @search-label-font-size: @font-size-md;
@search-left-icon-color: @gray-dark; @search-left-icon-color: @gray-6;
@search-action-padding: 0 @padding-xs; @search-action-padding: 0 @padding-xs;
@search-action-text-color: @text-color; @search-action-text-color: @text-color;
@search-action-font-size: @font-size-md; @search-action-font-size: @font-size-md;
@ -522,7 +532,7 @@
@sidebar-font-size: @font-size-md; @sidebar-font-size: @font-size-md;
@sidebar-line-height: 20px; @sidebar-line-height: 20px;
@sidebar-text-color: @text-color; @sidebar-text-color: @text-color;
@sidebar-disabled-text-color: @gray; @sidebar-disabled-text-color: @gray-5;
@sidebar-padding: 20px @padding-sm 20px @padding-xs; @sidebar-padding: 20px @padding-sm 20px @padding-xs;
@sidebar-active-color: @active-color; @sidebar-active-color: @active-color;
@sidebar-background-color: @background-color-light; @sidebar-background-color: @background-color-light;
@ -540,7 +550,7 @@
// Slider // Slider
@slider-active-background-color: @blue; @slider-active-background-color: @blue;
@slider-inactive-background-color: @gray-light; @slider-inactive-background-color: @gray-3;
@slider-disabled-opacity: @disabled-opacity; @slider-disabled-opacity: @disabled-opacity;
@slider-button-width: 24px; @slider-button-width: 24px;
@slider-button-height: 24px; @slider-button-height: 24px;
@ -549,7 +559,7 @@
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5); @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
// Step // Step
@step-text-color: @gray-dark; @step-text-color: @gray-6;
@step-process-text-color: @text-color; @step-process-text-color: @text-color;
@step-font-size: @font-size-md; @step-font-size: @font-size-md;
@step-line-color: @border-color; @step-line-color: @border-color;
@ -557,7 +567,7 @@
@step-finish-text-color: @text-color; @step-finish-text-color: @text-color;
@step-icon-size: 12px; @step-icon-size: 12px;
@step-circle-size: 5px; @step-circle-size: 5px;
@step-circle-color: @gray-dark; @step-circle-color: @gray-6;
@step-horizontal-title-font-size: @font-size-sm; @step-horizontal-title-font-size: @font-size-sm;
// Steps // Steps
@ -570,13 +580,13 @@
@stepper-active-color: #e8e8e8; @stepper-active-color: #e8e8e8;
@stepper-background-color: @active-color; @stepper-background-color: @active-color;
@stepper-button-icon-color: @text-color; @stepper-button-icon-color: @text-color;
@stepper-button-disabled-color: #f7f8fa; @stepper-button-disabled-color: @background-color;
@stepper-button-disabled-icon-color: @gray; @stepper-button-disabled-icon-color: @gray-5;
@stepper-input-width: 32px; @stepper-input-width: 32px;
@stepper-input-height: 28px; @stepper-input-height: 28px;
@stepper-input-font-size: @font-size-md; @stepper-input-font-size: @font-size-md;
@stepper-input-text-color: @text-color; @stepper-input-text-color: @text-color;
@stepper-input-disabled-text-color: @gray; @stepper-input-disabled-text-color: @gray-5;
@stepper-input-disabled-background-color: @active-color; @stepper-input-disabled-background-color: @active-color;
@stepper-border-radius: @border-radius-md; @stepper-border-radius: @border-radius-md;
@ -631,16 +641,16 @@
// TabbarItem // TabbarItem
@tabbar-item-font-size: @font-size-sm; @tabbar-item-font-size: @font-size-sm;
@tabbar-item-text-color: @gray-darker; @tabbar-item-text-color: @gray-7;
@tabbar-item-active-color: @blue; @tabbar-item-active-color: @blue;
@tabbar-item-line-height: 1; @tabbar-item-line-height: 1;
@tabbar-item-icon-size: 18px; @tabbar-item-icon-size: 18px;
@tabbar-item-margin-bottom: 5px; @tabbar-item-margin-bottom: 5px;
// Tab // Tab
@tab-text-color: @gray-darker; @tab-text-color: @gray-7;
@tab-active-text-color: @text-color; @tab-active-text-color: @text-color;
@tab-disabled-text-color: @gray; @tab-disabled-text-color: @gray-5;
@tab-font-size: @font-size-md; @tab-font-size: @font-size-md;
// Tabs // Tabs
@ -663,7 +673,7 @@
@tag-primary-color: @blue; @tag-primary-color: @blue;
@tag-success-color: @green; @tag-success-color: @green;
@tag-warning-color: @orange; @tag-warning-color: @orange;
@tag-default-color: @gray-dark; @tag-default-color: @gray-6;
@tag-plain-background-color: @white; @tag-plain-background-color: @white;
// Toast // Toast
@ -690,29 +700,29 @@
@tree-select-nav-item-padding: @padding-sm @padding-xs @padding-sm @padding-sm; @tree-select-nav-item-padding: @padding-sm @padding-xs @padding-sm @padding-sm;
@tree-select-item-height: 44px; @tree-select-item-height: 44px;
@tree-select-item-active-color: @red; @tree-select-item-active-color: @red;
@tree-select-item-disabled-color: @gray; @tree-select-item-disabled-color: @gray-5;
// Uploader // Uploader
@uploader-size: 80px; @uploader-size: 80px;
@uploader-icon-size: 24px; @uploader-icon-size: 24px;
@uploader-icon-color: @gray-dark; @uploader-icon-color: @gray-6;
@uploader-text-color: @gray-dark; @uploader-text-color: @gray-6;
@uploader-text-font-size: @font-size-sm; @uploader-text-font-size: @font-size-sm;
@uploader-upload-border-color: @gray-light; @uploader-upload-border-color: @gray-3;
@uploader-upload-border-radius: 4px; @uploader-upload-border-radius: 4px;
@uploader-upload-background-color: @white; @uploader-upload-background-color: @white;
@uploader-delete-color: @gray-dark; @uploader-delete-color: @gray-6;
@uploader-delete-icon-size: 18px; @uploader-delete-icon-size: 18px;
@uploader-delete-background-color: @white; @uploader-delete-background-color: @white;
@uploader-file-background-color: @background-color; @uploader-file-background-color: @background-color;
@uploader-file-icon-size: 20px; @uploader-file-icon-size: 20px;
@uploader-file-icon-color: @gray-darker; @uploader-file-icon-color: @gray-7;
@uploader-file-name-padding: 0 @padding-base; @uploader-file-name-padding: 0 @padding-base;
@uploader-file-name-margin-top: @padding-xs; @uploader-file-name-margin-top: @padding-xs;
@uploader-file-name-font-size: @font-size-sm; @uploader-file-name-font-size: @font-size-sm;
@uploader-file-name-text-color: @gray-darker; @uploader-file-name-text-color: @gray-7;
// Sku // Sku
@sku-item-background-color: #f7f8fa; @sku-item-background-color: @background-color;
@sku-icon-gray-color: #dcdde0; @sku-icon-gray-color: #dcdde0;
@sku-upload-mask-color: rgba(50, 50, 51, .8); @sku-upload-mask-color: rgba(50, 50, 51, .8);

30
src/swipe/README.md
View File

@ -144,34 +144,34 @@ export default {
### Swipe Events ### Swipe Events
| Event | Description | Arguments | | Event | Description | Arguments | Version |
|------|------|------| |------|------|------|------|
| change | Triggered when current swipe change | index: index of current swipe | | change | Triggered when current swipe change | index: index of current swipe | - |
### SwipeItem Events ### SwipeItem Events
| Event | Description | Arguments | | Event | Description | Arguments | Version |
|------|------|------| |------|------|------|------|
| click | Triggered when clicked | event: Event | | click | Triggered when clicked | event: Event | - |
### Swipe Methods ### Swipe Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods
| Name | Description | Attribute | Return value | | Name | Description | Attribute | Return value | Version |
|------|------|------|------| |------|------|------|------|------|
| swipeTo | Swipe to target index | index: target index, options: Options | void | | swipeTo | Swipe to target index | index: target index, options: Options | void | - |
| resize | Resize Swipe when container element resized | - | void | | resize | Resize Swipe when container element resized | - | void | 2.2.14 |
### swipeTo Options ### swipeTo Options
| Name | Description | Type | | Name | Description | Type |
|------|------|------| |------|------|------|------|
| immediate | Whether to skip animation | *boolean* | | immediate | Whether to skip animation | *boolean* |
### Swipe Slots ### Swipe Slots
| Name | Description | | Name | Description | Version |
|------|------| |------|------|------|
| default | Content | | default | Content | - |
| indicator | Custom indicator | | indicator | Custom indicator | - |

28
src/swipe/README.zh-CN.md
View File

@ -150,24 +150,24 @@ export default {
### Swipe Events ### Swipe Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 | 版本 |
|------|------|------| |------|------|------|------|
| change | 每一页轮播结束后触发 | index, 当前页的索引 | | change | 每一页轮播结束后触发 | index, 当前页的索引 | - |
### SwipeItem Events ### SwipeItem Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 | 版本 |
|------|------|------| |------|------|------|------|
| click | 点击时触发 | event: Event | | click | 点击时触发 | event: Event | - |
### Swipe 方法 ### Swipe 方法
通过 [ref](https://cn.vuejs.org/v2/api/#ref) 可以获取到 Swipe 实例并调用实例方法 通过 [ref](https://cn.vuejs.org/v2/api/#ref) 可以获取到 Swipe 实例并调用实例方法
| 方法名 | 说明 | 参数 | 返回值 | | 方法名 | 说明 | 参数 | 返回值 | 版本 |
|------|------|------|------| |------|------|------|------|------|
| swipeTo | 滚动到目标位置 | index: number, options: Options | void | | swipeTo | 滚动到目标位置 | index: number, options: Options | void | - |
| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void | | resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void | 2.2.14 |
### swipeTo Options 格式 ### swipeTo Options 格式
@ -177,7 +177,7 @@ export default {
### Swipe Slots ### Swipe Slots
| 名称 | 说明 | | 名称 | 说明 | 版本 |
|------|------| |------|------|------|
| default | 轮播内容 | | default | 轮播内容 | - |
| indicator | 自定义指示器 | | indicator | 自定义指示器 | - |

4
src/switch/index.tsx
View File

@ -1,5 +1,5 @@
import { createNamespace, addUnit } from '../utils'; import { createNamespace, addUnit } from '../utils';
import { BLUE, GRAY_DARK } from '../utils/constant'; import { BLUE } from '../utils/constant';
import { switchProps, SharedSwitchProps } from './shared'; import { switchProps, SharedSwitchProps } from './shared';
import { emit, inherit } from '../utils/functional'; import { emit, inherit } from '../utils/functional';
import Loading from '../loading'; import Loading from '../loading';
@ -38,7 +38,7 @@ function Switch(
backgroundColor: checked ? activeColor : inactiveColor backgroundColor: checked ? activeColor : inactiveColor
}; };
const loadingColor = checked ? activeColor || BLUE : inactiveColor || GRAY_DARK; const loadingColor = checked ? activeColor || BLUE : inactiveColor || '';
function onClick(event: PointerEvent) { function onClick(event: PointerEvent) {
emit(ctx, 'click', event); emit(ctx, 'click', event);

2
src/utils/constant.ts
View File

@ -3,8 +3,6 @@ export const RED = '#ee0a24';
export const BLUE = '#1989fa'; export const BLUE = '#1989fa';
export const GREEN = '#07c160'; export const GREEN = '#07c160';
export const WHITE = '#fff'; export const WHITE = '#fff';
export const GRAY = '#c9c9c9';
export const GRAY_DARK = '#969799';
// border // border
export const BORDER = 'van-hairline'; export const BORDER = 'van-hairline';

19
types/toast.d.ts vendored
View File

@ -2,20 +2,23 @@ import Vue from 'vue';
import { VanPopupMixin } from './mixins/popup'; import { VanPopupMixin } from './mixins/popup';
type ToastMessage = string | number; type ToastMessage = string | number;
type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'html';
type ToastPosition = 'top' | 'middle' | 'bottom';
type ToastLoadingType = 'circular' | 'spinner';
export type ToastOptions = { export type ToastOptions = {
icon?: string; icon?: string;
type?: string; type?: ToastType;
mask?: boolean; mask?: boolean;
message?: ToastMessage; message?: ToastMessage;
onClose?: () => void; onClose?: () => void;
onOpened?: () => void; onOpened?: () => void;
overlay?: boolean; overlay?: boolean;
duration?: number; duration?: number;
position?: string; position?: ToastPosition;
className?: any; className?: any;
transition?: string; transition?: string;
loadingType?: string; loadingType?: ToastLoadingType;
forbidClick?: boolean; forbidClick?: boolean;
closeOnClick?: boolean; closeOnClick?: boolean;
closeOnClickOverlay?: boolean; closeOnClickOverlay?: boolean;
@ -23,9 +26,9 @@ export type ToastOptions = {
}; };
export interface VanToast extends Vue, VanPopupMixin { export interface VanToast extends Vue, VanPopupMixin {
type: string; type: ToastType;
position: string; position: ToastPosition;
loadingType: string; loadingType: ToastLoadingType;
forbidClick: boolean; forbidClick: boolean;
message: ToastMessage; message: ToastMessage;
clear(): void; clear(): void;
@ -38,8 +41,8 @@ export interface Toast {
fail(options?: ToastOptions | ToastMessage): VanToast; fail(options?: ToastOptions | ToastMessage): VanToast;
clear(all?: boolean): void; clear(all?: boolean): void;
install(): void; install(): void;
setDefaultOptions(options: ToastOptions): void; setDefaultOptions(options: string | ToastOptions): void;
resetDefaultOptions(): void; resetDefaultOptions(options?: string): void;
allowMultiple(allow: boolean): void; allowMultiple(allow: boolean): void;
} }