⌘

ActionSheet 动作面板

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

只能把按钮装到这里了

import { DuActionSheet } from 'dangoui'

示例

各种类型

<template>
  <PreviewBlock title="列表">
    <DuButton @click="listOpen = true">开放列表分享面板</DuButton>
    <DuActionSheet v-model:open="listOpen" :items="items" />
  </PreviewBlock>
  <PreviewBlock title="宫格">
    <DuButton @click="gridOpen = true">开放宫格分享面板</DuButton>
    <DuActionSheet v-model:open="gridOpen" type="grid" :items="items" />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuActionSheet, DuButton } from 'dangoui'

const listOpen = ref(false)

const gridOpen = ref(false)

const items = [
  {
    label: '微信',
    icon: 'wechat-colorful'
  },
  {
    label: '复制链接',
    icon: 'copylink'
  },
  {
    label: '生成海报',
    icon: 'photo'
  },
  {
    label: '编辑',
    icon: 'edit'
  },
  {
    label: '删除',
    icon: 'delete'
  },
  {
    label: '举报',
    icon: 'warning'
  }
]
</script>

API

属性

属性名	类型	默认值	说明
type	`"list" \| "grid"`	`"list"`	列表还是宫格
open	`boolean`	`false`	是否打开分享面板
items	`ActionSheetItem[]`	-	分享面板元素，`icon` 值可以是 `DuIcon` 中的所有图标，或者 `wechat-colorful`（彩色的微信图标）

事件

名称	类型
update:open	`(event: "update:open", open: boolean): void`
select	`(event: "select", item: ActionSheetItem): void`

本页包含