mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'dev' of https://github.com/youzan/vant into dev
This commit is contained in:
陈嘉涵
commit
7714065a3e
@ -1,17 +1,16 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }} 1</van-checkbox>
|
||||
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-checkbox :value="false" disabled>{{ $t('checkbox') }} 2</van-checkbox>
|
||||
<van-checkbox :value="true" disabled>{{ $t('checkbox') }} 2</van-checkbox>
|
||||
<van-checkbox :value="false" disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
<van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('labelDisabled')">
|
||||
<van-checkbox v-model="checkbox3" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
|
||||
<van-checkbox v-model="checkbox4" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
|
||||
<van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
@ -27,20 +26,22 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<van-checkbox-group v-model="result2" :max="2">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
{{ $t('checkbox') }} {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-checkbox-group v-model="result2" :max="max">
|
||||
<van-checkbox-group v-model="result3">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
|
||||
<van-cell v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
|
||||
<van-checkbox :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@ -53,17 +54,17 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
checkbox: '复选框',
|
||||
labelDisabled: '禁用 Checkbox 内容部分点击事件',
|
||||
labelDisabled: '禁用内容部分点击事件',
|
||||
title3: 'Checkbox 组',
|
||||
title4: '与 Cell 组件一起使用',
|
||||
title5: '设置最大可选数',
|
||||
title4: '设置最大可选数',
|
||||
title5: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
labelDisabled: 'Disable Checkbox Label click event',
|
||||
labelDisabled: 'Disable Label click event',
|
||||
title3: 'Checkbox Group',
|
||||
title4: 'Inside a Cell',
|
||||
title5: 'Maximum amount of checked options'
|
||||
title4: 'Maximum amount of checked options',
|
||||
title5: 'Inside a Cell'
|
||||
}
|
||||
},
|
||||
|
||||
@ -71,8 +72,6 @@ export default {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
checkbox3: false,
|
||||
checkbox4: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
@ -80,7 +79,7 @@ export default {
|
||||
],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
max: 2
|
||||
result3: []
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -95,13 +94,6 @@ export default {
|
||||
.van-cell {
|
||||
.van-checkbox {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
&__label {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,7 +65,7 @@ export default {
|
||||
<style lang="postcss">
|
||||
.demo-list {
|
||||
.van-cell {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
|
||||
@ -17,8 +17,12 @@
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell>
|
||||
<van-cell :title="$t('radio') + 1" clickable @click="radio3 = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell :title="$t('radio') + 2" clickable @click="radio3 = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
@ -61,16 +65,5 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
.van-radio__input {
|
||||
float: right;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.van-radio__label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
>
|
||||
<template slot="sku-header-price" slot-scope="props">
|
||||
<div class="van-sku__goods-price">
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-slider v-model="value1"/>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-stepper v-model="value1" />
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-slider v-model="value1" @change="onChange" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-slider
|
||||
v-model="value2"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:min="10"
|
||||
:max="90"
|
||||
@change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -24,17 +20,9 @@
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-slider
|
||||
v-model="value4"
|
||||
@change="handleChange"
|
||||
@after-change="handleAfterChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-slider
|
||||
v-model="value5"
|
||||
pivot-color="#333"
|
||||
loaded-bar-color="red"
|
||||
bar-color="blue"
|
||||
:step="10"
|
||||
bar-height="4px"
|
||||
@change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
@ -45,46 +33,43 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '基本用法',
|
||||
title2: '最大最小值',
|
||||
title2: '指定选择范围',
|
||||
title3: '禁用',
|
||||
title4: '事件',
|
||||
title5: '自定义样式'
|
||||
title4: '指定步长',
|
||||
text: '当前值：'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Basic Usage',
|
||||
title2: 'Max && Min',
|
||||
title3: 'Disabed',
|
||||
title4: 'Event',
|
||||
title5: 'Customized style'
|
||||
title2: 'Range',
|
||||
title3: 'Disabled',
|
||||
title4: 'Step size',
|
||||
text: 'Current value: '
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: 50,
|
||||
value2: 50,
|
||||
value3: 50,
|
||||
value4: 50,
|
||||
value5: 50,
|
||||
min: 10,
|
||||
max: 90
|
||||
}
|
||||
value4: 50
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log('handleChange:', value)
|
||||
},
|
||||
handleAfterChange(value) {
|
||||
console.log('handleAfterChange:', value)
|
||||
onChange(value) {
|
||||
this.$toast(this.$t('text') + value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.van-row {
|
||||
padding-top: 20px;
|
||||
.van-col {
|
||||
text-align: center;
|
||||
}
|
||||
.demo-slider {
|
||||
user-select: none;
|
||||
|
||||
.van-slider {
|
||||
margin: 0 15px 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
|
||||
<van-checkbox v-model="checked">Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -28,7 +28,13 @@ export default {
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
|
||||
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
#### Disable Label click event
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
#### Checkbox Group
|
||||
@ -76,8 +82,8 @@ export default {
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="item">
|
||||
<van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
|
||||
<van-cell v-for="item in list" :title="`Checkbox ${item}`" :key="item">
|
||||
<van-checkbox :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
|
||||
@ -68,3 +68,9 @@ Vue.use(Vant);
|
||||
```shell
|
||||
vue init youzan/vue-cli-template-vant projectName
|
||||
```
|
||||
|
||||
### rem units
|
||||
Vant use `px` as size units by default，you can use tools such as `postcss-pxtorem` to transform units to `rem`.
|
||||
|
||||
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)
|
||||
- [lib-flexible](https://github.com/amfe/lib-flexible)
|
||||
|
||||
@ -44,8 +44,12 @@ export default {
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
|
||||
<van-cell :title="Radio 1" clickable @click="radio = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell :title="Radio 2" clickable @click="radio = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
@ -67,7 +67,7 @@ Vue.use(Sku);
|
||||
<!-- custom sku-header-price -->
|
||||
<template slot="sku-header-price" slot-scope="props">
|
||||
<div class="van-sku__goods-price">
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- custom sku actions -->
|
||||
|
||||
@ -11,99 +11,56 @@ Vue.use(Slider);
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-slider v-model="value1"/>
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-stepper v-model="value1" />
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-slider v-model="value" @change="onChange" />
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
value1: 50
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Max && Min
|
||||
|
||||
```html
|
||||
<van-slider
|
||||
v-model="value2"
|
||||
:min="min"
|
||||
:max="max"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
value2: 50,
|
||||
min: 10,
|
||||
max: 90
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Disabed
|
||||
|
||||
```html
|
||||
<van-slider v-model="value3" disabled />
|
||||
```
|
||||
|
||||
#### Customized style
|
||||
|
||||
```html
|
||||
<van-slider
|
||||
v-model="value4"
|
||||
@change="handleChange"
|
||||
@after-change="handleAfterChange"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
value4: 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log('handleChange:', value)
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 50
|
||||
};
|
||||
},
|
||||
handleAfterChange(value) {
|
||||
console.log('handleAfterChange:', value)
|
||||
|
||||
methods: {
|
||||
onChange(value) {
|
||||
this.$toast('Current value：' + value);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Customized style
|
||||
#### Range
|
||||
|
||||
```html
|
||||
<van-slider
|
||||
v-model="value5"
|
||||
pivot-color="#333"
|
||||
loaded-bar-color="red"
|
||||
bar-color="blue"
|
||||
/>
|
||||
<van-slider v-model="value" :min="10" :max="90" />
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" disabled />
|
||||
```
|
||||
|
||||
#### Step size
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" :step="10" bar-height="4px" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | current value | Number | 0 | - |
|
||||
| disabled | disabled | Boolean | false | - |
|
||||
| bar-color | bar-color | string | `#cacaca` | - |
|
||||
| loaded-bar-color | loaded-bar-color | string | `#4b0` | - |
|
||||
| pivot-color | pivot-color | string | `#4b0` | - |
|
||||
| max | max | Number | 100 | - |
|
||||
| min | min | Number | 0 | - |
|
||||
| value | Current value | `Number` | `0` |
|
||||
| disabled | Whether to disable slider | `Boolean` | `false` |
|
||||
| max | Max value | `Number` | `100` |
|
||||
| min | Min value | `Number` | `0` |
|
||||
| step | Step size | `Number` | `1` |
|
||||
| bar-height | Height of bar | `String` | `2px` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | touchmove emit | value |
|
||||
| after-change | touchend emit | value |
|
||||
| change | Triggered after value change | value: current rate |
|
||||
|
||||
@ -43,6 +43,7 @@ You can set native properties such as `accpet`、`multiple` on Uploader, and the
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| result-type | Type of file read result | `String` | `dataUrl` | `text` |
|
||||
| accept | Accepted file type | `String` | `image/*` | - |
|
||||
| disabled | Whether to disabled the upload | `Boolean` | `false` | - |
|
||||
| before-read | Hook before reading the file, return false to stop reading the file | `Function` | - | - |
|
||||
| after-read | Hook after reading the file | `Function` | - | - |
|
||||
|
||||
@ -13,7 +13,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
|
||||
通过`v-model`绑定 checkbox 的勾选状态
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">复选框 1</van-checkbox>
|
||||
<van-checkbox v-model="checked">复选框</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -29,13 +29,15 @@ export default {
|
||||
#### 禁用状态
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" disabled>复选框 2</van-checkbox>
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
#### 禁用内容部分点击事件
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>复选框 3</van-checkbox>
|
||||
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
#### Checkbox 组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
|
||||
@ -84,8 +86,8 @@ export default {
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="item">
|
||||
<van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
|
||||
<van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
|
||||
<van-checkbox :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
|
||||
@ -69,3 +69,9 @@ Vue.use(Vant);
|
||||
```shell
|
||||
vue init youzan/vue-cli-template-vant projectName
|
||||
```
|
||||
|
||||
### rem 适配
|
||||
Vant 中的组件样式默认使用`px`作为单位，如果需要使用`rem`作为单位，推荐使用以下两个工具
|
||||
|
||||
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 用于将单位转化为 rem
|
||||
- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值
|
||||
|
||||
@ -46,8 +46,12 @@ export default {
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">单选框 1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">单选框 2</van-radio></van-cell>
|
||||
<van-cell :title="单选框 1" clickable @click="radio = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell :title="单选框 2" clickable @click="radio = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
@ -67,7 +67,7 @@ Vue.use(Sku);
|
||||
<!-- 自定义 sku-header-price -->
|
||||
<template slot="sku-header-price" slot-scope="props">
|
||||
<div class="van-sku__goods-price">
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 自定义 sku actions -->
|
||||
|
||||
@ -10,99 +10,56 @@ Vue.use(Slider);
|
||||
#### 基本用法
|
||||
|
||||
```html
|
||||
<van-slider v-model="value1"/>
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-stepper v-model="value1" />
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-slider v-model="value" @change="onChange" />
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
value1: 50
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 50
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(value) {
|
||||
this.$toast('当前值：' + value);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 最大最小值
|
||||
#### 指定选择范围
|
||||
|
||||
```html
|
||||
<van-slider
|
||||
v-model="value2"
|
||||
:min="min"
|
||||
:max="max"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
value2: 50,
|
||||
min: 10,
|
||||
max: 90
|
||||
}
|
||||
}
|
||||
<van-slider v-model="value" :min="10" :max="90" />
|
||||
```
|
||||
|
||||
#### 禁用
|
||||
|
||||
```html
|
||||
<van-slider v-model="value3" disabled />
|
||||
<van-slider v-model="value" disabled />
|
||||
```
|
||||
|
||||
#### 事件
|
||||
#### 指定步长
|
||||
|
||||
```html
|
||||
<van-slider
|
||||
v-model="value4"
|
||||
@change="handleChange"
|
||||
@after-change="handleAfterChange"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
value4: 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log('handleChange:', value)
|
||||
},
|
||||
handleAfterChange(value) {
|
||||
console.log('handleAfterChange:', value)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
```html
|
||||
<van-slider
|
||||
v-model="value5"
|
||||
pivot-color="#333"
|
||||
loaded-bar-color="red"
|
||||
bar-color="blue"
|
||||
/>
|
||||
<van-slider v-model="value" :step="10" bar-height="4px" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 当前进度百分比 | Number | 0 | 否 |
|
||||
| disabled | 滑块是否禁用 | Boolean | false | 否 |
|
||||
| bar-color | 进度条颜色 | string | `#cacaca` | 否 |
|
||||
| loaded-bar-color | 已加载条颜色 | string | `#4b0` | 否 |
|
||||
| pivot-color | 滑块颜色 | string | `#4b0` | 否 |
|
||||
| max | 最大值 | Number | 100 | - |
|
||||
| min | 最小值 | Number | 0 | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| value | 当前进度百分比 | `Number` | `0` |
|
||||
| disabled | 是否禁用滑块 | `Boolean` | `false` |
|
||||
| max | 最大值 | `Number` | `100` |
|
||||
| min | 最小值 | `Number` | `0` |
|
||||
| step | 步长 | `Number` | `1` |
|
||||
| bar-height | 进度条高度 | `String` | `2px` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 拖动时触发 | value |
|
||||
| after-change | 拖动停止后触发 | value |
|
||||
| change | 进度值改变后触发 | value: 当前进度 |
|
||||
|
||||
@ -41,6 +41,7 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| result-type | 文件读取结果类型 | `String` | `dataUrl` | `text` |
|
||||
| accept | 接受的文件类型 | `String` | `image/*` | - |
|
||||
| disabled | 是否禁用图片上传 | `Boolean` | `false` | - |
|
||||
| before-read | 读取前的回调函数，返回 false 可终止文件读取 | `Function` | - | - |
|
||||
| after-read | 读取完成后的回调函数 | `Function` | - | - |
|
||||
|
||||
@ -136,6 +136,10 @@ module.exports = {
|
||||
path: '/progress',
|
||||
title: 'Progress - 进度条'
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
title: 'Slider - 滑块'
|
||||
},
|
||||
{
|
||||
path: '/stepper',
|
||||
title: 'Stepper - 步进器'
|
||||
@ -148,10 +152,6 @@ module.exports = {
|
||||
path: '/swipe',
|
||||
title: 'Swipe - 轮播'
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
title: 'Slider - 滑块'
|
||||
},
|
||||
{
|
||||
path: '/tab',
|
||||
title: 'Tab - 标签页'
|
||||
@ -434,6 +434,10 @@ module.exports = {
|
||||
path: '/progress',
|
||||
title: 'Progress'
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
title: 'Slider'
|
||||
},
|
||||
{
|
||||
path: '/stepper',
|
||||
title: 'Stepper'
|
||||
@ -446,10 +450,6 @@ module.exports = {
|
||||
path: '/swipe',
|
||||
title: 'Swipe'
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
title: 'Slider'
|
||||
},
|
||||
{
|
||||
path: '/tab',
|
||||
title: 'Tab'
|
||||
|
||||
@ -12,6 +12,10 @@
|
||||
"packages",
|
||||
"types"
|
||||
],
|
||||
"sideEffects": [
|
||||
"es/**/style/*",
|
||||
"lib/**/style/*"
|
||||
],
|
||||
"scripts": {
|
||||
"bootstrap": "yarn || npm i && cd ./packages/vant-css/ && yarn || npm i && cd ../../",
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --config build/webpack.config.dev.js",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-cell-group" :class="{ 'van-hairline--top-bottom': border }">
|
||||
<div :class="[b(), { 'van-hairline--top-bottom': border }]">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,19 +1,23 @@
|
||||
<template>
|
||||
<div
|
||||
v-clickoutside:touchstart="onClick"
|
||||
class="van-cell-swipe"
|
||||
:class="b()"
|
||||
@click="onClick('cell')"
|
||||
@touchstart="startDrag"
|
||||
@touchmove="onDrag"
|
||||
@touchend="endDrag"
|
||||
@touchcancel="endDrag"
|
||||
>
|
||||
<div class="van-cell-swipe__wrapper" :style="wrapperStyle" @transitionend="swipe = false">
|
||||
<div class="van-cell-swipe__left" @click.stop="onClick('left')" v-if="leftWidth">
|
||||
<div
|
||||
:class="b('wrapper')"
|
||||
:style="wrapperStyle"
|
||||
@transitionend="swipe = false"
|
||||
>
|
||||
<div v-if="leftWidth" :class="b('left')" @click.stop="onClick('left')">
|
||||
<slot name="left" />
|
||||
</div>
|
||||
<slot />
|
||||
<div class="van-cell-swipe__right" @click.stop="onClick('right')" v-if="rightWidth">
|
||||
<div v-if="rightWidth" :class="b('right')" @click.stop="onClick('right')">
|
||||
<slot name="right" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,37 +1,34 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-cell"
|
||||
:class="{
|
||||
'van-hairline': border,
|
||||
'van-cell--center': center,
|
||||
'van-cell--required': required,
|
||||
'van-cell--clickable': isLink || clickable
|
||||
}"
|
||||
:class="[
|
||||
b({
|
||||
center,
|
||||
required,
|
||||
clickable: isLink || clickable
|
||||
}),
|
||||
{ 'van-hairline': border }
|
||||
]"
|
||||
@click="onClick"
|
||||
>
|
||||
<slot name="icon">
|
||||
<icon v-if="icon" class="van-cell__left-icon" :name="icon" />
|
||||
<icon v-if="icon" :class="b('left-icon')" :name="icon" />
|
||||
</slot>
|
||||
<div class="van-cell__title" v-if="title || $slots.title">
|
||||
<div v-if="title || $slots.title" :class="b('title')">
|
||||
<slot name="title">
|
||||
<span v-text="title" />
|
||||
<div class="van-cell__label" v-if="label" v-text="label" />
|
||||
<div v-if="label" v-text="label" :class="b('label')" />
|
||||
</slot>
|
||||
</div>
|
||||
<div
|
||||
class="van-cell__value"
|
||||
v-if="value || $slots.default"
|
||||
:class="{
|
||||
'van-cell__value--link': isLink,
|
||||
'van-cell__value--alone': !$slots.title && !title && !label
|
||||
}"
|
||||
:class="b('value', { alone: !$slots.title && !title })"
|
||||
>
|
||||
<slot>
|
||||
<span v-text="value" />
|
||||
</slot>
|
||||
</div>
|
||||
<slot name="right-icon">
|
||||
<icon name="arrow" class="van-cell__right-icon" v-if="isLink" />
|
||||
<icon v-if="isLink" :class="b('right-icon')" name="arrow" />
|
||||
</slot>
|
||||
<slot name="extra" />
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-checkbox-group">
|
||||
<div :class="b()">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="van-checkbox">
|
||||
<div :class="b()">
|
||||
<icon
|
||||
name="success"
|
||||
class="van-checkbox__icon"
|
||||
:class="[
|
||||
b('icon'),
|
||||
`van-checkbox--${shape}`, {
|
||||
'van-checkbox--disabled': isDisabled,
|
||||
'van-checkbox--checked': isChecked
|
||||
}]"
|
||||
@click="onClick"
|
||||
/>
|
||||
<span class="van-checkbox__label" @click="onClick('label')">
|
||||
<span v-if="$slots.default" :class="b('label')" @click="onClick('label')">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="van-circle" :style="style">
|
||||
<div :class="b()" :style="style">
|
||||
<svg viewBox="0 0 1060 1060">
|
||||
<path class="van-circle__hover" :style="hoverStyle" :d="path" />
|
||||
<path class="van-circle__layer" :style="layerStyle" :d="path" />
|
||||
<path :class="b('hover')" :style="hoverStyle" :d="path" />
|
||||
<path :class="b('layer')" :style="layerStyle" :d="path" />
|
||||
</svg>
|
||||
<slot>
|
||||
<div class="van-circle__text">{{ text }}</div>
|
||||
<div :class="b('text')">{{ text }}</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-collapse-item"
|
||||
:class="{
|
||||
'van-hairline--top': index,
|
||||
'van-collapse-item--expanded': expanded
|
||||
}"
|
||||
:class="[
|
||||
b({ expanded }),
|
||||
{ 'van-hairline--top': index }
|
||||
]"
|
||||
>
|
||||
<cell class="van-collapse-item__title" is-link @click="onClick">
|
||||
<cell :class="b('title')" is-link @click="onClick">
|
||||
<slot name="title">{{ title }}</slot>
|
||||
</cell>
|
||||
<div class="van-collapse-item__content" v-show="expanded">
|
||||
<div v-show="expanded" :class="b('content')">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-collapse van-hairline--top-bottom">
|
||||
<div :class="b()" class="van-hairline--top-bottom">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<div class="van-contact-card" :class="[`van-contact-card--${type}`, { 'van-contact-card--uneditable': !editable }]" @click="onClick">
|
||||
<div class="van-contact-card__content">
|
||||
<div :class="b([type, { uneditable: !editable }])" @click="onClick">
|
||||
<div :class="b('content')">
|
||||
<template v-if="type === 'add'">
|
||||
<icon class="van-contact-card__icon" name="add2" />
|
||||
<div class="van-contact-card__text">{{ addText || $t('addText') }}</div>
|
||||
<icon :class="b('icon')" name="add2" />
|
||||
<div :class="b('text')">{{ addText || $t('addText') }}</div>
|
||||
</template>
|
||||
<template v-else-if="type === 'edit'">
|
||||
<icon class="van-contact-card__icon" name="contact" />
|
||||
<div class="van-contact-card__text">
|
||||
<icon :class="b('icon')" name="contact" />
|
||||
<div :class="b('text')">
|
||||
<div>{{ $t('contact') }}：{{ name }}</div>
|
||||
<div>{{ $t('tel') }}：{{ tel }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<icon v-if="editable" class="van-contact-card__arrow" name="arrow" />
|
||||
<icon v-if="editable" :class="b('arrow')" name="arrow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-contact-edit">
|
||||
<div :class="b()">
|
||||
<cell-group>
|
||||
<field
|
||||
v-model="data.name"
|
||||
@ -18,7 +18,7 @@
|
||||
@focus="onFocus('tel')"
|
||||
/>
|
||||
</cell-group>
|
||||
<div class="van-contact-edit__buttons">
|
||||
<div :class="b('buttons')">
|
||||
<van-button block :loading="isSaving" @click="onSave" type="primary">{{ $t('save') }}</van-button>
|
||||
<van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">{{ $t('delete') }}</van-button>
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,21 @@
|
||||
<template>
|
||||
<div class="van-contact-list">
|
||||
<div :class="b()">
|
||||
<radio-group :value="value" @input="$emit('input', $event)">
|
||||
<cell-group>
|
||||
<cell v-for="(item, index) in list" :key="item.id" is-link>
|
||||
<radio :name="item.id" @click="$emit('select', item, index)">
|
||||
<p class="van-contact-list__text">{{ $t('contact') }}：{{ item.name }}</p>
|
||||
<p class="van-contact-list__text">{{ $t('tel') }}：{{ item.tel }}</p>
|
||||
<p :class="b('text')">{{ $t('contact') }}：{{ item.name }}</p>
|
||||
<p :class="b('text')">{{ $t('tel') }}：{{ item.tel }}</p>
|
||||
</radio>
|
||||
<icon slot="right-icon" name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" />
|
||||
<icon slot="right-icon" name="edit" :class="b('edit')" @click="$emit('edit', item, index)" />
|
||||
</cell>
|
||||
</cell-group>
|
||||
</radio-group>
|
||||
<cell
|
||||
icon="add"
|
||||
is-link
|
||||
class="van-contact-list__add van-hairline--top"
|
||||
:class="b('add')"
|
||||
class="van-hairline--top"
|
||||
:title="addText || $t('addText')"
|
||||
@click="$emit('add')"
|
||||
/>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<cell-group class="van-coupon-cell">
|
||||
<cell-group :class="b()">
|
||||
<cell :title="title || $t('title')" :value="value" :is-link="editable" @click="$emit('click')" />
|
||||
</cell-group>
|
||||
</template>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="van-coupon-item" :class="{ 'van-coupon-item--disabled': disabled }">
|
||||
<div class="van-coupon-item__head">
|
||||
<div class="van-coupon-item__lines" />
|
||||
<div class="van-coupon-item__gradient">
|
||||
<div :class="b({ disabled })">
|
||||
<div :class="b('head')">
|
||||
<div :class="b('lines')" />
|
||||
<div :class="b('gradient')">
|
||||
<h2 v-html="faceAmount" />
|
||||
<p>{{ conditionMessage }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-item__body">
|
||||
<div :class="b('body')">
|
||||
<h2>{{ data.name }}</h2>
|
||||
<span>{{ validPeriod }}</span>
|
||||
<p v-if="disabled && data.reason">{{ data.reason }}</p>
|
||||
<div class="van-coupon-item__corner" v-if="chosen">
|
||||
<div v-if="chosen" :class="b('corner')" >
|
||||
<icon name="success" />
|
||||
</div>
|
||||
</div>
|
||||
@ -34,6 +34,7 @@ export default create({
|
||||
validPeriod() {
|
||||
return `${this.getDate(this.data.start_at)}-${this.getDate(this.data.end_at)}`;
|
||||
},
|
||||
|
||||
faceAmount() {
|
||||
return this.data.denominations !== 0
|
||||
? `<span>¥</span> ${this.formatAmount(this.data.denominations)}`
|
||||
@ -41,6 +42,7 @@ export default create({
|
||||
? this.formatDiscount(this.data.discount)
|
||||
: '';
|
||||
},
|
||||
|
||||
conditionMessage() {
|
||||
let condition = this.data.origin_condition;
|
||||
condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
|
||||
@ -53,12 +55,15 @@ export default create({
|
||||
const date = new Date(timeStamp * 1000);
|
||||
return `${date.getFullYear()}.${this.padZero(date.getMonth() + 1)}.${this.padZero(date.getDate())}`;
|
||||
},
|
||||
|
||||
padZero(num) {
|
||||
return (num < 10 ? '0' : '') + num;
|
||||
},
|
||||
|
||||
formatDiscount(discount) {
|
||||
return this.$t('discount', `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}`);
|
||||
},
|
||||
|
||||
formatAmount(amount) {
|
||||
return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div class="van-coupon-list">
|
||||
<cell-group class="van-coupon-list__top" v-if="showExchangeBar">
|
||||
<div :class="b()">
|
||||
<cell-group v-if="showExchangeBar" :class="b('top')">
|
||||
<field
|
||||
class="van-coupon-list__filed van-hairline--surround"
|
||||
:class="b('field')"
|
||||
class="van-hairline--surround"
|
||||
v-model="currentCode"
|
||||
:placeholder="inputPlaceholder || $t('placeholder')"
|
||||
:maxlength="20"
|
||||
@ -10,14 +11,14 @@
|
||||
<van-button
|
||||
size="small"
|
||||
type="danger"
|
||||
class="van-coupon-list__exchange"
|
||||
:class="b('exchange')"
|
||||
:text="exchangeButtonText || $t('exchange')"
|
||||
:loading="exchangeButtonLoading"
|
||||
:disabled="buttonDisabled"
|
||||
@click="onClickExchangeButton"
|
||||
/>
|
||||
</cell-group>
|
||||
<div class="van-coupon-list__list" :class="{ 'van-coupon-list--with-exchange': showExchangeBar }" ref="list">
|
||||
<div :class="b('list', { 'with-exchange': showExchangeBar })" ref="list">
|
||||
<coupon-item
|
||||
ref="card"
|
||||
v-for="(item, index) in coupons"
|
||||
@ -33,7 +34,7 @@
|
||||
:key="item.id || item.name"
|
||||
:data="item"
|
||||
/>
|
||||
<div class="van-coupon-list__empty" v-if="!coupons.length && !disabledCoupons.length">
|
||||
<div v-if="!coupons.length && !disabledCoupons.length" :class="b('empty')">
|
||||
<img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
|
||||
<p>{{ $t('empty') }}</p>
|
||||
</div>
|
||||
@ -41,7 +42,8 @@
|
||||
<div
|
||||
v-show="showCloseButton"
|
||||
v-text="closeButtonText || $t('close')"
|
||||
class="van-coupon-list__close van-hairline--top"
|
||||
:class="b('close')"
|
||||
class="van-hairline--top"
|
||||
@click="$emit('change', -1)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<transition name="van-dialog-bounce">
|
||||
<div class="van-dialog" v-show="value">
|
||||
<div class="van-dialog__header" v-if="title" v-text="title" />
|
||||
<div class="van-dialog__content van-hairline">
|
||||
<div v-show="value" :class="b()">
|
||||
<div v-if="title" v-text="title" :class="b('header')" />
|
||||
<div :class="b('content')" class="van-hairline">
|
||||
<slot>
|
||||
<div class="van-dialog__message" v-if="message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
|
||||
<div v-if="message" v-html="message" :class="b('message', { withtitle: title })" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<div :class="b('footer', { 'buttons': showCancelButton && showConfirmButton })">
|
||||
<van-button
|
||||
v-show="showCancelButton"
|
||||
:loading="loading.cancel"
|
||||
size="large"
|
||||
class="van-dialog__cancel"
|
||||
:class="b('cancel')"
|
||||
@click="handleAction('cancel')"
|
||||
>
|
||||
{{ cancelButtonText || $t('cancel') }}
|
||||
@ -21,8 +21,7 @@
|
||||
v-show="showConfirmButton"
|
||||
size="large"
|
||||
:loading="loading.confirm"
|
||||
class="van-dialog__confirm"
|
||||
:class="{ 'van-hairline--left': showCancelButton && showConfirmButton }"
|
||||
:class="[b('confirm'), { 'van-hairline--left': showCancelButton && showConfirmButton }]"
|
||||
@click="handleAction('confirm')"
|
||||
>
|
||||
{{ confirmButtonText || $t('confirm') }}
|
||||
|
||||
@ -3,46 +3,45 @@
|
||||
:title="label"
|
||||
:center="center"
|
||||
:required="required"
|
||||
class="van-field"
|
||||
:class="{
|
||||
'van-field--disabled': $attrs.disabled,
|
||||
'van-field--error': error,
|
||||
'van-field--min-height': type === 'textarea' && !autosize,
|
||||
'van-field--has-icon': hasIcon
|
||||
}"
|
||||
:class="b({
|
||||
error,
|
||||
disabled: $attrs.disabled,
|
||||
'has-icon': hasIcon,
|
||||
'min-height': type === 'textarea' && !autosize
|
||||
})"
|
||||
>
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
ref="textarea"
|
||||
class="van-field__control"
|
||||
:class="b('control')"
|
||||
:value="value"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
class="van-field__control"
|
||||
:class="b('control')"
|
||||
:type="type"
|
||||
:value="value"
|
||||
>
|
||||
<div
|
||||
v-if="errorMessage"
|
||||
v-text="errorMessage"
|
||||
class="van-field__error-message"
|
||||
:class="b('error-message')"
|
||||
/>
|
||||
<div
|
||||
v-if="hasIcon"
|
||||
v-show="$slots.icon || value"
|
||||
class="van-field__icon"
|
||||
:class="b('icon')"
|
||||
@touchstart.prevent="onClickIcon"
|
||||
>
|
||||
<slot name="icon">
|
||||
<icon :name="icon" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="van-field__button" v-if="$slots.button" slot="extra">
|
||||
<div v-if="$slots.button" :class="b('button')" slot="extra">
|
||||
<slot name="button" />
|
||||
</div>
|
||||
</cell>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<van-button
|
||||
tag="a"
|
||||
:href="url"
|
||||
class="van-goods-action__big-btn"
|
||||
:class="b()"
|
||||
:type="primary ? 'primary' : 'default'"
|
||||
bottom-action
|
||||
@click="onClick"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a :href="url" class="van-goods-action__mini-btn van-hairline" @click="onClick">
|
||||
<icon class="van-goods-action__mini-btn-icon" :class="iconClass" :info="info" :name="icon" />
|
||||
<a :href="url" :class="b()" class="van-hairline" @click="onClick">
|
||||
<icon :class="[b('icon'), iconClass]" :info="info" :name="icon" />
|
||||
<slot>{{ text }}</slot>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-goods-action">
|
||||
<div :class="b()">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<i class="van-icon" :class="`van-icon-${name}`" v-on="$listeners">
|
||||
<i :class="[b(), `van-icon-${name}`]" v-on="$listeners">
|
||||
<slot />
|
||||
<div v-if="isDef(info)" class="van-icon__info">{{ info }}</div>
|
||||
<div v-if="isDef(info)" :class="b('info')">{{ info }}</div>
|
||||
</i>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
v-show="value"
|
||||
class="van-image-preview"
|
||||
:class="b()"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove.prevent="touchMove"
|
||||
@touchend="onTouchEnd"
|
||||
@ -9,7 +9,7 @@
|
||||
>
|
||||
<swipe :initial-swipe="startPosition">
|
||||
<swipe-item v-for="(item, index) in images" :key="index">
|
||||
<img class="van-image-preview__image" :src="item" >
|
||||
<img :class="b('image')" :src="item" >
|
||||
</swipe-item>
|
||||
</swipe>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="van-list">
|
||||
<div :class="b()">
|
||||
<slot />
|
||||
<div class="van-list__loading" v-show="loading">
|
||||
<div v-show="loading" :class="b('loading')">
|
||||
<slot name="loading">
|
||||
<loading />
|
||||
<span class="van-list__loading-text">{{ $t('loadingTip') }}</span>
|
||||
<span :class="b('loading-text')">{{ $t('loadingTip') }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="van-loading" :class="['van-loading--' + type, 'van-loading--' + color]" :style="style">
|
||||
<span class="van-loading__spinner" :class="'van-loading__spinner--' + type">
|
||||
<div :class="b([type, color])" :style="style">
|
||||
<span :class="b('spinner', type)">
|
||||
<i v-for="item in (type === 'spinner' ? 12 : 0)" />
|
||||
<svg v-if="type === 'circular'" class="van-loading__circular" viewBox="25 25 50 50">
|
||||
<svg v-if="type === 'circular'" :class="b('circular')" viewBox="25 25 50 50">
|
||||
<circle cx="50" cy="50" r="20" fill="none"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
}
|
||||
el = join(name, el, ELEMENT);
|
||||
|
||||
return mods ? [el, prefix(name, mods)] : el;
|
||||
return mods ? [el, prefix(el, mods)] : el;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-nav-bar van-hairline--bottom"
|
||||
:class="{ 'van-nav-bar--fixed': fixed }"
|
||||
class="van-hairline--bottom"
|
||||
:class="b({ fixed })"
|
||||
:style="style"
|
||||
>
|
||||
<div class="van-nav-bar__left" @click="$emit('click-left')">
|
||||
<div :class="b('left')" @click="$emit('click-left')">
|
||||
<slot name="left">
|
||||
<icon v-if="leftArrow" class="van-nav-bar__arrow" name="arrow" />
|
||||
<span v-if="leftText" v-text="leftText" class="van-nav-bar__text" />
|
||||
<icon v-if="leftArrow" :class="b('arrow')" name="arrow" />
|
||||
<span v-if="leftText" v-text="leftText" :class="b('text')" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="van-nav-bar__title van-ellipsis">
|
||||
<div :class="b('title')" class="van-ellipsis">
|
||||
<slot name="title">{{ title }}</slot>
|
||||
</div>
|
||||
<div class="van-nav-bar__right" @click="$emit('click-right')">
|
||||
<div :class="b('right')" @click="$emit('click-right')">
|
||||
<slot name="right">
|
||||
<span v-if="rightText" v-text="rightText" class="van-nav-bar__text" />
|
||||
<span v-if="rightText" v-text="rightText" :class="b('text')" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
<template>
|
||||
<div
|
||||
v-show="showNoticeBar"
|
||||
class="van-notice-bar"
|
||||
:class="{ 'van-notice-bar--withicon': mode }"
|
||||
:class="b({ withicon: mode })"
|
||||
:style="barStyle"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<div class="van-notice-bar__left-icon" v-if="leftIcon">
|
||||
<div v-if="leftIcon" :class="b('left-icon')">
|
||||
<img :src="leftIcon" >
|
||||
</div>
|
||||
<div class="van-notice-bar__content-wrap" ref="contentWrap">
|
||||
<div :class="b('wrap')" ref="wrap">
|
||||
<div
|
||||
ref="content"
|
||||
class="van-notice-bar__content"
|
||||
:class="animationClass"
|
||||
:class="[b('content'), animationClass]"
|
||||
:style="contentStyle"
|
||||
@animationend="onAnimationEnd"
|
||||
@webkitAnimationEnd="onAnimationEnd"
|
||||
@ -21,7 +19,12 @@
|
||||
<slot>{{ text }}</slot>
|
||||
</div>
|
||||
</div>
|
||||
<icon class="van-notice-bar__right-icon" :name="iconName" v-if="iconName" @click="onClickIcon" />
|
||||
<icon
|
||||
v-if="iconName"
|
||||
:class="b('right-icon')"
|
||||
:name="iconName"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -95,21 +98,23 @@ export default create({
|
||||
onClickIcon() {
|
||||
this.showNoticeBar = this.mode !== 'closeable';
|
||||
},
|
||||
|
||||
onAnimationEnd() {
|
||||
this.firstRound = false;
|
||||
this.$nextTick(() => {
|
||||
this.duration = (this.offsetWidth + this.wrapWidth) / this.speed;
|
||||
this.animationClass = 'van-notice-bar__play--infinite';
|
||||
this.animationClass = this.b('play--infinite');
|
||||
});
|
||||
},
|
||||
|
||||
initAnimation() {
|
||||
const offsetWidth = this.$refs.content.getBoundingClientRect().width;
|
||||
const wrapWidth = this.$refs.contentWrap.getBoundingClientRect().width;
|
||||
const wrapWidth = this.$refs.wrap.getBoundingClientRect().width;
|
||||
if (this.scrollable && offsetWidth > wrapWidth) {
|
||||
this.wrapWidth = wrapWidth;
|
||||
this.offsetWidth = offsetWidth;
|
||||
this.duration = offsetWidth / this.speed;
|
||||
this.animationClass = 'van-notice-bar__play';
|
||||
this.animationClass = this.b('play');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,13 +5,17 @@
|
||||
@touchmove="onBlur"
|
||||
@touchend="onBlur"
|
||||
@touchcancel="onBlur"
|
||||
class="van-hairline van-key"
|
||||
:class="className"
|
||||
class="van-hairline"
|
||||
:class="[b(), className]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'key',
|
||||
|
||||
props: {
|
||||
text: [String, Number],
|
||||
type: {
|
||||
@ -31,7 +35,7 @@ export default {
|
||||
const types = this.type.slice(0);
|
||||
this.active && types.push('active');
|
||||
|
||||
return types.map(type => `van-key--${type}`);
|
||||
return types.map(type => this.b([type]));
|
||||
}
|
||||
},
|
||||
|
||||
@ -45,5 +49,5 @@ export default {
|
||||
this.active = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -3,30 +3,29 @@
|
||||
<div
|
||||
v-show="show"
|
||||
:style="style"
|
||||
class="van-number-keyboard"
|
||||
:class="`van-number-keyboard--${theme}`"
|
||||
:class="b([theme])"
|
||||
@animationend="onAnimationEnd"
|
||||
@webkitAnimationEnd="onAnimationEnd"
|
||||
>
|
||||
<div class="van-number-keyboard__title van-hairline--top" v-if="title || showTitleClose">
|
||||
<div :class="b('title')" class="van-hairline--top" v-if="title || showTitleClose">
|
||||
<span v-text="title" />
|
||||
<span
|
||||
class="van-number-keyboard__close"
|
||||
:class="b('close')"
|
||||
v-if="showTitleClose"
|
||||
v-text="closeButtonText"
|
||||
@click="onBlur"
|
||||
/>
|
||||
</div>
|
||||
<div class="van-number-keyboard__body">
|
||||
<div :class="b('body')">
|
||||
<key
|
||||
v-for="(key, index) in keys"
|
||||
:key="index"
|
||||
:key="key.text"
|
||||
:text="key.text"
|
||||
:type="key.type"
|
||||
@press="onPressKey"
|
||||
/>
|
||||
</div>
|
||||
<div class="van-number-keyboard__sidebar" v-if="theme === 'custom'">
|
||||
<div v-if="theme === 'custom'" :class="b('sidebar')">
|
||||
<key :text="'delete'" :type="['delete', 'big']" @press="onPressKey" />
|
||||
<key :text="closeButtonText" :type="['green', 'big']" @press="onPressKey" />
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<ul class="van-pagination" :class="{ 'van-pagination-simple': !isMultiMode }">
|
||||
<ul :class="b({ simple: !isMultiMode })">
|
||||
<li
|
||||
class="van-pagination__item van-pagination__prev van-hairline"
|
||||
:class="{ 'van-pagination--disabled': value === 1 }"
|
||||
class="van-hairline"
|
||||
:class="[b('item', { disabled: value === 1 }), b('prev')]"
|
||||
@click="selectPage(value - 1)"
|
||||
>
|
||||
{{ prevText || $t('prev') }}
|
||||
@ -10,18 +10,18 @@
|
||||
<li
|
||||
v-if="isMultiMode"
|
||||
v-for="(page, index) in pages"
|
||||
class="van-pagination__item van-pagination__page van-hairline"
|
||||
:class="{ 'van-pagination--active': page.active }"
|
||||
class="van-hairline"
|
||||
:class="[b('item', { active: page.active }), b('page')]"
|
||||
@click="selectPage(page.number)"
|
||||
>
|
||||
{{ page.text }}
|
||||
</li>
|
||||
<li v-if="!isMultiMode" class="van-pagination__page-desc">
|
||||
<li v-if="!isMultiMode" :class="b('page-desc')">
|
||||
<slot name="pageDesc">{{ pageDesc }}</slot>
|
||||
</li>
|
||||
<li
|
||||
class="van-pagination__item van-pagination__next van-hairline"
|
||||
:class="{ 'van-pagination--disabled': value === computedPageCount }"
|
||||
class="van-hairline"
|
||||
:class="[b('item', { disabled: value === computedPageCount }), b('next')]"
|
||||
@click="selectPage(value + 1)"
|
||||
>
|
||||
{{ nextText || $t('next') }}
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
<template>
|
||||
<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" />
|
||||
<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">
|
||||
<cell-group :class="b()">
|
||||
<slot name="header">
|
||||
<cell :class="b('header')" :title="title" :label="desc" :value="status" />
|
||||
</slot>
|
||||
<div :class="b('content')">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="van-panel__footer van-hairline--top" v-if="$slots.footer">
|
||||
<div v-if="$slots.footer" :class="b('footer')" class="van-hairline--top">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</cell-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security van-hairline--surround" @touchstart.stop="$emit('focus')">
|
||||
<div :class="b()">
|
||||
<ul :class="b('security')" class="van-hairline--surround" @touchstart.stop="$emit('focus')">
|
||||
<li v-for="visibility in points" class="van-hairline">
|
||||
<i :style="`visibility: ${visibility}`" />
|
||||
</li>
|
||||
@ -8,7 +8,7 @@
|
||||
<div
|
||||
v-if="errorInfo || info"
|
||||
v-text="errorInfo || info"
|
||||
:class="errorInfo ? 'van-password-input__error-info' : 'van-password-input__info'"
|
||||
:class="b(errorInfo ? 'error-info' : 'info')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="van-picker-column"
|
||||
:class="className"
|
||||
:class="[b(), className]"
|
||||
:style="columnStyle"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove.prevent="onTouchMove"
|
||||
@ -14,10 +13,10 @@
|
||||
v-for="(option, index) in options"
|
||||
v-text="getOptionText(option)"
|
||||
class="van-ellipsis"
|
||||
:class="{
|
||||
'van-picker-column--disabled': isDisabled(option),
|
||||
'van-picker-column--selected': index === currentIndex
|
||||
}"
|
||||
:class="b('item', {
|
||||
disabled: isDisabled(option),
|
||||
selected: index === currentIndex
|
||||
})"
|
||||
@click="setIndex(index, true)"
|
||||
/>
|
||||
</ul>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar van-hairline--top-bottom" v-if="showToolbar">
|
||||
<div :class="b()">
|
||||
<div :class="b('toolbar')" class="van-hairline--top-bottom" v-if="showToolbar">
|
||||
<slot>
|
||||
<div class="van-picker__cancel" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div>
|
||||
<div class="van-picker__title van-ellipsis" v-if="title" v-text="title" />
|
||||
<div class="van-picker__confirm" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
|
||||
<div :class="b('cancel')" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div>
|
||||
<div :class="b('title')" class="van-ellipsis" v-if="title" v-text="title" />
|
||||
<div :class="b('confirm')" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="loading" class="van-picker__loading">
|
||||
<div v-if="loading" :class="b('loading')">
|
||||
<loading />
|
||||
</div>
|
||||
<div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent>
|
||||
<div :class="b('columns')" :style="columnsStyle" @touchmove.prevent>
|
||||
<picker-column
|
||||
v-for="(item, index) in currentColumns"
|
||||
:key="index"
|
||||
@ -22,7 +22,7 @@
|
||||
:visible-item-count="visibleItemCount"
|
||||
@change="onChange(index)"
|
||||
/>
|
||||
<div class="van-picker__frame van-hairline--top-bottom" :style="frameStyle" />
|
||||
<div :class="b('frame')" class="van-hairline--top-bottom" :style="frameStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition :name="currentTransition">
|
||||
<div v-show="value" class="van-popup" :class="{ [`van-popup--${position}`]: position }">
|
||||
<div v-show="value" :class="b({ [position]: position })">
|
||||
<slot />
|
||||
</div>
|
||||
</transition>
|
||||
@ -31,12 +31,10 @@ export default create({
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
const transition = this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
|
||||
return {
|
||||
currentValue: false,
|
||||
currentTransition: transition
|
||||
};
|
||||
computed: {
|
||||
currentTransition() {
|
||||
return this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="van-progress">
|
||||
<span class="van-progress__portion" :style="portionStyle" />
|
||||
<span class="van-progress__pivot" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
|
||||
<div :class="b()">
|
||||
<span :class="b('portion')" :style="portionStyle" />
|
||||
<span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<div class="van-pull-refresh">
|
||||
<div :class="b()">
|
||||
<div
|
||||
class="van-pull-refresh__track"
|
||||
:class="b('track')"
|
||||
:style="style"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
@touchcancel="onTouchEnd"
|
||||
>
|
||||
<div class="van-pull-refresh__head">
|
||||
<slot name="normal" v-if="status === 'normal'"/>
|
||||
<slot name="pulling" v-if="status === 'pulling'">
|
||||
<span class="van-pull-refresh__text">{{ pullingText || $t('pulling') }}</span>
|
||||
<div :class="b('head')">
|
||||
<slot v-if="status === 'normal'" name="normal" />
|
||||
<slot v-if="status === 'pulling'" name="pulling">
|
||||
<span :class="b('text')">{{ pullingText || $t('pulling') }}</span>
|
||||
</slot>
|
||||
<slot name="loosing" v-if="status === 'loosing'">
|
||||
<span class="van-pull-refresh__text">{{ loosingText || $t('loosing') }}</span>
|
||||
<slot v-if="status === 'loosing'" name="loosing">
|
||||
<span :class="b('text')">{{ loosingText || $t('loosing') }}</span>
|
||||
</slot>
|
||||
<slot name="loading" v-if="status === 'loading'">
|
||||
<div class="van-pull-refresh__loading">
|
||||
<slot v-if="status === 'loading'" name="loading">
|
||||
<div :class="b('loading')">
|
||||
<loading />
|
||||
<span>{{ loadingText || $t('loadingTip') }}</span>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-radio-group">
|
||||
<div :class="b()">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,20 +1,16 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-radio"
|
||||
:class="{ 'van-radio--disabled': isDisabled }"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<span class="van-radio__input">
|
||||
<div :class="b({ disabled: isDisabled })" @click="$emit('click')">
|
||||
<span :class="b('input')">
|
||||
<input
|
||||
:value="name"
|
||||
v-model="currentValue"
|
||||
type="radio"
|
||||
class="van-radio__control"
|
||||
:class="b('control')"
|
||||
:disabled="isDisabled"
|
||||
>
|
||||
<icon :name="currentValue === name ? 'checked' : 'check'" />
|
||||
</span>
|
||||
<span class="van-radio__label" @click="onClickLabel">
|
||||
<span v-if="$slots.default" :class="b('label')" @click="onClickLabel">
|
||||
<slot />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-row" :style="style">
|
||||
<div :class="b()" :style="style">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-search"
|
||||
:class="{ 'van-search--show-action': showAction }"
|
||||
:style="{ 'background-color': background }">
|
||||
<div class="van-search__input-wrap" v-clickoutside="onClickoutside">
|
||||
:class="b({ 'show-action': showAction })"
|
||||
:style="{ 'background-color': background }"
|
||||
>
|
||||
<div :class="b('wrap')" v-clickoutside="onClickoutside">
|
||||
<icon name="search" />
|
||||
<input
|
||||
v-bind="$attrs"
|
||||
v-on="listeners"
|
||||
v-refocus="focusStatus"
|
||||
type="search"
|
||||
class="van-search__input"
|
||||
:class="b('input')"
|
||||
:value="value"
|
||||
>
|
||||
<icon name="clear" v-show="isFocus && value" @click="onClean" />
|
||||
</div>
|
||||
<div class="van-search__action" v-if="showAction">
|
||||
<div v-if="showAction" :class="b('action')" >
|
||||
<slot name="action">
|
||||
<div class="van-search__action-text" @click="onBack">{{ $t('cancel') }}</div>
|
||||
<div :class="b('cancel')" @click="onBack">{{ $t('cancel') }}</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-sku-actions">
|
||||
<div :class="b()">
|
||||
<van-button
|
||||
v-if="showAddCartBtn"
|
||||
bottom-action
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="van-sku-header van-hairline--bottom">
|
||||
<div class="van-sku-header__img-wrap">
|
||||
<div :class="b()" class="van-hairline--bottom">
|
||||
<div :class="b('img-wrap')">
|
||||
<img :src="goodsImg" >
|
||||
</div>
|
||||
<div class="van-sku-header__goods-info">
|
||||
<div :class="b('goods-info')">
|
||||
<div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div>
|
||||
<!-- price display area -->
|
||||
<slot />
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div class="van-sku-img-uploader">
|
||||
<div :class="b()">
|
||||
<!-- 头部 -->
|
||||
<van-uploader
|
||||
:disabled="!!paddingImg"
|
||||
:after-read="afterReadFile"
|
||||
:max-size="maxSize * 1024 * 1024"
|
||||
accept="image/*"
|
||||
@oversize="$toast($t('maxSize', maxSize))"
|
||||
>
|
||||
<div class="van-sku-img-uploader__header">
|
||||
<div :class="b('header')">
|
||||
<div v-if="paddingImg">{{ $t('uploading') }}</div>
|
||||
<template v-else>
|
||||
<icon name="photograph" />
|
||||
@ -23,15 +22,15 @@
|
||||
<!-- 已有的图片,图片右上角显示删除按钮 -->
|
||||
<div
|
||||
v-for="(img, index) in imgList"
|
||||
class="van-sku-img-uploader__img"
|
||||
:class="b('img')"
|
||||
>
|
||||
<img :src="img">
|
||||
<icon name="clear" class="van-sku-img-uploader__delete" @click="$emit('input', '')" />
|
||||
<icon name="clear" :class="b('delete')" @click="$emit('input', '')" />
|
||||
</div>
|
||||
<!-- 正在上传的图片,有上传等待提示 -->
|
||||
<div v-if="paddingImg" class="van-sku-img-uploader__img">
|
||||
<div v-if="paddingImg" :class="b('img')">
|
||||
<img :src="paddingImg">
|
||||
<loading class="van-sku-img-uploader__uploading" type="spinner" color="black" />
|
||||
<loading :class="b('uploading')" type="spinner" color="black" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<cell-group class="van-sku-messages">
|
||||
<cell-group :class="b()">
|
||||
<template v-for="(message, index) in messages">
|
||||
<cell
|
||||
v-if="message.type === 'image'"
|
||||
class="van-sku-messages__image-cell"
|
||||
:class="b('image-cell')"
|
||||
:label="$t('onePic')"
|
||||
:key="`${goodsId}-${index}`"
|
||||
:required="message.required == '1'"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="van-sku-row">
|
||||
<div class="van-sku-row__title">{{ skuRow.k }}：</div>
|
||||
<div :class="b()">
|
||||
<div :class="b('title')">{{ skuRow.k }}：</div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,22 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-slider"
|
||||
:class="{ 'van-slider--disabled': disabled }"
|
||||
>
|
||||
<div
|
||||
class="van-slider__bar"
|
||||
ref="bar"
|
||||
:style="barStyle"
|
||||
@click.stop="onSliderClicked"
|
||||
>
|
||||
<div :class="b({ disabled })" @click.stop="onClick">
|
||||
<div :class="b('bar')" :style="barStyle">
|
||||
<span
|
||||
class="van-slider__finished-portion"
|
||||
:style="finishedStyle"
|
||||
/>
|
||||
<span
|
||||
class="van-slider__pivot"
|
||||
ref="pivot"
|
||||
:style="pivotStyle"
|
||||
:class="b('button')"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove.prevent.stop="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
@ -25,145 +11,90 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
<script>
|
||||
import create from '../utils/create';
|
||||
import Touch from '../mixins/touch';
|
||||
|
||||
const DEFAULT_COLOR = '#4b0';
|
||||
const DEFAULT_BG = '#cacaca';
|
||||
|
||||
export default create({
|
||||
name: 'slider',
|
||||
|
||||
mixins: [Touch],
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
required: true
|
||||
default: 0
|
||||
},
|
||||
|
||||
disabled: Boolean,
|
||||
|
||||
pivotColor: {
|
||||
barHeight: {
|
||||
type: String,
|
||||
default: DEFAULT_COLOR
|
||||
},
|
||||
|
||||
barColor: {
|
||||
type: String,
|
||||
default: DEFAULT_BG
|
||||
},
|
||||
|
||||
loadedBarColor: {
|
||||
type: String,
|
||||
default: DEFAULT_COLOR
|
||||
default: '2px'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
pivotOffset: 0
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
sliderWidth() {
|
||||
const rect = this.$refs.bar.getBoundingClientRect();
|
||||
return rect['width'];
|
||||
},
|
||||
|
||||
barStyle() {
|
||||
return {
|
||||
backgroundColor: this.barColor
|
||||
};
|
||||
},
|
||||
|
||||
finishedStyle() {
|
||||
return {
|
||||
backgroundColor: this.loadedBarColor,
|
||||
width: this.format(this.value) + '%'
|
||||
};
|
||||
},
|
||||
|
||||
pivotStyle() {
|
||||
return {
|
||||
backgroundColor: this.pivotColor,
|
||||
left: this.format(this.value) + '%',
|
||||
marginLeft: `-${this.pivotOffset}px`
|
||||
width: this.format(this.value) + '%',
|
||||
height: this.barHeight
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.pivotOffset = parseInt(this.$refs.pivot.getBoundingClientRect().width / 2);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTouchStart(event) {
|
||||
if (this.disabled) return;
|
||||
|
||||
this.draging = true;
|
||||
this.touchStart(event);
|
||||
this.startValue = this.format(this.value);
|
||||
},
|
||||
|
||||
onTouchMove(event) {
|
||||
if (this.draging) {
|
||||
this.touchMove(event);
|
||||
const diff = this.deltaX / this.sliderWidth * 100;
|
||||
this.newValue = this.startValue + diff;
|
||||
this.updateValue(this.newValue);
|
||||
}
|
||||
if (this.disabled) return;
|
||||
|
||||
this.touchMove(event);
|
||||
const rect = this.$el.getBoundingClientRect();
|
||||
const diff = this.deltaX / rect.width * 100;
|
||||
this.updateValue(this.startValue + diff);
|
||||
},
|
||||
|
||||
onTouchEnd() {
|
||||
if (this.draging) {
|
||||
this.$nextTick(() => {
|
||||
this.draging = false;
|
||||
this.updateValue(this.newValue, true);
|
||||
});
|
||||
}
|
||||
if (this.disabled) return;
|
||||
this.updateValue(this.value, true);
|
||||
},
|
||||
|
||||
onSliderClicked(e) {
|
||||
if (this.disabled || this.draging) return;
|
||||
|
||||
const sliderRect = this.$refs.bar.getBoundingClientRect();
|
||||
const sliderOffset = sliderRect.left;
|
||||
this.newValue = Math.round((e.clientX - sliderOffset) / this.sliderWidth * 100);
|
||||
this.updateValue(this.newValue, true);
|
||||
},
|
||||
|
||||
updateValue(value, isFinished) {
|
||||
onClick(event) {
|
||||
if (this.disabled) return;
|
||||
|
||||
const rect = this.$el.getBoundingClientRect();
|
||||
const value = (event.clientX - rect.left) / rect.width * 100;
|
||||
this.updateValue(value, true);
|
||||
},
|
||||
|
||||
updateValue(value, end) {
|
||||
value = this.format(value);
|
||||
this.$emit('change', value);
|
||||
this.$emit('input', value);
|
||||
|
||||
if (isFinished) {
|
||||
this.$emit('after-change', value);
|
||||
if (end) {
|
||||
this.$emit('change', value);
|
||||
}
|
||||
},
|
||||
|
||||
format(value) {
|
||||
return Math.round(this.range(value));
|
||||
},
|
||||
|
||||
range(value) {
|
||||
return Math.max(this.min, Math.min(value, this.max));
|
||||
return (Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<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'" />
|
||||
<icon v-else name="checked" :style="{ color: $parent.activeColor }" />
|
||||
</div>
|
||||
<div class="van-step__title" :style="titleStyle">
|
||||
<div class="van-hairline" :class="b([$parent.direction, { [status]: status }])">
|
||||
<div :class="b('title')" :style="titleStyle">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="van-step__line" />
|
||||
<div :class="b('circle-container')">
|
||||
<i :class="b('circle')" v-if="status !== 'process'" />
|
||||
<icon v-else name="checked" :style="{ color: $parent.activeColor }" />
|
||||
</div>
|
||||
<div :class="b('line')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
<template>
|
||||
<div class="van-stepper" :class="{ 'van-stepper--disabled': disabled }">
|
||||
<div :class="b({ disabled })">
|
||||
<button
|
||||
class="van-stepper__stepper van-stepper__minus"
|
||||
:class="{ 'van-stepper__minus--disabled': isMinusDisabled }"
|
||||
:class="b('minus', { disabled: minusDisabled })"
|
||||
@click="onChange('minus')"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
class="van-stepper__input"
|
||||
:class="b('input')"
|
||||
:value="currentValue"
|
||||
:disabled="disabled || disableInput"
|
||||
@input="onInput"
|
||||
>
|
||||
<button
|
||||
class="van-stepper__stepper van-stepper__plus"
|
||||
:class="{ 'van-stepper__plus--disabled': isPlusDisabled }"
|
||||
:class="b('plus', { disabled: plusDisabled })"
|
||||
@click="onChange('plus')"
|
||||
/>
|
||||
</div>
|
||||
@ -62,14 +60,14 @@ export default create({
|
||||
},
|
||||
|
||||
computed: {
|
||||
isMinusDisabled() {
|
||||
minusDisabled() {
|
||||
const min = +this.min;
|
||||
const step = +this.step;
|
||||
const currentValue = +this.currentValue;
|
||||
return min === currentValue || (currentValue - step) < min || this.disabled;
|
||||
},
|
||||
|
||||
isPlusDisabled() {
|
||||
plusDisabled() {
|
||||
const max = +this.max;
|
||||
const step = +this.step;
|
||||
const currentValue = +this.currentValue;
|
||||
@ -108,7 +106,7 @@ export default create({
|
||||
},
|
||||
|
||||
onChange(type) {
|
||||
if ((this.isMinusDisabled && type === 'minus') || (this.isPlusDisabled && type === 'plus')) {
|
||||
if ((this.minusDisabled && type === 'minus') || (this.plusDisabled && type === 'plus')) {
|
||||
this.$emit('overlimit', type);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="van-steps" :class="`van-steps--${direction}`">
|
||||
<div class="van-steps__status" v-if="title || description">
|
||||
<div class="van-steps__icon" v-if="icon || $slots.icon">
|
||||
<div :class="b([direction])">
|
||||
<div v-if="title || description" :class="b('status')">
|
||||
<div v-if="icon || $slots.icon" :class="b('icon')">
|
||||
<slot name="icon">
|
||||
<icon :name="icon" :class="iconClass" />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="van-steps__message">
|
||||
<div class="van-steps__title" v-text="title" />
|
||||
<div class="van-steps__desc van-ellipsis" v-text="description" />
|
||||
<div :class="b('message')">
|
||||
<div :class="b('title')" v-text="title" />
|
||||
<div :class="b('desc')" class="van-ellipsis" v-text="description" />
|
||||
</div>
|
||||
<slot name="message-extra" />
|
||||
</div>
|
||||
<div class="van-steps__items" :class="{ 'van-steps__items--alone': !title && !description }">
|
||||
<div :class="b('items', { alone: !title && !description })">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__tip" v-show="tip || $slots.tip">
|
||||
<div :class="b()">
|
||||
<div :class="b('tip')" v-show="tip || $slots.tip">
|
||||
{{ tip }}<slot name="tip" />
|
||||
</div>
|
||||
<div class="van-submit-bar__bar">
|
||||
<div :class="b('bar')">
|
||||
<slot />
|
||||
<div class="van-submit-bar__price">
|
||||
<div :class="b('price')">
|
||||
<template v-if="hasPrice">
|
||||
<span>{{ label || $t('label') }}</span>
|
||||
<span class="van-submit-bar__price-interger">{{ currency }}{{ priceInterger }}.</span>
|
||||
<span class="van-submit-bar__price-decimal">{{ priceDecimal }}</span>
|
||||
<span :class="b('price-interger')">{{ currency }}{{ priceInterger }}.</span>
|
||||
<span :class="b('price-decimal')">{{ priceDecimal }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<van-button :type="buttonType" :disabled="disabled" :loading="loading" @click="onSubmit">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-swipe-item" :style="style">
|
||||
<div :class="b()" :style="style">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="van-swipe">
|
||||
<div :class="b()">
|
||||
<div
|
||||
v-if="count > 1"
|
||||
:style="trackStyle"
|
||||
class="van-swipe__track"
|
||||
:class="b('track')"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
@ -12,11 +12,14 @@
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div v-else class="van-swipe__track">
|
||||
<div v-else :class="b('track')">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="van-swipe__indicators" v-if="showIndicators && count > 1">
|
||||
<i v-for="index in count" :class="{ 'van-swipe__indicator--active': index - 1 === activeIndicator }" />
|
||||
<div
|
||||
v-if="showIndicators && count > 1"
|
||||
:class="b('indicators')"
|
||||
>
|
||||
<i v-for="index in count" :class="b('indicator', { active: index - 1 === activeIndicator })" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<cell center :title="title" :border="border" class="van-switch-cell">
|
||||
<cell center :title="title" :border="border" :class="b()">
|
||||
<van-switch v-bind="$props" @input="$emit('input', $event)" />
|
||||
</cell>
|
||||
</template>
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-switch"
|
||||
:class="[{
|
||||
'van-switch--on': value,
|
||||
'van-switch--disabled': disabled
|
||||
}]"
|
||||
:class="b({
|
||||
on: value,
|
||||
disabled
|
||||
})"
|
||||
:style="style"
|
||||
@click="onClick"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
<loading v-if="loading" class="van-switch__loading" />
|
||||
<div :class="b('node')">
|
||||
<loading v-if="loading" :class="b('loading')" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-tab__pane" :class="{ 'van-tab__pane--select': index === parent.curActive }">
|
||||
<div :class="b('pane', { select: index === parent.curActive })">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="van-tabbar-item" :class="{ 'van-tabbar-item--active': active }" @click="onClick">
|
||||
<div class="van-tabbar-item__icon" :class="{ 'van-tabbar-item__icon-dot': dot }">
|
||||
<div :class="b({ active })" @click="onClick">
|
||||
<div :class="b('icon', { dot })">
|
||||
<slot name="icon" :active="active">
|
||||
<icon v-if="icon" :name="icon" />
|
||||
</slot>
|
||||
<div v-if="isDef(info)" class="van-icon__info">{{ info }}</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item__text">
|
||||
<div :class="b('text')">
|
||||
<slot :active="active"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="van-tabbar van-hairline--top-bottom" :class="{ 'van-tabbar--fixed': fixed }">
|
||||
<div class="van-hairline--top-bottom" :class="b({ fixed })">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<div class="van-tabs" :class="`van-tabs--${type}`">
|
||||
<div :class="b([type])">
|
||||
<div
|
||||
ref="wrap"
|
||||
class="van-tabs__wrap"
|
||||
:class="[`van-tabs__wrap--${position}`, {
|
||||
'van-tabs--scrollable': scrollable,
|
||||
'van-hairline--top-bottom': type === 'line'
|
||||
}]"
|
||||
:class="[
|
||||
b('wrap', [position, { scrollable }]),
|
||||
{ 'van-hairline--top-bottom': type === 'line' }
|
||||
]"
|
||||
>
|
||||
<div class="van-tabs__nav" :class="`van-tabs__nav--${type}`" ref="nav">
|
||||
<div v-if="type === 'line'" class="van-tabs__nav-bar" :style="navBarStyle" />
|
||||
<div :class="b('nav', [type])" ref="nav">
|
||||
<div v-if="type === 'line'" :class="b('nav-bar')" :style="navBarStyle" />
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
ref="tabs"
|
||||
@ -25,7 +24,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content" ref="content">
|
||||
<div :class="b('content')" ref="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<span
|
||||
class="van-tag van-hairline--surround"
|
||||
:class="{
|
||||
[`van-tag--${type}`]: type,
|
||||
'van-tag--plain': plain,
|
||||
'van-tag--mark': mark
|
||||
}"
|
||||
class="van-hairline--surround"
|
||||
:class="b({
|
||||
mark,
|
||||
plain,
|
||||
[type]: type
|
||||
})"
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition name="van-fade">
|
||||
<div class="van-toast" :class="[`van-toast--${displayStyle}`, `van-toast--${position}`]" v-show="value">
|
||||
<div v-show="value" :class="b([displayStyle, position])">
|
||||
<!-- text only -->
|
||||
<div v-if="displayStyle === 'text'">{{ message }}</div>
|
||||
<div v-if="displayStyle === 'html'" v-html="message" />
|
||||
@ -8,8 +8,8 @@
|
||||
<!-- with icon -->
|
||||
<template v-if="displayStyle === 'default'">
|
||||
<loading v-if="type === 'loading'" color="white" />
|
||||
<icon v-else class="van-toast__icon" :name="type" />
|
||||
<div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
|
||||
<icon v-else :class="b('icon')" :name="type" />
|
||||
<div v-if="hasMessage" :class="b('text')">{{ message }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div class="van-tree-select" :style="{ height: mainHeight + 'px' }">
|
||||
<div class="van-tree-select__nav">
|
||||
<div :class="b()" :style="{ height: mainHeight + 'px' }">
|
||||
<div :class="b('nav')">
|
||||
<div
|
||||
v-for="(item, index) in items"
|
||||
class="van-tree-select__nitem van-ellipsis"
|
||||
:class="{ 'van-tree-select__nitem--active': mainActiveIndex === index }"
|
||||
class="van-ellipsis"
|
||||
:class="b('nitem', { active: mainActiveIndex === index })"
|
||||
@click="$emit('navclick', index)">
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tree-select__content" :style="{ height: itemHeight + 'px' }">
|
||||
<div :class="b('content')" :style="{ height: itemHeight + 'px' }">
|
||||
<div
|
||||
v-for="item in subItems"
|
||||
:key="item.id"
|
||||
class="van-tree-select__item van-ellipsis"
|
||||
:class="{ 'van-tree-select__item--active': activeId === item.id }"
|
||||
class="van-ellipsis"
|
||||
:class="b('item', { active: activeId === item.id })"
|
||||
@click="onItemSelect(item)">
|
||||
{{ item.text }}
|
||||
<icon
|
||||
v-if="activeId === item.id"
|
||||
name="success"
|
||||
class="van-tree-select__selected"
|
||||
:class="b('selected')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="van-uploader">
|
||||
<div :class="b()">
|
||||
<slot />
|
||||
<input
|
||||
v-bind="$attrs"
|
||||
ref="input"
|
||||
type="file"
|
||||
class="van-uploader__input"
|
||||
v-bind="$attrs"
|
||||
:class="b('input')"
|
||||
:accept="accept"
|
||||
:disabled="disabled"
|
||||
@change="onChange"
|
||||
>
|
||||
@ -24,6 +25,10 @@ export default create({
|
||||
disabled: Boolean,
|
||||
beforeRead: Function,
|
||||
afterRead: Function,
|
||||
accept: {
|
||||
type: String,
|
||||
default: 'image/*'
|
||||
},
|
||||
resultType: {
|
||||
type: String,
|
||||
default: 'dataUrl'
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
|
||||
&__area {
|
||||
.van-cell__title {
|
||||
width: 90px;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
@import './common/var.css';
|
||||
|
||||
.van-cell {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
box-sizing: border-box;
|
||||
@ -24,31 +23,38 @@
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&__left-icon {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__value {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__value {
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
|
||||
&--alone {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__left-icon {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&--link {
|
||||
padding-right: 15px;
|
||||
}
|
||||
&__right-icon {
|
||||
color: $gray-dark;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&--clickable {
|
||||
@ -72,13 +78,4 @@
|
||||
&--center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
transform: translateY(-50%);
|
||||
color: $gray-dark;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__filed {
|
||||
&__field {
|
||||
margin: 10px 0;
|
||||
padding: 4px 10px 4px 25px;
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--with-exchange {
|
||||
&__list--with-exchange {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
&__footer {
|
||||
overflow: hidden;
|
||||
|
||||
&.is-twobtn {
|
||||
&--buttons {
|
||||
display: flex;
|
||||
|
||||
.van-button {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.van-field {
|
||||
.van-cell__title {
|
||||
min-width: 90px;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
display: flex;
|
||||
position: fixed;
|
||||
|
||||
&__big-btn {
|
||||
&-big-btn {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__mini-btn {
|
||||
&-mini-btn {
|
||||
color: $gray-darker;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
@ -40,7 +40,7 @@
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
&__icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__content-wrap {
|
||||
&__wrap {
|
||||
flex: 1;
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
|
||||
@ -28,31 +28,27 @@
|
||||
&:last-child::after {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__prev,
|
||||
&__next {
|
||||
&.van-pagination__item {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__page {
|
||||
flex-grow: 0;
|
||||
|
||||
&.van-pagination--active {
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
|
||||
&.van-pagination__item {
|
||||
&--disabled,
|
||||
&--disabled:active {
|
||||
background-color: $background-color;
|
||||
color: $gray-darker;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: $white;
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&__prev,
|
||||
&__next {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&__page {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
&__page-desc {
|
||||
@ -60,15 +56,13 @@
|
||||
height: 40px;
|
||||
color: $gray-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.van-pagination-simple {
|
||||
|
||||
.van-pagination__prev,
|
||||
.van-pagination__next {
|
||||
|
||||
&.van-pagination__item::after {
|
||||
border-width: 1px;
|
||||
&--simple {
|
||||
.van-pagination__prev,
|
||||
.van-pagination__next {
|
||||
&::after {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,25 +4,9 @@
|
||||
background: $white;
|
||||
|
||||
&__header {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 12px;
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
&__status {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
color: $red;
|
||||
.van-cell__value {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
user-select: none;
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
|
||||
|
||||
&__toolbar {
|
||||
display: flex;
|
||||
@ -64,17 +65,17 @@
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
&__item {
|
||||
padding: 0 5px;
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
li&--selected {
|
||||
color: $black;
|
||||
}
|
||||
&--selected {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
li&--disabled {
|
||||
opacity: .3;
|
||||
&--disabled {
|
||||
opacity: .3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__input-wrap {
|
||||
&__wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 34px;
|
||||
@ -49,7 +49,7 @@
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
&__action-text {
|
||||
&__cancel {
|
||||
padding: 0 10px;
|
||||
color: $green;
|
||||
|
||||
|
||||
@ -164,7 +164,7 @@
|
||||
|
||||
&__image-cell {
|
||||
.van-cell__title {
|
||||
width: 90px;
|
||||
max-width: 90px;
|
||||
}
|
||||
.van-cell__value {
|
||||
text-align: left;
|
||||
|
||||
@ -1,41 +1,29 @@
|
||||
@import './common/var.css';
|
||||
|
||||
$c-slider-background: #cacaca;
|
||||
$c-pivot-border: #fff;
|
||||
|
||||
.van-slider {
|
||||
&--disabled {
|
||||
opacity: .3;
|
||||
.van-slider__pivot {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
border-radius: 999px;
|
||||
background-color: $border-color;
|
||||
|
||||
&__bar {
|
||||
position: relative;
|
||||
margin: 0 15px;
|
||||
height: 4px;
|
||||
border-radius: 5px;
|
||||
background: $c-slider-background;
|
||||
border-radius: inherit;
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
&__loaded-portion,
|
||||
&__finished-portion {
|
||||
border-radius: 5px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__pivot {
|
||||
&__button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 3px solid $c-pivot-border;
|
||||
box-shadow: 0 1px 4px;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: $c-slider-background;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
background-color: $white;
|
||||
transform: translate3d(50%, -50%, 0);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .3;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__stepper {
|
||||
&__minus,
|
||||
&__plus {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
@ -42,10 +43,7 @@
|
||||
bottom: 0;
|
||||
background-color: #6c6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
&__minus,
|
||||
&__plus {
|
||||
&:active {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
@ -22,23 +22,22 @@ $van-swipe-indicator: 6px;
|
||||
position: absolute;
|
||||
height: $van-swipe-indicator;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
> i {
|
||||
border-radius: 100%;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
background-color: $gray-dark;
|
||||
width: $van-swipe-indicator;
|
||||
height: $van-swipe-indicator;
|
||||
&:not(:last-child) {
|
||||
margin-right: $van-swipe-indicator;
|
||||
}
|
||||
&__indicator {
|
||||
border-radius: 100%;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
background-color: $gray-dark;
|
||||
width: $van-swipe-indicator;
|
||||
height: $van-swipe-indicator;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $van-swipe-indicator;
|
||||
}
|
||||
|
||||
.van-swipe__indicator {
|
||||
&--active {
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,22 @@ $van-tabs-card-height: 30px;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&--scrollable {
|
||||
.van-tab {
|
||||
flex: 0 0 22%;
|
||||
}
|
||||
|
||||
.van-tabs__nav {
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
@ -69,22 +85,6 @@ $van-tabs-card-height: 30px;
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
&--scrollable {
|
||||
.van-tab {
|
||||
flex: 0 0 22%;
|
||||
}
|
||||
|
||||
.van-tabs__nav {
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--line {
|
||||
padding-top: $van-tabs-line-height;
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
&--dot {
|
||||
&::after {
|
||||
top: 0;
|
||||
right: -8px;
|
||||
|
||||
@ -165,7 +165,7 @@ describe('Checkbox', () => {
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
const eventStub = sinon.stub(wrapper.vm, '$emit');
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
|
||||
checkboxLabel.trigger('click');
|
||||
|
||||
wrapper.update();
|
||||
@ -189,7 +189,7 @@ describe('Checkbox', () => {
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
expect(wrapper.vm.isDisabled).to.be.true;
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
|
||||
checkboxLabel.trigger('click');
|
||||
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
@ -206,7 +206,7 @@ describe('Checkbox', () => {
|
||||
expect(wrapper.hasClass('van-checkbox')).to.be.true;
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
|
||||
const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
|
||||
checkboxLabel.trigger('click');
|
||||
|
||||
expect(wrapper.vm.currentValue).to.be.false;
|
||||
|
||||
@ -16,8 +16,8 @@ describe('GoodsAction', () => {
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
count: {
|
||||
'.van-goods-action__mini-btn': 2,
|
||||
'.van-goods-action__big-btn': 2,
|
||||
'.van-goods-action-mini-btn': 2,
|
||||
'.van-goods-action-big-btn': 2,
|
||||
'.van-icon-chat': 1
|
||||
}
|
||||
});
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user