introduction
Vue is one of the most popular front-end frameworks. As a front-end developer, you should master it proficiently. If you plan to learn the development process of Vue, then come on, Brother Ming will take you to get started quickly and take you to fly!
Even if you are not a front-end developer, it is necessary to have a certain understanding of the front-end development process. No one is sure whether the company will let me do the front-end in the future. It does not take a lot of time to do some simple examples. It can improve your self-confidence and sense of accomplishment, so follow Brother Ming, there is nothing wrong, come on!
navigation
✪ Vue Development Example Catalog General Index◄Previous [ 15] Realization of Dynamic Routing►Next [ 17] Realization of User List
first create a label
Create the vue page Tabs.vue with the following content:
<template>
<div>
<el-tabs v-model="editableTabsValue" type="card" closable>
<el-tab-pane
:key="item.name"
v-for="item in editableTabs"
:label="item.title"
:name="item.name"
>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: "Tabs.vue",
data() {
return {
editableTabsValue: '1',
editableTabs: [
{
title: '首页',
name: '1',
content: '首页'
},
{
title: 'Tab 1',
name: '2',
content: 'Tab 1 content'
},
{
title: 'Tab 2',
name: '3',
content: 'Tab 2 content'
}
],
tabIndex: 1
}
}
}
</script>
<style scoped>
</style>
Introduce this page above the routing anchor router-view of the Index.vue page page
effect
Click the menu to open a new tab
Use label data as a global
- Put the data in store.js as a global
const state ={
username: '明世隐',
userState:0,
menu_data:[],
isLoadRoute:false,
editableTabsValue: '1',
editableTabs: [
{
title: '首页',
name: '首页',
content: '首页'
},
{
title: 'Tab 1',
name: '2',
content: 'Tab 1 content'
},
{
title: 'Tab 2',
name: '3',
content: 'Tab 2 content'
}
]
}
- The two data editableTabsValue and editableTabs in Tabs.vue are obtained from the store
Note:
If you write this in data, it may not be displayed normally. It is recommended to write in computed mode.
<script>
export default {
name: "Tabs.vue",
data() {
return {
}
},
computed:{
editableTabsValue:{
get(){
return this.$store.state.editableTabsValue;
},
set(val){
this.$store.state.editableTabsValue=val;
}
},
editableTabs:{
get(){
return this.$store.state.editableTabs;
},
set(val){
this.$store.state.editableTabs=val;
}
}
}
}
</script>
- the effect is the same
Click on the menu to add a tab
- Delete the written data editableTabs content in storejs, leaving only the one on the home page
editableTabs: [
{
title: '首页',
name: '1',
content: '首页'
}
]
- Add editableTabs data change method addEditableTabs in mutations
Because there is no title attribute when I define the menu data, so I use title to represent it here
addEditableTabs(state,tab){
state.editableTabs.push({
title: tab.name,
name: tab.name
})
state.editableTabsValue = tab.name
}
- Adding a point event to the menu
Add the method in methods, and submit the menu table update message to storejs.
selectMenu(item){
this.$store.commit("addEditableTabs",item);
}
- renderings
Handle Duplicate Tags
As far as the current situation is concerned, if you click the menu page again, a new tab page will be created repeatedly.
Judging in addEditableTabs, if it already exists in the data, it will not be added repeatedly, just switch
addEditableTabs(state,tab){
//根据tab.name 查询 editableTabs 是否已经存在
let idx = state.editableTabs.findIndex(item=>item.name===tab.name)
if(idx===-1){
//不存在则可以添加
state.editableTabs.push({
title: tab.name,
name: tab.name
})
}
state.editableTabsValue = tab.name
}
Effect:
close tab
- Tabs add close event
- write shutdown code
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
Renderings:
Click tab operation
Click the tab to select the menu
- Set the property default-active for el-menu
:default-active=“this.$store.state.editableTabsValue”
- Set the index of my original code el-menu-item to "item.name"
:index=“item.name”
- Add routing jump code
Because the original menu clicks, it will jump according to the index attribute. The index used to be path (routing address). Now that the index attribute is changed to name, the jump will not take effect. Modify the original router.js code and dynamically create a route to join The name attribute (name:item.name) is convenient for jumping (forgot to add it when writing the code before).
let oRouters = router.options.routes;
const buildRouter = ()=>{
let data = store.state.menu_data;
data.forEach(item=>{
let new_router = {
path:item.path,
name:item.name,
component:() => import('./components/'+item.component+'.vue')
}
oRouters[0].children.push(new_router);
})
router.addRoutes(oRouters)
}
- In the selectMenu house just written, add routing jump code (jump according to name), only one line of code is needed.
selectMenu(item){
//点击菜单跳转路由
this.$router.push({
name:item.name})
this.$store.commit("addEditableTabs",item);
}
- In this way, you can click on the tab, and the menu will be highlighted.
Clicking on the tab route also jumps
It is not difficult to find from the above picture that when you click on the tab, the page below the tab does not follow the jump, which is not what we want to see
- Add tab-click event to el-tabs of Tabs page
- Add a method to use the name of the route to jump
clickTab(target){
this.$router.push({
name:target.name})
}
- Effect
Two bugs closed
- After the menu is closed, the route corresponding to the menu does not follow the jump
Just add the following code at the end of the method removeTab to close the tab
this.$router.push({
name:activeName})
- The home page is not allowed to close
In the method removeTab of closing the tab, before executing the closing, add the following code
if(targetName=='首页'){
return ;
}
- Complete removeTab code
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if(targetName=='首页'){
return ;
}
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
this.$router.push({
name:activeName})
}
summary
This section summarizes "Create a tab page", I hope it can be helpful to everyone, please help [Like] + [Favorite] + [Punch in the comment area] If you are interested in learning Java and front-end with Xiao Ming , [Follow a wave] Don't get lost.
Please go to the bottom of the article to help [One-click three links] Thank you!
navigation
✪ Vue Development Example Catalog General Index◄Previous [ 15] Realization of Dynamic Routing►Next [ 17] Realization of User List
Popular column recommendation
【1】Java mini-games (Tetris, Plants vs. Zombies, etc.) 【
2】JavaWeb project combat (library management, dormitory management, etc.)
【3】JavaScript wonderful examples (aircraft wars, verification codes, etc.)
200 cases
[5] Learn Java from zero, learn Java with fun
[6] IDEA from zero to proficient
