In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
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!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.