el-tabs(标签栏)的入门学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/element-ui/lib/theme-chalk/">
<script src="/npm/vue/dist/"></script>
<script src="/element-ui/lib/"></script>
</head>
<body>
<div id='app'>
<el-tabs v-model='tabPaneName' @tab-click='handleClick'>
<el-tab-pane v-for='tab in tabs' :key='+"1"' :name='' :label=''>{{}}
</el-tab-pane>
</el-tabs>
<el-tabs v-model='tabPaneName' type='card' closable @tab-remove='handleRemove'>
<el-tab-pane v-for='tab in tabs' :key='+"2"' :name='' :label=''>{{}}
</el-tab-pane>
</el-tabs>
<el-tabs v-model='tabPaneName' type='border-card' editable @edit='handleEdit'>
<el-tab-pane v-for='tab in tabs' :key='+"3"' :name='' :label=''>{{}}
</el-tab-pane>
</el-tabs>
<el-radio-group v-model='position'>
<el-radio label='top'>top</el-radio>
<el-radio label='bottom'>bottom</el-radio>
<el-radio label='left'>left</el-radio>
<el-radio label='right'>right</el-radio>
</el-radio-group>
<el-tabs v-model='tabPaneName' type='border-card' :tab-position='position'>
<el-tab-pane v-for='tab in tabs' :key='+"3"' :name='' >
<template slot='label'>
<i class='el-icon-search'></i>{{}}
</template>
{{}}
</el-tab-pane>
</el-tabs>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data() {
return {
position: '',
tabPaneName: 'first',
tabs: [{ name: 'first', label: '首页', content: '欢迎光临' },
{ name: 'second', label: '菜单', content: '有小炒，火锅，烧烤' },
{ name: 'third', label: '饮料', content: '杨枝甘露，冰糖雪梨' },
{ name: 'fouth', label: '部门', content: '餐饮，财经' }]
}
},
methods: {
//点击钩子
handleClick(target, action) {
console.log(target.name, action)
},
//删除钩子
handleRemove(targetName) {
this.tabs.forEach((item, index) => {
if (item.name === targetName) {
this.tabs.splice(index, 1)
}
});
},
//编辑钩子
handleEdit(targetName, action) {
if (action === 'remove') {
this.tabs.forEach((item, index) => {
if (item.name === targetName) {
this.tabs.splice(index, 1)
}
})
} else if (action === 'add') {
let addItem = {
name: "newName" + this.tabs.length,
label: "newLabel" + this.tabs.length,
content: "newContent" + this.tabs.length
}
this.tabs.push(addItem)
}
}
}
})
</script>