# HorActionSheet


### 介绍

<p>基于 <code>promise</code> 风格的动作面板组件</p>


## 代码演示

### 基础用法

```html
<template>
  <demo-block title="基础用法">
    <hor-cell label="联系人" arrow @click="() => handleOpen()" :value="cResult"></hor-cell>
    <hor-cell label="函数式" arrow @click="() => handleOpen2()" :value="cResult2"></hor-cell>
    <hor-action-sheet ref="horActionSheetInstance" />
  </demo-block>
</template>

<script setup lang="ts">
  import { HorActionSheet, HorCell, showActionSheet } from '@daysnap/horn-ui'
  import type { HorActionSheetInstance } from '@daysnap/horn-ui'
  import { ref, computed } from 'vue'
  const result = ref()
  const cResult = computed(() => {
    return result.value?.name ?? ''
  })
  const horActionSheetInstance = ref<HorActionSheetInstance>()
  const handleOpen = async () => {
    result.value = await horActionSheetInstance.value?.show({
      actions: [{ name: '选项一', color: 'blue' }, { name: '选项二' }],
    })
  }

  const result2 = ref()
  const cResult2 = computed(() => {
    return result2.value?.name ?? ''
  })
  const handleOpen2 = async () => {
    result2.value = await showActionSheet({
      actions: [{ name: '选项一', color: 'blue' }, { name: '选项二' }],
    })
  }
</script>

```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horActionSheetProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>

### 插槽 Slots

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>


### 实例方法

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>



<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell } from '../hor-cell'
  import { HorActionSheet, horActionSheetProps } from '.'
  import { parseType } from '../utils'
</script>