主頁布局
1.餓了嗎container布局容器
傳送門:
http://element-cn.eleme.io/#/zh-CN/component/container
//如下html代碼和css代碼是從傳送門中復(fù)制粘貼后根據(jù)實際需求再進行修改
//html代碼
<template>
<div id="index">
<el-container >
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-button @click="logout" type="success">退出</el-button>
</div>
</template>
//css代碼
<style lang="scss" scoped>
#index {
width: 100%;
height: 100%;
.el-container {
height: 100%;
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
}
}
</style>
2.餓了嗎Layout 布局:
傳送門:
http://element-cn.eleme.io/#/zh-CN/component/layout
//如下html代碼和css代碼是從傳送門中復(fù)制粘貼后根據(jù)實際需求再進行修改
//html代碼
<el-row>
<el-col :span="4">
<div class="grid-content bg-purple">
<img src="../assets/images/logo.jpg" height="60px" width="180px" alt="">
</div>
</el-col>
<el-col :span="18">
<div class="grid-content bg-purple-light">招行度量系統(tǒng)</div>
</el-col>
<el-col :span="2">
<div class="grid-content bg-purple">
<el-button type="success" @click="logout">退出</el-button>
</div>
</el-col>
</el-row>
//css代碼
.el-row {
.el-col-18 {
font-size: 30px;
font-weight: 900;
}
.el-col-4 {
text-align: left;
}
.el-col-2 {
text-align: right;
}
}
3.餓了嗎MessageBox 彈框:
傳送門
http://element-cn.eleme.io/#/zh-CN/component/message-box
//原本的退出鍵點擊邏輯代碼
logout(){
window.sessionStorage.removeItem('token');
//編程式導(dǎo)航
this.$router.push("login");
}
//將上面的代碼修改如下就有彈框效果
logout() {
this.$confirm('您正在退出賬號, 是否繼續(xù)?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//點擊確定,清楚token,跳轉(zhuǎn)到登陸頁
this.$message({
type: 'success',
message: '退出成功!'
});
window.sessionStorage.removeItem('token');
//編程式導(dǎo)航
this.$router.push("login");
}).catch(() => {
//點擊取消
this.$message({
type: 'info',
message: '已取消退出'
});
});
}
4.vue中的 scoped:
Ⅰ.原理: 會在當前組件的style標簽中所有的選擇器后面,添加[]屬性選擇器
Ⅱ.作用: 表示它的樣式作用于當下的模塊,很好的實現(xiàn)了樣式私有化
Ⅲ. 注意點: 謹慎使用,雖然解決了樣式私有化的問題,但同時每個樣式的權(quán)重加重,樣式變得不易修改
NO. | 渲染規(guī)則 |
---|---|
1 | 給HTML的DOM節(jié)點加一個不重復(fù)data屬性(形如:data-v-2311c06a)來表示它的唯一性 |
2 | 在每句css選擇器的末尾(編譯后的生成的css語句)加一個當前組件的data屬性選擇器(如[data-v-2311c06a])來私有化樣式 |
3 | 如果組件內(nèi)部包含有其他組件,只會給其他組件的最外層標簽加上當前組件的data屬性 |
NO. | 慎用詳情 |
---|---|
1 | 父組件無scoped,子組件帶有scoped,父組件無法操作子組件的樣式,雖然我們可以在全局中通過該類標簽的標簽選擇器設(shè)置樣式,但會影響到其他組件 |
2 | 父組件有scoped屬性,子組件無,父組件也無法設(shè)置子組件樣式,因為父組件的所有標簽都帶有如data-v-469af010標志,但子組件不會帶有標志屬性 |
3 | 父子組件都有,同理也無法設(shè)置樣式,更改起來增加代碼量 |
本文同步發(fā)表在我的個人博客:https://www.lubaojun.com/