mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-25 02:41:46 +08:00
[improvement] Actionsheet: support use slot and cancel-text at same time (#3021)
This commit is contained in:
parent
2d6269fba8
commit
e04322a2e6
@ -77,14 +77,6 @@ function Actionsheet(
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const Footer = cancelText ? (
|
|
||||||
<div class={bem('cancel')} onClick={onCancel}>
|
|
||||||
{cancelText}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div class={bem('content')}>{slots.default && slots.default()}</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popup
|
<Popup
|
||||||
class={bem()}
|
class={bem()}
|
||||||
@ -100,7 +92,12 @@ function Actionsheet(
|
|||||||
{...inherit(ctx)}
|
{...inherit(ctx)}
|
||||||
>
|
>
|
||||||
{title ? Header() : props.actions.map(Option)}
|
{title ? Header() : props.actions.map(Option)}
|
||||||
{Footer}
|
{slots.default && <div class={bem('content')}>{slots.default()}</div>}
|
||||||
|
{cancelText && (
|
||||||
|
<div class={bem('cancel')} onClick={onCancel}>
|
||||||
|
{cancelText}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</Popup>
|
</Popup>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -98,6 +98,7 @@
|
|||||||
color: @red;
|
color: @red;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
&--center {
|
&--center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -12,6 +12,7 @@ Vue.use(Field);
|
|||||||
### 代码演示
|
### 代码演示
|
||||||
|
|
||||||
#### 基础用法
|
#### 基础用法
|
||||||
|
|
||||||
通过 v-model 绑定输入框的值
|
通过 v-model 绑定输入框的值
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -21,6 +22,7 @@ Vue.use(Field);
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### 自定义类型
|
#### 自定义类型
|
||||||
|
|
||||||
根据`type`属性定义不同类型的输入框
|
根据`type`属性定义不同类型的输入框
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -59,6 +61,7 @@ Vue.use(Field);
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### 错误提示
|
#### 错误提示
|
||||||
|
|
||||||
通过`error`或者`error-message`属性增加对应的错误提示
|
通过`error`或者`error-message`属性增加对应的错误提示
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -79,6 +82,7 @@ Vue.use(Field);
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### 高度自适应
|
#### 高度自适应
|
||||||
|
|
||||||
对于 textarea,可以通过`autosize`属性设置高度自适应
|
对于 textarea,可以通过`autosize`属性设置高度自适应
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -95,7 +99,8 @@ Vue.use(Field);
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### 插入按钮
|
#### 插入按钮
|
||||||
通过 button slot 可以在输入框尾部插入按钮
|
|
||||||
|
通过 button 插槽可以在输入框尾部插入按钮
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
@ -131,7 +136,7 @@ Field 默认支持 Input 标签所有的原生属性,比如 `maxlength`、`pla
|
|||||||
| error-message | 底部错误提示文案,为空时不展示 | `String` | `''` | - |
|
| error-message | 底部错误提示文案,为空时不展示 | `String` | `''` | - |
|
||||||
| label-align | 文本对齐方式,可选值为 `center` `right` | `String` | `left` | 1.1.10 |
|
| label-align | 文本对齐方式,可选值为 `center` `right` | `String` | `left` | 1.1.10 |
|
||||||
| input-align | 输入框内容对齐方式,可选值为 `center` `right` | `String` | `left` | 1.1.10 |
|
| input-align | 输入框内容对齐方式,可选值为 `center` `right` | `String` | `left` | 1.1.10 |
|
||||||
| error-message-align | 错误提示文案对齐方式,可选值为 `center` `right` | `String` | `left` | - |
|
| error-message-align | 错误提示文案对齐方式,可选值为 `center` `right` | `String` | `left` | 1.6.11 |
|
||||||
| autosize | 自适应内容高度,只对 textarea 有效,可传入对象,<br>如 { maxHeight: 100, minHeight: 50 },单位为 px | `Boolean | Object` | `false` | 1.0.0 |
|
| autosize | 自适应内容高度,只对 textarea 有效,可传入对象,<br>如 { maxHeight: 100, minHeight: 50 },单位为 px | `Boolean | Object` | `false` | 1.0.0 |
|
||||||
| left-icon | 输入框左侧图标名称或图片链接,可选值见 Icon 组件 | `String` | - | 1.5.7 |
|
| left-icon | 输入框左侧图标名称或图片链接,可选值见 Icon 组件 | `String` | - | 1.5.7 |
|
||||||
| right-icon | 输入框尾部图标名称或图片链接,可选值见 Icon 组件 | `String` | - | 1.5.7 |
|
| right-icon | 输入框尾部图标名称或图片链接,可选值见 Icon 组件 | `String` | - | 1.5.7 |
|
||||||
|
Loading…
x
Reference in New Issue
Block a user