# vue-awsome-dropmenu

> dropmenu

Latest version **2.0.2** (published 2019-03-15) · 0 weekly downloads

## Install

```sh
npm install vue-awsome-dropmenu
pnpm add vue-awsome-dropmenu
yarn add vue-awsome-dropmenu
bun add vue-awsome-dropmenu
```

## 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 | 2.0.2 |
| Published | 2019-03-15 |
| First published | 2017-10-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 3 |
| Unpacked size | 173 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | ybb |
| Maintainers | yubaobin |

## Links

- npm: https://www.npmjs.com/package/vue-awsome-dropmenu
- Repository: https://github.com/yubaobin/vue-dropmenu
- Homepage: https://github.com/yubaobin/vue-dropmenu#readme
- Issues: https://github.com/yubaobin/vue-dropmenu/issues
- npm.io page: https://npm.io/package/vue-awsome-dropmenu

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.2.6
- [diff](https://npm.io/package/diff.md) ^3.2.0
- [vue-router](https://npm.io/package/vue-router.md) ^2.3.1

## Recent versions

- 2.0.2 (latest) — 2019-03-15
- 2.0.1 — 2019-03-15
- 2.0.0 — 2019-03-15
- 1.6.0 — 2019-03-15
- 1.5.0 — 2017-10-20
- 1.4.0 — 2017-10-19
- 1.3.0 — 2017-10-18
- 1.2.0 — 2017-10-18

## README

# vue-dropmenu

> vue 弹出菜单

## 使用

```bash
# 使用npm安装
npm install vue-awsome-dropmenu
```

```javascript
// 引入
import DropMenu from 'vue-awsome-dropmenu';
Vue.use(DropMenu);
```

```html
<!-- 在template使用 与target同一个父节点 -->
<template>
<button class="btn b1" @click.stop="openMenu1">打开菜单</button>
<drop-menu ref="dropMenu" :list="list" target=".b1" class="sortMenu">

</drop-menu>
</template>
```

```javascript
<script>
export default {
  name: 'app',
  data() {
  	return {
  		show1: false,
  		list: [{ name:'1. 编辑' }, { name:'2. 只显示标题' }, { name:'3. 只显示标题' }]
  	}
  },
  methods: {
  	openMenu1() {
			this.show1 = true	
  	}
  }
}
</script>
```
## API

参数 |  #
:---:|:---
target | 指定节点显示菜单，如#target, .target
activeIndex | 默认激活项下标，从0开始
bgColor | 背景色
activeColor | 激活的颜色
size | 文字大小
fontColor | 文字颜色
align | 对其方式: 'center', 'left', 'right'
borderColor | 列表分割线颜色
radius | 圆角
padding | 边界
list | 列表数据数组对象, 对象必须有name
show | 显示/隐藏

###方法
先定义ref属性，使用Vue.$refs获得对应的组件


###自定义样式
```css
.drop-menu {
  ...
  padding: 10px;
}
..menu-item {
  ...
  padding: 10px;
}
```

---
_Source: https://npm.io/package/vue-awsome-dropmenu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._