实习的第一个小任务,浅记一下。
任务是:用vue写原生的element中Tabs页面切换组件的效果,因为目前只看了一部分网课,能力还太弱了,使用了最笨的方法把它写了出来,后续再慢慢改进叭!
记录一下主要代码
<template>
<div>
<h1>{{ msg }}</h1>
<button class="first" @click="isActive=0">用户管理</button>
<button class="second" @click="isActive=1">配置管理</button>
<button class="third" @click="isActive=2">角色管理</button>
<button class="fourth" @click="isActive=3">定时任务补偿</button>
<div class="first1" v-if="isActive==0">用户管理</div>
<div class="second2" v-else-if="isActive==1">配置管理</div>
<div class="third3" v-else-if="isActive==2">角色管理</div>
<div class="fourth4" v-else-if="isActive==3">定时任务补偿</div>
</div>
</template>
<script>
export default {
name: 'TabsShow',
data() {
return {
isActive: -1,
};
},
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
font-family:"宋体"
}
.first{
background-color: rgb(141, 228, 250);
width:120px;
line-height:30px;
}
.second{
background-color: pink;
width:120px;
line-height:30px;
}
.third{
background-color: rgb(197, 248, 184);
width:120px;
line-height:30px;
}
.fourth{
background-color: rgb(241, 241, 188);
width:120px;
line-height:30px;
}
.first1{
background-color: rgb(141, 228, 250);
width:480px;
line-height:30px;
margin:0 auto;
}
.second2{
background-color: pink;
width:480px;
line-height:30px;
margin:0 auto;
}
.third3{
background-color: rgb(197, 248, 184);
width:480px;
line-height:30px;
margin:0 auto;
}
.fourth4{
background-color: rgb(241, 241, 188);
width:480px;
line-height:30px;
margin:0 auto;
}
</style>
<template>
<div class=TabsShow>
<img alt="Vue logo" src="./assets/logo.png">
<TabsShow msg="管理平台"/>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue';
import TabsShow from './components/TabsShow.vue';
export default {
name: 'App',
components: {
// HelloWorld,
TabsShow,
},
};
</script>
<style>
#app {
text-align: center;
margin-top: 60px;
}
</style>
其效果如下:
在完成这个任务的过程中,复习到了一些小知识点:
①要使得四个<div>都在同一个水平线上,要使用 display: inline-block;
② 要让文字在<div>或<button>垂直都居中,要使用 line-height:...px; 来调节一下
③要让一个<div>在页面中水平居中,要使用 margin:0 auto;
下一步需要做的:
把它简化,不要用这种傻瓜式语句。