How to realize the Encapsulation of drop-down menu by Vue and Element UI

Editor to share with you how Vue and Element UI achieve the encapsulation of the drop-down menu, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's learn about it together.

The details are as follows

1. Effect drawing

First paste an effect picture, the menu item is not stylized, the border shown in the picture is not available (the frame is the frame of the external container), others can modify the style as needed.

2. Component encapsulation

The encapsulation of the component uses CSS animation, positioning, and the drop-down menu component el-dropdown provided by Element UI. The code is as follows

{{item}} export default {props: {itemProperty: Object, require: true,}, data () {return {isLazy: true, item: {name: 'item', url: require ('.. / static/imgs/menus/warning.png'), menus: ['submenu-1',' submenu-2' 'submenu-3',' submenu-4', 'submenu-5',],},}, mounted () {this.$data.item = this.$props.itemProperty / / console.log (this.$props.itemProperty)}, methods: {/ / parent icon click event clickFire () {/ / Parameter 1: custom component event It is called in the parent component to trigger the value transfer of the parent and child components. Parameter 2: the data passed to the parent component [can be in array form] this.$emit ('clickItem', this.$data.item)}, / / Click the event handleCommand (command) {/ / console.log (command) this.$emit (' handleCommand', command)},},}. All {/ / border: 1px solid skyblue; display: inline-block; position: relative; width: 65px; height: 65px / / overflow: hidden;} / / innermost layer. Item-border {display: inline-block; margin: 0 auto; margin-left: 0px; margin-top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid skyblue; / / background-color: slateblue; .item {position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%) }} / / outermost layer. Wrap-item {position: absolute; top: 0; left: 0; display: inline-block; width: 56px; height: 56px; border: 5px dotted transparent; border-left: 5px dotted # 73fff; border-left-width: 3px; border-right-color: # 73fff; border-top-color: transparent; border-radius: 50%; / / background-color: burlywood; animation: circle 3s infinite linear } @ keyframes circle {0% {transform: rotate (0deg);} 100% {transform: rotate (- 360deg);}} / drop-down menu .dropMenu {margin-top: 5px; / / background-color: yellowgreen; color: # fff; / / title item. El-dropdown-link {cursor: pointer;} / / menu subitem .el-dropdown-menu__item {color: red! menu }. DropMenu-item {background-color: rosybrown }} 3. Use example / / 1 in parent component to import subcomponent import RingItem from'.. / Controls/RingItem'export default {components: {/ / 2-registered component RingItem,}, data () {return {/ / functional module icon resource funcItems: [{name: 'system Management' Url: require ('.. / static/imgs/menus/management.png'), menus: ['detailed management', 'about us'],}} Methods: {/ * RingItem subcomponent click event: value is the value passed through emit in the subcomponent * / clickRingItem (value) {/ / determine the name attribute value of the subcomponent Implement the corresponding business logic switch (value.name) {case 'system Management': {console.log ('system Management') / / execute Page Jump-Management Center (depending on your own requirements Add business logic) / / this.$router.push ({path:'/ admincenter'}) break}} / * * RingItem subcomponent: drop-down menu click event (value is the value passed through emit in the subcomponent) * / handleCommandDropMenu (value) {console.log (value) switch (value.name) {case 'detail Management': {console.log ('system Administration') / / execute Page Jump-Administration Center (depending on your requirements Add business logic) / / this.$router.push ({path:'/ admincenter'}) break} case 'about us': {console.log ('system Management') / execute Page Jump-Administration Center (depending on your needs Add business logic) / / this.$router.push ({path:'/ admincenter'}) break},},} / style adjustment these are all the contents of the article "how Vue and Element UI implement the encapsulation of drop-down menus". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!