236 lines
8.5 KiB
Markdown
236 lines
8.5 KiB
Markdown
|
# ActionSheet 动作面板
|
|||
|
|
|
|||
|
|
从底部弹出的动作菜单面板。
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
通过 `v-model` 设置显示隐藏。
|
|||
|
|
|
|||
|
|
`actions` 类型为 `Array`，数组内部对象结构如下：
|
|||
|
|
|
|||
|
|
| 参数 | 类型 | 说明 | 最低版本 |
|
|||
|
|
| ------- | ------ | -------- | -------- |
|
|||
|
|
| name | string | 选项名称 | - |
|
|||
|
|
| subname | string | 描述信息 | - |
|
|||
|
|
| color | string | 颜色 | - |
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-toast />
|
|||
|
|
<wd-button @click="showActions">弹出菜单</wd-button>
|
|||
|
|
<wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const show = ref<boolean>(false)
|
|||
|
|
const actions = ref([
|
|||
|
|
{
|
|||
|
|
name: '选项1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '选项2'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '选项3',
|
|||
|
|
subname: '描述信息'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
function showActions() {
|
|||
|
|
show.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
show.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const toast = useToast()
|
|||
|
|
|
|||
|
|
function select({ item, index }) {
|
|||
|
|
toast.show(`当前选中项: ${item.title}, 下标: ${index}`)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 选项状态
|
|||
|
|
|
|||
|
|
可以设置 颜色、禁用、加载 等状态。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-button @click="showActions">弹出菜单</wd-button>
|
|||
|
|
<wd-action-sheet v-model="show" :actions="actions" @close="close" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const show = ref<boolean>(false)
|
|||
|
|
const actions = ref([
|
|||
|
|
{
|
|||
|
|
name: '颜色',
|
|||
|
|
color: '#0083ff'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '禁用',
|
|||
|
|
disabled: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
loading: true
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
function showActions() {
|
|||
|
|
show.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
show.value = false
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 取消按钮
|
|||
|
|
|
|||
|
|
设置 `cancel-text` 取消按钮文案，展示取消按钮。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-action-sheet v-model="show" :actions="actions" @close="close" cancel-text="取消" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 自定义单行面板
|
|||
|
|
|
|||
|
|
自定义单行面板时，`panels` 类型为一维数组， 数组内部对象结构如下：
|
|||
|
|
|
|||
|
|
| 参数 | 类型 | 说明 | 最低版本 |
|
|||
|
|
| ------- | ------ | -------- | -------- |
|
|||
|
|
| iconUrl | string | 图片地址 | - |
|
|||
|
|
| title | string | 标题 | - |
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-button @click="showActions">弹出菜单</wd-button>
|
|||
|
|
<wd-action-sheet v-model="show" :panels="panels" @close="close" @select="select" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const show = ref<boolean>(false)
|
|||
|
|
const panels = ref([
|
|||
|
|
{
|
|||
|
|
iconUrl: '//img12.360buyimg.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
|
|||
|
|
title: '微信好友'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
function showActions() {
|
|||
|
|
show.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
show.value = false
|
|||
|
|
}
|
|||
|
|
const toast = useToast()
|
|||
|
|
|
|||
|
|
function select({ item, index }) {
|
|||
|
|
toast.show(`当前选中项: ${item.title}, 下标: ${index}`)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 多行展示
|
|||
|
|
|
|||
|
|
自定义多行面板时， `panels` 类型为多维数组， 每个数组内部对象结构如下：
|
|||
|
|
|
|||
|
|
| 参数 | 类型 | 说明 | 最低版本 |
|
|||
|
|
| ------- | ------ | -------- | -------- |
|
|||
|
|
| iconUrl | string | 图片地址 | - |
|
|||
|
|
| title | string | 标题 | - |
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-button @click="showActions">弹出菜单</wd-button>
|
|||
|
|
<wd-action-sheet v-model="show" :panels="panels" @close="close" @select="select" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const show = ref<boolean>(false)
|
|||
|
|
const panels = ref([
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
iconUrl: '//img12.360buyimg.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
|
|||
|
|
title: '微信好友'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
iconUrl: '//img12.360buyimg.com/imagetools/jfs/t1/122016/33/6657/1362/5f0692a1E8708d245/e47299e5945a6956.png',
|
|||
|
|
title: '微信好友'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
function showActions() {
|
|||
|
|
show.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
show.value = false
|
|||
|
|
}
|
|||
|
|
const toast = useToast()
|
|||
|
|
|
|||
|
|
function select({ item, index }) {
|
|||
|
|
toast.show(`当前选中项: ${item.title}, 下标: ${index}`)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 标题
|
|||
|
|
|
|||
|
|
设置 `title` 展示标题。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<wd-action-sheet v-model="show" title="标题" @close="close">
|
|||
|
|
<view style="padding: 15px 15px 150px 15px;">内容</view>
|
|||
|
|
</wd-action-sheet>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Attributes
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
|||
|
|
| ---------------------- | ----------------------------------------------------------------------------- | ------- | ------ | ------- | -------- |
|
|||
|
|
| v-model | 设置菜单显示隐藏 | boolean | - | - | - |
|
|||
|
|
| actions | 菜单选项 | array | - | [] | - |
|
|||
|
|
| panels | 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示 | array | - | [] | - |
|
|||
|
|
| title | 标题 | string | - | - | - |
|
|||
|
|
| cancel-text | 取消按钮文案 | string | - | - | - |
|
|||
|
|
| close-on-click-action | 点击选项后是否关闭菜单 | boolean | - | true | - |
|
|||
|
|
| close-on-click-modal | 点击遮罩是否关闭 | boolean | - | true | - |
|
|||
|
|
| duration | 动画持续时间 | number | - | 200(ms) | - |
|
|||
|
|
| z-index | 菜单层级 | number | - | 10 | - |
|
|||
|
|
| lazy-render | 弹层内容懒渲染，触发展示时才渲染内容 | boolean | - | true | - |
|
|||
|
|
| safe-area-inset-bottom | 弹出面板是否设置底部安全距离（iphone X 类型的机型） | boolean | - | true | - |
|
|||
|
|
|
|||
|
|
## Events
|
|||
|
|
|
|||
|
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
|||
|
|
| ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
|
|||
|
|
| select | 点击选项时触发 | 菜单选项或自定义面板一维数组 （item: 选项对象, index: 选项下标），自定义面板二维数组（item: 选项对象, rowIndex: 选项行下标, colIndex 选项列下标） | - |
|
|||
|
|
| open | 弹出层打开时触发 | - | - |
|
|||
|
|
| opened | 弹出层打开动画结束时触发 | - | - |
|
|||
|
|
| close | 弹出层关闭时触发 | - | - |
|
|||
|
|
| closed | 弹出层关闭动画结束时触发 | - | - |
|
|||
|
|
| click-modal | 点击遮罩时触发 | - | - |
|
|||
|
|
| cancel | 点击取消按钮时触发 | - | - |
|
|||
|
|
|
|||
|
|
## Action 数据结构
|
|||
|
|
|
|||
|
|
| 键名 | 说明 | 类型 | 最低版本 |
|
|||
|
|
| -------- | ---------- | ------- | -------- |
|
|||
|
|
| name | 选项名称 | string | - |
|
|||
|
|
| subname | 描述信息 | string | - |
|
|||
|
|
| color | 颜色 | string | - |
|
|||
|
|
| disabled | 禁用 | boolean | - |
|
|||
|
|
| loading | 加载中状态 | boolean | - |
|
|||
|
|
|
|||
|
|
## Panel 数据结构
|
|||
|
|
|
|||
|
|
| 键名 | 说明 | 类型 | 最低版本 |
|
|||
|
|
| ------- | -------- | ------ | -------- |
|
|||
|
|
| iconUrl | 图片地址 | string | - |
|
|||
|
|
| title | 标题内容 | string | - |
|
|||
|
|
|
|||
|
|
## 外部样式类
|
|||
|
|
|
|||
|
|
| 类名 | 说明 | 最低版本 |
|
|||
|
|
| ------------------- | --------------- | -------- |
|
|||
|
|
| custom-class | 根节点样式 | - |
|
|||
|
|
| custom-header-class | header 头部样式 | - |
|