Detailed explanation of component development of Vue drop-down menu

This article example shares the specific code for the component development of the Vue drop-down menu for your reference. The specific content is as follows

Make a custom component, just a very simple drop-down menu, that is, an idea, the whole

Step 1: Create a folder in the project to store custom components (directly in common under components)

dropdown.vue is a first-level box

dropdownMenu.vue is a secondary box

dropdownItem.vue is the secondary box content

Step 2:

Operations on dropdown.vue

<template>
  <div class="box">
     <!-- Add a click event to the button-->
    <div @click="showM">
          <!-- First level button -->
      <slot name="title"></slot>
    </div>
        <!-- Secondary Box -->
        
        <!-- Add v-if operation to hide the display effect-->
    <slot v-if="show" name="dropdown"></slot>
  </div>
</template>

<script>
  export default {
    name: "dropdown",
    data() {
      return {
        // The default secondary box is closed show: false
      }
    },
    methods: {
      showM() {
        this.show = !this.show
      },
      commitClick(value) {
      // Expose the dropdown event to the parent and pass the value to this.$emit('change-item',value)
      }
    }
  }
</script>

<style scoped>
  .box {
    display: inline-block; /* Inline block */
    position: relative; /* relative positioning*/
    top:100px;
    margin-left:100px
  }
</style>

For the dropdownMenu, just treat it as a box. You only need to add a slot and build the box.

<template>
  <div class="dropdown-menu">
    <slot></slot>
  </div>
</template>

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

<style scoped>
  .dropdown-menu {
    padding: 8px 0; /* The box inner margin is 8px on top and 0 on left and right */
    border-radius: 4px; /* box rounded corners*/
    border: 1px solid #f2f6fc; /* Border is 1px gray*/
    position: absolute; /* absolute positioning*/
    right: 0; /* on the right side */
    top: 110%; /* The box is below the button */
    background-color: #fff; /* Background color is white*/
    box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,.04);
    /* Add a shadow to the box */
  }
</style>

Operations on 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)
      //Call the parent of the parent of the current component, that is, the showM() method of dropdown through this to close this.$parent.$parent.showM();
      // Call the commitClick method of the parent's parent (dropdown) and pass the value this.$parent.$parent.commitClick(value);
    },
  },
};
</script>

<style scoped>
 .dropdown-item {
   line-height: 40px; /* Line height 40px */
   white-space: nowrap; /* no line break*/
   padding: 0 20px; /* The inner margin is 0 at the top and bottom and 20px at the left and right */
   color: #606266; /* Font color is gray*/
   cursor: pointer; /*Move the mouse to click*/
 }
  .dropdown-item:hover {
    color: #409eff; /* Font color is blue*/
    background-color: #ecf5ff; /* The background color should be light~~ a very light blue*/
  }
</style>

Next, operate on the App.vue file

<template>
  <div id="app">
    <dropdown @change-item="changeItem">
      <button slot="title">Button</button>
      <dropdown-menu slot="dropdown">
        <dropdown-item value="Food">Food</dropdown-item>
        <dropdown-item value="Drink">Drink</dropdown-item>
        <dropdown-item value="Play">Play</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>

Import the component in 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 should also be modified accordingly

<template>
  <div id="app">
    <zg-dropdown @change-item="changeItem">
      <button slot="title">Button</button>
      <zg-dropdown-menu slot="dropdown">
        <zg-dropdown-item value="Food">Food</zg-dropdown-item>
        <zg-dropdown-item value="Drink">Drink</zg-dropdown-item>
        <zg-dropdown-item value="Play">Play</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>

That’s roughly the idea.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Do you know the componentization in Vue life cycle?
Vue component learning scoped detailed explanation
Essential skills for Vue component development: component recursion
Basic usage details of Vue componentization
Common methods of Vue componentization: component value transfer and communication
Let's learn Vue's componentization together

<<: MySQL login and exit command format

>>: How to monitor mysql using zabbix