diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md index 224cbb6e6..f7b91e797 100644 --- a/docs/markdown/quickstart.zh-CN.md +++ b/docs/markdown/quickstart.zh-CN.md @@ -29,6 +29,17 @@ npm i vant -S yarn add vant ``` +### 示例工程 + +我们提供了一个基于 Vue Cli 的[示例工程](https://github.com/youzan/vant-demo),示例工程会帮助你了解如下内容: + +- 基于 Vant 搭建单页面应用,配置按需引入组件 +- 配置基于 Rem 的适配方案 +- 配置基于 Viewport 的适配方案 +- 配置基于 TypeScript 的工程 +- 配置自定义主题色方案 + + ## 引入组件 ### 方式一. 自动按需引入组件 (推荐) diff --git a/docs/markdown/theme.en-US.md b/docs/markdown/theme.en-US.md index dfeeae732..d1e7e72e0 100644 --- a/docs/markdown/theme.en-US.md +++ b/docs/markdown/theme.en-US.md @@ -15,7 +15,7 @@ There are some basic variables below, all available variables could be found in @text-color: #323233; @border-color: #ebedf0; @active-color: #f2f3f5; -@background-color: #f8f8f8; +@background-color: #f7f8fa; @background-color-light: #fafafa; ``` diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md index 0cf53fd5a..b9f96e1fd 100644 --- a/docs/markdown/theme.zh-CN.md +++ b/docs/markdown/theme.zh-CN.md @@ -19,7 +19,7 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理,并内置 @text-color: #323233; @border-color: #ebedf0; @active-color: #f2f3f5; -@background-color: #f8f8f8; +@background-color: #f7f8fa; @background-color-light: #fafafa; ``` diff --git a/docs/site/components/DemoPages.vue b/docs/site/components/DemoPages.vue deleted file mode 100644 index 218de7a87..000000000 --- a/docs/site/components/DemoPages.vue +++ /dev/null @@ -1,136 +0,0 @@ - - - - - diff --git a/docs/site/doc.config.js b/docs/site/doc.config.js index 5ac86cacb..40044c6d7 100644 --- a/docs/site/doc.config.js +++ b/docs/site/doc.config.js @@ -75,10 +75,6 @@ export default { path: '/style-guide', title: '风格指南' }, - { - path: '/demo', - title: '示例工程' - }, { path: '/locale', title: '国际化' diff --git a/docs/site/mobile/App.vue b/docs/site/mobile/App.vue index 3a0d2915b..33a0fc5d6 100644 --- a/docs/site/mobile/App.vue +++ b/docs/site/mobile/App.vue @@ -70,7 +70,7 @@ body { color: @text-color; font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif; line-height: 1; - background-color: #f8f8f8; + background-color: #f7f8fa; -webkit-font-smoothing: antialiased; } @@ -89,7 +89,7 @@ body { } .van-icon { - color: @gray-dark; + color: @gray-6; font-size: 24px; cursor: pointer; } diff --git a/docs/site/router.js b/docs/site/router.js index 1c8ee0456..223b5ff01 100644 --- a/docs/site/router.js +++ b/docs/site/router.js @@ -1,7 +1,6 @@ import Vue from 'vue'; import docConfig from './doc.config'; import DemoList from './components/DemoList'; -import DemoPages from './components/DemoPages'; import { demoWrapper } from './mobile/demo-common'; import { initIframeRouter } from './utils/iframe-router'; @@ -35,9 +34,7 @@ const registerRoute = ({ mobile, componentMap }) => { path = path.replace('/', ''); let component; - if (path === 'demo') { - component = DemoPages; - } else if (mobile) { + if (mobile) { const module = componentMap[`./${path}/demo/index.vue`]; if (module) { diff --git a/packages/vant-touch-emulator/changelog.md b/packages/vant-touch-emulator/changelog.md new file mode 100644 index 000000000..6434ef05a --- /dev/null +++ b/packages/vant-touch-emulator/changelog.md @@ -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 diff --git a/packages/vant-touch-emulator/index.js b/packages/vant-touch-emulator/index.js index e35532983..92674603c 100644 --- a/packages/vant-touch-emulator/index.js +++ b/packages/vant-touch-emulator/index.js @@ -78,34 +78,30 @@ function 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 * @param touchType * @returns {Function} */ + + +var initiated = false; function onMouse(touchType) { return function(ev) { // prevent mouse events - if (ev.which !== 1) { - return; + if (ev.type === 'mousedown') { + 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, @@ -173,8 +169,6 @@ function getActiveTouches(mouseEv) { * TouchEmulator initializer */ function TouchEmulator() { - fakeTouchSupport(); - window.addEventListener('mousedown', onMouse('touchstart'), true); window.addEventListener('mousemove', onMouse('touchmove'), true); window.addEventListener('mouseup', onMouse('touchend'), true); diff --git a/packages/vant-touch-emulator/package.json b/packages/vant-touch-emulator/package.json index cd89a4e20..5a0e56734 100644 --- a/packages/vant-touch-emulator/package.json +++ b/packages/vant-touch-emulator/package.json @@ -1,6 +1,6 @@ { "name": "@vant/touch-emulator", - "version": "1.1.0", + "version": "1.2.0", "description": "Vant touch emulator", "main": "index.js", "publishConfig": { diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less index a2d3637c2..6e54ae3aa 100644 --- a/src/action-sheet/index.less +++ b/src/action-sheet/index.less @@ -8,6 +8,7 @@ &__cancel { display: block; width: 100%; + padding: 0; font-size: @action-sheet-item-font-size; line-height: @action-sheet-item-height; text-align: center; diff --git a/src/address-edit/Detail.js b/src/address-edit/Detail.js index 8d8485682..0ecf36720 100644 --- a/src/address-edit/Detail.js +++ b/src/address-edit/Detail.js @@ -17,6 +17,12 @@ export default createComponent({ showSearchResult: Boolean }, + computed: { + shouldShowSearchResult() { + return this.focused && this.searchResult && this.showSearchResult; + } + }, + methods: { onSelect(express) { this.$emit('select-search', express); @@ -42,19 +48,31 @@ export default createComponent({ }, genSearchResult() { - const { searchResult } = this; - const show = this.focused && searchResult && this.showSearchResult; - if (show) { + const { value, shouldShowSearchResult, searchResult } = this; + if (shouldShowSearchResult) { return searchResult.map(express => ( { this.onSelect(express); }} + scopedSlots={{ + title: () => { + if (express.name) { + const text = express.name.replace( + value, + `${value}` + ); + + return
; + } + } + }} /> )); } @@ -72,6 +90,7 @@ export default createComponent({ type="textarea" value={this.value} error={this.error} + border={!this.shouldShowSearchResult} label={t('label')} maxlength={this.detailMaxlength} placeholder={t('placeholder')} diff --git a/src/address-edit/index.js b/src/address-edit/index.js index 55d35a196..f26643071 100644 --- a/src/address-edit/index.js +++ b/src/address-edit/index.js @@ -251,64 +251,69 @@ export default createComponent({ return (
- - - { - this.showAreaPopup = true; - }} - /> - { - this.$emit('select-search', event); - }} - /> - {this.showPostal && ( +
- )} - {this.slots()} + + { + this.showAreaPopup = true; + }} + /> + { + this.$emit('select-search', event); + }} + /> + {this.showPostal && ( + + )} + {this.slots()} +
{this.showSetDefault && (
+
diff --git a/src/address-edit/test/__snapshots__/index.spec.js.snap b/src/address-edit/test/__snapshots__/index.spec.js.snap index 4d3906873..1e0659574 100644 --- a/src/address-edit/test/__snapshots__/index.spec.js.snap +++ b/src/address-edit/test/__snapshots__/index.spec.js.snap @@ -2,75 +2,85 @@ exports[`create a AddressEdit 1`] = `
-
-
姓名
-
-
+
+
+
姓名
+
+
+
-
-
-
电话
-
-
+
+
电话
+
+
+
-
-
-
地区
-
-
+
+
地区
+
+
+
+
+
+
-
-
-
-
-
详细地址
-
-
+
+
+
+
详细地址
+
+
+
-
+
`; exports[`create a AddressEdit with props 1`] = `
-
-
姓名
-
-
+
+
+
姓名
+
+
+
-
-
-
电话
-
-
+
+
电话
+
+
+
-
-
-
地区
-
-
-
-
-
-
-
-
详细地址
-
-
+
+
地区
+
+
+
+
-
-
-
邮政编码
-
-
+
+
+
+
详细地址
+
+
+
+
+
+
+
+
邮政编码
+
+
+
-
+
设为默认收货地址
@@ -78,47 +88,52 @@ exports[`create a AddressEdit with props 1`] = `
-
+
`; exports[`set-default 1`] = `
-
-
姓名
-
-
+
+
+
姓名
+
+
+
-
-
-
电话
-
-
+
+
电话
+
+
+
-
-
-
地区
-
-
-
-
-
-
-
-
详细地址
-
-
+
+
地区
+
+
+
+
-
-
-
邮政编码
-
-
+
+
+
+
详细地址
+
+
+
+
+
+
+
+
邮政编码
+
+
+
-
+
设为默认收货地址
@@ -126,47 +141,52 @@ exports[`set-default 1`] = `
-
+
`; exports[`show area component 1`] = `
-
-
姓名
-
-
+
+
+
姓名
+
+
+
-
-
-
电话
-
-
+
+
电话
+
+
+
-
-
-
地区
-
-
-
-
-
-
-
-
详细地址
-
-
+
+
地区
+
+
+
+
-
-
-
邮政编码
-
-
+
+
+
+
详细地址
+
+
+
+
+
+
+
+
邮政编码
+
+
+
-
+
设为默认收货地址
@@ -174,47 +194,52 @@ exports[`show area component 1`] = `
-
+
`; exports[`show area component 2`] = `
-
-
姓名
-
-
+
+
+
姓名
+
+
+
-
-
-
电话
-
-
+
+
电话
+
+
+
-
-
-
地区
-
-
-
-
-
-
-
-
详细地址
-
-
+
+
地区
+
+
+
+
-
-
-
邮政编码
-
-
+
+
+
+
详细地址
+
+
+
+
+
+
+
+
邮政编码
+
+
+
-
+
设为默认收货地址
@@ -222,40 +247,45 @@ exports[`show area component 2`] = `
-
+
`; exports[`valid area placeholder confirm 1`] = `
-
-
姓名
-
-
+
+
+
姓名
+
+
+
-
-
-
电话
-
-
+
+
电话
+
+
+
-
-
-
地区
-
-
+
+
地区
+
+
+
+
+
+
-
-
-
-
-
详细地址
-
-
+
+
+
+
详细地址
+
+
+
-
+
`; diff --git a/src/address-list/Item.tsx b/src/address-list/Item.tsx index c5792e6c6..1ac884c32 100644 --- a/src/address-list/Item.tsx +++ b/src/address-list/Item.tsx @@ -3,6 +3,7 @@ import { emit, inherit } from '../utils/functional'; import Icon from '../icon'; import Cell from '../cell'; import Radio from '../radio'; +import Tag from '../tag'; // Types import { CreateElement, RenderContext } from 'vue/types'; @@ -13,12 +14,14 @@ export type AddressItemData = { tel: string | number; name: string; address: string; + isDefault: boolean; }; export type AddressItemProps = { data: AddressItemData; disabled?: boolean; switchable?: boolean; + defaultTagText?: string; }; export type AddressItemEvents = { @@ -60,7 +63,14 @@ function AddressItem( const genContent = () => { const { data } = props; const Info = [ -
{`${data.name},${data.tel}`}
, +
+ {`${data.name} ${data.tel}`} + {data.isDefault && props.defaultTagText && ( + + {props.defaultTagText} + + )} +
,
{data.address}
]; @@ -77,6 +87,7 @@ function AddressItem( (AddressItem); diff --git a/src/address-list/README.md b/src/address-list/README.md index 95bb6a10b..7187257af 100644 --- a/src/address-list/README.md +++ b/src/address-list/README.md @@ -77,6 +77,7 @@ export default { | disabled-text | Disabled text | *string* | - | - | | switchable | Whether to allow switch address | *boolean* | `true` | - | | add-button-text | Add button text | *string* | `Add new address` | - | +| default-tag-text | Default tag text | *string* | - | - | ### Events @@ -97,6 +98,7 @@ export default { | name | Name | *string* | | tel | Phone | *string \| number* | | address | Address | *string* | +| isDefault | Is default address | *boolean* | ### Slots diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md index f1e0e9a18..1bdc323bb 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -78,6 +78,7 @@ export default { | disabled-text | 不可配送提示文案 | *string* | - | - | | switchable | 是否允许切换地址 | *boolean* | `true` | - | | add-button-text | 底部按钮文字 | *string* | `新增地址` | - | +| default-tag-text | 默认地址标签文字 | *string* | - | - | ### Events @@ -98,6 +99,7 @@ export default { | name | 收货人姓名 | *string* | | tel | 收货人手机号 | *string \| number* | | address | 收货地址 | *string* | +| isDefault | 是否为默认地址 | *boolean* | ### Slots diff --git a/src/address-list/demo/index.vue b/src/address-list/demo/index.vue index 662900167..d1982cba2 100644 --- a/src/address-list/demo/index.vue +++ b/src/address-list/demo/index.vue @@ -3,6 +3,7 @@ { emit(ctx, disabled ? 'select-disabled' : 'select', item, index); @@ -67,16 +69,18 @@ function AddressList( {props.disabledText &&
{props.disabledText}
} {DisabledList} {slots.default && slots.default()} -
); } @@ -90,7 +94,8 @@ AddressList.props = { switchable: { type: Boolean, default: true - } + }, + defaultTagText: String }; export default createComponent(AddressList); diff --git a/src/address-list/test/__snapshots__/demo.spec.js.snap b/src/address-list/test/__snapshots__/demo.spec.js.snap index bd2ed0002..6bf8e5fa2 100644 --- a/src/address-list/test/__snapshots__/demo.spec.js.snap +++ b/src/address-list/test/__snapshots__/demo.spec.js.snap @@ -5,34 +5,37 @@ exports[`renders demo correctly 1`] = `
-
+
张三 13000000000默认
-
- -
-
-
- -
- -
-
-
以下地址超出配送范围
-
-
-
王五,1320000000
-
浙江省杭州市滨江区江南大道 15 号
+
浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室
+
-
+
+
+
+ +
+ +
+
以下地址超出配送范围
+
+
+
王五 1320000000
+
浙江省杭州市滨江区江南大道 15 号
+
+ +
+
+
`; diff --git a/src/address-list/test/__snapshots__/index.spec.js.snap b/src/address-list/test/__snapshots__/index.spec.js.snap index e11f36c3a..867138aca 100644 --- a/src/address-list/test/__snapshots__/index.spec.js.snap +++ b/src/address-list/test/__snapshots__/index.spec.js.snap @@ -3,20 +3,21 @@ exports[`unswitchable 1`] = `
-
+
-
张三,13000000000
+
张三 13000000000
浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室
-
+
-
李四,1310000000
+
李四 1310000000
浙江省杭州市拱墅区莫干山路 50 号
-
+
+
`; diff --git a/src/card/index.tsx b/src/card/index.tsx index c671dcfce..17e981e0d 100644 --- a/src/card/index.tsx +++ b/src/card/index.tsx @@ -51,7 +51,7 @@ function Card( const showNum = slots.num || isDef(props.num); const showPrice = slots.price || isDef(props.price); const showOriginPrice = slots['origin-price'] || isDef(props.originPrice); - const showBottom = showNum || showPrice || showOriginPrice; + const showBottom = showNum || showPrice || showOriginPrice || slots.bottom; function onThumbClick(event: MouseEvent) { emit(ctx, 'click-thumb', event); diff --git a/src/card/test/__snapshots__/index.spec.js.snap b/src/card/test/__snapshots__/index.spec.js.snap index 091a7af08..d4de2d22d 100644 --- a/src/card/test/__snapshots__/index.spec.js.snap +++ b/src/card/test/__snapshots__/index.spec.js.snap @@ -4,9 +4,7 @@ exports[`render bottom slot 1`] = `
-
-
¥ 100
Custom Bottom -
+
Custom Bottom
diff --git a/src/card/test/index.spec.js b/src/card/test/index.spec.js index bbcea88cb..fcef9663e 100644 --- a/src/card/test/index.spec.js +++ b/src/card/test/index.spec.js @@ -65,9 +65,6 @@ test('render origin-price slot', () => { test('render bottom slot', () => { const wrapper = mount(Card, { - propsData: { - price: 100 - }, scopedSlots: { bottom: () => 'Custom Bottom' } diff --git a/src/circle/README.md b/src/circle/README.md index 39b5a102f..3b721baa8 100644 --- a/src/circle/README.md +++ b/src/circle/README.md @@ -121,7 +121,8 @@ export default { | speed | Animate speed(rate/s)| *number* | `0` | - | | text | Text | *string* | - | - | | 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 diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md index 60be6f55a..351e66d94 100644 --- a/src/circle/README.zh-CN.md +++ b/src/circle/README.zh-CN.md @@ -133,6 +133,7 @@ export default { | speed | 动画速度(单位为 rate/s)| *number* | `0` | - | | text | 文字 | *string* | - | - | | stroke-width | 进度条宽度 | *number* | `40` | - | +| stroke-linecap | 进度条端点的形状,可选值为`sqaure` `butt` | *string* | `round` | 2.2.15 | | clockwise | 是否顺时针增加 | *boolean* | `true` | - | ### Slots diff --git a/src/circle/index.js b/src/circle/index.js index 8c470a112..4a481b871 100644 --- a/src/circle/index.js +++ b/src/circle/index.js @@ -14,12 +14,14 @@ function format(rate) { function getPath(clockwise, viewBoxSize) { 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({ props: { text: String, + strokeLinecap: String, value: { type: Number, default: 0 @@ -85,6 +87,7 @@ export default createComponent({ return { stroke: `${this.color}`, strokeWidth: `${this.strokeWidth + 1}px`, + strokeLinecap: this.strokeLinecap, strokeDasharray: `${offset}px ${PERIMETER}px` }; }, @@ -129,7 +132,9 @@ export default createComponent({ this.startRate = this.value; this.endRate = format(this.rate); 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) { cancelRaf(this.rafId); @@ -168,7 +173,8 @@ export default createComponent({ stroke={this.gradient ? `url(#${this.uid})` : this.color} /> - {this.slots() || (this.text &&
{this.text}
)} + {this.slots() || + (this.text &&
{this.text}
)}
); } diff --git a/src/circle/test/__snapshots__/index.spec.js.snap b/src/circle/test/__snapshots__/index.spec.js.snap index 97dbfb718..8749d4958 100644 --- a/src/circle/test/__snapshots__/index.spec.js.snap +++ b/src/circle/test/__snapshots__/index.spec.js.snap @@ -13,3 +13,10 @@ exports[`speed is 0 1`] = `
`; + +exports[`stroke-linecap prop 1`] = ` +
+ + +
+`; diff --git a/src/circle/test/index.spec.js b/src/circle/test/index.spec.js index 2d37e250f..17349e8db 100644 --- a/src/circle/test/index.spec.js +++ b/src/circle/test/index.spec.js @@ -47,3 +47,13 @@ test('size prop', () => { expect(wrapper).toMatchSnapshot(); }); + +test('stroke-linecap prop', () => { + const wrapper = mount(Circle, { + propsData: { + strokeLinecap: 'square' + } + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/contact-card/README.md b/src/contact-card/README.md index fc82742af..e1e2d3e1e 100644 --- a/src/contact-card/README.md +++ b/src/contact-card/README.md @@ -155,6 +155,7 @@ export default { | v-model | Id of chosen contact | *string \| number* | - | - | | list | Contact list | *Contact[]* | `[]` | - | | add-text | Add button text | *string* | `Add new contact` | - | +| default-tag-text | Default tag text | *string* | - | - | ### ContactList Events @@ -164,6 +165,7 @@ export default { | edit | Triggered when click edit button | item: contact object,index | | select | Triggered when select contact | item: contact object | + ### ContactEdit Props | Attribute | Description | Type | Default | Version | @@ -173,6 +175,8 @@ export default { | is-saving | Whether to show save 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* | - | - | +| show-set-default | Whether to show default contact switch | *boolean* | `false` | - | +| set-default-label | default contact switch label | *string* | - | - | ### ContactEdit Events @@ -188,3 +192,4 @@ export default { | id | ID | *string \| number* | | name | Name | *string* | | tel | Phone | *string* | +| isDefault | Is default contact | *boolean* | diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md index 218ce4137..c5883b390 100644 --- a/src/contact-card/README.zh-CN.md +++ b/src/contact-card/README.zh-CN.md @@ -159,6 +159,7 @@ export default { | v-model | 当前选中联系人的 id | *string \| number* | - | - | | list | 联系人列表 | *Contact[]* | `[]` | - | | add-text | 新建按钮文案 | *string* | `新建联系人` | - | +| default-tag-text | 默认联系人标签文案 | *string* | - | - | ### ContactList Events @@ -177,6 +178,8 @@ export default { | is-saving | 是否显示保存按钮加载动画 | *boolean* | `false` | - | | is-deleting | 是否显示删除按钮加载动画 | *boolean* | `false` | - | | tel-validator | 手机号格式校验函数 | *(tel: string) => boolean* | - | - | +| show-set-default | 是否显示默认联系人栏 | *boolean* | `false` | - | +| set-default-label | 默认联系人栏文案 | *string* | - | - | ### ContactEdit Events @@ -192,3 +195,4 @@ export default { | id | 每位联系人的唯一标识 | *string \| number* | | name | 联系人姓名 | *string* | | tel | 联系人手机号 | *string \| number* | +| isDefault | 是否为默认联系人 | *boolean* | diff --git a/src/contact-card/demo/index.vue b/src/contact-card/demo/index.vue index fe2d7800a..98a912098 100644 --- a/src/contact-card/demo/index.vue +++ b/src/contact-card/demo/index.vue @@ -16,6 +16,7 @@
); } @@ -97,7 +121,8 @@ function ContactList( ContactList.props = { value: null as any, list: Array, - addText: String + addText: String, + defaultTagText: String }; export default createComponent(ContactList); diff --git a/src/coupon/index.less b/src/coupon/index.less index 620a748a3..63441440b 100644 --- a/src/coupon/index.less +++ b/src/coupon/index.less @@ -33,7 +33,7 @@ } p { - color: @gray-dark; + color: @gray-6; font-size: @font-size-sm; line-height: 16px; } diff --git a/src/field/README.md b/src/field/README.md index 88d198148..c9f694505 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -152,6 +152,7 @@ Textarea Field can be auto resize when has `autosize` prop | clearable | Whether to be clearable | *boolean* | `false` | - | | clickable | Whether to show click feedback when clicked | *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 | | error | Whether to show error info | *boolean* | `false` | - | | arrow-direction | Can be set to `left` `up` `down` | *string* | - | 2.0.4 | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index e608206ce..54c81d89a 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -158,6 +158,7 @@ Vue.use(Field); | clearable | 是否启用清除控件 | *boolean* | `false` | - | | clickable | 是否开启点击反馈 | *boolean* | `false` | - | | is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | - | +| autofocus | 是否自动聚焦,iOS 系统不支持该属性 | *boolean* | `false` | - | | show-word-limit | 是否显示字数统计,需要设置`maxlength`属性 | *boolean* | `false` | 2.2.8 | | error | 是否将输入内容标红 | *boolean* | `false` | - | | arrow-direction | 箭头方向,可选值为 `left` `up` `down` | *string* | - | 2.0.4 | diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue index 33ff94594..846d1d9c4 100644 --- a/src/icon/demo/index.vue +++ b/src/icon/demo/index.vue @@ -123,7 +123,7 @@ export default { span { display: block; padding: 0 5px; - color: @gray-darker; + color: @gray-7; font-size: 12px; line-height: 18px; } diff --git a/src/image/demo/index.vue b/src/image/demo/index.vue index 91e69828f..5a9fccef4 100644 --- a/src/image/demo/index.vue +++ b/src/image/demo/index.vue @@ -149,7 +149,7 @@ export default { .text { margin-top: 5px; - color: @gray-darker; + color: @gray-7; font-size: 14px; text-align: center; } diff --git a/src/list/demo/index.vue b/src/list/demo/index.vue index a7fd5482f..c21d77acd 100644 --- a/src/list/demo/index.vue +++ b/src/list/demo/index.vue @@ -130,7 +130,7 @@ export default { .page-desc { margin: 0; padding: 5px 0; - color: @gray-darker; + color: @gray-7; font-size: 14px; text-align: center; @@ -144,7 +144,7 @@ export default { } .van-checkbox__label { - color: @gray-darker; + color: @gray-7; } } diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js index 851280672..408d5fe69 100644 --- a/src/number-keyboard/index.js +++ b/src/number-keyboard/index.js @@ -105,7 +105,7 @@ export default createComponent({ methods: { onBlur() { - this.$emit('blur'); + this.show && this.$emit('blur'); }, onClose() { diff --git a/src/search/README.md b/src/search/README.md index 4216b5066..924c1086a 100644 --- a/src/search/README.md +++ b/src/search/README.md @@ -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* | - | - | | placeholder | Placeholder | *string* | - | - | | 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` | - | | action-text | Text of action button | *boolean* | `Cancel` | 2.2.2 | | disabled | Whether to disable field | *boolean* | `false` | - | diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index 02f3c4f1e..6d84c66c1 100644 --- a/src/search/README.zh-CN.md +++ b/src/search/README.zh-CN.md @@ -65,6 +65,7 @@ Search 组件提供了`search`和`cancel`事件,`search`事件在点击键盘 | maxlength | 输入的最大字符数 | *string \| number* | - | - | | placeholder | 占位提示文字 | *string* | - | - | | clearable | 是否启用清除控件 | *boolean* | `true` | - | +| autofocus | 是否自动聚焦,iOS 系统不支持该属性 | *boolean* | `false` | - | | show-action | 是否在搜索框右侧显示取消按钮 | *boolean* | `false` | - | | action-text | 取消按钮文字 | *boolean* | `取消` | 2.2.2 | | disabled | 是否禁用输入框 | *boolean* | `false` | - | diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue index b0f3ece59..e69e78ed6 100644 --- a/src/sidebar/demo/index.vue +++ b/src/sidebar/demo/index.vue @@ -67,7 +67,7 @@ export default { &-title { margin-bottom: 16px; - color: @gray-dark; + color: @gray-6; font-weight: normal; font-size: 14px; } diff --git a/src/sku/index.less b/src/sku/index.less index 181838505..3ea21726d 100644 --- a/src/sku/index.less +++ b/src/sku/index.less @@ -62,7 +62,7 @@ &-header-item { margin-top: @padding-xs; - color: @gray-dark; + color: @gray-6; font-size: @font-size-sm; line-height: 16px; } @@ -178,7 +178,7 @@ } &--disabled { - color: @gray; + color: @gray-5; background: @active-color; .van-sku-row__item-img { @@ -213,7 +213,7 @@ &__stock { display: inline-block; margin-right: @padding-xs; - color: @gray-dark; + color: @gray-6; font-size: @font-size-sm; &-num--highlight { @@ -334,11 +334,11 @@ } &--warning { - background: linear-gradient(to right, #ffd01e, #ff8917); + background: @gradient-orange; } &--danger { - background: linear-gradient(to right, #ff6034, #ee0a24); + background: @gradient-red; } } } diff --git a/src/style/var.less b/src/style/var.less index dec245472..94d63ba5f 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -1,27 +1,31 @@ -// Basic Colors +// Color Palette @black: #000; @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; @blue: #1989fa; @orange: #ff976a; @orange-dark: #ed6a0c; @orange-light: #fffbe8; @green: #07c160; -@gray: #c8c9cc; -@gray-light: #e5e5e5; -@gray-darker: #7d7e80; -@gray-dark: #969799; // Gradient Colors @gradient-red: linear-gradient(to right, #ff6034, #ee0a24); @gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); // Component Colors -@text-color: #323233; -@active-color: #f2f3f5; +@text-color: @gray-8; +@active-color: @gray-2; @active-opacity: .7; @disabled-opacity: .5; -@background-color: #f8f8f8; +@background-color: @gray-1; @background-color-light: #fafafa; // Padding @@ -44,7 +48,7 @@ @animation-duration-fast: .2s; // Border -@border-color: #ebedf0; +@border-color: @gray-3; @border-width-base: 1px; @border-radius-sm: 2px; @border-radius-md: 4px; @@ -54,40 +58,43 @@ @action-sheet-max-height: 90%; @action-sheet-header-height: 44px; @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-line-height: 20px; @action-sheet-item-height: 50px; @action-sheet-item-background: @white; @action-sheet-item-font-size: @font-size-lg; @action-sheet-item-text-color: @text-color; -@action-sheet-item-disabled-text-color: @gray; -@action-sheet-subname-color: @gray-darker; +@action-sheet-item-disabled-text-color: @gray-5; +@action-sheet-subname-color: @gray-7; @action-sheet-subname-font-size: @font-size-sm; @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-cancel-padding-top: @padding-xs; @action-sheet-cancel-padding-color: @background-color; // 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-detail-finish-color: @blue; @address-edit-detail-finish-font-size: @font-size-sm; // AddressList -@address-list-disabled-text-color: @gray-dark; -@address-list-disabled-text-font-size: @font-size-sm; -@address-list-disabled-text-line-height: 30px; +@address-list-padding: 12px 7px 100px 17px; +@address-list-disabled-text-color: @gray-6; +@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-item-padding: @padding-md; -@address-list-item-text-color: @gray-darker; -@address-list-item-disabled-text-color: @gray-dark; -@address-list-item-font-size: @font-size-sm; -@address-list-item-line-height: 16px; +@address-list-item-padding: @padding-sm; +@address-list-item-text-color: @text-color; +@address-list-item-disabled-text-color: @gray-5; +@address-list-item-font-size: 13px; +@address-list-item-line-height: 18px; @address-list-item-radio-icon-color: @red; -@address-list-edit-icon-size: 16px; +@address-list-edit-icon-size: 18px; // Button @button-mini-height: 22px; @@ -132,10 +139,10 @@ @card-background-color: @background-color-light; @card-thumb-size: 90px; @card-title-line-height: 16px; -@card-desc-color: @gray-darker; +@card-desc-color: @gray-7; @card-desc-line-height: 20px; @card-price-color: @red; -@card-origin-price-color: @gray-darker; +@card-origin-price-color: @gray-7; @card-origin-price-font-size: @font-size-xs; // Cell @@ -148,33 +155,33 @@ @cell-border-color: @border-color; @cell-active-color: @active-color; @cell-required-color: @red; -@cell-label-color: @gray-dark; +@cell-label-color: @gray-6; @cell-label-font-size: @font-size-sm; @cell-label-line-height: 18px; @cell-label-margin-top: 3px; -@cell-value-color: @gray-dark; +@cell-value-color: @gray-6; @cell-icon-size: 16px; -@cell-right-icon-color: @gray-dark; +@cell-right-icon-color: @gray-6; @cell-large-vertical-padding: @padding-sm; @cell-large-title-font-size: @font-size-lg; @cell-large-label-font-size: @font-size-md; // CellGroup @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-font-size: @font-size-md; @cell-group-title-line-height: 16px; // Checkbox @checkbox-size: 20px; -@checkbox-border-color: @gray-light; +@checkbox-border-color: @gray-5; @checkbox-transition-duration: @animation-duration-fast; @checkbox-label-margin: @padding-xs; @checkbox-label-color: @text-color; @checkbox-checked-icon-color: @blue; -@checkbox-disabled-icon-color: @gray; -@checkbox-disabled-label-color: @gray; +@checkbox-disabled-icon-color: @gray-5; +@checkbox-disabled-label-color: @gray-5; @checkbox-disabled-background-color: @border-color; // Circle @@ -188,9 +195,9 @@ @collapse-item-content-padding: @padding-md; @collapse-item-content-font-size: 13px; @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-title-disabled-color: @gray; +@collapse-item-title-disabled-color: @gray-5; // ContactCard @contact-card-padding: @padding-md; @@ -199,8 +206,11 @@ @contact-card-value-line-height: 20px; // 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-font-size: 16px; @contact-edit-field-label-width: 65px; // ContactList @@ -226,7 +236,7 @@ @coupon-amount-font-size: 24px; @coupon-currency-font-size: 50%; @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-background-color: @background-color-light; @coupon-description-border-color: @border-color; @@ -239,7 +249,7 @@ @coupon-list-field-padding: @padding-xs @padding-md; @coupon-list-exchange-button-height: 32px; @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-line-height: 20px; @@ -258,13 +268,13 @@ @dialog-message-font-size: @font-size-md; @dialog-message-line-height: 20px; @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-confirm-button-text-color: @blue; // Divider @divider-margin: @padding-md 0; -@divider-text-color: @gray-dark; +@divider-text-color: @gray-6; @divider-font-size: @font-size-md; @divider-line-height: 24px; @divider-border-color: @border-color; @@ -278,7 +288,7 @@ @dropdown-menu-title-font-size: 15px; @dropdown-menu-title-text-color: @text-color; @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-line-height: 18px; @dropdown-menu-option-active-color: @blue; @@ -288,16 +298,16 @@ @field-label-width: 90px; @field-input-text-color: @text-color; @field-input-error-text-color: @red; -@field-input-disabled-text-color: @gray-dark; -@field-placeholder-text-color: @gray-dark; +@field-input-disabled-text-color: @gray-6; +@field-placeholder-text-color: @gray-6; @field-icon-size: 16px; @field-clear-icon-size: 16px; -@field-clear-icon-color: @gray; -@field-right-icon-color: @gray-dark; +@field-clear-icon-color: @gray-5; +@field-right-icon-color: @gray-6; @field-error-message-color: @red; @field-error-message-text-color: 12px; @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-line-height: 16px; @@ -306,7 +316,7 @@ @grid-item-content-background-color: @white; @grid-item-content-active-color: @active-color; @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; // GoodsAction @@ -317,7 +327,7 @@ @goods-action-icon-size: 18px; @goods-action-icon-font-size: @font-size-xs; @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-warning-color: @gradient-orange; @goods-action-button-danger-color: @gradient-red; @@ -348,7 +358,7 @@ @info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; // Image -@image-placeholder-text-color: @gray-dark; +@image-placeholder-text-color: @gray-6; @image-placeholder-font-size: @font-size-md; @image-placeholder-background-color: @background-color; @@ -359,14 +369,14 @@ // List @list-icon-margin-right: 5px; -@list-text-color: @gray-dark; +@list-text-color: @gray-6; @list-text-font-size: @font-size-md; @list-text-line-height: 50px; // Loading -@loading-text-color: @gray-dark; +@loading-text-color: @gray-6; @loading-text-font-size: @font-size-md; -@loading-spinner-color: @gray; +@loading-spinner-color: @gray-5; @loading-spinner-size: 30px; @loading-spinner-animation-duration: .8s; @@ -402,11 +412,11 @@ // NumberKeyboard @number-keyboard-background-color: @white; @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-active-color: @active-color; @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-font-size: @font-size-md; @number-keyboard-close-padding: 0 @padding-md; @@ -427,10 +437,10 @@ @pagination-font-size: @font-size-md; @pagination-item-width: 36px; @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-background-color: @white; -@pagination-desc-color: @gray-darker; +@pagination-desc-color: @gray-7; @pagination-disabled-opacity: @disabled-opacity; // Panel @@ -444,7 +454,7 @@ @password-input-font-size: 20px; @password-input-border-radius: 6px; @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-error-info-color: @red; @password-input-dot-size: 10px; @@ -469,14 +479,14 @@ @popup-transition: transform @animation-duration-base ease-out; @popup-round-border-radius: 20px; @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-z-index: 1; // Progress @progress-height: 4px; @progress-color: @blue; -@progress-background-color: @gray-light; +@progress-background-color: @gray-3; @progress-pivot-padding: 0 5px; @progress-pivot-text-color: @white; @progress-pivot-font-size: @font-size-xs; @@ -486,17 +496,17 @@ // PullRefresh @pull-refresh-head-height: 50px; @pull-refresh-head-font-size: @font-size-md; -@pull-refresh-head-text-color: @gray-dark; +@pull-refresh-head-text-color: @gray-6; // Radio @radio-size: 20px; -@radio-border-color: @gray-light; +@radio-border-color: @gray-5; @radio-transition-duration: @animation-duration-fast; @radio-label-margin: @padding-xs; @radio-label-color: @text-color; @radio-checked-icon-color: @blue; -@radio-disabled-icon-color: @gray; -@radio-disabled-label-color: @gray; +@radio-disabled-icon-color: @gray-5; +@radio-disabled-label-color: @gray-5; @radio-disabled-background-color: @border-color; // Rate @@ -510,7 +520,7 @@ @search-label-padding: 0 5px; @search-label-color: @text-color; @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-text-color: @text-color; @search-action-font-size: @font-size-md; @@ -522,7 +532,7 @@ @sidebar-font-size: @font-size-md; @sidebar-line-height: 20px; @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-active-color: @active-color; @sidebar-background-color: @background-color-light; @@ -540,7 +550,7 @@ // Slider @slider-active-background-color: @blue; -@slider-inactive-background-color: @gray-light; +@slider-inactive-background-color: @gray-3; @slider-disabled-opacity: @disabled-opacity; @slider-button-width: 24px; @slider-button-height: 24px; @@ -549,7 +559,7 @@ @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5); // Step -@step-text-color: @gray-dark; +@step-text-color: @gray-6; @step-process-text-color: @text-color; @step-font-size: @font-size-md; @step-line-color: @border-color; @@ -557,7 +567,7 @@ @step-finish-text-color: @text-color; @step-icon-size: 12px; @step-circle-size: 5px; -@step-circle-color: @gray-dark; +@step-circle-color: @gray-6; @step-horizontal-title-font-size: @font-size-sm; // Steps @@ -570,13 +580,13 @@ @stepper-active-color: #e8e8e8; @stepper-background-color: @active-color; @stepper-button-icon-color: @text-color; -@stepper-button-disabled-color: #f7f8fa; -@stepper-button-disabled-icon-color: @gray; +@stepper-button-disabled-color: @background-color; +@stepper-button-disabled-icon-color: @gray-5; @stepper-input-width: 32px; @stepper-input-height: 28px; @stepper-input-font-size: @font-size-md; @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-border-radius: @border-radius-md; @@ -631,16 +641,16 @@ // TabbarItem @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-line-height: 1; @tabbar-item-icon-size: 18px; @tabbar-item-margin-bottom: 5px; // Tab -@tab-text-color: @gray-darker; +@tab-text-color: @gray-7; @tab-active-text-color: @text-color; -@tab-disabled-text-color: @gray; +@tab-disabled-text-color: @gray-5; @tab-font-size: @font-size-md; // Tabs @@ -663,7 +673,7 @@ @tag-primary-color: @blue; @tag-success-color: @green; @tag-warning-color: @orange; -@tag-default-color: @gray-dark; +@tag-default-color: @gray-6; @tag-plain-background-color: @white; // Toast @@ -690,29 +700,29 @@ @tree-select-nav-item-padding: @padding-sm @padding-xs @padding-sm @padding-sm; @tree-select-item-height: 44px; @tree-select-item-active-color: @red; -@tree-select-item-disabled-color: @gray; +@tree-select-item-disabled-color: @gray-5; // Uploader @uploader-size: 80px; @uploader-icon-size: 24px; -@uploader-icon-color: @gray-dark; -@uploader-text-color: @gray-dark; +@uploader-icon-color: @gray-6; +@uploader-text-color: @gray-6; @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-background-color: @white; -@uploader-delete-color: @gray-dark; +@uploader-delete-color: @gray-6; @uploader-delete-icon-size: 18px; @uploader-delete-background-color: @white; @uploader-file-background-color: @background-color; @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-margin-top: @padding-xs; @uploader-file-name-font-size: @font-size-sm; -@uploader-file-name-text-color: @gray-darker; +@uploader-file-name-text-color: @gray-7; // Sku -@sku-item-background-color: #f7f8fa; +@sku-item-background-color: @background-color; @sku-icon-gray-color: #dcdde0; @sku-upload-mask-color: rgba(50, 50, 51, .8); diff --git a/src/swipe/README.md b/src/swipe/README.md index 1b67035aa..c9b572a6a 100644 --- a/src/swipe/README.md +++ b/src/swipe/README.md @@ -144,34 +144,34 @@ export default { ### Swipe Events -| Event | Description | Arguments | -|------|------|------| -| change | Triggered when current swipe change | index: index of current swipe | +| Event | Description | Arguments | Version | +|------|------|------|------| +| change | Triggered when current swipe change | index: index of current swipe | - | ### SwipeItem Events -| Event | Description | Arguments | -|------|------|------| -| click | Triggered when clicked | event: Event | +| Event | Description | Arguments | Version | +|------|------|------|------| +| click | Triggered when clicked | event: Event | - | ### Swipe Methods Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods -| Name | Description | Attribute | Return value | -|------|------|------|------| -| swipeTo | Swipe to target index | index: target index, options: Options | void | -| resize | Resize Swipe when container element resized | - | void | +| Name | Description | Attribute | Return value | Version | +|------|------|------|------|------| +| swipeTo | Swipe to target index | index: target index, options: Options | void | - | +| resize | Resize Swipe when container element resized | - | void | 2.2.14 | ### swipeTo Options | Name | Description | Type | -|------|------|------| +|------|------|------|------| | immediate | Whether to skip animation | *boolean* | ### Swipe Slots -| Name | Description | -|------|------| -| default | Content | -| indicator | Custom indicator | +| Name | Description | Version | +|------|------|------| +| default | Content | - | +| indicator | Custom indicator | - | diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index 541414496..27721b226 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -150,24 +150,24 @@ export default { ### Swipe Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| change | 每一页轮播结束后触发 | index, 当前页的索引 | +| 事件名 | 说明 | 回调参数 | 版本 | +|------|------|------|------| +| change | 每一页轮播结束后触发 | index, 当前页的索引 | - | ### SwipeItem Events -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击时触发 | event: Event | +| 事件名 | 说明 | 回调参数 | 版本 | +|------|------|------|------| +| click | 点击时触发 | event: Event | - | ### Swipe 方法 通过 [ref](https://cn.vuejs.org/v2/api/#ref) 可以获取到 Swipe 实例并调用实例方法 -| 方法名 | 说明 | 参数 | 返回值 | -|------|------|------|------| -| swipeTo | 滚动到目标位置 | index: number, options: Options | void | -| resize | 外层元素大小变化后,可以调用此方法来触发重绘 | - | void | +| 方法名 | 说明 | 参数 | 返回值 | 版本 | +|------|------|------|------|------| +| swipeTo | 滚动到目标位置 | index: number, options: Options | void | - | +| resize | 外层元素大小变化后,可以调用此方法来触发重绘 | - | void | 2.2.14 | ### swipeTo Options 格式 @@ -177,7 +177,7 @@ export default { ### Swipe Slots -| 名称 | 说明 | -|------|------| -| default | 轮播内容 | -| indicator | 自定义指示器 | +| 名称 | 说明 | 版本 | +|------|------|------| +| default | 轮播内容 | - | +| indicator | 自定义指示器 | - | diff --git a/src/switch/index.tsx b/src/switch/index.tsx index 66c163b92..ac1ddc894 100644 --- a/src/switch/index.tsx +++ b/src/switch/index.tsx @@ -1,5 +1,5 @@ import { createNamespace, addUnit } from '../utils'; -import { BLUE, GRAY_DARK } from '../utils/constant'; +import { BLUE } from '../utils/constant'; import { switchProps, SharedSwitchProps } from './shared'; import { emit, inherit } from '../utils/functional'; import Loading from '../loading'; @@ -38,7 +38,7 @@ function Switch( backgroundColor: checked ? activeColor : inactiveColor }; - const loadingColor = checked ? activeColor || BLUE : inactiveColor || GRAY_DARK; + const loadingColor = checked ? activeColor || BLUE : inactiveColor || ''; function onClick(event: PointerEvent) { emit(ctx, 'click', event); diff --git a/src/utils/constant.ts b/src/utils/constant.ts index 43bf62eb9..165806dd4 100644 --- a/src/utils/constant.ts +++ b/src/utils/constant.ts @@ -3,8 +3,6 @@ export const RED = '#ee0a24'; export const BLUE = '#1989fa'; export const GREEN = '#07c160'; export const WHITE = '#fff'; -export const GRAY = '#c9c9c9'; -export const GRAY_DARK = '#969799'; // border export const BORDER = 'van-hairline'; diff --git a/types/toast.d.ts b/types/toast.d.ts index 73517265c..5bf8b9c0d 100644 --- a/types/toast.d.ts +++ b/types/toast.d.ts @@ -2,20 +2,23 @@ import Vue from 'vue'; import { VanPopupMixin } from './mixins/popup'; type ToastMessage = string | number; +type ToastType = 'text' | 'loading' | 'success' | 'fail' | 'html'; +type ToastPosition = 'top' | 'middle' | 'bottom'; +type ToastLoadingType = 'circular' | 'spinner'; export type ToastOptions = { icon?: string; - type?: string; + type?: ToastType; mask?: boolean; message?: ToastMessage; onClose?: () => void; onOpened?: () => void; overlay?: boolean; duration?: number; - position?: string; + position?: ToastPosition; className?: any; transition?: string; - loadingType?: string; + loadingType?: ToastLoadingType; forbidClick?: boolean; closeOnClick?: boolean; closeOnClickOverlay?: boolean; @@ -23,9 +26,9 @@ export type ToastOptions = { }; export interface VanToast extends Vue, VanPopupMixin { - type: string; - position: string; - loadingType: string; + type: ToastType; + position: ToastPosition; + loadingType: ToastLoadingType; forbidClick: boolean; message: ToastMessage; clear(): void; @@ -38,8 +41,8 @@ export interface Toast { fail(options?: ToastOptions | ToastMessage): VanToast; clear(all?: boolean): void; install(): void; - setDefaultOptions(options: ToastOptions): void; - resetDefaultOptions(): void; + setDefaultOptions(options: string | ToastOptions): void; + resetDefaultOptions(options?: string): void; allowMultiple(allow: boolean): void; }