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"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
required
|
||||
@clickIcon="username = ''"
|
||||
@click-icon="username = ''"
|
||||
>
|
||||
</van-field>
|
||||
|
||||
|
@ -67,14 +67,14 @@ export default {
|
||||
const toast = Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
message: this.$t('text4')(3)
|
||||
message: this.$t('text4', 3)
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = this.$t('text4')(second);
|
||||
toast.message = this.$t('text4', second);
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
|
@ -56,11 +56,9 @@ Set grid spacing using `gutter` attribute. The default value is 0
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | grid spacing(px) | `String | Number` | - | - |
|
||||
| prefix | className prefix | `String` | `van` | - |
|
||||
|
||||
#### Column
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | number of column the grid spans | `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` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | - |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
|
@ -106,7 +106,7 @@
|
||||
"style-loader": "^0.19.0",
|
||||
"uppercamelcase": "^3.0.0",
|
||||
"url-loader": "^0.6.2",
|
||||
"vant-doc": "0.3.17",
|
||||
"vant-doc": "0.3.18",
|
||||
"vue": "^2.5.3",
|
||||
"vue-loader": "^13.5.0",
|
||||
"vue-markdown-loader": "^2.2.3",
|
||||
|
@ -10,7 +10,8 @@
|
||||
v-for="(item, index) in actions"
|
||||
:key="index"
|
||||
: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">
|
||||
<span class="van-actionsheet__name">{{ item.name }}</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" />
|
||||
</li>
|
||||
</ul>
|
||||
<div class="van-actionsheet__item van-actionsheet__cancel van-hairline--top" @click.stop="$emit('input', false)" v-if="cancelText">{{ cancelText }}</div>
|
||||
<div class="van-actionsheet__content" v-else>
|
||||
<div
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,18 +49,16 @@ export default {
|
||||
|
||||
props: {
|
||||
value: Boolean,
|
||||
title: String,
|
||||
cancelText: String,
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
title: String,
|
||||
cancelText: String,
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -80,12 +88,7 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 根据省市县类型和对应的`code`获取对应列表
|
||||
*
|
||||
* @param {string} type 省市县类型
|
||||
* @param {string} code 对应code
|
||||
*/
|
||||
// 根据省市县类型和对应的`code`获取对应列表
|
||||
computedAreaList(type, code) {
|
||||
const result = [];
|
||||
const curAreaList = this.areaList;
|
||||
@ -107,9 +110,7 @@ export default {
|
||||
return result;
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取对应省市县在列表中的索引
|
||||
*/
|
||||
// 获取对应省市县在列表中的索引
|
||||
getAreaIndex(type, code) {
|
||||
const compareNum = type === PROVINCE_TYPE
|
||||
? 2
|
||||
@ -125,7 +126,7 @@ export default {
|
||||
return 0;
|
||||
},
|
||||
|
||||
handleAreaChange(picker, values, index) {
|
||||
onChange(picker, values, index) {
|
||||
const code = values[index].code;
|
||||
// 处理省变化
|
||||
if (index === 0) {
|
||||
@ -143,14 +144,6 @@ export default {
|
||||
[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',
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: 'javascript:;'
|
||||
},
|
||||
info: {
|
||||
type: String
|
||||
}
|
||||
url: String,
|
||||
info: String,
|
||||
title: String
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
@ -29,8 +21,7 @@ export default {
|
||||
|
||||
computed: {
|
||||
isSelect() {
|
||||
const parent = this.$parent;
|
||||
return parent.badges.indexOf(this) === parent.activeKey;
|
||||
return this.$parent.badges.indexOf(this) === this.$parent.activeKey;
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -1,8 +1,5 @@
|
||||
import Loading from '../loading';
|
||||
|
||||
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
|
||||
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
|
||||
|
||||
export default {
|
||||
name: 'van-button',
|
||||
|
||||
@ -22,13 +19,11 @@ export default {
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: value => ALLOWED_TYPE.indexOf(value) > -1
|
||||
default: 'default'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
validator: value => ALLOWED_SIZE.indexOf(value) > -1
|
||||
default: 'normal'
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -34,8 +34,8 @@ export default {
|
||||
thumb: String,
|
||||
title: String,
|
||||
desc: String,
|
||||
num: [Number, String],
|
||||
centered: Boolean,
|
||||
num: [Number, String],
|
||||
price: [Number, String]
|
||||
}
|
||||
};
|
||||
|
@ -82,8 +82,8 @@ export default {
|
||||
},
|
||||
|
||||
startDrag(event) {
|
||||
this.startX = event.changedTouches[0].pageX;
|
||||
this.startY = event.changedTouches[0].pageY;
|
||||
this.startX = event.touches[0].pageX;
|
||||
this.startY = event.touches[0].pageY;
|
||||
},
|
||||
|
||||
onDrag(event) {
|
||||
@ -93,8 +93,8 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
const offsetTop = event.changedTouches[0].pageY - this.startY;
|
||||
const offsetLeft = event.changedTouches[0].pageX - this.startX;
|
||||
const offsetTop = event.touches[0].pageY - this.startY;
|
||||
const offsetLeft = event.touches[0].pageX - this.startX;
|
||||
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
|
||||
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
|
||||
(offsetLeft > 0 && !this.leftWidth) ||
|
||||
|
@ -101,10 +101,9 @@ export default {
|
||||
|
||||
methods: {
|
||||
onClickLabel() {
|
||||
if (this.isDisabled) {
|
||||
return;
|
||||
if (!this.isDisabled) {
|
||||
this.currentValue = !this.currentValue;
|
||||
}
|
||||
this.currentValue = !this.currentValue;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
`${prefix}-col`,
|
||||
{
|
||||
[`${prefix}-col-${span}`]: span,
|
||||
[`${prefix}-col-offset-${offset}`]: offset,
|
||||
}
|
||||
]"
|
||||
:style="style">
|
||||
:class="[`van-col`, {
|
||||
[`van-col-${span}`]: span,
|
||||
[`van-col-offset-${offset}`]: offset,
|
||||
}]"
|
||||
:style="style"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@ -18,11 +16,7 @@ export default {
|
||||
|
||||
props: {
|
||||
span: [Number, String],
|
||||
offset: [Number, String],
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'van'
|
||||
}
|
||||
offset: [Number, String]
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -31,9 +25,7 @@ export default {
|
||||
},
|
||||
style() {
|
||||
const padding = `${this.gutter / 2}px`;
|
||||
return this.gutter
|
||||
? { paddingLeft: padding, paddingRight: padding }
|
||||
: {};
|
||||
return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -31,16 +31,12 @@ export default {
|
||||
},
|
||||
|
||||
props: {
|
||||
tel: String,
|
||||
name: String,
|
||||
addText: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'add'
|
||||
},
|
||||
name: {
|
||||
type: String
|
||||
},
|
||||
tel: {
|
||||
type: String
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -13,8 +13,6 @@
|
||||
<script>
|
||||
import Picker from '../picker';
|
||||
|
||||
const allowedType = ['time', 'date', 'datetime'];
|
||||
|
||||
export default {
|
||||
name: 'van-datetime-picker',
|
||||
|
||||
@ -25,10 +23,7 @@ export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'datetime',
|
||||
validator(value) {
|
||||
return allowedType.indexOf(value) > -1;
|
||||
}
|
||||
default: 'datetime'
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
@ -58,7 +53,7 @@ export default {
|
||||
type: Number,
|
||||
default: 23
|
||||
},
|
||||
value: null
|
||||
value: {}
|
||||
},
|
||||
|
||||
data() {
|
||||
|
@ -44,16 +44,11 @@ export default {
|
||||
mixins: [Popup, i18n],
|
||||
|
||||
props: {
|
||||
title: String,
|
||||
message: String,
|
||||
callback: Function,
|
||||
confirmButtonText: String,
|
||||
cancelButtonText: String,
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showConfirmButton: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@ -62,9 +57,6 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
callback: {
|
||||
type: Function
|
||||
},
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
|
@ -49,8 +49,6 @@
|
||||
import Cell from '../cell';
|
||||
import Icon from '../icon';
|
||||
|
||||
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
|
||||
|
||||
export default {
|
||||
name: 'van-field',
|
||||
|
||||
@ -62,15 +60,14 @@ export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
validator: value => VALID_TYPES.indexOf(value) > -1
|
||||
default: 'text'
|
||||
},
|
||||
value: {},
|
||||
icon: String,
|
||||
label: String,
|
||||
error: Boolean,
|
||||
required: Boolean,
|
||||
border: Boolean,
|
||||
required: Boolean,
|
||||
autosize: Boolean,
|
||||
onIconClick: {
|
||||
type: Function,
|
||||
|
@ -22,11 +22,8 @@ export default {
|
||||
},
|
||||
|
||||
props: {
|
||||
primary: Boolean,
|
||||
url: {
|
||||
type: String,
|
||||
default: 'javascript:;'
|
||||
}
|
||||
url: String,
|
||||
primary: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -16,15 +16,9 @@ export default {
|
||||
},
|
||||
|
||||
props: {
|
||||
url: String,
|
||||
icon: String,
|
||||
iconClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: 'javascript:;'
|
||||
}
|
||||
iconClass: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -7,12 +7,8 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-icon',
|
||||
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
name: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -34,9 +34,6 @@ export default {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
lockOnScroll: {
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
}
|
||||
|
@ -1,28 +1,23 @@
|
||||
<template>
|
||||
<div :class="['van-loading', 'van-loading--' + type, 'van-loading--' + 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const VALID_TYPES = ['gradient-circle', 'circle', 'spinner'];
|
||||
const VALID_COLORS = ['black', 'white'];
|
||||
|
||||
export default {
|
||||
name: 'van-loading',
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'gradient-circle',
|
||||
validator: value => VALID_TYPES.indexOf(value) > -1
|
||||
default: 'gradient-circle'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'black',
|
||||
validator: value => VALID_COLORS.indexOf(value) > -1
|
||||
default: 'black'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -25,8 +25,6 @@
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
|
||||
const NOTICE_BAR_MODE = ['', 'closeable', 'link'];
|
||||
|
||||
export default {
|
||||
name: 'van-notice-bar',
|
||||
|
||||
@ -36,14 +34,10 @@ export default {
|
||||
|
||||
props: {
|
||||
text: String,
|
||||
leftIcon: String,
|
||||
mode: String,
|
||||
color: String,
|
||||
leftIcon: String,
|
||||
background: String,
|
||||
mode: {
|
||||
type: String,
|
||||
default: '',
|
||||
validator: val => NOTICE_BAR_MODE.indexOf(val) !== -1
|
||||
},
|
||||
delay: {
|
||||
type: [String, Number],
|
||||
default: 1
|
||||
|
@ -2,9 +2,9 @@
|
||||
<div class="van-panel van-hairline--top-bottom">
|
||||
<div class="van-panel__header van-hairline--bottom">
|
||||
<slot name="header">
|
||||
<div class="van-panel__title" v-text="title"></div>
|
||||
<span class="van-panel__desc" v-if="desc" v-text="desc"></span>
|
||||
<span class="van-panel__status" v-if="status" v-text="status"></span>
|
||||
<div class="van-panel__title" v-text="title" />
|
||||
<span class="van-panel__desc" v-if="desc" v-text="desc" />
|
||||
<span class="van-panel__status" v-if="status" v-text="status" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="van-panel__content">
|
||||
|
@ -33,8 +33,8 @@ export default {
|
||||
mixins: [findParent],
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
value: {},
|
||||
disabled: Boolean,
|
||||
name: [String, Number]
|
||||
},
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="`${prefix}-row`" :style="style">
|
||||
<div class="van-row" :style="style">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@ -9,10 +9,6 @@ export default {
|
||||
name: 'van-row',
|
||||
|
||||
props: {
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'van'
|
||||
},
|
||||
gutter: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
|
@ -41,11 +41,8 @@ export default {
|
||||
|
||||
props: {
|
||||
value: String,
|
||||
showAction: Boolean,
|
||||
placeholder: String,
|
||||
showAction: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#f2f2f2'
|
||||
|
@ -116,10 +116,7 @@ export default {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
hideStock: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideStock: Boolean,
|
||||
showAddCartBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
@ -1,13 +1,13 @@
|
||||
<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">
|
||||
<i class="van-step__circle" v-if="status !== 'process'"></i>
|
||||
<i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else></i>
|
||||
<i class="van-step__circle" v-if="status !== 'process'" />
|
||||
<i class="van-icon van-icon-checked" :style="{ color: $parent.activeColor }" v-else />
|
||||
</div>
|
||||
<div class="van-step__title" :style="titleStyle">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="van-step__line"></div>
|
||||
<div class="van-step__line" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -30,18 +30,11 @@ export default {
|
||||
return 'process';
|
||||
}
|
||||
},
|
||||
stepClass() {
|
||||
const status = this.status;
|
||||
const statusClass = status ? 'van-step--' + status : '';
|
||||
const directionClass = `van-step--${this.$parent.direction}`;
|
||||
return [directionClass, statusClass];
|
||||
},
|
||||
|
||||
titleStyle() {
|
||||
if (this.status === 'process') {
|
||||
return {
|
||||
color: this.$parent.activeColor
|
||||
};
|
||||
}
|
||||
return this.status === 'process' ? {
|
||||
color: this.$parent.activeColor
|
||||
} : {};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -3,21 +3,18 @@
|
||||
<div class="van-steps__status" v-if="title || description">
|
||||
<div class="van-steps__icon" v-if="icon || $slots.icon">
|
||||
<slot name="icon">
|
||||
<van-icon :name="icon" :class="iconClass"></van-icon>
|
||||
<van-icon :name="icon" :class="iconClass" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="van-steps__message">
|
||||
<div class="van-steps__message-wrapper">
|
||||
<div class="van-steps__title" v-text="title"></div>
|
||||
<div class="van-steps__desc" v-text="description"></div>
|
||||
<div class="van-steps__title" v-text="title" />
|
||||
<div class="van-steps__desc" v-text="description" />
|
||||
</div>
|
||||
</div>
|
||||
<slot name="message-extra">
|
||||
</slot>
|
||||
<slot name="message-extra" />
|
||||
</div>
|
||||
<div class="van-steps__items" :class="{
|
||||
'van-steps__items--alone': !title && !description
|
||||
}">
|
||||
<div class="van-steps__items" :class="{ 'van-steps__items--alone': !title && !description }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,13 +31,10 @@ export default {
|
||||
},
|
||||
|
||||
props: {
|
||||
active: Number,
|
||||
icon: String,
|
||||
iconClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: String,
|
||||
active: Number,
|
||||
iconClass: String,
|
||||
description: String,
|
||||
direction: {
|
||||
type: String,
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__tip" v-show="tip || $slots.tip">
|
||||
{{ tip }}<slot name="tip"></slot>
|
||||
{{ tip }}<slot name="tip" />
|
||||
</div>
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-submit-bar__price">
|
||||
|
@ -12,10 +12,7 @@
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="van-swipe__track"
|
||||
>
|
||||
<div v-else class="van-swipe__track">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="van-swipe__indicators" v-if="showIndicators && count > 1">
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div class="van-switch__node van-hairline-surround">
|
||||
<van-loading v-if="loading" class="van-switch__loading" />
|
||||
</div>
|
||||
<div class="van-switch__bg"></div>
|
||||
<div class="van-switch__bg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,19 +1,14 @@
|
||||
<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>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const ALLOW_TYPE = ['danger', 'success', 'primary'];
|
||||
|
||||
export default {
|
||||
name: 'van-tag',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator: val => ~ALLOW_TYPE.indexOf(val)
|
||||
},
|
||||
type: String,
|
||||
mark: Boolean,
|
||||
plain: Boolean
|
||||
}
|
||||
|
@ -6,9 +6,9 @@ let instance;
|
||||
const defaultOptions = {
|
||||
visible: true,
|
||||
type: 'text',
|
||||
mask: false,
|
||||
position: 'middle',
|
||||
duration: 3000,
|
||||
mask: false,
|
||||
forbidClick: false,
|
||||
clear: () => {
|
||||
instance.visible = false;
|
||||
|
@ -22,7 +22,6 @@
|
||||
import Icon from '../icon';
|
||||
import Loading from '../loading';
|
||||
|
||||
const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
|
||||
const DEFAULT_STYLE_LIST = ['success', 'fail', 'loading'];
|
||||
|
||||
export default {
|
||||
@ -34,26 +33,16 @@ export default {
|
||||
},
|
||||
|
||||
props: {
|
||||
mask: Boolean,
|
||||
message: String,
|
||||
forbidClick: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
validator: value => TOAST_TYPES.indexOf(value) > -1
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
forbidClick: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: 'text'
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'middle'
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -10,16 +10,12 @@ export default {
|
||||
name: 'van-uploader',
|
||||
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: Boolean,
|
||||
beforeRead: Function,
|
||||
afterRead: Function,
|
||||
resultType: {
|
||||
type: String,
|
||||
default: 'dataUrl',
|
||||
validator: value => value === 'dataUrl' || value === 'text'
|
||||
default: 'dataUrl'
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -10,16 +10,11 @@
|
||||
color: $white;
|
||||
|
||||
&::after {
|
||||
border-color: $gray;
|
||||
border-color: currentColor;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
background: $white;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
&.is-mark {
|
||||
&--mark {
|
||||
border-radius: 0 8px 8px 0;
|
||||
|
||||
&::after {
|
||||
@ -30,11 +25,7 @@
|
||||
&--success {
|
||||
background: $green;
|
||||
|
||||
&::after {
|
||||
border-color: $green;
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
&.van-tag--plain {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
@ -42,11 +33,7 @@
|
||||
&--danger {
|
||||
background: $button-danger-background-color;
|
||||
|
||||
&::after {
|
||||
border-color: $button-danger-background-color;
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
&.van-tag--plain {
|
||||
color: $button-danger-background-color;
|
||||
}
|
||||
}
|
||||
@ -54,12 +41,13 @@
|
||||
&--primary {
|
||||
background: $blue;
|
||||
|
||||
&::after {
|
||||
border-color: $blue;
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
&.van-tag--plain {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&--plain {
|
||||
background: $white;
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import deepAssign from 'packages/utils/deep-assign';
|
||||
|
||||
describe('DatetimePicker', () => {
|
||||
describe('DeepAssign', () => {
|
||||
it('basic assign', () => {
|
||||
const a = { foo: 0 };
|
||||
const b = { foo: 0, bar: 1 };
|
||||
|
@ -7755,9 +7755,9 @@ validate-npm-package-license@^3.0.1:
|
||||
spdx-correct "~1.0.0"
|
||||
spdx-expression-parse "~1.0.0"
|
||||
|
||||
vant-doc@0.3.17:
|
||||
version "0.3.17"
|
||||
resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-0.3.17.tgz#4c3bd5e4a4299926ad3638dc1c1bd28bbb5ac34b"
|
||||
vant-doc@0.3.18:
|
||||
version "0.3.18"
|
||||
resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-0.3.18.tgz#86f94b931767bd1ba3e2c48015446be1729e0976"
|
||||
dependencies:
|
||||
cheerio "0.22.0"
|
||||
decamelize "^1.2.0"
|
||||
|
Loading…
x
Reference in New Issue
Block a user