[new feature] ActionSheet: support use both title and actions

This commit is contained in:
陈嘉涵
2019-05-05 16:30:30 +08:00
parent e83abd30fe
commit 3baca58f0d
6 changed files with 117 additions and 65 deletions
+28 -15
View File
@@ -10,6 +10,7 @@ Vue.use(ActionSheet);
### Usage
#### Basic Usage
Use `actions` prop to set options of action-sheet.
```html
@@ -26,20 +27,9 @@ export default {
return {
show: false,
actions: [
{
name: 'Option'
},
{
name: 'Option',
description: 'Description'
},
{
loading: true
},
{
name: 'Disabled Option',
disabled: true
}
{ name: 'Option' },
{ name: 'Option' },
{ name: 'Option', subname: 'Description' }
]
};
},
@@ -53,6 +43,30 @@ export default {
}
```
#### Status
```html
<van-action-sheet
v-model="show"
:actions="actions"
/>
```
```javascript
export default {
data() {
return {
show: false,
actions: [
{ name: 'Option' },
{ loading: true },
{ name: 'Disabled Option', disabled: true }
]
};
}
}
```
#### ActionSheet with cancel button
```html
@@ -66,7 +80,6 @@ export default {
```
#### ActionSheet with title
ActionSheet will get another style if there is a `title` prop.
```html
<van-action-sheet v-model="show" title="Title">