Vue 后台管理项目7-主页布局

主页布局

1.饿了吗container布局容器

image

传送门: http://element-cn.eleme.io/#/zh-CN/component/container

//如下html代码和css代码是从传送门中复制粘贴后根据实际需求再进行修改

//html代码


//css代码

2.饿了吗Layout 布局:

image

传送门: http://element-cn.eleme.io/#/zh-CN/component/layout

//如下html代码和css代码是从传送门中复制粘贴后根据实际需求再进行修改

//html代码

  
     

        
     
  
  
       
招行度量系统
  
  
    

        退出
    
  


//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 弹框:

image

传送门 http://element-cn.eleme.io/#/zh-CN/component/message-box

//原本的退出键点击逻辑代码
logout(){
      window.sessionStorage.removeItem('token');
      //编程式导航
      this.$router.push("login");
}

//将上面的代码修改如下就有弹框效果
logout() {
      this.$confirm('您正在退出账号, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }).then(() => {
          //点击确定，清楚token，跳转到登陆页
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          window.sessionStorage.removeItem('token');
          //编程式导航
          this.$router.push("login");
      }).catch(() => {
         //点击取消
         this.$message({
         type: 'info',
         message: '已取消退出'
         });          
      });
    }

4.vue中的 scoped:

Ⅰ.原理: 会在当前组件的style标签中所有的选择器后面，添加[]属性选择器
Ⅱ.作用: 表示它的样式作用于当下的模块，很好的实现了样式私有化
Ⅲ. 注意点: 谨慎使用，虽然解决了样式私有化的问题，但同时每个样式的权重加重，样式变得不易修改

NO.	渲染规则
1	给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示它的唯一性
2	在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
3	如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

NO.	慎用详情
1	父组件无scoped，子组件带有scoped，父组件无法操作子组件的样式，虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件
2	父组件有scoped属性，子组件无，父组件也无法设置子组件样式，因为父组件的所有标签都带有如data-v-469af010标志，但子组件不会带有标志属性
3	父子组件都有，同理也无法设置样式，更改起来增加代码量

image

本文同步发表在我的个人博客：https://www.lubaojun.com/