1、安装element-ui
npm install element-ui --save
2、在main.js中引入element 和 css文件
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' //引入element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' //使用element-ui Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
3、编写一个vue文件,这里我们命名为tabText.vue
a、使用element官方提供的api编写template
<template> <div class="hello"> <el-tabs v-model="activeName"> <el-tab-pane label="tab1" name="first" :key="'first'"> <div style="background: yellow; display: inline"> tab1内容 tab1内容 tab1内容 </div> </el-tab-pane> <el-tab-pane label="tab2" name="second" :key="'second'"> <div style="background: green; display: inline"> tab2内容 tab2内容 tab2内容 </div> </el-tab-pane> </el-tabs> <!-- 注释 label:选项卡显示的title name:与选项卡绑定的activeName对应的标识符,表示选项卡的别名 --> </div> </template>
b、script部分
<script> export default { name: 'HelloWorld', data() { return { //默认第一个选项卡 activeName: "first", } } } </script> //activeName:默认显示那个tab。 //activeName:el-tabs组件双向绑定的值,activeName值的取值是要对应el-tab-pane标记的name值
4、成果展示