Vue 下拉菜单组件化

Vue 下拉菜单组件化开发

一、新建Vue项目

vue create dropdown

二、清理项目环境

1.删除多余默认组件，只留下App.vue文件

2.清理路由（router），保证routes为空

3.将App.vue文件下清除<router-view/> 如：

接下来的工作将会在App.vue文件为首页

三、组件化准备

1.在src文件夹下新建名为dropdown文件夹

2.在dropdown文件夹下新建三个vue文件

1). 	dropdown.vue        为一级盒子

2).    	dropdownMenu.vue    为二级盒子     

3).		dropdownItem.vue    为二级盒子内容

四、组件化开发

第一部分

1.先在dropdown.vue文件设计一个整体框架

<template>
  <div class="box">
    <div>
          <!--  此处使用具名插槽 一级按钮   放入按钮  -->
      <slot name="title"></slot>
    </div>
        <!--  此处使用具名插槽   二级盒子  放入需要下拉的内容 -->
    <slot name="dropdown"></slot>
  </div>
</template>

<script>
  export default {
    
    name: "dropdown"
  }
</script>

<style scoped>
  .box {
    
    display: inline-block; /* 行内块 */
    position: relative; /* 相对定位 */
  }
</style>

然后在App.vue导入模块

<template>
  <div id="app">
    <dropdown></dropdown>
  </div>
</template>

<script>
  import dropdown from './dropdown/dropdown'
  export default {
    
    name: 'App',
    components: {
    
      dropdown
    }
  }
</script>

<style>

#app {
    
  width: 200px;
  height: 300px;
  margin: 200px auto;
}
</style>

紧接着在dropdown标签下写入按钮

<template>
  <div id="app">
    <dropdown>
    <!-- 按钮样式自行修改 -->
      <button slot="title">按钮</button>
    </dropdown>
  </div>
</template>

运行如下:

第二部分

接下来是对dropdownMenu的操作

对于dropdownMenu仅仅只是把他当作一个盒子
只需要添加一个插槽
把盒子搭好即可

<template>
  <div class