vue-awsome-dropmenu

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;
}