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>

大概就是这么一个思路。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。