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

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

###自定义样式

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