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

Merge branch 'dev' of https://github.com/youzan/vant into dev

Browse Source
This commit is contained in:
陈嘉涵 2018-11-27 19:13:03 +08:00
commit 9e09e5305c
69 changed files with 1078 additions and 2502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build/build-iconfont.js
View File

@ -33,7 +33,8 @@ const prevTTFs = glob.sync(path.join(iconDir, '*.ttf'));
prevTTFs.forEach(ttf => fs.removeSync(ttf));
// rename svg
config.glyphs.forEach((icon, index) => {
const icons = [...config.basic, ...config.outline, ...config.filled];
icons.forEach((icon, index) => {
const src = path.join(svgDir, icon.src);
if (fs.existsSync(src)) {
fs.renameSync(src, path.join(svgDir, icon.css + '.svg'));
@ -65,10 +66,7 @@ gulp.task('ttf', () => {
gulp.task('default', ['ttf'], () => {
// generate icon-local.css
fs.writeFileSync(
path.join(iconDir, 'local.less'),
local(config.name, ttf)
);
fs.writeFileSync(path.join(iconDir, 'local.less'), local(config.name, ttf));
// remove svg
fs.removeSync(svgDir);

21
docs/src/WapApp.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<van-nav-bar
v-show="title"
v-show="title && showNav"
class="van-doc-nav-bar"
:title="title"
left-arrow
@ -22,6 +22,17 @@
</template>
<script>
function getQueryString(name) {
const arr = location.search.substr(1).split('&');
for (let i = 0, l = arr.length; i < l; i++) {
const item = arr[i].split('=');
if (item.shift() === name) {
return decodeURIComponent(item.join('='));
}
}
return '';
}
export default {
computed: {
title() {
@ -30,7 +41,13 @@ export default {
},
demoLink() {
return `https://github.com/youzan/vant/blob/dev/packages/${this.$route.meta.path}/demo/index.vue`;
return `https://github.com/youzan/vant/blob/dev/packages/${
this.$route.meta.path
}/demo/index.vue`;
},
showNav() {
return getQueryString('hide_nav') !== '1';
}
},

34
package.json
View File

@ -57,21 +57,21 @@
"author": "youzanfe",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.1.2",
"@babel/runtime": "^7.1.5",
"vue-lazyload": "1.2.3"
},
"peerDependencies": {
"vue": ">= 2.5.0"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/core": "^7.1.6",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-object-assign": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@vue/server-test-utils": "^1.0.0-beta.25",
"@vue/test-utils": "^1.0.0-beta.25",
"@babel/preset-env": "^7.1.6",
"@vue/server-test-utils": "^1.0.0-beta.26",
"@vue/test-utils": "^1.0.0-beta.26",
"autoprefixer": "^9.3.1",
"babel-core": "^7.0.0-0",
"babel-jest": "^23.6.0",
@ -79,10 +79,10 @@
"codecov": "^3.1.0",
"cross-env": "^5.2.0",
"css-loader": "^1.0.1",
"dependency-tree": "^6.2.1",
"dependency-tree": "^6.3.0",
"eslint": "^5.9.0",
"eslint-plugin-vue-libs": "^3.0.0",
"fast-glob": "^2.2.3",
"fast-glob": "^2.2.4",
"fast-vue-md-loader": "^1.0.3",
"gh-pages": "^2.0.1",
"gulp": "^3.9.1",
@ -92,35 +92,35 @@
"gulp-less": "^4.0.1",
"gulp-postcss": "^8.0.0",
"html-webpack-plugin": "3.2.0",
"husky": "^1.1.3",
"husky": "^1.2.0",
"jest": "^23.6.0",
"jest-serializer-vue": "^2.0.2",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"lint-staged": "^8.0.4",
"lint-staged": "^8.1.0",
"md5-file": "^4.0.0",
"postcss": "^7.0.5",
"postcss": "^7.0.6",
"postcss-loader": "^3.0.0",
"progress-bar-webpack-plugin": "^1.11.0",
"rimraf": "^2.5.4",
"shelljs": "^0.8.1",
"shelljs": "^0.8.3",
"signale": "^1.3.0",
"style-loader": "^0.23.1",
"stylelint": "^9.7.1",
"stylelint": "^9.8.0",
"stylelint-config-standard": "^18.2.0",
"uppercamelcase": "^3.0.0",
"url-loader": "^1.1.2",
"vant-doc": "1.0.18",
"vant-doc": "1.0.19",
"vue": "2.5.17",
"vue-jest": "^3.0.0",
"vue-jest": "^3.0.1",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-router": "^3.0.2",
"vue-server-renderer": "^2.5.17",
"vue-sfc-compiler": "^0.1.3",
"vue-template-compiler": "2.5.17",
"vue-template-es2015-compiler": "^1.6.0",
"webpack": "^4.23.1",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"webpack-serve": "^2.0.2"
"webpack-serve": "^2.0.3"
}
}

9
packages/address-list/test/__snapshots__/demo.spec.js.snap
View File

@ -10,20 +10,22 @@ exports[`renders demo correctly 1`] = `
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
</div>
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-cell van-cell--clickable van-address-item">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <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" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
</div>
@ -36,10 +38,11 @@ exports[`renders demo correctly 1`] = `
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
</div>
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
</div>

21
packages/cell/index.less
View File

@ -43,30 +43,21 @@
}
}
&__left-icon {
&__left-icon,
&__right-icon {
height: 24px;
min-width: 1em;
font-size: 16px;
line-height: 24px;
}
&__left-icon {
margin-right: 5px;
}
&__right-icon {
color: @gray-dark;
font-size: 12px;
line-height: 24px;
margin-left: 5px;
&--left::before {
transform: rotate(180deg);
}
&--up::before {
transform: rotate(-90deg);
}
&--down::before {
transform: rotate(90deg);
}
}
&--clickable {

10
packages/cell/index.vue
View File

@ -42,8 +42,8 @@
<slot name="right-icon">
<icon
v-if="isLink"
:class="b('right-icon', arrowDirection)"
name="arrow"
:class="b('right-icon')"
:name="arrowIcon"
/>
</slot>
<slot name="extra" />
@ -84,6 +84,12 @@ export default create({
}
},
computed: {
arrowIcon() {
return this.arrowDirection ? `arrow-${this.arrowDirection}` : 'arrow';
}
},
methods: {
onClick() {
this.$emit('click');

13
packages/cell/test/__snapshots__/demo.spec.js.snap
View File

@ -44,6 +44,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell">
<i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<div class="van-cell__title"><span>单元格</span>
<!---->
@ -69,6 +70,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-cell van-cell--clickable">
@ -79,6 +81,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"><span>内容</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-cell van-cell--clickable">
@ -87,7 +90,8 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value"><span>内容</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon van-cell__right-icon--down" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-arrow-down van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
@ -101,6 +105,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-cell van-cell--clickable">
@ -111,6 +116,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
</div>
@ -118,16 +124,19 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--clickable">
<i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<div class="van-cell__title"><span class="custom-text">单元格</span> <span class="van-tag" style="background-color:#f44;">标签</span></div>
<div class="van-cell__value"><span>内容</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-cell van-cell--clickable">
<i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<div class="van-cell__title"><span>单元格</span>
<!---->
@ -135,6 +144,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-cell">
@ -145,6 +155,7 @@ exports[`renders demo correctly 1`] = `
<!---->
<i class="custom-icon van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
</div>

2
packages/cell/zh-CN.md
View File

@ -91,7 +91,7 @@ Vue.use(Cell).use(CellGroup);
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| icon | 左侧图标，可选值见 Icon 组件 | `String` | - | - |
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
| title | 左侧标题 | `String | Number` | - | - |
| value | 右侧内容 | `String | Number` | - | - |
| label | 标题下方的描述信息 | `String` | - | - |

3
packages/checkbox/demo/index.vue
View File

@ -149,8 +149,7 @@ export default {
}
img {
width: 20px;
display: block;
height: 20px;
}
}
</style>

3
packages/checkbox/index.less
View File

@ -6,6 +6,7 @@
&__icon,
&__label {
height: @checkbox-size;
display: inline-block;
vertical-align: middle;
line-height: @checkbox-size;
@ -13,7 +14,7 @@
&__icon {
.van-icon {
font-size: 12px;
font-size: 14px;
color: transparent;
text-align: center;
line-height: inherit;

13
packages/checkbox/test/__snapshots__/demo.spec.js.snap
View File

@ -7,6 +7,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">复选框</span></div>
</div>
@ -15,6 +16,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">
复选框
@ -23,6 +25,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">
复选框
@ -33,6 +36,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;border-color:#4b0;background-color:#4b0;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">
自定义颜色
@ -52,6 +56,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">
复选框 a
@ -60,6 +65,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">
复选框 b
@ -68,6 +74,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">
复选框 c
@ -80,6 +87,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">
复选框 a
@ -88,6 +96,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">
复选框 b
@ -96,6 +105,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">
复选框 c
@ -115,6 +125,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->
@ -132,6 +143,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->
@ -149,6 +161,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->

10
packages/collapse/test/__snapshots__/demo.spec.js.snap
View File

@ -13,6 +13,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> </div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-collapse-item__wrapper">
@ -28,6 +29,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> </div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->
@ -41,6 +43,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> </div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->
@ -58,6 +61,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> </div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-collapse-item__wrapper">
@ -73,6 +77,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> </div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->
@ -86,6 +91,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> </div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->
@ -101,12 +107,14 @@ exports[`renders demo correctly 1`] = `
<div>有赞微商城
<i class="van-icon van-icon-question" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
</div>
<div class="van-cell__value"> </div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->
@ -115,6 +123,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--clickable van-collapse-item__title">
<i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<div class="van-cell__title"><span>有赞零售</span>
<!---->
@ -122,6 +131,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value"> </div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->

2
packages/collapse/zh-CN.md
View File

@ -98,7 +98,7 @@ export default {
|------|------|------|------|------|------|
| name | 唯一标识符，默认为索引值 | `String | Number` | `index` | - |
| title | 标题栏左侧内容 | `String | Number` | - | - |
| icon | 标题栏左侧图标，可选值见 Icon 组件 | `String` | - | 1.2.1 |
| icon | 标题栏左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.2.1 |
| value | 标题栏右侧内容 | `String | Number` | - | 1.2.1 |
| label | 标题栏描述信息 | `String` | - | 1.2.1 |
| border | 是否显示内边框 | `Boolean` | `true` | 1.2.1 |

6
packages/contact-card/test/__snapshots__/demo.spec.js.snap
View File

@ -6,11 +6,13 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--add">
<i class="van-icon van-icon-add2 van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<!---->
<div class="van-cell__value van-cell__value--alone">添加联系人</div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
@ -21,10 +23,11 @@ exports[`renders demo correctly 1`] = `
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <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" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
</div>
@ -81,6 +84,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
<i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<!---->
<div class="van-cell__value van-cell__value--alone">

15
packages/coupon-cell/index.vue
View File

@ -1,15 +1,12 @@
<template>
<cell-group
<cell
:class="b()"
:title="title || $t('title')"
:value="value"
:border="border"
>
<cell
:title="title || $t('title')"
:value="value"
:is-link="editable"
@click="$emit('click')"
/>
</cell-group>
:is-link="editable"
@click="$emit('click')"
/>
</template>
<script>

2
packages/coupon-list/Item.vue
View File

@ -10,8 +10,8 @@
<p>{{ validPeriod }}</p>
<checkbox
v-if="chosen"
:value="true"
:class="b('corner')"
value
/>
</div>
</div>

2
packages/coupon-list/en-US.md
View File

@ -73,7 +73,7 @@ export default {
| chosen-coupon | Index of chosen coupon | `Number` | `-1` |
| coupons | Coupon list | `Array` | `[]` |
| editable | Cell editable | `Boolean` | `true` |
| border | Whether to show outer border | `Boolean` | `true` |
| border | Whether to show innner border | `Boolean` | `true` |
### CouponList API

17
packages/coupon-list/test/__snapshots__/demo.spec.js.snap
View File

@ -3,17 +3,16 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
<div class="van-cell van-cell--clickable">
<div class="van-cell van-cell--clickable van-coupon-cell">
<!---->
<div class="van-cell__title"><span>优惠券</span>
<!---->
<div class="van-cell__title"><span>优惠券</span>
<!---->
</div>
<div class="van-cell__value"><span>你有 2 个可用优惠</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
</i>
</div>
<div class="van-cell__value"><span>你有 2 个可用优惠</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->
</div>

34
packages/coupon-list/test/__snapshots__/index.spec.js.snap
View File

@ -1,31 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`coupon cell 1`] = `
<div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
<div class="van-cell van-cell--clickable">
<div class="van-cell van-cell--clickable van-coupon-cell">
<!---->
<div class="van-cell__title"><span>优惠券</span>
<!---->
<div class="van-cell__title"><span>优惠券</span>
<!---->
</div>
<div class="van-cell__value"><span>使用优惠</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon">
<!---->
</i>
</div>
<div class="van-cell__value"><span>使用优惠</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon">
<!---->
<!---->
</i>
</div>
`;
exports[`coupon cell 2`] = `
<div class="van-cell-group van-hairline--top-bottom van-coupon-cell">
<div class="van-cell van-cell--clickable">
<div class="van-cell van-cell--clickable van-coupon-cell">
<!---->
<div class="van-cell__title"><span>优惠券</span>
<!---->
<div class="van-cell__title"><span>优惠券</span>
<!---->
</div>
<div class="van-cell__value"><span>-￥1.00</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon">
<!---->
</i>
</div>
<div class="van-cell__value"><span>-￥1.00</span></div>
<i class="van-icon van-icon-arrow van-cell__right-icon">
<!---->
<!---->
</i>
</div>
`;

2
packages/coupon-list/zh-CN.md
View File

@ -74,7 +74,7 @@ export default {
| chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
| editable | 能否切换优惠券 | `Boolean` | `true` | - |
| border | 是否显示外边框 | `Boolean` | `true` | 1.3.10 |
| border | 是否显示内边框 | `Boolean` | `true` | 1.3.10 |
### CouponList API

2
packages/field/test/__snapshots__/demo.spec.js.snap
View File

@ -34,6 +34,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-field__icon">
<i class="van-icon van-icon-question" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<!---->
@ -65,6 +66,7 @@ exports[`renders demo correctly 1`] = `
<div disabled="disabled" class="van-cell van-field">
<i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<div class="van-cell__title"><span>用户名</span>
<!---->

1
packages/field/test/__snapshots__/index.spec.js.snap
View File

@ -26,6 +26,7 @@ exports[`clearable 2`] = `
<input type="text" class="van-field__control">
<i class="van-icon van-icon-clear van-field__clear">
<!---->
<!---->
</i>
<!---->
<!---->

4
packages/field/zh-CN.md
View File

@ -131,8 +131,8 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
| label-align | 文本对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
| autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | 1.0.0 |
| icon | 输入框尾部图标，可选值见 Icon 组件 | `String` | - | - |
| left-icon | 输入框左侧图标，可选值见 Icon 组件 | `String` | - | 1.1.4 |
| icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.1.4 |
### Event

5
packages/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -7,10 +7,12 @@ exports[`renders demo correctly 1`] = `
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i> 客服</div>
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i> 购物车</div>
<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button>
<button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
@ -21,9 +23,11 @@ exports[`renders demo correctly 1`] = `
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i> 客服</div>
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
<div class="van-info">
5
</div>
@ -31,6 +35,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-hairline van-goods-action-mini-btn">
<i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i> 店铺</div>
<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button>
<button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>

BIN
packages/icon/assets/icons.sketch
View File

Binary file not shown.

68
packages/icon/config/index.js
View File

@ -1,6 +1,32 @@
module.exports = {
name: 'vant-icon',
glyphs: [
basic: [
{
src: 'success.svg',
css: 'success'
},
{
src: 'fail.svg',
css: 'fail'
},
{
src: 'arrow.svg',
css: 'arrow'
},
{
src: 'arrow-left.svg',
css: 'arrow-left'
},
{
src: 'arrow-up.svg',
css: 'arrow-up'
},
{
src: 'arrow-down.svg',
css: 'arrow-down'
}
],
outline: [
{
src: 'close.svg',
css: 'close'
@ -65,6 +91,10 @@ module.exports = {
src: '喜欢.svg',
css: 'like-o'
},
{
src: 'star-o.svg',
css: 'star-o'
},
{
src: '物流.svg',
css: 'logistics'
@ -201,26 +231,16 @@ module.exports = {
src: '单选.svg',
css: 'check'
},
{
src: '进入箭头.svg',
css: 'arrow'
},
{
src: 'arrow-left.svg',
css: 'arrow-left'
},
{
src: '搜索.svg',
css: 'search'
},
{
src: '成功.svg',
css: 'success'
},
{
src: '失败.svg',
css: 'fail'
},
src: '购物车3.svg',
css: 'cart-o'
}
],
filled: [
{
src: '加购.svg',
css: 'add'
@ -249,6 +269,10 @@ module.exports = {
src: '喜欢2.svg',
css: 'like'
},
{
src: 'star.svg',
css: 'star'
},
{
src: '拍照.svg',
css: 'photograph'
@ -377,21 +401,9 @@ module.exports = {
src: '热卖.svg',
css: 'hot-sale'
},
{
src: '购物车3.svg',
css: 'cart-o'
},
{
src: 'question2.svg',
css: 'question2'
},
{
src: 'star.svg',
css: 'star'
},
{
src: 'star-o.svg',
css: 'star-o'
}
]
};

16
packages/icon/config/template.tpl
View File

@ -14,6 +14,22 @@
font-size: inherit;
text-rendering: auto;
&--image {
width: 1em;
height: 1em;
img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
position: absolute;
}
}
&::before {
display: inline-block;
}

86
packages/icon/demo/index.vue
View File

@ -1,14 +1,46 @@
<template>
<demo-section>
<demo-block :title="$t('title')">
<van-col
v-for="icon in icons"
:key="icon"
span="8"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
<demo-block :title="$t('basicUsage')">
<van-col span="8">
<van-icon name="close" />
</van-col>
<van-col span="8">
<van-icon name="//b.yzcdn.cn/vant/icon-demo-1126.png" />
</van-col>
</demo-block>
<demo-block :title="$t('info')">
<van-col span="8">
<van-icon
name="chat"
info="9"
/>
</van-col>
<van-col span="8">
<van-icon
name="chat"
info="99+"
/>
</van-col>
</demo-block>
<demo-block :title="$t('title')">
<van-tabs v-model="tab">
<van-tab title="基础图标" />
<van-tab title="线框风格" />
<van-tab title="实底风格" />
</van-tabs>
<div class="demo-icon-list">
<van-col
v-for="icon in list"
:key="icon"
span="8"
class="demo-col-with-text"
>
<van-icon :name="icon" />
<span>{{ icon }}</span>
</van-col>
</div>
</demo-block>
</demo-section>
</template>
@ -19,16 +51,28 @@ import icons from '../../../packages/icon/config';
export default {
i18n: {
'zh-CN': {
title: '图标列表'
title: '图标列表',
info: '显示徽标',
basic: '基础图标'
},
'en-US': {
title: 'Icon List'
title: 'Icon List',
info: 'Show Info',
basic: 'Basic Icon'
}
},
data() {
this.icons = icons.glyphs.map(icon => icon.css);
return {};
return {
tab: 0
};
},
computed: {
list() {
const key = ['basic', 'outline', 'filled'][this.tab];
return icons[key].map(icon => icon.css);
}
}
};
</script>
@ -37,22 +81,32 @@ export default {
.demo-icon {
font-size: 0;
&-list {
padding-top: 10px;
box-sizing: border-box;
min-height: calc(100vh - 65px);
}
.van-col {
text-align: center;
height: 100px;
float: none;
text-align: center;
height: 50px;
display: inline-block;
vertical-align: middle;
}
.demo-col-with-text {
height: 100px;
}
.van-icon {
display: block;
font-size: 32px;
margin: 15px 0;
color: rgba(69, 90, 100, .8);
color: rgba(69, 90, 100, 0.8);
}
span {
display: block;
font-size: 14px;
}
}

27
packages/icon/en-US.md
View File

@ -10,10 +10,19 @@ Vue.use(Icon);
### Usage
#### Basic Usage
View all usable icons on the right.
Use `name` prop to set icon name or icon URL
```html
<van-icon name="success" />
<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
```
#### Show Info
```html
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />
```
#### Use local font file
@ -27,28 +36,28 @@ import 'vant/lib/icon/local.css';
```css
@font-face {
font-family: 'custom-iconfont';
src: url('./iconfont.ttf') format('truetype');
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
}
.van-icon {
font-family: 'vant-icon', 'custom-iconfont' !important;
.my-icon {
font-family: 'my-icon';
}
.van-icon-extra:before {
.my-icon-extra::before {
content: '\e626';
}
```
```html
<van-icon name="extra" />
<van-icon class-prefix="my-icon" name="extra" />
```
### API
| Attribute | Description | Type | Default |
|------|------|------|------|
| name | Icon name | `String` | `''` |
| name | Icon name or URL | `String` | `''` |
| info | Info message | `String | Number` | `''` |
| color | Icon color | `String` | `inherit` |
| size | Icon size | `String` | `inherit` |

234
packages/icon/index.less
View File

@ -4,7 +4,7 @@
font-style: normal;
font-weight: normal;
font-family: 'vant-icon';
src: url('https://img.yzcdn.cn/vant/vant-icon-1ef3b9.ttf') format('truetype');
src: url('https://img.yzcdn.cn/vant/vant-icon-7a2fab.ttf') format('truetype');
}
.van-icon {
@ -14,6 +14,22 @@
font-size: inherit;
text-rendering: auto;
&--image {
width: 1em;
height: 1em;
img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
position: absolute;
}
}
&::before {
display: inline-block;
}
@ -43,370 +59,402 @@
content: "\F005";
}
.van-icon-arrow-left::before {
.van-icon-arrow-down::before {
content: "\F006";
}
.van-icon-arrow::before {
.van-icon-arrow-left::before {
content: "\F007";
}
.van-icon-balance-pay::before {
.van-icon-arrow-up::before {
content: "\F008";
}
.van-icon-browsing-history::before {
.van-icon-arrow::before {
content: "\F009";
}
.van-icon-card::before {
.van-icon-balance-pay::before {
content: "\F00A";
}
.van-icon-cart-o::before {
.van-icon-browsing-history::before {
content: "\F00B";
}
.van-icon-cart::before {
.van-icon-card::before {
content: "\F00C";
}
.van-icon-cash-back-record::before {
.van-icon-cart-o::before {
content: "\F00D";
}
.van-icon-cash-on-deliver::before {
.van-icon-cart::before {
content: "\F00E";
}
.van-icon-certificate::before {
.van-icon-cash-back-record::before {
content: "\F00F";
}
.van-icon-chat::before {
.van-icon-cash-on-deliver::before {
content: "\F010";
}
.van-icon-check::before {
.van-icon-certificate::before {
content: "\F011";
}
.van-icon-checked::before {
.van-icon-chat::before {
content: "\F012";
}
.van-icon-clear::before {
.van-icon-check::before {
content: "\F013";
}
.van-icon-clock::before {
.van-icon-checked::before {
content: "\F014";
}
.van-icon-close::before {
.van-icon-clear::before {
content: "\F015";
}
.van-icon-completed::before {
.van-icon-clock::before {
content: "\F016";
}
.van-icon-contact::before {
.van-icon-close::before {
content: "\F017";
}
.van-icon-coupon::before {
.van-icon-completed::before {
content: "\F018";
}
.van-icon-credit-pay::before {
.van-icon-contact::before {
content: "\F019";
}
.van-icon-debit-pay::before {
.van-icon-coupon::before {
content: "\F01A";
}
.van-icon-delete::before {
.van-icon-credit-pay::before {
content: "\F01B";
}
.van-icon-description::before {
.van-icon-debit-pay::before {
content: "\F01C";
}
.van-icon-discount::before {
.van-icon-delete::before {
content: "\F01D";
}
.van-icon-ecard-pay::before {
.van-icon-description::before {
content: "\F01E";
}
.van-icon-edit-data::before {
.van-icon-discount::before {
content: "\F01F";
}
.van-icon-edit::before {
.van-icon-ecard-pay::before {
content: "\F020";
}
.van-icon-exchange-record::before {
.van-icon-edit-data::before {
content: "\F021";
}
.van-icon-exchange::before {
.van-icon-edit::before {
content: "\F022";
}
.van-icon-fail::before {
.van-icon-exchange-record::before {
content: "\F023";
}
.van-icon-free-postage::before {
.van-icon-exchange::before {
content: "\F024";
}
.van-icon-gift-card-pay::before {
.van-icon-fail::before {
content: "\F025";
}
.van-icon-gift-card::before {
.van-icon-free-postage::before {
content: "\F026";
}
.van-icon-gift::before {
.van-icon-gift-card-pay::before {
content: "\F027";
}
.van-icon-gold-coin::before {
.van-icon-gift-card::before {
content: "\F028";
}
.van-icon-goods-collect::before {
.van-icon-gift::before {
content: "\F029";
}
.van-icon-home::before {
.van-icon-gold-coin::before {
content: "\F02A";
}
.van-icon-hot-sale::before {
.van-icon-goods-collect::before {
content: "\F02B";
}
.van-icon-hot::before {
.van-icon-home::before {
content: "\F02C";
}
.van-icon-idcard::before {
.van-icon-hot-sale::before {
content: "\F02D";
}
.van-icon-info-o::before {
.van-icon-hot::before {
content: "\F02E";
}
.van-icon-like-o::before {
.van-icon-idcard::before {
content: "\F02F";
}
.van-icon-like::before {
.van-icon-info-o::before {
content: "\F030";
}
.van-icon-location::before {
.van-icon-like-o::before {
content: "\F031";
}
.van-icon-logistics::before {
.van-icon-like::before {
content: "\F032";
}
.van-icon-more-o::before {
.van-icon-location::before {
content: "\F033";
}
.van-icon-more::before {
.van-icon-logistics::before {
content: "\F034";
}
.van-icon-new-arrival::before {
.van-icon-more-o::before {
content: "\F035";
}
.van-icon-new::before {
.van-icon-more::before {
content: "\F036";
}
.van-icon-other-pay::before {
.van-icon-new-arrival::before {
content: "\F037";
}
.van-icon-passed::before {
.van-icon-new::before {
content: "\F038";
}
.van-icon-password-not-view::before {
.van-icon-other-pay::before {
content: "\F039";
}
.van-icon-password-view::before {
.van-icon-passed::before {
content: "\F03A";
}
.van-icon-pause::before {
.van-icon-password-not-view::before {
content: "\F03B";
}
.van-icon-peer-pay::before {
.van-icon-password-view::before {
content: "\F03C";
}
.van-icon-pending-deliver::before {
.van-icon-pause::before {
content: "\F03D";
}
.van-icon-pending-evaluate::before {
.van-icon-peer-pay::before {
content: "\F03E";
}
.van-icon-pending-orders::before {
.van-icon-pending-deliver::before {
content: "\F03F";
}
.van-icon-pending-payment::before {
.van-icon-pending-evaluate::before {
content: "\F040";
}
.van-icon-phone::before {
.van-icon-pending-orders::before {
content: "\F041";
}
.van-icon-photo::before {
.van-icon-pending-payment::before {
content: "\F042";
}
.van-icon-photograph::before {
.van-icon-phone::before {
content: "\F043";
}
.van-icon-play::before {
.van-icon-photo::before {
content: "\F044";
}
.van-icon-point-gift::before {
.van-icon-photograph::before {
content: "\F045";
}
.van-icon-points-mall::before {
.van-icon-play::before {
content: "\F046";
}
.van-icon-points::before {
.van-icon-point-gift::before {
content: "\F047";
}
.van-icon-qr-invalid::before {
.van-icon-points-mall::before {
content: "\F048";
}
.van-icon-qr::before {
.van-icon-points::before {
content: "\F049";
}
.van-icon-question::before {
.van-icon-qr-invalid::before {
content: "\F04A";
}
.van-icon-question2::before {
.van-icon-qr::before {
content: "\F04B";
}
.van-icon-receive-gift::before {
.van-icon-question::before {
content: "\F04C";
}
.van-icon-records::before {
.van-icon-question2::before {
content: "\F04D";
}
.van-icon-search::before {
.van-icon-receive-gift::before {
content: "\F04E";
}
.van-icon-send-gift::before {
.van-icon-records::before {
content: "\F04F";
}
.van-icon-setting::before {
.van-icon-search::before {
content: "\F050";
}
.van-icon-share::before {
.van-icon-send-gift::before {
content: "\F051";
}
.van-icon-shop-collect::before {
.van-icon-setting::before {
content: "\F052";
}
.van-icon-shop::before {
.van-icon-share::before {
content: "\F053";
}
.van-icon-shopping-cart::before {
.van-icon-shop-collect::before {
content: "\F054";
}
.van-icon-sign::before {
.van-icon-shop::before {
content: "\F055";
}
.van-icon-star-o::before {
.van-icon-shopping-cart::before {
content: "\F056";
}
.van-icon-star::before {
.van-icon-sign::before {
content: "\F057";
}
.van-icon-stop::before {
.van-icon-star-o::before {
content: "\F058";
}
.van-icon-success::before {
.van-icon-star::before {
content: "\F059";
}
.van-icon-tosend::before {
.van-icon-stop::before {
content: "\F05A";
}
.van-icon-underway::before {
.van-icon-success::before {
content: "\F05B";
}
.van-icon-upgrade::before {
.van-icon-tosend::before {
content: "\F05C";
}
.van-icon-value-card::before {
.van-icon-underway::before {
content: "\F05D";
}
.van-icon-wap-home::before {
.van-icon-upgrade::before {
content: "\F05E";
}
.van-icon-wap-nav::before {
.van-icon-value-card::before {
content: "\F05F";
}
.van-icon-warn::before {
.van-icon-wap-home::before {
content: "\F060";
}
.van-icon-wechat::before {
.van-icon-wap-nav::before {
content: "\F061";
}
.van-icon-warn::before {
content: "\F062";
}
.van-icon-wechat::before {
content: "\F063";
}
.van-icon-圆角-上箭头::before {
content: "\F064";
}
.van-icon-圆角-下箭头::before {
content: "\F065";
}
.van-icon-圆角-右箭头::before {
content: "\F066";
}
.van-icon-圆角-左箭头::before {
content: "\F067";
}
.van-icon-失败::before {
content: "\F068";
}
.van-icon-成功::before {
content: "\F069";
}

15
packages/icon/index.vue
View File

@ -1,10 +1,14 @@
<template>
<i
v-on="$listeners"
:class="[classPrefix, `${classPrefix}-${name}`]"
:class="[classPrefix, isSrc ? 'van-icon--image' : `${classPrefix}-${name}`]"
:style="style"
>
<slot />
<img
v-if="isSrc"
:src="name"
>
<van-info :info="info" />
</i>
</template>
@ -12,6 +16,7 @@
<script>
import Info from '../info';
import create from '../utils/create-basic';
import isSrc from '../utils/validate/src';
export default create({
name: 'icon',
@ -22,9 +27,9 @@ export default create({
props: {
name: String,
info: [String, Number],
color: String,
size: String,
color: String,
info: [String, Number],
classPrefix: {
type: String,
default: 'van-icon'
@ -37,6 +42,10 @@ export default create({
color: this.color,
fontSize: this.size
};
},
isSrc() {
return isSrc(this.name);
}
}
});

2
packages/icon/local.less
View File

@ -2,5 +2,5 @@
font-style: normal;
font-weight: normal;
font-family: 'vant-icon';
src: url('./vant-icon-1ef3b9.ttf') format('truetype');
src: url('./vant-icon-7a2fab.ttf') format('truetype');
}

400
packages/icon/test/__snapshots__/demo.spec.js.snap
View File

@ -1,400 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-close" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>close</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-upgrade" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>upgrade</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-add-o" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>add-o</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-passed" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>passed</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>chat</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-question" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>question</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-clock" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>clock</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-gold-coin" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>gold-coin</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-play" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>play</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-pause" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>pause</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-stop" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>stop</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>more-o</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-info-o" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>info-o</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-share" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>share</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-aim" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>aim</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-like-o" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>like-o</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-logistics" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>logistics</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-edit" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>edit</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-exchange" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>exchange</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-location" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>location</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-cart" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>cart</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-shop" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>shop</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-gift" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>gift</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-contact" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>contact</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-wap-home" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>wap-home</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-points" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>points</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-discount" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>discount</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-point-gift" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>point-gift</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-after-sale" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>after-sale</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-edit-data" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>edit-data</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-delete" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>delete</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>records</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-completed" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>completed</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-certificate" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>certificate</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-tosend" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>tosend</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-sign" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>sign</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-photo" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>photo</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-idcard" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>idcard</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-home" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>home</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-free-postage" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>free-postage</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-cash-back-record" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>cash-back-record</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-points-mall" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>points-mall</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-exchange-record" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>exchange-record</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-pending-payment" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>pending-payment</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-pending-orders" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>pending-orders</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-pending-deliver" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>pending-deliver</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-pending-evaluate" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>pending-evaluate</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-password-view" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>password-view</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-password-not-view" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>password-not-view</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>check</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-arrow" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>arrow</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-arrow-left" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>arrow-left</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>search</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>success</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-fail" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>fail</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-add" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>add</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>checked</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-warn" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>warn</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-clear" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>clear</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-underway" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>underway</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-more" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>more</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-like" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>like</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-photograph" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>photograph</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-qr-invalid" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>qr-invalid</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-qr" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>qr</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-add2" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>add2</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-wechat" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>wechat</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-alipay" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>alipay</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-wap-nav" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>wap-nav</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-ecard-pay" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>ecard-pay</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-balance-pay" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>balance-pay</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-peer-pay" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>peer-pay</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-credit-pay" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>credit-pay</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-debit-pay" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>debit-pay</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-other-pay" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>other-pay</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-shopping-cart" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>shopping-cart</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-browsing-history" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>browsing-history</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-goods-collect" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>goods-collect</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-shop-collect" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>shop-collect</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-receive-gift" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>receive-gift</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-send-gift" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>send-gift</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-setting" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>setting</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-coupon" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>coupon</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-gift-card-pay" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>gift-card-pay</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-cash-on-deliver" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>cash-on-deliver</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-phone" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>phone</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-description" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>description</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-card" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>card</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-value-card" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>value-card</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-gift-card" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>gift-card</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-hot" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>hot</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-new" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>new</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-new-arrival" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>new-arrival</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-hot-sale" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>hot-sale</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-cart-o" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>cart-o</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-question2" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>question2</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-star" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>star</span></div>
<div class="van-col van-col--8">
<i class="van-icon van-icon-star-o" style="color:undefined;font-size:undefined;">
<!---->
</i> <span>star-o</span></div>
</div>
</div>
`;

4
packages/icon/test/demo.spec.js
View File

@ -1,4 +0,0 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);

BIN
packages/icon/vant-icon-1ef3b9.ttf → packages/icon/vant-icon-7a2fab.ttf
View File

Binary file not shown.

26
packages/icon/zh-CN.md
View File

@ -11,10 +11,18 @@ Vue.use(Icon);
#### 基础用法
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
`Icon`的`name`属性支持传入图标名称或图片链接
```html
<van-icon name="success" />
<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
```
#### 显示徽标
```html
<van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" />
```
#### 使用本地字体文件
@ -31,28 +39,28 @@ import 'vant/lib/icon/local.css';
```css
@font-face {
font-family: 'custom-iconfont';
src: url('./iconfont.ttf') format('truetype');
font-family: 'my-icon';
src: url('./my-icon.ttf') format('truetype');
}
.van-icon {
font-family: 'vant-icon', 'custom-iconfont' !important;
.my-icon {
font-family: 'my-icon';
}
.van-icon-extra:before {
.my-icon-extra::before {
content: '\e626';
}
```
```html
<van-icon name="extra" />
<van-icon class-prefix="my-icon" name="extra" />
```
### API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 图标名称 | `String` | - | - |
| name | 图标名称或图片链接 | `String` | - | - |
| info | 图标右上角文字提示 | `String | Number` | - | - |
| color | 图标颜色 | `String` | `inherit` | 1.1.3 |
| size | 图标大小，如 `20px` `2em` | `String` | `inherit` | 1.1.15 |

2
packages/image-preview/index.js
View File

@ -20,7 +20,7 @@ const initInstance = () => {
document.body.appendChild(instance.$el);
};
const ImagePreview = (images, startPosition) => {
const ImagePreview = (images, startPosition = 0) => {
/* istanbul ignore if */
if (isServer) {
return;

3
packages/nav-bar/index.less
View File

@ -14,7 +14,8 @@
}
&__arrow {
transform: rotate(180deg);
min-width: 1em;
font-size: 16px;
+ .van-nav-bar__text {
margin-left: -20px;

2
packages/nav-bar/index.vue
View File

@ -11,7 +11,7 @@
<icon
v-if="leftArrow"
:class="b('arrow')"
name="arrow"
name="arrow-left"
/>
<span
v-if="leftText"

7
packages/nav-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,8 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
<div class="van-nav-bar__left">
<i class="van-icon van-icon-arrow van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-arrow-left van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i> <span class="van-nav-bar__text">返回</span></div>
<div class="van-ellipsis van-nav-bar__title">标题</div>
@ -15,13 +16,15 @@ exports[`renders demo correctly 1`] = `
<div>
<div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
<div class="van-nav-bar__left">
<i class="van-icon van-icon-arrow van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-arrow-left van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i> <span class="van-nav-bar__text">返回</span></div>
<div class="van-ellipsis van-nav-bar__title">标题</div>
<div class="van-nav-bar__right">
<i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
</div>

2
packages/notice-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -30,6 +30,7 @@ exports[`renders demo correctly 1`] = `
</div>
<i class="van-icon van-icon-close van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-notice-bar van-notice-bar--withicon" style="color:undefined;background:undefined;">
@ -39,6 +40,7 @@ exports[`renders demo correctly 1`] = `
</div>
<i class="van-icon van-icon-arrow van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
</div>

2
packages/panel/zh-CN.md
View File

@ -38,7 +38,7 @@ Vue.use(Panel);
| title | 标题 | `String` | - | - |
| desc | 描述 | `String` | - | - |
| status | 状态 | `String` | - | - |
| icon | 标题左侧图标，可选值见 Icon 组件 | `String` | - | 1.3.8 |
| icon | 标题左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.3.8 |
### Slot

14
packages/radio/test/__snapshots__/demo.spec.js.snap
View File

@ -4,18 +4,18 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="demo-radio-group van-radio-group">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
</div>
</div>
<div>
<div class="demo-radio-group van-radio-group">
<div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="1" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
<div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="2" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
<div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="1" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
<div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="2" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
</div>
</div>
<div>
<div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;"> <!----></i></span> <span class="van-radio__label">
<div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label">
单选框
</span></div>
</div>
@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span>
<!---->
</div>
</div>
@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
<div class="van-cell__value">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span>
<!---->
</div>
</div>

23
packages/rate/demo/index.vue
View File

@ -4,9 +4,17 @@
<van-rate v-model="value1" />
</demo-block>
<demo-block :title="$t('customColor')">
<demo-block :title="$t('customIcon')">
<van-rate
v-model="value2"
icon="like"
void-icon="like-o"
/>
</demo-block>
<demo-block :title="$t('customStyle')">
<van-rate
v-model="value3"
:size="25"
:count="6"
color="#2ba"
@ -16,7 +24,7 @@
<demo-block :title="$t('disabled')">
<van-rate
v-model="value3"
v-model="value4"
disabled
/>
</demo-block>
@ -28,19 +36,22 @@ export default {
i18n: {
'zh-CN': {
disabled: '禁用状态',
customColor: '自定义颜色'
customIcon: '自定义图标',
customStyle: '自定义样式'
},
'en-US': {
disabled: 'Disabled',
customColor: 'Custom Color'
customIcon: 'Custom Icon',
customStyle: 'Custom Style'
}
},
data() {
return {
value1: 3,
value2: 4,
value3: 2
value2: 3,
value3: 4,
value4: 2
};
}
};

16
packages/rate/en-US.md
View File

@ -25,7 +25,17 @@ export default {
}
```
#### Custom Color
#### Custom Icon
```html
<van-rate
v-model="value"
icon="like"
void-icon="like-o"
/>
```
#### Custom Style
```html
<van-rate
@ -50,8 +60,10 @@ export default {
| v-model | Current rate | `Number` | - |
| count | Count | `Number` | `5` |
| size | Icon size (px) | `Number` | `20` |
| color | Selected color | `String` | `#ffd21e` |
| color | Selected color | `String` | `#ffd21e` |
| void-color | Void color | `String` | `#c7c7c7` |
| icon | Selected icon | `String` | `star` |
| void-icon | Void icon | `String` | `star-o` |
| readonly | Whether to be readonly | `Boolean` | `false` |
| disabled | Whether to disable rate | `Boolean` | `false` |
| disabled-color | Disabled color | `String` | `#bdbdbd` |

10
packages/rate/index.vue
View File

@ -9,7 +9,7 @@
:class="b('item')"
:size="size + 'px'"
:data-index="index"
:name="full ? 'star' : 'star-o'"
:name="full ? icon : voidIcon"
:color="disabled ? disabledColor : full ? color : voidColor"
@click="onSelect(index)"
/>
@ -29,6 +29,14 @@ export default create({
type: Number,
default: 20
},
icon: {
type: String,
default: 'star'
},
voidIcon: {
type: String,
default: 'star-o'
},
color: {
type: String,
default: '#ffd21e'

40
packages/rate/test/__snapshots__/demo.spec.js.snap
View File

@ -6,18 +6,47 @@ exports[`renders demo correctly 1`] = `
<div class="van-rate">
<i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!---->
<!---->
</i>
</div>
</div>
<div>
<div class="van-rate">
<i data-index="0" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="1" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="2" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="3" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="4" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!---->
<!---->
</i>
</div>
</div>
@ -25,21 +54,27 @@ exports[`renders demo correctly 1`] = `
<div class="van-rate">
<i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
<!---->
<!---->
</i>
<i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
<!---->
<!---->
</i>
<i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
<!---->
<!---->
</i>
<i data-index="3" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
<!---->
<!---->
</i>
<i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
<!---->
<!---->
</i>
<i data-index="5" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
<!---->
<!---->
</i>
</div>
</div>
@ -47,18 +82,23 @@ exports[`renders demo correctly 1`] = `
<div class="van-rate">
<i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="2" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
<!---->
</i>
<i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
<!---->
</i>
</div>
</div>

16
packages/rate/zh-CN.md
View File

@ -25,7 +25,17 @@ export default {
}
```
#### 自定义颜色
#### 自定义图标
```html
<van-rate
v-model="value"
icon="like"
void-icon="like-o"
/>
```
#### 自定义样式
```html
<van-rate
@ -50,8 +60,10 @@ export default {
| v-model | 当前分值 | `Number` | - | - |
| count | 图标总数 | `Number` | `5` | - |
| size | 图标大小 (px) | `Number` | `20` | - |
| color | 选中时的颜色 | `String` | `#ffd21e` | - |
| color | 选中时的颜色 | `String` | `#ffd21e` | - |
| void-color | 未选中时的颜色 | `String` | `#c7c7c7` | - |
| icon | 选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star` | 1.4.7 |
| void-icon | 未选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star-o` | 1.4.7 |
| readonly | 是否为只读状态 | `Boolean` | `false` | 1.3.0 |
| disabled | 是否禁用评分 | `Boolean` | `false` | - |
| disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` | - |

3
packages/search/test/__snapshots__/demo.spec.js.snap
View File

@ -7,6 +7,7 @@ exports[`renders demo correctly 1`] = `
<div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
<i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<!---->
<div class="van-cell__value van-cell__value--alone">
@ -29,6 +30,7 @@ exports[`renders demo correctly 1`] = `
<div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
<i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<!---->
<div class="van-cell__value van-cell__value--alone">
@ -53,6 +55,7 @@ exports[`renders demo correctly 1`] = `
<div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
<i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<!---->
<div class="van-cell__value van-cell__value--alone">

4
packages/steps/test/__snapshots__/demo.spec.js.snap
View File

@ -18,6 +18,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-step__circle-container">
<i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-step__line"></div>
@ -46,6 +47,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-steps__icon">
<i class="van-icon van-icon-logistics steps-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-steps__message">
@ -66,6 +68,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-step__circle-container">
<i class="van-icon van-icon-checked" style="color:#4b0;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-step__line"></div>
@ -99,6 +102,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-step__circle-container">
<i class="van-icon van-icon-checked" style="color:#f44;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-step__line"></div>

44
packages/style/animation.less
View File

@ -22,6 +22,30 @@
}
}
@keyframes van-slide-left-enter {
from {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes van-slide-left-leave {
to {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes van-slide-right-enter {
from {
transform: translate3d(100%, 0, 0);
}
}
@keyframes van-slide-right-leave {
to {
transform: translate3d(100%, 0, 0);
}
}
@keyframes van-fade-in {
from {
opacity: 0;
@ -81,3 +105,23 @@
animation: van-slide-down-leave .3s both ease;
}
}
.van-slide-left {
&-enter-active {
animation: van-slide-left-enter .3s both ease;
}
&-leave-active {
animation: van-slide-left-leave .3s both ease;
}
}
.van-slide-right {
&-enter-active {
animation: van-slide-right-enter .3s both ease;
}
&-leave-active {
animation: van-slide-right-leave .3s both ease;
}
}

24
packages/style/demo/index.vue
View File

@ -24,14 +24,24 @@
title="Slide Down"
@click="animate('van-slide-down')"
/>
<transition :name="transitionName">
<div
v-show="show"
class="demo-animate-block"
/>
</transition>
<van-cell
is-link
title="Slide Left"
@click="animate('van-slide-left')"
/>
<van-cell
is-link
title="Slide Right"
@click="animate('van-slide-right')"
/>
</demo-block>
<transition :name="transitionName">
<div
v-show="show"
class="demo-animate-block"
/>
</transition>
</demo-section>
</template>

10
packages/style/en-US.md
View File

@ -50,4 +50,14 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
<transition name="van-slide-down">
<div v-show="visible">Slide Down</div>
</transition>
<!-- slide left -->
<transition name="van-slide-left">
<div v-show="visible">Slide Left</div>
</transition>
<!-- slide right -->
<transition name="van-slide-right">
<div v-show="visible">Slide Right</div>
</transition>
```

10
packages/style/zh-CN.md
View File

@ -49,4 +49,14 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
<transition name="van-slide-down">
<div v-show="visible">Slide Down</div>
</transition>
<!-- 左滑进入 -->
<transition name="van-slide-left">
<div v-show="visible">Slide Left</div>
</transition>
<!-- 右滑进入 -->
<transition name="van-slide-right">
<div v-show="visible">Slide Right</div>
</transition>
```

1
packages/submit-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -50,6 +50,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
<i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div> <span class="van-checkbox__label">全选</span></div>
<div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div>

4
packages/tab/en-US.md
View File

@ -153,13 +153,13 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
| v-model | Index of active tab | `String` `Number` | `0` |
| color | Tab color | `String` | `#f44` |
| type | Can be set to `line` `card` | `String` | `line` |
| duration | Toggle tab's animation time | `Number` | `0.4` | - |
| duration | Toggle tab's animation time | `Number` | `0.3` | - |
| line-width | Width of tab line (px) | `Number` | Width of active tab |
| swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |
| sticky | Whether to use sticky mode | `Boolean` | `false` |
| offset-top | Offset top when use sticky mode | `Number` | `0` |
| swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` |
| animated | Whether to change tabs with animation | `false` | - |
| animated | Whether to change tabs with animation | `Boolean` | `false` |
### Tab API

2
packages/tab/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div
:class="b('pane', { float: parent.animated })"
v-show="parent.animated || isSelected"
:class="b('pane', { float: parent.animated })"
:style="paneStyle"
>
<slot v-if="inited" />

4
packages/tab/test/__snapshots__/demo.spec.js.snap
View File

@ -191,6 +191,7 @@ exports[`renders demo correctly 1`] = `
<div>
<i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>标签
</div>
</div>
@ -201,6 +202,7 @@ exports[`renders demo correctly 1`] = `
<div>
<i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>标签
</div>
</div>
@ -217,7 +219,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="width:0px;transition-duration:0.4s;transform:translateX(0px);display:none;">
<div class="van-tabs__track" style="width:0px;transition-duration:0.3s;transform:translateX(0px);display:none;">
<div class="van-tab__pane van-tab__pane--float">
<!---->
<!---->

4
packages/tab/zh-CN.md
View File

@ -157,13 +157,13 @@ export default {
| v-model | 当前标签的索引 | `String` `Number` | `0` | 1.0.6 |
| color | 标签颜色 | `String` | `#f44` | 1.2.0 |
| type | 样式类型，可选值为`card` | `String` | `line` | - |
| duration | 动画时间，单位秒 | `Number` | `0.4` | - |
| duration | 动画时间，单位秒 | `Number` | `0.3` | - |
| line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 |
| swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |
| sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
| offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | 1.1.15 |
| swipe-threshold | 滚动阈值，标签数量超过多少个可滚动 | `Number` | `4` | - |
| animated | 是否开启切换标签内容时的转场动画 | `false` | - | 1.4.5 |
| animated | 是否开启切换标签内容时的转场动画 | `Boolean` | `false` | 1.4.5 |
### Tab API

6
packages/tabbar/test/__snapshots__/demo.spec.js.snap
View File

@ -8,6 +8,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item__icon">
<i class="van-icon van-icon-shop" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<!---->
</div>
@ -17,6 +18,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item__icon van-tabbar-item__icon--dot">
<i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<!---->
</div>
@ -28,6 +30,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item__icon">
<i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<div class="van-info">
5
@ -41,6 +44,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item__icon">
<i class="van-icon van-icon-gold-coin" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<div class="van-info">
20
@ -67,6 +71,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item__icon">
<i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<!---->
</div>
@ -76,6 +81,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabbar-item__icon">
<i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<!---->
</div>

2
packages/tabbar/zh-CN.md
View File

@ -83,7 +83,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| icon | 图标名称 (可选值见 Icon 组件) | `String` | - | - |
| icon | 图标名称或图片链接，可选值见 Icon 组件| `String` | - | - |
| dot | 是否显示小红点 | `Boolean` | - | - |
| info | 图标右上角提示信息 | `String | Number` | - | - |
| url | 跳转链接 | `String` | - | - |

3
packages/tabs/index.less
View File

@ -3,6 +3,7 @@
.van-tab {
flex: 1;
cursor: pointer;
min-width: 0; // hack for flex ellipsis
padding: 0 5px;
font-size: 14px;
position: relative;
@ -11,7 +12,7 @@
text-align: center;
box-sizing: border-box;
background-color: @white;
min-width: 0; /* hack for flex ellipsis */
transition: color .3s;
span {
display: block;

6
packages/tabs/index.vue
View File

@ -72,6 +72,7 @@ export default create({
props: {
color: String,
sticky: Boolean,
animated: Boolean,
lineWidth: Number,
swipeable: Boolean,
active: {
@ -84,7 +85,7 @@ export default create({
},
duration: {
type: Number,
default: 0.4
default: 0.3
},
swipeThreshold: {
type: Number,
@ -93,8 +94,7 @@ export default create({
offsetTop: {
type: Number,
default: 0
},
animated: Boolean
}
},
data() {

4
packages/toast/index.less
View File

@ -44,11 +44,11 @@
}
.van-loading {
margin: 10px 0 5px;
margin: 10px 0;
}
.van-toast__text {
padding-top: 10px;
padding-top: 5px;
}
}

1
packages/tree-select/test/__snapshots__/demo.spec.js.snap
View File

@ -20,6 +20,7 @@ exports[`renders demo correctly 1`] = `
杭州
<i class="van-icon van-icon-success van-tree-select__selected" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
</div>
<div class="van-ellipsis van-tree-select__item">

2
packages/uploader/test/__snapshots__/demo.spec.js.snap
View File

@ -7,6 +7,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader">
<i class="van-icon van-icon-photograph" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<input type="file" accept="image/*" class="van-uploader__input">
</div>
@ -17,6 +18,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-uploader">
<i class="van-icon van-icon-photograph" style="color:undefined;font-size:undefined;">
<!---->
<!---->
</i>
<input type="file" accept="image/gif, image/jpeg" multiple="multiple" class="van-uploader__input">
</div>

11
packages/utils/test/index.spec.js
View File

@ -2,6 +2,7 @@ import deepClone from '../deep-clone';
import { isAndroid, isDef, camelize, get } from '..';
import { raf, cancel } from '../raf';
import { later } from '../../../test/utils';
import isSrc from '../validate/src';
import isEmail from '../validate/email';
import isMobile from '../validate/mobile';
import isNumber from '../validate/number';
@ -76,3 +77,13 @@ test('is-number', () => {
expect(isNumber('abc')).toBeFalsy();
expect(isNumber('1b2')).toBeFalsy();
});
test('is-src', () => {
expect(isSrc('http://img.cdn.com')).toBeTruthy();
expect(isSrc('https://img.cdn.com')).toBeTruthy();
expect(isSrc('//img.cdn.com')).toBeTruthy();
expect(isSrc('data:image/jpeg;base64,/9j/4AAQSkZ')).toBeTruthy();
expect(isSrc('img.cdn.com')).toBeFalsy();
expect(isSrc('name')).toBeFalsy();
expect(isSrc('')).toBeFalsy();
});

6
packages/utils/validate/src.js Normal file
View File

@ -0,0 +1,6 @@
/**
* Is image source
*/
export default function src(url) {
return /^(https?:)?\/\/|data:image/.test(url);
}

2175
yarn.lock
View File

File diff suppressed because it is too large Load Diff