# @huteming/ui-actionsheet

> > 上拉菜单

Latest version **1.1.1** (published 2019-12-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install @huteming/ui-actionsheet
pnpm add @huteming/ui-actionsheet
yarn add @huteming/ui-actionsheet
bun add @huteming/ui-actionsheet
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2019-12-12 |
| First published | 2019-12-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 16.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | huteming |

## Links

- npm: https://www.npmjs.com/package/@huteming/ui-actionsheet
- npm.io page: https://npm.io/package/@huteming/ui-actionsheet

## Dependencies (2)

- [@huteming/ui-modal](https://npm.io/package/@huteming/ui-modal.md) ^1.2.0
- [@huteming/ui-styles](https://npm.io/package/@huteming/ui-styles.md) ^1.2.0

## Recent versions

- 1.1.1 (latest) — 2019-12-12
- 1.1.0 — 2019-12-02

## README

### 引入

```javascript
import Vue from 'vue'
import { Actionsheet } from '@huteming/ui'

Vue.use(Actionsheet)
```

## 代码演示

### 基础用法

`Actionsheet`通过`menus`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。

```javascript
export default {
  data() {
    return {
      menus: [
        { label: '选项', value: '返回值' },
      ]
    };
  },

  methods: {
    onShow () {
      Actionsheet(this.menus)
          // 点击菜单关闭
          .then(value => {})
          // 点击取消或遮层关闭
          .catch(() => {})
    }
  }
}
```

### 不显示取消按钮

```javascript
export default {
  data() {
    return {
      menus: [
        { label: '选项', value: '返回值' },
      ]
    };
  },

  methods: {
    onShow () {
      Actionsheet({ menus: this.menus, cancelText: '' })
          // 点击菜单关闭
          .then(value => {})
          // 点击取消或遮层关闭
          .catch(() => {})
    }
  }
}
```

## API

### Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------|-------|---------|-------|--------|
| title | 标题 | string | - | - |
| menus | 菜单项数组 | Menu[] | - | - |
| cancelText | 取消按钮的文本。若设为空字符串，则不显示取消按钮 | string | - | `取消` |
| closeOnClickModal | 是否可以通过点击 modal 层来关闭 `actionsheet` | boolean | - | `true` |

### Menu数据结构

actions属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

| 键名 | 说明 | 类型 |
|------|-------|---------|
| label | 显示文案 | string |
| value | 点击后返回值 | any |

---
_Source: https://npm.io/package/@huteming/ui-actionsheet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._