mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat: ActionSheet component
This commit is contained in:
chenjiahan
parent
2539a548b6
commit
aa09ba0fd9
191
src-next/action-sheet/README.md
Normal file
191
src-next/action-sheet/README.md
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
# ActionSheet
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { ActionSheet } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(ActionSheet);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Basic Usage
|
||||||
|
|
||||||
|
Use `actions` prop to set options of action-sheet.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-cell is-link title="Basic Usage" @click="show = true" />
|
||||||
|
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Toast } from 'vant';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [
|
||||||
|
{ name: 'Option 1' },
|
||||||
|
{ name: 'Option 2' },
|
||||||
|
{ name: 'Option 3' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSelect(item) {
|
||||||
|
this.show = false;
|
||||||
|
Toast(item.name);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Show Cancel Button
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet
|
||||||
|
v-model="show"
|
||||||
|
:actions="actions"
|
||||||
|
cancel-text="Cancel"
|
||||||
|
close-on-click-action
|
||||||
|
@cancel="onCancel"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Toast } from 'vant';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [
|
||||||
|
{ name: 'Option 1' },
|
||||||
|
{ name: 'Option 2' },
|
||||||
|
{ name: 'Option 3' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onCancel() {
|
||||||
|
Toast('cancel');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Show Description
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet
|
||||||
|
v-model="show"
|
||||||
|
:actions="actions"
|
||||||
|
cancel-text="Cancel"
|
||||||
|
description="Description"
|
||||||
|
close-on-click-action
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [
|
||||||
|
{ name: 'Option 1' },
|
||||||
|
{ name: 'Option 2' },
|
||||||
|
{ name: 'Option 3', subname: 'Description' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Option Status
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet
|
||||||
|
v-model="show"
|
||||||
|
:actions="actions"
|
||||||
|
cancel-text="Cancel"
|
||||||
|
close-on-click-action
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [
|
||||||
|
{ name: 'Colored Option', color: '#07c160' },
|
||||||
|
{ name: 'Disabled Option', disabled: true },
|
||||||
|
{ name: 'Loading Option', loading: true },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Panel
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet v-model="show" title="Title">
|
||||||
|
<div class="content">Content</div>
|
||||||
|
</van-action-sheet>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
padding: 16px 16px 160px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| Attribute | Description | Type | Default |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| v-model (value) | Whether to show ActionSheet | _boolean_ | `false` |
|
||||||
|
| actions | Options | _Action[]_ | `[]` |
|
||||||
|
| title | Title | _string_ | - |
|
||||||
|
| cancel-text | Text of cancel button | _string_ | - |
|
||||||
|
| description `v2.2.8` | Description above the options | _string_ | - |
|
||||||
|
| close-icon `v2.2.13` | Close icon name | _string_ | `cross` |
|
||||||
|
| duration `v2.0.3` | Transition duration, unit second | _number \| string_ | `0.3` |
|
||||||
|
| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` |
|
||||||
|
| overlay | Whether to show overlay | _boolean_ | `true` |
|
||||||
|
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
||||||
|
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
||||||
|
| close-on-popstate `v2.5.3` | Whether to close when popstate | _boolean_ | `false` |
|
||||||
|
| close-on-click-action | Whether to close when click action | _boolean_ | `false` |
|
||||||
|
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
|
||||||
|
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
|
||||||
|
| get-container | Return the mount node for ActionSheet | _string \| () => Element_ | - |
|
||||||
|
|
||||||
|
### Data Structure of Action
|
||||||
|
|
||||||
|
| Key | Description | Type |
|
||||||
|
| --------- | ---------------------------- | --------- |
|
||||||
|
| name | Title | _string_ |
|
||||||
|
| subname | Subtitle | _string_ |
|
||||||
|
| color | Text color | _string_ |
|
||||||
|
| className | className for the option | _any_ |
|
||||||
|
| loading | Whether to be loading status | _boolean_ |
|
||||||
|
| disabled | Whether to be disabled | _boolean_ |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| Event | Description | Arguments |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| select | Triggered when click option | _action: Action, index: number_ |
|
||||||
|
| cancel | Triggered when click cancel button | - |
|
||||||
|
| open | Triggered when open ActionSheet | - |
|
||||||
|
| close | Triggered when close ActionSheet | - |
|
||||||
|
| opened | Triggered when opened ActionSheet | - |
|
||||||
|
| closed | Triggered when closed ActionSheet | - |
|
||||||
|
| click-overlay | Triggered when click overlay | - |
|
||||||
205
src-next/action-sheet/README.zh-CN.md
Normal file
205
src-next/action-sheet/README.zh-CN.md
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
# ActionSheet 动作面板
|
||||||
|
|
||||||
|
### 介绍
|
||||||
|
|
||||||
|
底部弹起的模态面板，包含与当前情境相关的多个选项。
|
||||||
|
|
||||||
|
### 引入
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { ActionSheet } from 'vant';
|
||||||
|
|
||||||
|
Vue.use(ActionSheet);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
### 基础用法
|
||||||
|
|
||||||
|
动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-cell is-link title="基础用法" @click="show = true" />
|
||||||
|
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Toast } from 'vant';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSelect(item) {
|
||||||
|
// 默认情况下点击选项时不会自动收起
|
||||||
|
// 可以通过 close-on-click-action 属性开启自动收起
|
||||||
|
this.show = false;
|
||||||
|
Toast(item.name);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 展示取消按钮
|
||||||
|
|
||||||
|
设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet
|
||||||
|
v-model="show"
|
||||||
|
:actions="actions"
|
||||||
|
cancel-text="取消"
|
||||||
|
close-on-click-action
|
||||||
|
@cancel="onCancel"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Toast } from 'vant';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onCancel() {
|
||||||
|
Toast('取消');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 展示描述信息
|
||||||
|
|
||||||
|
通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet
|
||||||
|
v-model="show"
|
||||||
|
:actions="actions"
|
||||||
|
cancel-text="取消"
|
||||||
|
description="这是一段描述信息"
|
||||||
|
close-on-click-action
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [
|
||||||
|
{ name: '选项一' },
|
||||||
|
{ name: '选项二' },
|
||||||
|
{ name: '选项三', subname: '描述信息' },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 选项状态
|
||||||
|
|
||||||
|
可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet
|
||||||
|
v-model="show"
|
||||||
|
:actions="actions"
|
||||||
|
cancel-text="取消"
|
||||||
|
close-on-click-action
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
actions: [
|
||||||
|
{ name: '着色选项', color: '#07c160' },
|
||||||
|
{ name: '禁用选项', disabled: true },
|
||||||
|
{ name: '加载选项', loading: true },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### 自定义面板
|
||||||
|
|
||||||
|
通过插槽可以自定义面板的展示内容，同时可以使用`title`属性展示标题栏
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-action-sheet v-model="show" title="标题">
|
||||||
|
<div class="content">内容</div>
|
||||||
|
</van-action-sheet>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.content {
|
||||||
|
padding: 16px 16px 160px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| v-model (value) | 是否显示动作面板 | _boolean_ | `false` |
|
||||||
|
| actions | 面板选项列表 | _Action[]_ | `[]` |
|
||||||
|
| title | 顶部标题 | _string_ | - |
|
||||||
|
| cancel-text | 取消按钮文字 | _string_ | - |
|
||||||
|
| description `v2.2.8` | 选项上方的描述信息 | _string_ | - |
|
||||||
|
| close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
|
||||||
|
| duration `v2.0.3` | 动画时长，单位秒 | _number \| string_ | `0.3` |
|
||||||
|
| round `v2.0.9` | 是否显示圆角 | _boolean_ | `true` |
|
||||||
|
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
|
||||||
|
| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||||
|
| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
|
||||||
|
| close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||||
|
| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `false` |
|
||||||
|
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _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_ | - |
|
||||||
|
|
||||||
|
### Action 数据结构
|
||||||
|
|
||||||
|
`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||||
|
|
||||||
|
| 键名 | 说明 | 类型 |
|
||||||
|
| --------- | ------------------------ | --------- |
|
||||||
|
| name | 标题 | _string_ |
|
||||||
|
| subname | 二级标题 | _string_ |
|
||||||
|
| color | 选项文字颜色 | _string_ |
|
||||||
|
| className | 为对应列添加额外的 class | _any_ |
|
||||||
|
| loading | 是否为加载状态 | _boolean_ |
|
||||||
|
| disabled | 是否为禁用状态 | _boolean_ |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 回调参数 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| select | 点击选项时触发，禁用或加载状态下不会触发 | _action: Action, index: number_ |
|
||||||
|
| cancel | 点击取消按钮时触发 | - |
|
||||||
|
| open | 打开面板时触发 | - |
|
||||||
|
| close | 关闭面板时触发 | - |
|
||||||
|
| opened | 打开面板且动画结束后触发 | - |
|
||||||
|
| closed | 关闭面板且动画结束后触发 | - |
|
||||||
|
| click-overlay | 点击遮罩层时触发 | - |
|
||||||
|
|
||||||
|
## 常见问题
|
||||||
|
|
||||||
|
### 引入时提示 dependencies not found？
|
||||||
|
|
||||||
|
在 1.x 版本中，动作面板的组件名为`Actionsheet`，从 2.0 版本开始更名为`ActionSheet`，请注意区分。
|
||||||
154
src-next/action-sheet/demo/index.vue
Normal file
154
src-next/action-sheet/demo/index.vue
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
<template>
|
||||||
|
<demo-section>
|
||||||
|
<demo-block card :title="t('basicUsage')">
|
||||||
|
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
|
||||||
|
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
:title="t('showDescription')"
|
||||||
|
@click="show.description = true"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block card :title="t('optionStatus')">
|
||||||
|
<van-cell
|
||||||
|
is-link
|
||||||
|
:title="t('optionStatus')"
|
||||||
|
@click="show.status = true"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block card :title="t('customPanel')">
|
||||||
|
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<van-action-sheet
|
||||||
|
v-model:show="show.basic"
|
||||||
|
:actions="simpleActions"
|
||||||
|
@select="onSelect"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-action-sheet
|
||||||
|
v-model:show="show.cancel"
|
||||||
|
:actions="simpleActions"
|
||||||
|
close-on-click-action
|
||||||
|
:cancel-text="t('cancel')"
|
||||||
|
@cancel="onCancel"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-action-sheet
|
||||||
|
v-model:show="show.description"
|
||||||
|
:actions="actionsWithDescription"
|
||||||
|
close-on-click-action
|
||||||
|
:cancel-text="t('cancel')"
|
||||||
|
:description="t('description')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-action-sheet
|
||||||
|
v-model:show="show.status"
|
||||||
|
close-on-click-action
|
||||||
|
:actions="statusActions"
|
||||||
|
:cancel-text="t('cancel')"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-action-sheet v-model:show="show.title" :title="t('title')">
|
||||||
|
<div class="demo-action-sheet-content">{{ t('content') }}</div>
|
||||||
|
</van-action-sheet>
|
||||||
|
</demo-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { GREEN } from '../../utils/constant';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
i18n: {
|
||||||
|
'zh-CN': {
|
||||||
|
option1: '选项一',
|
||||||
|
option2: '选项二',
|
||||||
|
option3: '选项三',
|
||||||
|
subname: '描述信息',
|
||||||
|
showCancel: '展示取消按钮',
|
||||||
|
buttonText: '弹出菜单',
|
||||||
|
customPanel: '自定义面板',
|
||||||
|
description: '这是一段描述信息',
|
||||||
|
optionStatus: '选项状态',
|
||||||
|
coloredOption: '着色选项',
|
||||||
|
disabledOption: '禁用选项',
|
||||||
|
showDescription: '展示描述信息',
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
option1: 'Option 1',
|
||||||
|
option2: 'Option 2',
|
||||||
|
option3: 'Option 3',
|
||||||
|
subname: 'Description',
|
||||||
|
showCancel: 'Show Cancel Button',
|
||||||
|
buttonText: 'Show ActionSheet',
|
||||||
|
customPanel: 'Custom Panel',
|
||||||
|
description: 'Description',
|
||||||
|
optionStatus: 'Option Status',
|
||||||
|
coloredOption: 'Colored Option',
|
||||||
|
disabledOption: 'Disabled Option',
|
||||||
|
showDescription: 'Show Description',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: {
|
||||||
|
basic: false,
|
||||||
|
cancel: false,
|
||||||
|
title: false,
|
||||||
|
status: false,
|
||||||
|
description: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
simpleActions() {
|
||||||
|
return [
|
||||||
|
{ name: this.t('option1') },
|
||||||
|
{ name: this.t('option2') },
|
||||||
|
{ name: this.t('option3') },
|
||||||
|
];
|
||||||
|
},
|
||||||
|
|
||||||
|
actionsWithDescription() {
|
||||||
|
return [
|
||||||
|
{ name: this.t('option1') },
|
||||||
|
{ name: this.t('option2') },
|
||||||
|
{ name: this.t('option3'), subname: this.t('subname') },
|
||||||
|
];
|
||||||
|
},
|
||||||
|
|
||||||
|
statusActions() {
|
||||||
|
return [
|
||||||
|
{ name: this.t('coloredOption'), color: GREEN },
|
||||||
|
{ name: this.t('disabledOption'), disabled: true },
|
||||||
|
{ loading: true },
|
||||||
|
];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onSelect(item) {
|
||||||
|
this.show.basic = false;
|
||||||
|
this.$toast(item.name);
|
||||||
|
},
|
||||||
|
|
||||||
|
onCancel() {
|
||||||
|
this.$toast(this.t('cancel'));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import '../../style/var';
|
||||||
|
|
||||||
|
.demo-action-sheet {
|
||||||
|
&-content {
|
||||||
|
padding: @padding-md @padding-md @padding-md * 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
167
src-next/action-sheet/index.js
Normal file
167
src-next/action-sheet/index.js
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
// Utils
|
||||||
|
import { createNamespace } from '../utils';
|
||||||
|
|
||||||
|
// Mixins
|
||||||
|
import { popupMixinProps } from '../mixins/popup';
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import Icon from '../icon';
|
||||||
|
import Popup from '../popup';
|
||||||
|
import Loading from '../loading';
|
||||||
|
|
||||||
|
const [createComponent, bem] = createNamespace('action-sheet');
|
||||||
|
|
||||||
|
export default createComponent({
|
||||||
|
props: {
|
||||||
|
...popupMixinProps,
|
||||||
|
title: String,
|
||||||
|
actions: Array,
|
||||||
|
duration: [Number, String],
|
||||||
|
cancelText: String,
|
||||||
|
description: String,
|
||||||
|
getContainer: [String, Function],
|
||||||
|
closeOnPopstate: Boolean,
|
||||||
|
closeOnClickAction: Boolean,
|
||||||
|
round: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
closeIcon: {
|
||||||
|
type: String,
|
||||||
|
default: 'cross',
|
||||||
|
},
|
||||||
|
safeAreaInsetBottom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
overlay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
closeOnClickOverlay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
emits: ['close', 'cancel', 'select', 'update:show'],
|
||||||
|
|
||||||
|
setup(props, { slots, emit }) {
|
||||||
|
function onCancel() {
|
||||||
|
emit('update:show', false);
|
||||||
|
emit('cancel');
|
||||||
|
}
|
||||||
|
|
||||||
|
function onToggle(show) {
|
||||||
|
emit('update:show', show);
|
||||||
|
}
|
||||||
|
|
||||||
|
return function () {
|
||||||
|
const { title, cancelText } = props;
|
||||||
|
|
||||||
|
function Header() {
|
||||||
|
if (title) {
|
||||||
|
return (
|
||||||
|
<div class={bem('header')}>
|
||||||
|
{title}
|
||||||
|
<Icon
|
||||||
|
name={props.closeIcon}
|
||||||
|
class={bem('close')}
|
||||||
|
onClick={onCancel}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function Content() {
|
||||||
|
if (slots.default) {
|
||||||
|
return <div class={bem('content')}>{slots.default()}</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function Option(item, index) {
|
||||||
|
const { disabled, loading, callback } = item;
|
||||||
|
|
||||||
|
function onClickOption(event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
if (disabled || loading) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (callback) {
|
||||||
|
callback(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('select', item, index);
|
||||||
|
|
||||||
|
if (props.closeOnClickAction) {
|
||||||
|
emit('update:show', false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function OptionContent() {
|
||||||
|
if (loading) {
|
||||||
|
return <Loading size="20px" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
<span class={bem('name')}>{item.name}</span>,
|
||||||
|
item.subname && <span class={bem('subname')}>{item.subname}</span>,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class={[bem('item', { disabled, loading }), item.className]}
|
||||||
|
style={{ color: item.color }}
|
||||||
|
onClick={onClickOption}
|
||||||
|
>
|
||||||
|
{OptionContent()}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CancelText() {
|
||||||
|
if (cancelText) {
|
||||||
|
return [
|
||||||
|
<div class={bem('gap')} />,
|
||||||
|
<button type="button" class={bem('cancel')} onClick={onCancel}>
|
||||||
|
{cancelText}
|
||||||
|
</button>,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const Description = props.description && (
|
||||||
|
<div class={bem('description')}>{props.description}</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popup
|
||||||
|
class={bem()}
|
||||||
|
position="bottom"
|
||||||
|
show={props.show}
|
||||||
|
round={props.round}
|
||||||
|
overlay={props.overlay}
|
||||||
|
duration={props.duration}
|
||||||
|
lazyRender={props.lazyRender}
|
||||||
|
lockScroll={props.lockScroll}
|
||||||
|
getContainer={props.getContainer}
|
||||||
|
closeOnPopstate={props.closeOnPopstate}
|
||||||
|
closeOnClickOverlay={props.closeOnClickOverlay}
|
||||||
|
safeAreaInsetBottom={props.safeAreaInsetBottom}
|
||||||
|
{...{ 'onUpdate:show': onToggle }}
|
||||||
|
>
|
||||||
|
{Header()}
|
||||||
|
{Description}
|
||||||
|
{props.actions && props.actions.map(Option)}
|
||||||
|
{Content()}
|
||||||
|
{CancelText()}
|
||||||
|
</Popup>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
89
src-next/action-sheet/index.less
Normal file
89
src-next/action-sheet/index.less
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
@import '../style/var';
|
||||||
|
@import '../style/mixins/hairline';
|
||||||
|
|
||||||
|
.van-action-sheet {
|
||||||
|
max-height: @action-sheet-max-height;
|
||||||
|
color: @action-sheet-item-text-color;
|
||||||
|
|
||||||
|
&__item,
|
||||||
|
&__cancel {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: @action-sheet-item-height;
|
||||||
|
padding: 0;
|
||||||
|
font-size: @action-sheet-item-font-size;
|
||||||
|
line-height: 20px;
|
||||||
|
background-color: @action-sheet-item-background;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: @active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
&--loading,
|
||||||
|
&--disabled {
|
||||||
|
color: @action-sheet-item-disabled-text-color;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: @action-sheet-item-background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--loading {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subname {
|
||||||
|
margin-left: @padding-base;
|
||||||
|
color: @action-sheet-subname-color;
|
||||||
|
font-size: @action-sheet-subname-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__gap {
|
||||||
|
display: block;
|
||||||
|
height: @action-sheet-cancel-padding-top;
|
||||||
|
background-color: @action-sheet-cancel-padding-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
font-weight: @font-weight-bold;
|
||||||
|
font-size: @action-sheet-header-font-size;
|
||||||
|
line-height: @action-sheet-header-height;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description {
|
||||||
|
position: relative;
|
||||||
|
padding: 20px @padding-md;
|
||||||
|
color: @action-sheet-description-color;
|
||||||
|
font-size: @action-sheet-description-font-size;
|
||||||
|
line-height: @action-sheet-description-line-height;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: @action-sheet-close-icon-padding;
|
||||||
|
color: @action-sheet-close-icon-color;
|
||||||
|
font-size: @action-sheet-close-icon-size;
|
||||||
|
line-height: inherit;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: @action-sheet-close-icon-active-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
37
src-next/action-sheet/test/__snapshots__/demo.spec.js.snap
Normal file
37
src-next/action-sheet/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`renders demo correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<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 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 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 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>
|
||||||
|
`;
|
||||||
40
src-next/action-sheet/test/__snapshots__/index.spec.js.snap
Normal file
40
src-next/action-sheet/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`callback events 1`] = `
|
||||||
|
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
|
||||||
|
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||||
|
</button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button>
|
||||||
|
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`close-icon prop 1`] = `
|
||||||
|
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||||
|
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
|
||||||
|
<!----></i></div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||||
|
|
||||||
|
exports[`description prop 1`] = `
|
||||||
|
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||||
|
<div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`disable lazy-render 1`] = `
|
||||||
|
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
|
||||||
|
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`render title and default slot 1`] = `
|
||||||
|
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||||
|
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
|
||||||
|
<!----></i></div>
|
||||||
|
<div class="van-action-sheet__content">Default</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||||
4
src-next/action-sheet/test/demo.spec.js
Normal file
4
src-next/action-sheet/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import Demo from '../demo';
|
||||||
|
import { snapshotDemo } from '../../../test/demo';
|
||||||
|
|
||||||
|
snapshotDemo(Demo);
|
||||||
186
src-next/action-sheet/test/index.spec.js
Normal file
186
src-next/action-sheet/test/index.spec.js
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
import { mount, later } from '../../../test';
|
||||||
|
import ActionSheet from '..';
|
||||||
|
|
||||||
|
test('callback events', () => {
|
||||||
|
const callback = jest.fn();
|
||||||
|
const onInput = jest.fn();
|
||||||
|
const onCancel = jest.fn();
|
||||||
|
const onSelect = jest.fn();
|
||||||
|
|
||||||
|
const actions = [
|
||||||
|
{ name: 'Option', callback },
|
||||||
|
{ name: 'Option', disabled: true },
|
||||||
|
{ name: 'Option', loading: true },
|
||||||
|
{ name: 'Option', subname: 'Subname' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
propsData: {
|
||||||
|
value: true,
|
||||||
|
actions,
|
||||||
|
cancelText: 'Cancel',
|
||||||
|
},
|
||||||
|
context: {
|
||||||
|
on: {
|
||||||
|
input: onInput,
|
||||||
|
cancel: onCancel,
|
||||||
|
select: onSelect,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const options = wrapper.findAll('.van-action-sheet__item');
|
||||||
|
options.at(0).trigger('click');
|
||||||
|
options.at(1).trigger('click');
|
||||||
|
wrapper.find('.van-action-sheet__cancel').trigger('click');
|
||||||
|
|
||||||
|
expect(callback).toHaveBeenCalled();
|
||||||
|
expect(onCancel).toHaveBeenCalled();
|
||||||
|
expect(onInput).toHaveBeenCalledWith(false);
|
||||||
|
expect(onSelect).toHaveBeenCalledWith(actions[0], 0);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('click overlay and close', async () => {
|
||||||
|
const onInput = jest.fn();
|
||||||
|
const onClickOverlay = jest.fn();
|
||||||
|
const div = document.createElement('div');
|
||||||
|
|
||||||
|
mount({
|
||||||
|
template: `
|
||||||
|
<div>
|
||||||
|
<action-sheet
|
||||||
|
:value="true"
|
||||||
|
:get-container="getContainer"
|
||||||
|
@input="onInput"
|
||||||
|
@click-overlay="onClickOverlay"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
components: {
|
||||||
|
ActionSheet,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
getContainer: () => div,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onInput,
|
||||||
|
onClickOverlay,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await later();
|
||||||
|
|
||||||
|
div.querySelector('.van-overlay').click();
|
||||||
|
expect(onInput).toHaveBeenCalledWith(false);
|
||||||
|
expect(onClickOverlay).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('disable lazy-render', () => {
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
propsData: {
|
||||||
|
lazyRender: false,
|
||||||
|
actions: [{ name: 'Option' }, { name: 'Option' }],
|
||||||
|
cancelText: 'Cancel',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('render title and default slot', () => {
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
propsData: {
|
||||||
|
value: true,
|
||||||
|
title: 'Title',
|
||||||
|
},
|
||||||
|
scopedSlots: {
|
||||||
|
default() {
|
||||||
|
return 'Default';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('get container', () => {
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
propsData: {
|
||||||
|
value: true,
|
||||||
|
getContainer: 'body',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper.vm.$el.parentNode).toEqual(document.body);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('close-on-click-action prop', () => {
|
||||||
|
const onInput = jest.fn();
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
propsData: {
|
||||||
|
value: true,
|
||||||
|
actions: [{ name: 'Option' }],
|
||||||
|
closeOnClickAction: true,
|
||||||
|
},
|
||||||
|
context: {
|
||||||
|
on: {
|
||||||
|
input: onInput,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const option = wrapper.find('.van-action-sheet__item');
|
||||||
|
option.trigger('click');
|
||||||
|
|
||||||
|
expect(onInput).toHaveBeenCalledWith(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('round prop', () => {
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
propsData: {
|
||||||
|
value: true,
|
||||||
|
round: true,
|
||||||
|
actions: [{ name: 'Option' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('color option', () => {
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
propsData: {
|
||||||
|
value: true,
|
||||||
|
actions: [{ name: 'Option', color: 'red' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('description prop', () => {
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
propsData: {
|
||||||
|
value: true,
|
||||||
|
description: 'This is a description',
|
||||||
|
actions: [{ name: 'Option' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('close-icon prop', () => {
|
||||||
|
const wrapper = mount(ActionSheet, {
|
||||||
|
propsData: {
|
||||||
|
value: true,
|
||||||
|
title: 'Title',
|
||||||
|
closeIcon: 'cross',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
@ -43,8 +43,6 @@ export function PopupMixin(options = {}) {
|
|||||||
|
|
||||||
props: popupMixinProps,
|
props: popupMixinProps,
|
||||||
|
|
||||||
emits: ['open', 'close', 'update:show', 'click-overlay'],
|
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
inited: this.show,
|
inited: this.show,
|
||||||
|
|||||||
@ -39,7 +39,15 @@ export default createComponent({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
emits: ['click', 'opened', 'closed'],
|
emits: [
|
||||||
|
'open',
|
||||||
|
'close',
|
||||||
|
'click',
|
||||||
|
'opened',
|
||||||
|
'closed',
|
||||||
|
'update:show',
|
||||||
|
'click-overlay',
|
||||||
|
],
|
||||||
|
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
const createEmitter = (eventName) => (event) =>
|
const createEmitter = (eventName) => (event) =>
|
||||||
|
|||||||
@ -180,10 +180,10 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
title: '反馈组件',
|
title: '反馈组件',
|
||||||
items: [
|
items: [
|
||||||
// {
|
{
|
||||||
// path: 'action-sheet',
|
path: 'action-sheet',
|
||||||
// title: 'ActionSheet 动作面板',
|
title: 'ActionSheet 动作面板',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// path: 'dialog',
|
// path: 'dialog',
|
||||||
// title: 'Dialog 弹出框',
|
// title: 'Dialog 弹出框',
|
||||||
@ -514,10 +514,10 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
title: 'Action Components',
|
title: 'Action Components',
|
||||||
items: [
|
items: [
|
||||||
// {
|
{
|
||||||
// path: 'action-sheet',
|
path: 'action-sheet',
|
||||||
// title: 'ActionSheet',
|
title: 'ActionSheet',
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// path: 'dialog',
|
// path: 'dialog',
|
||||||
// title: 'Dialog',
|
// title: 'Dialog',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user