Vue下拉菜单组件化开发详解
作者：Hgiao
这篇文章主要为大家详细介绍了Vue下拉菜单组件化开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue下拉菜单组件化开发的具体代码，供大家参考，具体内容如下
搞一个自定义组件，只是一个很简单的下拉菜单，也就是一个思路，整起
第一步：在项目中专门创建一个放置自定义组件的文件夹（直接components底下的common中）
dropdown.vue 为一级盒子
dropdownMenu.vue 为二级盒子
dropdownItem.vue 为二级盒子内容
第二步 ：
对dropdown.vue的操作
<template>
<div class="box">
<!-- 给按钮加点击事件 -->
<div @click="showM">
<!-- 一级按钮 -->
<slot name="title"></slot>
</div>
<!-- 二级盒子 -->
<!-- 加v-if操作 隐藏显示效果 -->
<slot v-if="show" name="dropdown"></slot>
</div>
</template>
<script>
export default {
name: "dropdown",
data() {
return {
// 默认二级盒子关闭
show: false
}
},
methods: {
showM() {
this.show = !this.show
},
commitClick(value) {
// 向父级暴露dropdown事件，并把值传入
this.$emit('change-item',value)
}
}
}
</script>
<style scoped>
.box {
display: inline-block; /* 行内块 */
position: relative; /* 相对定位 */
top:100px;
margin-left:100px
}
</style>
对于dropdownMenu仅仅只是把它当作一个盒子，只需要添加一个插槽，把盒子搭好即可
<template>
<div class="dropdown-menu">
<slot></slot>
</div>
</template>
<script>
export default {
name: "dropdownMenu"
}
</script>
<style scoped>
.dropdown-menu {
padding: 8px 0; /* 盒子内边距上下为8px 左右为0 */
border-radius: 4px; /* 盒子圆角 */
border: 1px solid #f2f6fc; /* 边框为1px 灰色 */
position: absolute; /* 绝对定位 */
right: 0; /* 在右侧 */
top: 110%; /* 盒子在按钮下方 */
background-color: #fff; /* 背景颜色为白色 */
box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,.04);
/* 为盒子添加阴影 */
}
</style>
对dropdownItem的操作
<template>
<div class="dropdown-item" @click="itemClick(value)">
<slot></slot>
</div>
</template>
<script>
export default {
name: "dropdownItem",
props:['value'],
data() {
return {};
},
methods: {
itemClick(value) {
// console.log(value)
//通过this调用当前组件的父级的父级也就是dropdown的showM()方法来进行关闭
this.$parent.$parent.showM();
// 调用父级的父级（dropdown）的commitClick方法并传如value值
this.$parent.$parent.commitClick(value);
},
},
};
</script>
<style scoped>
.dropdown-item {
line-height: 40px; /* 行高40px */
white-space: nowrap; /* 不换行 */
padding: 0 20px; /* 内边距上下为0 左右为20px */
color: #606266; /* 字体颜色为灰色 */
cursor: pointer; /* 鼠标移入为点击样子 */
}
.dropdown-item:hover {
color: #409eff; /* 字体颜色为蓝色 */
background-color: #ecf5ff; /* 背景颜色为 浅~~蓝色 非常浅就对了 */
}
</style>
接下来对App.vue文件进行操作
<template>
<div id="app">
<dropdown @change-item="changeItem">
<button slot="title">按钮</button>
<dropdown-menu slot="dropdown">
<dropdown-item value="吃的">吃的</dropdown-item>
<dropdown-item value="喝的">喝的</dropdown-item>
<dropdown-item value="玩的">玩的</dropdown-item>
</dropdown-menu>
</dropdown>
</div>
</template>
<script>
import dropdown from './components/common/dropdown'
import dropdownMenu from "./components/common/dropdownMenu";
import dropdownItem from "./components/common/dropdownItem";
export default {
name: 'App',
components: {
dropdown,dropdownMenu,dropdownItem
},
methods:{
changeItem(e){
console.log(e)
}
}
}
</script>
在main.js导入组件
import zgDropdown from "@/components/common/dropdown"
import zgDropdownMenu from "@/components/common/dropdownMenu"
import zgDropdownItem from "@/components/common/dropdownItem"
Vue.component('zgDropdownItem',zgDropdownItem)
Vue.component('zgDropdown',zgDropdown)
Vue.component('zgDropdownMenu',zgDropdownMenu)
app.vue也要相应修改
<template>
<div id="app">
<zg-dropdown @change-item="changeItem">
<button slot="title">按钮</button>
<zg-dropdown-menu slot="dropdown">
<zg-dropdown-item value="吃的">吃的</zg-dropdown-item>
<zg-dropdown-item value="喝的">喝的</zg-dropdown-item>
<zg-dropdown-item value="玩的">玩的</zg-dropdown-item>
</zg-dropdown-menu>
</zg-dropdown>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
changeItem(e){
console.log(e)
}
}
}
</script>
<style scoped>
</style>
大概就是这么一个思路。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。