mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(ActionSheet): update demo and documents
This commit is contained in:
陈嘉涵
parent
4b54ec6a18
commit
6418e97fc8
@ -42,28 +42,7 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### Status
|
### Show Cancel Button
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet v-model="show" :actions="actions" />
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [
|
|
||||||
{ name: 'Option', color: '#07c160' },
|
|
||||||
{ loading: true },
|
|
||||||
{ name: 'Disabled Option', disabled: true }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### ActionSheet with cancel button
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-action-sheet
|
<van-action-sheet
|
||||||
@ -98,54 +77,86 @@ export default {
|
|||||||
<van-action-sheet v-model="show" :actions="actions" description="Description" />
|
<van-action-sheet v-model="show" :actions="actions" description="Description" />
|
||||||
```
|
```
|
||||||
|
|
||||||
### ActionSheet with title
|
### Option Status
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet
|
||||||
|
v-model="show"
|
||||||
|
:actions="actions"
|
||||||
|
cancel-text="Cancel"
|
||||||
|
@cancel="onCancel"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [
|
||||||
|
{ name: 'Option', color: '#07c160' },
|
||||||
|
{ loading: true },
|
||||||
|
{ name: 'Disabled Option', disabled: true }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Panel
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-action-sheet v-model="show" title="Title">
|
<van-action-sheet v-model="show" title="Title">
|
||||||
<p>Content</p>
|
<div class="content">Content</div>
|
||||||
</van-action-sheet>
|
</van-action-sheet>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
padding: 16px 16px 160px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
| Attribute | Description | Type | Default |
|
||||||
| ---------------------- | --------------------------------------------- | ------------------------- | ------- |
|
|------|------|------|------|
|
||||||
| actions | Options | _Action[]_ | `[]` |
|
| actions | Options | _Action[]_ | `[]` |
|
||||||
| title | Title | _string_ | - |
|
| title | Title | _string_ | - |
|
||||||
| cancel-text | Text of cancel button | _string_ | - |
|
| cancel-text | Text of cancel button | _string_ | - |
|
||||||
| description `v2.2.8` | Description above the options | _string_ | - |
|
| description `v2.2.8` | Description above the options | _string_ | - |
|
||||||
| overlay | Whether to show overlay | _boolean_ | `true` |
|
| close-icon `v2.2.13` | Close icon name | _string_ | `cross` |
|
||||||
| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` |
|
| duration `v2.0.3` | Transition duration, unit second | _number_ | `0.3` |
|
||||||
| close-icon `v2.2.13` | Close icon name | _string_ | `cross` |
|
| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` |
|
||||||
| close-on-click-action | Whether to close when click action | _boolean_ | `false` |
|
| overlay | Whether to show overlay | _boolean_ | `true` |
|
||||||
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
|
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
||||||
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
||||||
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
| close-on-click-action | Whether to close when click action | _boolean_ | `false` |
|
||||||
| duration `v2.0.3` | Transition duration, unit second | _number_ | `0.3` |
|
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
|
||||||
| get-container | Return the mount node for action-sheet | _string \| () => Element_ | - |
|
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
|
||||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
|
| get-container | Return the mount node for action-sheet | _string \| () => Element_ | - |
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| ------------- | --------------------------------- | ----------- |
|
|
||||||
| select | Triggered when click option | item, index |
|
|
||||||
| cancel | Triggered when cancel click | - |
|
|
||||||
| click-overlay | Triggered when click overlay | - |
|
|
||||||
| open | Triggered when open ActionSheet | - |
|
|
||||||
| opened | Triggered when opened ActionSheet | - |
|
|
||||||
| close | Triggered when close ActionSheet | - |
|
|
||||||
| closed | Triggered when closed ActionSheet | - |
|
|
||||||
|
|
||||||
### Data Structure of Action
|
### Data Structure of Action
|
||||||
|
|
||||||
| Key | Description | Type |
|
| Key | Description | Type |
|
||||||
| --------- | ---------------------------- | --------- |
|
|------|------|------|
|
||||||
| name | Title | _string_ |
|
| name | Title | _string_ |
|
||||||
| subname | Subtitle | _string_ |
|
| subname | Subtitle | _string_ |
|
||||||
| color | Text color | _string_ |
|
| color | Text color | _string_ |
|
||||||
| className | className for the option | _any_ |
|
| className | className for the option | _any_ |
|
||||||
| loading | Whether to be loading status | _boolean_ |
|
| loading | Whether to be loading status | _boolean_ |
|
||||||
| disabled | Whether to be disabled | _boolean_ |
|
| disabled | Whether to be disabled | _boolean_ |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| Event | Description | Arguments |
|
||||||
|
|------|------|------|
|
||||||
|
| select | Triggered when click option | item, index |
|
||||||
|
| cancel | Triggered when cancel click | - |
|
||||||
|
| click-overlay | Triggered when click overlay | - |
|
||||||
|
| open | Triggered when open ActionSheet | - |
|
||||||
|
| opened | Triggered when opened ActionSheet | - |
|
||||||
|
| close | Triggered when close ActionSheet | - |
|
||||||
|
| closed | Triggered when closed ActionSheet | - |
|
||||||
|
|||||||
@ -35,8 +35,8 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onSelect(item) {
|
onSelect(item) {
|
||||||
// 默认情况下，点击选项时不会自动关闭菜单
|
// 默认情况下点击选项时不会自动收起
|
||||||
// 可以通过 close-on-click-action 属性开启自动关闭
|
// 可以通过 close-on-click-action 属性开启自动收起
|
||||||
this.show = false;
|
this.show = false;
|
||||||
Toast(item.name);
|
Toast(item.name);
|
||||||
}
|
}
|
||||||
@ -44,29 +44,6 @@ export default {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 选项状态
|
|
||||||
|
|
||||||
选项可以设置为加载状态或禁用状态，也可以通过`color`设置选项颜色
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet v-model="show" :actions="actions" />
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [
|
|
||||||
{ name: '选项', color: '#07c160' },
|
|
||||||
{ loading: true },
|
|
||||||
{ name: '禁用选项', disabled: true }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 展示取消按钮
|
### 展示取消按钮
|
||||||
|
|
||||||
设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前菜单
|
设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前菜单
|
||||||
@ -110,14 +87,48 @@ export default {
|
|||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 展示标题栏
|
### 选项状态
|
||||||
|
|
||||||
通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
|
可以将选项设置为加载状态或禁用状态，或者通过`color`设置选项颜色
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet
|
||||||
|
v-model="show"
|
||||||
|
:actions="actions"
|
||||||
|
cancel-text="取消"
|
||||||
|
@cancel="onCancel"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [
|
||||||
|
{ name: '选项', color: '#07c160' },
|
||||||
|
{ loading: true },
|
||||||
|
{ name: '禁用选项', disabled: true }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义面板
|
||||||
|
|
||||||
|
通过插槽可以自定义菜单的展示内容，同时可以使用`title`属性展示标题栏
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-action-sheet v-model="show" title="标题">
|
<van-action-sheet v-model="show" title="标题">
|
||||||
<p>内容</p>
|
<div class="content">内容</div>
|
||||||
</van-action-sheet>
|
</van-action-sheet>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
padding: 16px 16px 160px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
```
|
```
|
||||||
|
|
||||||
## API
|
## API
|
||||||
@ -130,28 +141,16 @@ export default {
|
|||||||
| title | 顶部标题 | *string* | - |
|
| title | 顶部标题 | *string* | - |
|
||||||
| cancel-text | 取消按钮文字 | *string* | - |
|
| cancel-text | 取消按钮文字 | *string* | - |
|
||||||
| description `v2.2.8` | 选项上方的描述信息 | *string* | - |
|
| description `v2.2.8` | 选项上方的描述信息 | *string* | - |
|
||||||
| overlay | 是否显示遮罩层 | *boolean* | `true` |
|
| close-icon `v2.2.13` | 关闭图标名称或图片链接，可选值见 [Icon 组件](#/zh-CN/icon) | *string* | `cross` |
|
||||||
|
| duration `v2.0.3` | 动画时长，单位秒 | *number* | `0.3` |
|
||||||
| round `v2.0.9` | 是否显示圆角 | *boolean* | `true` |
|
| round `v2.0.9` | 是否显示圆角 | *boolean* | `true` |
|
||||||
| close-icon `v2.2.13` | 关闭图标名称或图片链接 | *string* | `cross` |
|
| overlay | 是否显示遮罩层 | *boolean* | `true` |
|
||||||
|
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` |
|
||||||
|
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |
|
||||||
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` |
|
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` |
|
||||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
|
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
|
||||||
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |
|
|
||||||
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` |
|
|
||||||
| duration `v2.0.3` | 动画时长，单位秒 | *number* | `0.3` |
|
|
||||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
|
|
||||||
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||||
|
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
|
||||||
### Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
|------|------|------|
|
|
||||||
| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
|
|
||||||
| cancel | 取消按钮点击时触发 | - |
|
|
||||||
| click-overlay | 点击遮罩层时触发 | - |
|
|
||||||
| open | 打开菜单时触发 | - |
|
|
||||||
| opened | 打开菜单且动画结束后触发 | - |
|
|
||||||
| close | 关闭菜单时触发 | - |
|
|
||||||
| closed | 关闭菜单且动画结束后触发 | - |
|
|
||||||
|
|
||||||
### Action 数据结构
|
### Action 数据结构
|
||||||
|
|
||||||
@ -166,6 +165,18 @@ export default {
|
|||||||
| loading | 是否为加载状态 | *boolean* |
|
| loading | 是否为加载状态 | *boolean* |
|
||||||
| disabled | 是否为禁用状态 | *boolean* |
|
| disabled | 是否为禁用状态 | *boolean* |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 回调参数 |
|
||||||
|
|------|------|------|
|
||||||
|
| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
|
||||||
|
| cancel | 取消按钮点击时触发 | - |
|
||||||
|
| click-overlay | 点击遮罩层时触发 | - |
|
||||||
|
| open | 打开菜单时触发 | - |
|
||||||
|
| opened | 打开菜单且动画结束后触发 | - |
|
||||||
|
| close | 关闭菜单时触发 | - |
|
||||||
|
| closed | 关闭菜单且动画结束后触发 | - |
|
||||||
|
|
||||||
## 常见问题
|
## 常见问题
|
||||||
|
|
||||||
### 引入时提示 dependencies not found？
|
### 引入时提示 dependencies not found？
|
||||||
|
|||||||
@ -1,60 +1,58 @@
|
|||||||
<template>
|
<template>
|
||||||
<demo-section>
|
<demo-section>
|
||||||
<demo-block :title="$t('basicUsage')">
|
<demo-block :title="$t('basicUsage')">
|
||||||
<van-button type="primary" @click="show1 = true">
|
<van-cell is-link :title="$t('basicUsage')" @click="show.basic = true" />
|
||||||
{{ $t('buttonText') }}
|
<van-cell is-link :title="$t('showCancel')" @click="show.cancel = true" />
|
||||||
</van-button>
|
<van-cell
|
||||||
<van-action-sheet
|
is-link
|
||||||
v-model="show1"
|
:title="$t('showDescription')"
|
||||||
:actions="simpleActions"
|
@click="show.description = true"
|
||||||
@select="onSelect"
|
|
||||||
/>
|
/>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="$t('status')">
|
<demo-block :title="$t('optionStatus')">
|
||||||
<van-button type="primary" @click="show2 = true">
|
<van-cell
|
||||||
{{ $t('buttonText') }}
|
is-link
|
||||||
</van-button>
|
:title="$t('optionStatus')"
|
||||||
<van-action-sheet
|
@click="show.status = true"
|
||||||
v-model="show2"
|
|
||||||
close-on-click-action
|
|
||||||
:actions="statusActions"
|
|
||||||
/>
|
/>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="$t('showCancel')">
|
<demo-block :title="$t('customPanel')">
|
||||||
<van-button type="primary" @click="show3 = true">
|
<van-cell is-link :title="$t('customPanel')" @click="show.title = true" />
|
||||||
{{ $t('buttonText') }}
|
|
||||||
</van-button>
|
|
||||||
<van-action-sheet
|
|
||||||
v-model="show3"
|
|
||||||
:actions="simpleActions"
|
|
||||||
close-on-click-action
|
|
||||||
:cancel-text="$t('cancel')"
|
|
||||||
@cancel="onCancel"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="$t('showDescription')">
|
<van-action-sheet
|
||||||
<van-button type="primary" @click="show4 = true">
|
v-model="show.basic"
|
||||||
{{ $t('buttonText') }}
|
:actions="simpleActions"
|
||||||
</van-button>
|
@select="onSelect"
|
||||||
<van-action-sheet
|
/>
|
||||||
v-model="show4"
|
|
||||||
:actions="simpleActions"
|
|
||||||
close-on-click-action
|
|
||||||
:description="$t('description')"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="$t('showTitle')">
|
<van-action-sheet
|
||||||
<van-button type="primary" @click="show5 = true">
|
v-model="show.status"
|
||||||
{{ $t('buttonText') }}
|
close-on-click-action
|
||||||
</van-button>
|
:actions="statusActions"
|
||||||
<van-action-sheet v-model="show5" :title="$t('title')">
|
:cancel-text="$t('cancel')"
|
||||||
<p>{{ $t('content') }}</p>
|
/>
|
||||||
</van-action-sheet>
|
|
||||||
</demo-block>
|
<van-action-sheet
|
||||||
|
v-model="show.cancel"
|
||||||
|
:actions="simpleActions"
|
||||||
|
close-on-click-action
|
||||||
|
:cancel-text="$t('cancel')"
|
||||||
|
@cancel="onCancel"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-action-sheet
|
||||||
|
v-model="show.description"
|
||||||
|
:actions="simpleActions"
|
||||||
|
close-on-click-action
|
||||||
|
:description="$t('description')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-action-sheet v-model="show.title" :title="$t('title')">
|
||||||
|
<div class="demo-action-sheet-content">{{ $t('content') }}</div>
|
||||||
|
</van-action-sheet>
|
||||||
</demo-section>
|
</demo-section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -64,34 +62,36 @@ import { GREEN } from '../../utils/constant';
|
|||||||
export default {
|
export default {
|
||||||
i18n: {
|
i18n: {
|
||||||
'zh-CN': {
|
'zh-CN': {
|
||||||
buttonText: '弹出菜单',
|
|
||||||
status: '选项状态',
|
|
||||||
subname: '副文本',
|
subname: '副文本',
|
||||||
disabledOption: '禁用选项',
|
|
||||||
showTitle: '展示标题栏',
|
|
||||||
showCancel: '展示取消按钮',
|
showCancel: '展示取消按钮',
|
||||||
showDescription: '展示描述信息',
|
buttonText: '弹出菜单',
|
||||||
|
customPanel: '自定义面板',
|
||||||
description: '这是一段描述信息',
|
description: '这是一段描述信息',
|
||||||
|
optionStatus: '选项状态',
|
||||||
|
disabledOption: '禁用选项',
|
||||||
|
showDescription: '展示描述信息',
|
||||||
},
|
},
|
||||||
'en-US': {
|
'en-US': {
|
||||||
buttonText: 'Show ActionSheet',
|
|
||||||
status: 'Status',
|
|
||||||
subname: 'Subname',
|
subname: 'Subname',
|
||||||
disabledOption: 'Disabled Option',
|
showCancel: 'Show Cancel Button',
|
||||||
showTitle: 'ActionSheet with title',
|
buttonText: 'Show ActionSheet',
|
||||||
showCancel: 'ActionSheet with cancel button',
|
customPanel: 'Custom Panel',
|
||||||
showDescription: 'ActionSheet with description',
|
|
||||||
description: 'Description',
|
description: 'Description',
|
||||||
|
optionStatus: 'Option Status',
|
||||||
|
disabledOption: 'Disabled Option',
|
||||||
|
showDescription: 'Show Description',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show1: false,
|
show: {
|
||||||
show2: false,
|
basic: false,
|
||||||
show3: false,
|
cancel: false,
|
||||||
show4: false,
|
title: false,
|
||||||
show5: false,
|
status: false,
|
||||||
|
description: false,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -115,7 +115,7 @@ export default {
|
|||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
onSelect(item) {
|
onSelect(item) {
|
||||||
this.show1 = false;
|
this.show.basic = false;
|
||||||
this.$toast(item.name);
|
this.$toast(item.name);
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -130,13 +130,7 @@ export default {
|
|||||||
@import '../../style/var';
|
@import '../../style/var';
|
||||||
|
|
||||||
.demo-action-sheet {
|
.demo-action-sheet {
|
||||||
background-color: @white;
|
&-content {
|
||||||
|
|
||||||
.van-button {
|
|
||||||
margin-left: @padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
padding: @padding-md @padding-md @padding-md * 10;
|
padding: @padding-md @padding-md @padding-md * 10;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,30 +2,36 @@
|
|||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
exports[`renders demo correctly 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
<div>
|
||||||
弹出菜单
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||||
</span></button>
|
<div class="van-cell__title"><span>基础用法</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
<!---->
|
<!----></i>
|
||||||
|
</div>
|
||||||
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||||
|
<div class="van-cell__title"><span>展示取消按钮</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
<!----></i>
|
||||||
|
</div>
|
||||||
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||||
|
<div class="van-cell__title"><span>展示描述信息</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
|
<!----></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
<div>
|
||||||
弹出菜单
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||||
</span></button>
|
<div class="van-cell__title"><span>选项状态</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
<!---->
|
<!----></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
<div>
|
||||||
弹出菜单
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||||
</span></button>
|
<div class="van-cell__title"><span>自定义面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
<!---->
|
<!----></i>
|
||||||
</div>
|
</div>
|
||||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
|
||||||
弹出菜单
|
|
||||||
</span></button>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
|
||||||
弹出菜单
|
|
||||||
</span></button>
|
|
||||||
<!---->
|
|
||||||
</div>
|
</div>
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user