Example Analysis of component-based Development of drop-down menu in Vue

Editor to share with you a sample analysis of component-based development of drop-down menus in Vue. I hope you will gain something after reading this article. Let's discuss it together.

The details are as follows

To create a custom component is just a very simple drop-down menu, that is, a train of thought.

Step 1: create a special folder in the project to place custom components (in common directly under components)

Dropdown.vue is a first-class box

DropdownMenu.vue is a second-class box

DropdownItem.vue is second-level box content

Step 2:

Operation on dropdown.vue

Export default {name: "dropdown", data () {return {/ / default secondary box closes show: false}}, methods: {showM () {this.show =! this.show}, commitClick (value) {/ / exposes dropdown events to the parent And pass the value into this.$emit ('change-item',value)}} .box {display: inline-block / * inline block * / position: relative; / * relative positioning * / top:100px; margin-left:100px}

For dropdownMenu, just think of it as a box, just add a slot and put the box together.

Export default {name: "dropdownMenu"}. Dropdown-menu {padding: 8px 0; / * the inside margin of the box is about 0 * / border-radius: 4px; / * the box fillet * / border: 1px solid # f2f6fc; / * the frame is 1px gray * / position: absolute; / * absolute positioning * / right: 0; / * on the right * / top: 110% / * the box is below the button * / background-color: # fff; / * the background color is white * / box-shadow: 0 2px 4px rgba, 0 6px rgba; / * add shadow to the box * /}

Operation on dropdownItem

Export default {name: "dropdownItem", props: ['value'], data () {return {};}, methods: {itemClick (value) {/ / console.log (value) / / call the showM () method of the parent of the current component, that is, dropdown, through this to close this.$parent.$parent.showM () / / call the commitClick method of the parent (dropdown) and pass it, such as the value value this.$parent.$parent.commitClick (value);},},}; .dropdown-item {line-height: 40px; / * Line height 40px * / white-space: nowrap; / * No line wrapping * / padding: 020px; / * the inner margin is about 0 for 20px * / color: # 606266 / * the font color is gray * / cursor: pointer; / * the mouse is moved to click * /}. Dropdown-item:hover {color: # 409eff; / * the font color is blue * / background-color: # ecf5ff; / * the background color is light ~ blue is very light * /}

Next, manipulate the App.vue file.

Button 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)}

Import components 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.

Button to eat and drink export default {name: 'App', methods: {changeItem (e) {console.log (e)} after reading this article, I believe you have some understanding of "sample Analysis of component Development of drop-down menus in Vue". If you want to know more about it. Welcome to follow the industry information channel, thank you for reading!