mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-23 09:52:57 +08:00
[Improvement] SubmitBar: add left slot (#345)
* 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 * [fix] optimize clickoutside * [new feature] optimize find-parent * [new feature]: change document title accordinng to language * [new feature] Pagination code review * [improvement] adjust icon-font unicode * [improvement] Icon spinner color inherit * [improvement] icon default width * [bugfix] DateTimePicker validate date props * [bugfix] Tab item text ellipsis * [improvement] optimize single line ellipsis * [Improvement] optimzie staticClass * [Improvement] Button: use sfc instread of jsx * [Improvement] update actionsheet close icon style * fix: yarn.lock * fix: icon test cases * [bugfix] errors during ssr * [Improvement] SubmitBar add left slot
This commit is contained in:
parent
0d686313e0
commit
493371c7a1
@ -33,6 +33,7 @@
|
|||||||
buttonText="提交订单"
|
buttonText="提交订单"
|
||||||
@submit="onClickButton"
|
@submit="onClickButton"
|
||||||
>
|
>
|
||||||
|
<van-checkbox v-model="checked">全选</van-checkbox>
|
||||||
<span slot="tip">
|
<span slot="tip">
|
||||||
您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
|
您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
|
||||||
</span>
|
</span>
|
||||||
@ -52,6 +53,12 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checked: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
onClickButton() {
|
onClickButton() {
|
||||||
Toast('点击按钮');
|
Toast('点击按钮');
|
||||||
@ -69,8 +76,13 @@ export default {
|
|||||||
.van-submit-bar {
|
.van-submit-bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-edit-address {
|
.van-edit-address {
|
||||||
color: #38F;
|
color: #38F;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.van-checkbox {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -71,7 +71,7 @@ Vue.component(SubmitBar.name, SubmitBar);
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### Advanced Usage
|
#### Advanced Usage
|
||||||
提示文案中的额外操作和说明
|
通过 slot 插入自定义内容
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-submit-bar
|
<van-submit-bar
|
||||||
@ -79,6 +79,7 @@ Vue.component(SubmitBar.name, SubmitBar);
|
|||||||
buttonText="提交订单"
|
buttonText="提交订单"
|
||||||
@submit="onClickButton"
|
@submit="onClickButton"
|
||||||
>
|
>
|
||||||
|
<van-checkbox v-model="checked">全选</van-checkbox>
|
||||||
<span slot="tip">
|
<span slot="tip">
|
||||||
您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
|
您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
|
||||||
</span>
|
</span>
|
||||||
@ -106,4 +107,5 @@ Vue.component(SubmitBar.name, SubmitBar);
|
|||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
|-----------|-----------|
|
|-----------|-----------|
|
||||||
|
| default | 自定义订单栏左侧内容 |
|
||||||
| tip | 提示文案中的额外操作和说明 |
|
| tip | 提示文案中的额外操作和说明 |
|
||||||
|
@ -45,7 +45,7 @@ Vue.component(SubmitBar.name, SubmitBar);
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### 高级用法
|
#### 高级用法
|
||||||
提示文案中的额外操作和说明
|
通过 slot 插入自定义内容
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-submit-bar
|
<van-submit-bar
|
||||||
@ -53,6 +53,7 @@ Vue.component(SubmitBar.name, SubmitBar);
|
|||||||
buttonText="提交订单"
|
buttonText="提交订单"
|
||||||
@submit="onClickButton"
|
@submit="onClickButton"
|
||||||
>
|
>
|
||||||
|
<van-checkbox v-model="checked">全选</van-checkbox>
|
||||||
<span slot="tip">
|
<span slot="tip">
|
||||||
您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
|
您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
|
||||||
</span>
|
</span>
|
||||||
@ -80,4 +81,5 @@ Vue.component(SubmitBar.name, SubmitBar);
|
|||||||
|
|
||||||
| Name | 说明 |
|
| Name | 说明 |
|
||||||
|-----------|-----------|
|
|-----------|-----------|
|
||||||
|
| default | 自定义订单栏左侧内容 |
|
||||||
| tip | 提示文案中的额外操作和说明 |
|
| tip | 提示文案中的额外操作和说明 |
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
{{ tip }}<slot name="tip" />
|
{{ tip }}<slot name="tip" />
|
||||||
</div>
|
</div>
|
||||||
<div class="van-submit-bar__bar">
|
<div class="van-submit-bar__bar">
|
||||||
|
<slot />
|
||||||
<div class="van-submit-bar__price">
|
<div class="van-submit-bar__price">
|
||||||
<template v-if="hasPrice">
|
<template v-if="hasPrice">
|
||||||
<span class="van-submit-bar__price-text">合计:</span>
|
<span class="van-submit-bar__price-text">合计:</span>
|
||||||
|
@ -8,7 +8,6 @@ $van-checkbox-size: 20px;
|
|||||||
.van-icon-success {
|
.van-icon-success {
|
||||||
color: $white;
|
color: $white;
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
@ -23,11 +22,15 @@ $van-checkbox-size: 20px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__input,
|
||||||
|
&__label {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
&__input {
|
&__input {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: $van-checkbox-size;
|
height: $van-checkbox-size;
|
||||||
margin-right: 15px;
|
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__control {
|
&__control {
|
||||||
@ -36,13 +39,12 @@ $van-checkbox-size: 20px;
|
|||||||
left: 0;
|
left: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: $van-checkbox-size;
|
width: 100%;
|
||||||
height: $van-checkbox-size;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
display: block;
|
margin-left: 10px;
|
||||||
margin-left: 37px;
|
|
||||||
line-height: $van-checkbox-size;
|
line-height: $van-checkbox-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,26 +5,30 @@ $van-radio-size: 20px;
|
|||||||
.van-radio {
|
.van-radio {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
&__input,
|
||||||
|
&__label {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
&__input {
|
&__input {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: $van-radio-size;
|
height: $van-radio-size;
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__control {
|
&__control {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: $van-radio-size;
|
|
||||||
height: $van-radio-size;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
line-height: $van-radio-size;
|
line-height: $van-radio-size;
|
||||||
display: block;
|
margin-left: 10px;
|
||||||
margin-left: 37px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-icon {
|
.van-icon {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user