mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[bugfix] remove unnecessary props (#323)
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [bugfix] Search box-sizing wrong * [Doc] update vant-demo respo * [Doc] translate theme & demo pages * [Doc] add Internationalization document * [bugfix] remove unnecessary props
This commit is contained in:
parent
5cbc374208
commit
ffa3fddfae
@ -14,7 +14,7 @@
|
|||||||
icon="clear"
|
icon="clear"
|
||||||
:placeholder="$t('usernamePlaceholder')"
|
:placeholder="$t('usernamePlaceholder')"
|
||||||
required
|
required
|
||||||
@clickIcon="username = ''"
|
@click-icon="username = ''"
|
||||||
>
|
>
|
||||||
</van-field>
|
</van-field>
|
||||||
|
|
||||||
|
@ -67,14 +67,14 @@ export default {
|
|||||||
const toast = Toast.loading({
|
const toast = Toast.loading({
|
||||||
duration: 0,
|
duration: 0,
|
||||||
forbidClick: true,
|
forbidClick: true,
|
||||||
message: this.$t('text4')(3)
|
message: this.$t('text4', 3)
|
||||||
});
|
});
|
||||||
|
|
||||||
let second = 3;
|
let second = 3;
|
||||||
const timer = setInterval(() => {
|
const timer = setInterval(() => {
|
||||||
second--;
|
second--;
|
||||||
if (second) {
|
if (second) {
|
||||||
toast.message = this.$t('text4')(second);
|
toast.message = this.$t('text4', second);
|
||||||
} else {
|
} else {
|
||||||
clearInterval(timer);
|
clearInterval(timer);
|
||||||
Toast.clear();
|
Toast.clear();
|
||||||
|
@ -56,11 +56,9 @@ Set grid spacing using `gutter` attribute. The default value is 0
|
|||||||
| Attribute | Description | Type | Default | Accepted Values |
|
| Attribute | Description | Type | Default | Accepted Values |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| gutter | grid spacing(px) | `String | Number` | - | - |
|
| gutter | grid spacing(px) | `String | Number` | - | - |
|
||||||
| prefix | className prefix | `String` | `van` | - |
|
|
||||||
|
|
||||||
#### Column
|
#### Column
|
||||||
| Attribute | Description | Type | Default | Accepted Values |
|
| Attribute | Description | Type | Default | Accepted Values |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| span | number of column the grid spans | `String | Number` | - | - |
|
| span | number of column the grid spans | `String | Number` | - | - |
|
||||||
| offset | number of spacing on the left side of the grid | `String | Number` | - | - |
|
| offset | number of spacing on the left side of the grid | `String | Number` | - | - |
|
||||||
| prefix | className prefix | `String` | `van` | - |
|
|
||||||
|
@ -52,11 +52,9 @@ Layout 组件提供了`24列栅格`,通过在`Col`上添加`span`属性设置
|
|||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| gutter | 列元素之间的间距(单位为px) | `String | Number` | - | - |
|
| gutter | 列元素之间的间距(单位为px) | `String | Number` | - | - |
|
||||||
| prefix | className 前缀 | `String` | `van` | - |
|
|
||||||
|
|
||||||
#### Column
|
#### Column
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|-----------|-----------|-----------|-------------|-------------|
|
|-----------|-----------|-----------|-------------|-------------|
|
||||||
| span | 列元素宽度 | `String | Number` | - | - |
|
| span | 列元素宽度 | `String | Number` | - | - |
|
||||||
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
||||||
| prefix | className 前缀 | `String` | `van` | - |
|
|
||||||
|
@ -106,7 +106,7 @@
|
|||||||
"style-loader": "^0.19.0",
|
"style-loader": "^0.19.0",
|
||||||
"uppercamelcase": "^3.0.0",
|
"uppercamelcase": "^3.0.0",
|
||||||
"url-loader": "^0.6.2",
|
"url-loader": "^0.6.2",
|
||||||
"vant-doc": "0.3.17",
|
"vant-doc": "0.3.18",
|
||||||
"vue": "^2.5.3",
|
"vue": "^2.5.3",
|
||||||
"vue-loader": "^13.5.0",
|
"vue-loader": "^13.5.0",
|
||||||
"vue-markdown-loader": "^2.2.3",
|
"vue-markdown-loader": "^2.2.3",
|
||||||
|
@ -10,7 +10,8 @@
|
|||||||
v-for="(item, index) in actions"
|
v-for="(item, index) in actions"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="['van-actionsheet__item', 'van-hairline--top', item.className, { 'van-actionsheet__item--loading': item.loading }]"
|
:class="['van-actionsheet__item', 'van-hairline--top', item.className, { 'van-actionsheet__item--loading': item.loading }]"
|
||||||
@click.stop="onClickItem(item)">
|
@click.stop="onClickItem(item)"
|
||||||
|
>
|
||||||
<template v-if="!item.loading">
|
<template v-if="!item.loading">
|
||||||
<span class="van-actionsheet__name">{{ item.name }}</span>
|
<span class="van-actionsheet__name">{{ item.name }}</span>
|
||||||
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
|
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
|
||||||
@ -18,8 +19,13 @@
|
|||||||
<van-loading v-else class="van-actionsheet__loading" type="circle" color="black" />
|
<van-loading v-else class="van-actionsheet__loading" type="circle" color="black" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="van-actionsheet__item van-actionsheet__cancel van-hairline--top" @click.stop="$emit('input', false)" v-if="cancelText">{{ cancelText }}</div>
|
<div
|
||||||
<div class="van-actionsheet__content" v-else>
|
v-if="cancelText"
|
||||||
|
v-text="cancelText"
|
||||||
|
class="van-actionsheet__item van-actionsheet__cancel van-hairline--top"
|
||||||
|
@click.stop="$emit('input', false)"
|
||||||
|
/>
|
||||||
|
<div v-else class="van-actionsheet__content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -43,18 +49,16 @@ export default {
|
|||||||
|
|
||||||
props: {
|
props: {
|
||||||
value: Boolean,
|
value: Boolean,
|
||||||
|
title: String,
|
||||||
|
cancelText: String,
|
||||||
actions: {
|
actions: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
},
|
},
|
||||||
title: String,
|
|
||||||
cancelText: String,
|
|
||||||
overlay: {
|
overlay: {
|
||||||
type: Boolean,
|
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
closeOnClickOverlay: {
|
closeOnClickOverlay: {
|
||||||
type: Boolean,
|
|
||||||
default: true
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -1,55 +0,0 @@
|
|||||||
## 定制主题
|
|
||||||
|
|
||||||
`Vant`提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者其他样式,可以使用下面的方法:
|
|
||||||
|
|
||||||
### 方案一. PostCSS 插件
|
|
||||||
在项目中直接引入组件对应的 postcss 源代码,并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量,步骤如下:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// 引入基础样式
|
|
||||||
import 'vant/packages/vant-css/src/base.css';
|
|
||||||
|
|
||||||
// 引入组价对应的样式
|
|
||||||
import 'vant/packages/vant-css/src/button.css';
|
|
||||||
import 'vant/packages/vant-css/src/checkbox.css';
|
|
||||||
```
|
|
||||||
|
|
||||||
接着在 postcss.config.js 中引入所需的 postcss 插件,并根据项目需求配置颜色变量,所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
module.exports = {
|
|
||||||
plugins: [
|
|
||||||
require('postcss-easy-import')({
|
|
||||||
extensions: ['pcss', 'css']
|
|
||||||
}),
|
|
||||||
require('postcss-theme-variables')({
|
|
||||||
vars: {
|
|
||||||
red: '#F60',
|
|
||||||
gray: '#CCC',
|
|
||||||
blue: '#03A9F4'
|
|
||||||
},
|
|
||||||
prefix: '$'
|
|
||||||
}),
|
|
||||||
require('precss')(),
|
|
||||||
require('postcss-calc')(),
|
|
||||||
require('autoprefixer')({
|
|
||||||
browsers: ['Android >= 4.0', 'iOS >= 7']
|
|
||||||
})
|
|
||||||
]
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 方案二. 本地构建
|
|
||||||
可以通过在本地构建 vant-css 的方式生成所需的主题
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 克隆仓库
|
|
||||||
git clone git@github.com:youzan/vant.git
|
|
||||||
cd packages/vant-css
|
|
||||||
```
|
|
||||||
|
|
||||||
在本地 vant-css 仓库中,修改 src/common/var.css 中的颜色变量,然后执行以下构建命令,即可生成对应的样式文件
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
@ -1,6 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="van-area">
|
<div class="van-area">
|
||||||
<van-picker ref="picker" :columns="areaColumns" value-key="name" show-toolbar @change="handleAreaChange" @confirm="handleAreaConfirm" @cancel="handleAreaCancel"></van-picker>
|
<van-picker
|
||||||
|
ref="picker"
|
||||||
|
showToolbar
|
||||||
|
valueKey="name"
|
||||||
|
:columns="areaColumns"
|
||||||
|
@change="onChange"
|
||||||
|
@confirm="$emit('confirm', $event)"
|
||||||
|
@cancel="$emit('cancel')"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -80,12 +88,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
// 根据省市县类型和对应的`code`获取对应列表
|
||||||
* 根据省市县类型和对应的`code`获取对应列表
|
|
||||||
*
|
|
||||||
* @param {string} type 省市县类型
|
|
||||||
* @param {string} code 对应code
|
|
||||||
*/
|
|
||||||
computedAreaList(type, code) {
|
computedAreaList(type, code) {
|
||||||
const result = [];
|
const result = [];
|
||||||
const curAreaList = this.areaList;
|
const curAreaList = this.areaList;
|
||||||
@ -107,9 +110,7 @@ export default {
|
|||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
// 获取对应省市县在列表中的索引
|
||||||
* 获取对应省市县在列表中的索引
|
|
||||||
*/
|
|
||||||
getAreaIndex(type, code) {
|
getAreaIndex(type, code) {
|
||||||
const compareNum = type === PROVINCE_TYPE
|
const compareNum = type === PROVINCE_TYPE
|
||||||
? 2
|
? 2
|
||||||
@ -125,7 +126,7 @@ export default {
|
|||||||
return 0;
|
return 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
handleAreaChange(picker, values, index) {
|
onChange(picker, values, index) {
|
||||||
const code = values[index].code;
|
const code = values[index].code;
|
||||||
// 处理省变化
|
// 处理省变化
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
@ -143,14 +144,6 @@ export default {
|
|||||||
[DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
|
[DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code.slice(0, 4)))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
handleAreaConfirm(values) {
|
|
||||||
this.$emit('confirm', values);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleAreaCancel() {
|
|
||||||
this.$emit('cancel');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -10,17 +10,9 @@ export default {
|
|||||||
name: 'van-badge',
|
name: 'van-badge',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
title: {
|
url: String,
|
||||||
type: String,
|
info: String,
|
||||||
required: true
|
title: String
|
||||||
},
|
|
||||||
url: {
|
|
||||||
type: String,
|
|
||||||
default: 'javascript:;'
|
|
||||||
},
|
|
||||||
info: {
|
|
||||||
type: String
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
@ -29,8 +21,7 @@ export default {
|
|||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
isSelect() {
|
isSelect() {
|
||||||
const parent = this.$parent;
|
return this.$parent.badges.indexOf(this) === this.$parent.activeKey;
|
||||||
return parent.badges.indexOf(this) === parent.activeKey;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1,8 +1,5 @@
|
|||||||
import Loading from '../loading';
|
import Loading from '../loading';
|
||||||
|
|
||||||
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
|
|
||||||
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-button',
|
name: 'van-button',
|
||||||
|
|
||||||
@ -22,13 +19,11 @@ export default {
|
|||||||
},
|
},
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'default',
|
default: 'default'
|
||||||
validator: value => ALLOWED_TYPE.indexOf(value) > -1
|
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'normal',
|
default: 'normal'
|
||||||
validator: value => ALLOWED_SIZE.indexOf(value) > -1
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -34,8 +34,8 @@ export default {
|
|||||||
thumb: String,
|
thumb: String,
|
||||||
title: String,
|
title: String,
|
||||||
desc: String,
|
desc: String,
|
||||||
num: [Number, String],
|
|
||||||
centered: Boolean,
|
centered: Boolean,
|
||||||
|
num: [Number, String],
|
||||||
price: [Number, String]
|
price: [Number, String]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -82,8 +82,8 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
startDrag(event) {
|
startDrag(event) {
|
||||||
this.startX = event.changedTouches[0].pageX;
|
this.startX = event.touches[0].pageX;
|
||||||
this.startY = event.changedTouches[0].pageY;
|
this.startY = event.touches[0].pageY;
|
||||||
},
|
},
|
||||||
|
|
||||||
onDrag(event) {
|
onDrag(event) {
|
||||||
@ -93,8 +93,8 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const offsetTop = event.changedTouches[0].pageY - this.startY;
|
const offsetTop = event.touches[0].pageY - this.startY;
|
||||||
const offsetLeft = event.changedTouches[0].pageX - this.startX;
|
const offsetLeft = event.touches[0].pageX - this.startX;
|
||||||
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
|
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
|
||||||
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
|
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
|
||||||
(offsetLeft > 0 && !this.leftWidth) ||
|
(offsetLeft > 0 && !this.leftWidth) ||
|
||||||
|
@ -101,10 +101,9 @@ export default {
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
onClickLabel() {
|
onClickLabel() {
|
||||||
if (this.isDisabled) {
|
if (!this.isDisabled) {
|
||||||
return;
|
this.currentValue = !this.currentValue;
|
||||||
}
|
}
|
||||||
this.currentValue = !this.currentValue;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -1,13 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
:class="[
|
:class="[`van-col`, {
|
||||||
`${prefix}-col`,
|
[`van-col-${span}`]: span,
|
||||||
{
|
[`van-col-offset-${offset}`]: offset,
|
||||||
[`${prefix}-col-${span}`]: span,
|
}]"
|
||||||
[`${prefix}-col-offset-${offset}`]: offset,
|
:style="style"
|
||||||
}
|
>
|
||||||
]"
|
|
||||||
:style="style">
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -18,11 +16,7 @@ export default {
|
|||||||
|
|
||||||
props: {
|
props: {
|
||||||
span: [Number, String],
|
span: [Number, String],
|
||||||
offset: [Number, String],
|
offset: [Number, String]
|
||||||
prefix: {
|
|
||||||
type: String,
|
|
||||||
default: 'van'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
@ -31,9 +25,7 @@ export default {
|
|||||||
},
|
},
|
||||||
style() {
|
style() {
|
||||||
const padding = `${this.gutter / 2}px`;
|
const padding = `${this.gutter / 2}px`;
|
||||||
return this.gutter
|
return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
|
||||||
? { paddingLeft: padding, paddingRight: padding }
|
|
||||||
: {};
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -31,16 +31,12 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
tel: String,
|
||||||
|
name: String,
|
||||||
addText: String,
|
addText: String,
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'add'
|
default: 'add'
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
tel: {
|
|
||||||
type: String
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -13,8 +13,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import Picker from '../picker';
|
import Picker from '../picker';
|
||||||
|
|
||||||
const allowedType = ['time', 'date', 'datetime'];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-datetime-picker',
|
name: 'van-datetime-picker',
|
||||||
|
|
||||||
@ -25,10 +23,7 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'datetime',
|
default: 'datetime'
|
||||||
validator(value) {
|
|
||||||
return allowedType.indexOf(value) > -1;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
format: {
|
format: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -58,7 +53,7 @@ export default {
|
|||||||
type: Number,
|
type: Number,
|
||||||
default: 23
|
default: 23
|
||||||
},
|
},
|
||||||
value: null
|
value: {}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
@ -44,16 +44,11 @@ export default {
|
|||||||
mixins: [Popup, i18n],
|
mixins: [Popup, i18n],
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
title: String,
|
||||||
|
message: String,
|
||||||
|
callback: Function,
|
||||||
confirmButtonText: String,
|
confirmButtonText: String,
|
||||||
cancelButtonText: String,
|
cancelButtonText: String,
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
message: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
showConfirmButton: {
|
showConfirmButton: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
@ -62,9 +57,6 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
callback: {
|
|
||||||
type: Function
|
|
||||||
},
|
|
||||||
overlay: {
|
overlay: {
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
|
@ -49,8 +49,6 @@
|
|||||||
import Cell from '../cell';
|
import Cell from '../cell';
|
||||||
import Icon from '../icon';
|
import Icon from '../icon';
|
||||||
|
|
||||||
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-field',
|
name: 'van-field',
|
||||||
|
|
||||||
@ -62,15 +60,14 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'text',
|
default: 'text'
|
||||||
validator: value => VALID_TYPES.indexOf(value) > -1
|
|
||||||
},
|
},
|
||||||
value: {},
|
value: {},
|
||||||
icon: String,
|
icon: String,
|
||||||
label: String,
|
label: String,
|
||||||
error: Boolean,
|
error: Boolean,
|
||||||
required: Boolean,
|
|
||||||
border: Boolean,
|
border: Boolean,
|
||||||
|
required: Boolean,
|
||||||
autosize: Boolean,
|
autosize: Boolean,
|
||||||
onIconClick: {
|
onIconClick: {
|
||||||
type: Function,
|
type: Function,
|
||||||
|
@ -22,11 +22,8 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
primary: Boolean,
|
url: String,
|
||||||
url: {
|
primary: Boolean
|
||||||
type: String,
|
|
||||||
default: 'javascript:;'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -16,15 +16,9 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
url: String,
|
||||||
icon: String,
|
icon: String,
|
||||||
iconClass: {
|
iconClass: String
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
url: {
|
|
||||||
type: String,
|
|
||||||
default: 'javascript:;'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -7,12 +7,8 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'van-icon',
|
name: 'van-icon',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
name: {
|
name: String
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -34,9 +34,6 @@ export default {
|
|||||||
overlay: {
|
overlay: {
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
lockOnScroll: {
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
closeOnClickOverlay: {
|
closeOnClickOverlay: {
|
||||||
default: true
|
default: true
|
||||||
}
|
}
|
||||||
|
@ -1,28 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="['van-loading', 'van-loading--' + type, 'van-loading--' + color]">
|
<div :class="['van-loading', 'van-loading--' + type, 'van-loading--' + color]">
|
||||||
<span :class="['van-loading__spinner', 'van-loading__spinner--' + type, 'van-loading__spinner--' + color]">
|
<span :class="['van-loading__spinner', 'van-loading__spinner--' + type, 'van-loading__spinner--' + color]">
|
||||||
<i v-if="type === 'spinner'" v-for="item in 12"></i>
|
<i v-if="type === 'spinner'" v-for="item in 12" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const VALID_TYPES = ['gradient-circle', 'circle', 'spinner'];
|
|
||||||
const VALID_COLORS = ['black', 'white'];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-loading',
|
name: 'van-loading',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'gradient-circle',
|
default: 'gradient-circle'
|
||||||
validator: value => VALID_TYPES.indexOf(value) > -1
|
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'black',
|
default: 'black'
|
||||||
validator: value => VALID_COLORS.indexOf(value) > -1
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -25,8 +25,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import Icon from '../icon';
|
import Icon from '../icon';
|
||||||
|
|
||||||
const NOTICE_BAR_MODE = ['', 'closeable', 'link'];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-notice-bar',
|
name: 'van-notice-bar',
|
||||||
|
|
||||||
@ -36,14 +34,10 @@ export default {
|
|||||||
|
|
||||||
props: {
|
props: {
|
||||||
text: String,
|
text: String,
|
||||||
leftIcon: String,
|
mode: String,
|
||||||
color: String,
|
color: String,
|
||||||
|
leftIcon: String,
|
||||||
background: String,
|
background: String,
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
validator: val => NOTICE_BAR_MODE.indexOf(val) !== -1
|
|
||||||
},
|
|
||||||
delay: {
|
delay: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
default: 1
|
default: 1
|
||||||
|
@ -2,9 +2,9 @@
|
|||||||
<div class="van-panel van-hairline--top-bottom">
|
<div class="van-panel van-hairline--top-bottom">
|
||||||
<div class="van-panel__header van-hairline--bottom">
|
<div class="van-panel__header van-hairline--bottom">
|
||||||
<slot name="header">
|
<slot name="header">
|
||||||
<div class="van-panel__title" v-text="title"></div>
|
<div class="van-panel__title" v-text="title" />
|
||||||
<span class="van-panel__desc" v-if="desc" v-text="desc"></span>
|
<span class="van-panel__desc" v-if="desc" v-text="desc" />
|
||||||
<span class="van-panel__status" v-if="status" v-text="status"></span>
|
<span class="van-panel__status" v-if="status" v-text="status" />
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-panel__content">
|
<div class="van-panel__content">
|
||||||
|
@ -33,8 +33,8 @@ export default {
|
|||||||
mixins: [findParent],
|
mixins: [findParent],
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
disabled: Boolean,
|
|
||||||
value: {},
|
value: {},
|
||||||
|
disabled: Boolean,
|
||||||
name: [String, Number]
|
name: [String, Number]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="`${prefix}-row`" :style="style">
|
<div class="van-row" :style="style">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -9,10 +9,6 @@ export default {
|
|||||||
name: 'van-row',
|
name: 'van-row',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
prefix: {
|
|
||||||
type: String,
|
|
||||||
default: 'van'
|
|
||||||
},
|
|
||||||
gutter: {
|
gutter: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 0
|
default: 0
|
||||||
|
@ -41,11 +41,8 @@ export default {
|
|||||||
|
|
||||||
props: {
|
props: {
|
||||||
value: String,
|
value: String,
|
||||||
|
showAction: Boolean,
|
||||||
placeholder: String,
|
placeholder: String,
|
||||||
showAction: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
background: {
|
background: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '#f2f2f2'
|
default: '#f2f2f2'
|
||||||
|
@ -116,10 +116,7 @@ export default {
|
|||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
hideStock: {
|
hideStock: Boolean,
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
showAddCartBtn: {
|
showAddCartBtn: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="van-step van-hairline" :class="stepClass">
|
<div class="van-step van-hairline" :class="[`van-step--${$parent.direction}`, { [`van-step--${status}`]: status }]">
|
||||||
<div class="van-step__circle-container">
|
<div class="van-step__circle-container">
|
||||||
<i class="van-step__circle" v-if="status !== 'process'"></i>
|
<i class="van-step__circle" v-if="status !== 'process'" />
|
||||||
<i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else></i>
|
<i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else />
|
||||||
</div>
|
</div>
|
||||||
<div class="van-step__title" :style="titleStyle">
|
<div class="van-step__title" :style="titleStyle">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-step__line"></div>
|
<div class="van-step__line" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -30,18 +30,11 @@ export default {
|
|||||||
return 'process';
|
return 'process';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
stepClass() {
|
|
||||||
const status = this.status;
|
|
||||||
const statusClass = status ? 'van-step--' + status : '';
|
|
||||||
const directionClass = `van-step--${this.$parent.direction}`;
|
|
||||||
return [directionClass, statusClass];
|
|
||||||
},
|
|
||||||
titleStyle() {
|
titleStyle() {
|
||||||
if (this.status === 'process') {
|
return this.status === 'process' ? {
|
||||||
return {
|
color: this.$parent.activeColor
|
||||||
color: this.$parent.activeColor
|
} : {};
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -3,21 +3,18 @@
|
|||||||
<div class="van-steps__status" v-if="title || description">
|
<div class="van-steps__status" v-if="title || description">
|
||||||
<div class="van-steps__icon" v-if="icon || $slots.icon">
|
<div class="van-steps__icon" v-if="icon || $slots.icon">
|
||||||
<slot name="icon">
|
<slot name="icon">
|
||||||
<van-icon :name="icon" :class="iconClass"></van-icon>
|
<van-icon :name="icon" :class="iconClass" />
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-steps__message">
|
<div class="van-steps__message">
|
||||||
<div class="van-steps__message-wrapper">
|
<div class="van-steps__message-wrapper">
|
||||||
<div class="van-steps__title" v-text="title"></div>
|
<div class="van-steps__title" v-text="title" />
|
||||||
<div class="van-steps__desc" v-text="description"></div>
|
<div class="van-steps__desc" v-text="description" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<slot name="message-extra">
|
<slot name="message-extra" />
|
||||||
</slot>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="van-steps__items" :class="{
|
<div class="van-steps__items" :class="{ 'van-steps__items--alone': !title && !description }">
|
||||||
'van-steps__items--alone': !title && !description
|
|
||||||
}">
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -34,13 +31,10 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
active: Number,
|
|
||||||
icon: String,
|
icon: String,
|
||||||
iconClass: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
title: String,
|
title: String,
|
||||||
|
active: Number,
|
||||||
|
iconClass: String,
|
||||||
description: String,
|
description: String,
|
||||||
direction: {
|
direction: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="van-submit-bar">
|
<div class="van-submit-bar">
|
||||||
<div class="van-submit-bar__tip" v-show="tip || $slots.tip">
|
<div class="van-submit-bar__tip" v-show="tip || $slots.tip">
|
||||||
{{ tip }}<slot name="tip"></slot>
|
{{ tip }}<slot name="tip" />
|
||||||
</div>
|
</div>
|
||||||
<div class="van-submit-bar__bar">
|
<div class="van-submit-bar__bar">
|
||||||
<div class="van-submit-bar__price">
|
<div class="van-submit-bar__price">
|
||||||
|
@ -12,10 +12,7 @@
|
|||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div v-else class="van-swipe__track">
|
||||||
v-else
|
|
||||||
class="van-swipe__track"
|
|
||||||
>
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-swipe__indicators" v-if="showIndicators && count > 1">
|
<div class="van-swipe__indicators" v-if="showIndicators && count > 1">
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<van-cell :title="title" class="van-switch-cell">
|
<van-cell :title="title" class="van-switch-cell">
|
||||||
<van-switch :value="value" @input="$emit('input', $event)" :disabled="disabled" :loading="loading" />
|
<van-switch v-bind="$props" @input="$emit('input', $event)" />
|
||||||
</van-cell>
|
</van-cell>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<div class="van-switch__node van-hairline-surround">
|
<div class="van-switch__node van-hairline-surround">
|
||||||
<van-loading v-if="loading" class="van-switch__loading" />
|
<van-loading v-if="loading" class="van-switch__loading" />
|
||||||
</div>
|
</div>
|
||||||
<div class="van-switch__bg"></div>
|
<div class="van-switch__bg" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -1,19 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<span :class="['van-tag', 'van-hairline--surround', { [`van-tag--${type}`]: type, 'is-plain': plain, 'is-mark': mark }]">
|
<span :class="['van-tag', 'van-hairline--surround', { [`van-tag--${type}`]: type, 'van-tag--plain': plain, 'van-tag--mark': mark }]">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const ALLOW_TYPE = ['danger', 'success', 'primary'];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'van-tag',
|
name: 'van-tag',
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: String,
|
||||||
type: String,
|
|
||||||
validator: val => ~ALLOW_TYPE.indexOf(val)
|
|
||||||
},
|
|
||||||
mark: Boolean,
|
mark: Boolean,
|
||||||
plain: Boolean
|
plain: Boolean
|
||||||
}
|
}
|
||||||
|
@ -6,9 +6,9 @@ let instance;
|
|||||||
const defaultOptions = {
|
const defaultOptions = {
|
||||||
visible: true,
|
visible: true,
|
||||||
type: 'text',
|
type: 'text',
|
||||||
|
mask: false,
|
||||||
position: 'middle',
|
position: 'middle',
|
||||||
duration: 3000,
|
duration: 3000,
|
||||||
mask: false,
|
|
||||||
forbidClick: false,
|
forbidClick: false,
|
||||||
clear: () => {
|
clear: () => {
|
||||||
instance.visible = false;
|
instance.visible = false;
|
||||||
|
@ -22,7 +22,6 @@
|
|||||||
import Icon from '../icon';
|
import Icon from '../icon';
|
||||||
import Loading from '../loading';
|
import Loading from '../loading';
|
||||||
|
|
||||||
const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
|
|
||||||
const DEFAULT_STYLE_LIST = ['success', 'fail', 'loading'];
|
const DEFAULT_STYLE_LIST = ['success', 'fail', 'loading'];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -34,26 +33,16 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
mask: Boolean,
|
||||||
|
message: String,
|
||||||
|
forbidClick: Boolean,
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'text',
|
default: 'text'
|
||||||
validator: value => TOAST_TYPES.indexOf(value) > -1
|
|
||||||
},
|
|
||||||
message: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
forbidClick: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
},
|
||||||
position: {
|
position: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'middle'
|
default: 'middle'
|
||||||
},
|
|
||||||
mask: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -10,16 +10,12 @@ export default {
|
|||||||
name: 'van-uploader',
|
name: 'van-uploader',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
disabled: {
|
disabled: Boolean,
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
beforeRead: Function,
|
beforeRead: Function,
|
||||||
afterRead: Function,
|
afterRead: Function,
|
||||||
resultType: {
|
resultType: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'dataUrl',
|
default: 'dataUrl'
|
||||||
validator: value => value === 'dataUrl' || value === 'text'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -10,16 +10,11 @@
|
|||||||
color: $white;
|
color: $white;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-color: $gray;
|
border-color: currentColor;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-plain {
|
&--mark {
|
||||||
background: $white;
|
|
||||||
color: $gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-mark {
|
|
||||||
border-radius: 0 8px 8px 0;
|
border-radius: 0 8px 8px 0;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
@ -30,11 +25,7 @@
|
|||||||
&--success {
|
&--success {
|
||||||
background: $green;
|
background: $green;
|
||||||
|
|
||||||
&::after {
|
&.van-tag--plain {
|
||||||
border-color: $green;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-plain {
|
|
||||||
color: $green;
|
color: $green;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -42,11 +33,7 @@
|
|||||||
&--danger {
|
&--danger {
|
||||||
background: $button-danger-background-color;
|
background: $button-danger-background-color;
|
||||||
|
|
||||||
&::after {
|
&.van-tag--plain {
|
||||||
border-color: $button-danger-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-plain {
|
|
||||||
color: $button-danger-background-color;
|
color: $button-danger-background-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -54,12 +41,13 @@
|
|||||||
&--primary {
|
&--primary {
|
||||||
background: $blue;
|
background: $blue;
|
||||||
|
|
||||||
&::after {
|
&.van-tag--plain {
|
||||||
border-color: $blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-plain {
|
|
||||||
color: $blue;
|
color: $blue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--plain {
|
||||||
|
background: $white;
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import deepAssign from 'packages/utils/deep-assign';
|
import deepAssign from 'packages/utils/deep-assign';
|
||||||
|
|
||||||
describe('DatetimePicker', () => {
|
describe('DeepAssign', () => {
|
||||||
it('basic assign', () => {
|
it('basic assign', () => {
|
||||||
const a = { foo: 0 };
|
const a = { foo: 0 };
|
||||||
const b = { foo: 0, bar: 1 };
|
const b = { foo: 0, bar: 1 };
|
||||||
|
@ -7755,9 +7755,9 @@ validate-npm-package-license@^3.0.1:
|
|||||||
spdx-correct "~1.0.0"
|
spdx-correct "~1.0.0"
|
||||||
spdx-expression-parse "~1.0.0"
|
spdx-expression-parse "~1.0.0"
|
||||||
|
|
||||||
vant-doc@0.3.17:
|
vant-doc@0.3.18:
|
||||||
version "0.3.17"
|
version "0.3.18"
|
||||||
resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-0.3.17.tgz#4c3bd5e4a4299926ad3638dc1c1bd28bbb5ac34b"
|
resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-0.3.18.tgz#86f94b931767bd1ba3e2c48015446be1729e0976"
|
||||||
dependencies:
|
dependencies:
|
||||||
cheerio "0.22.0"
|
cheerio "0.22.0"
|
||||||
decamelize "^1.2.0"
|
decamelize "^1.2.0"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user