element UI el-tabs组件使用

学习目标：

使用 Elemenet UI 框架中的 el-tabs 组件

---

学习内容：

平时在做项目时，tab切换效果几乎是必不可少的，下来整理一个最近做的一个小功能：el-tabs

---

效果图：

---

  

html：

<el-tabs v-model="activeName" :tab-position="tabPosition" @tab-click="changeTab">
            <el-tab-pane label="会员购" name="vip">
                <div>会员购</div>
            </el-tab-pane>
            <el-tab-pane label="推广优惠券" name="coupon">推广优惠券</el-tab-pane>
        </el-tabs>

说明：

v-model：当前选中项

:tab-position：tab栏显示方向

@tab-click：切换tab栏的事件

JS：

data(){
        return{
            activeNames: ['1'],
            activeName:'coupon',
            tabPosition:'left'
        }
    },
    methods:{
        changeTab(tab){
            console.log('触发tab',tab.name)
        }
    }