How to achieve tag at the top of the page by vue+elemen

This article is about how vue+elemen implements tag at the top of the page. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

How to write this kind of tag? Summarize the train of thought:

1. Page rendering

1 the page display is obtained by looping the array, and the array can be stored in store

(1) determine whether there is duplicate data before storage. If there is any duplicate data, delete it before adding it.

(2) No repetition of direct push

AddTag: (state, tag) = > {const {fullPath, path, meta, query} = tag if (tag.path ='/ login') {return false} const findIndex = state.tags.findIndex (item = > item.path = tag.path) console.log (findIndex) if (findIndex > = 0) {state.tags.splice (findIndex, 1, {fullPath, path, meta, query})} else {state.tags.push ({fullPath, path, meta) Query})}}

2 when the added routing method is triggered to listen for route entry, call this method to bring the route object on the current this instance to the past.

Computed: {currentRoute () {return this.$route},}, watch: {$route: {handler (val) {if (val.name) {this.addTags ()}}, / / depth observation and monitoring deep: true}}, methods: {addTags () {/ / this.$store.dispatch first submit to action It is up to him to asynchronously deal with the methods in the penalty mutation and change the tags value this.$store.dispatch ('user/addTag', this.currentRoute)},} in state.

At this point, there is already a value in the tags array, which is not visible on the page because it is white by default, and the next step is to highlight the selected tag.

1element has a parameter that can be set to check the documentation.

2 whether the selected tag value is equal to the page entered by the current route is consistent, then it is true.

{{tag.meta.title}} methods: {setTagColor (tag) {return this.currentRoute.path = tag.path? 'dark':' plain'},}

At this point, the rendering and selection of tag is complete.

two。 Switch tagmethods back and forth: {toTagRoute (tag) {this.$router.push ({path: tag.fullPath | | tag.path})},} 3. Delete a tag tag

1 because it's an array, you can't determine which one the user deletes, so you need to traverse to find out which tag the user currently selected. Then delete and update the value in store.

2 delete the current tag, which is the highlighted label? Here is the previous tag that deleted the tag, which is the last element of the array.

Methods: {closeTags (tag) {console.log (tag, 4444) this.$store.dispatch ('user/delTag', tag) this.toLastTagRouter (this.$store.state.user.tags) / / highlight the previous tag of the delete tag. ToLastTagRouter (tags) {/ / Note that the tags passed in here has been deleted, so you cannot use splice== "to change the original array. Slice== "take the last element of the array const latestView = tags.slice (- 1) [0] / / tags the last element of the array console.log (latestView) if (latestView! = = undefined & & latestView.path! = = undefined) {const {fullPath, meta, path, query} = latestView this.$router.push ({fullPath, meta, path, query})}},} / / action delTag ({commit}) Tag) {commit ('delTag', tag)}, / / mutationdelTag: (state, tag) = > {/ / entries () object becomes a traverable array [0 {name:a,age:'20'}] / / you can also use forEach and map here to for (const [I, v] of state.tags.entries ()) {if (v.path = tag.path) {state.tags.splice (I, 1) break}

Delete all tags

Methods: {closeAllTags () {/ / close all tag Only one this.$store.dispatch ('user/delAllTags') const {fullPath, meta, path, query} = this.$store.state.user.tags [0] / / Jump the remaining tag routes this.$router.push ({fullPath, meta, path, query})},} / actiondelAllTags ({commit}) {commit (' delAllTags')}, / / mutation delAllTags: (state) = > {state.tags.splice (1) State.tags.length)}, thank you for reading! This is the end of this article on "vue+elemen how to achieve tag at the top of the page". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!