2.0.2 • Published 5 years ago

vue-awsome-dropmenu v2.0.2

Weekly downloads
34
License
-
Repository
github
Last release
5 years ago

vue-dropmenu

vue 弹出菜单

使用

# 使用npm安装
npm install vue-awsome-dropmenu
// 引入
import DropMenu from 'vue-awsome-dropmenu';
Vue.use(DropMenu);
<!-- 在template使用 与target同一个父节点 -->
<template>
<button class="btn b1" @click.stop="openMenu1">打开菜单</button>
<drop-menu ref="dropMenu" :list="list" target=".b1" class="sortMenu">

</drop-menu>
</template>
<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获得对应的组件

###自定义样式

.drop-menu {
  ...
  padding: 10px;
}
..menu-item {
  ...
  padding: 10px;
}
2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.6.0

5 years ago

1.5.0

7 years ago

1.4.0

7 years ago

1.3.0

7 years ago

1.2.0

7 years ago