Vue + Node + Element UI 專案(八)_元件封裝

阿新 • • 發佈：2020-12-29

元件封裝的步驟

1、確定元件結構
2、新增元件頁面
3、修改新增的元件頁面和HOME頁面
4、HOME檔案引入模組
5、測試

【注】完成之前沒做完的準備工作
因為以前寫檔名都是採用駝峰法寫，採用的是小寫開頭，但據觀察VUE檔案普遍採用的是大寫開頭，所以要把所有vue檔案的檔名都改成大寫開頭，並在router/index.js中修改

元件結構

【注】你也可以不將Home檔案另存為，個人習慣問題

新增檔案並修改頁面

Header.vue

1、將原來homePage/Home.vue頁面中的

複製到Header.vue中。

2、將涉及引數和方法複製到Header.vue中：

<script>
import mock from '@/mock/index.js';

export default {
  data () {
    return {
     user: {
        name: "penghl",
        avatar: "/static/user_avatar_default.png", //使用者預設頭像地址
        role: "超級管理員"
      }, //使用者名稱
      // userAvatUrl: "/static/user_avatar_default.png", 
      isCollapse: false
    }
  },
  mounted(){
    var user = sessionStorage.getItem("user"); //使用者資訊載入
    if (user) {
      this.user.name = user;
      this.user.avatar = require("@/assets/img/penghl.jpg"); //可否修改成本地目錄？
    }
  },

  methods: {
     // 側邊欄摺疊
    collapseChage() {
      this.isCollapse = !this.isCollapse;
    },

    // 使用者退出登入
    logout: function() {
      this.$confirm ("確認退出嗎？", "提示", {
        type: "warning"
      })
        .then(() => {
          sessionStorage.removeItem("user");
          this.$router.push("/login");
        })
        .catch(() => {});
    }


  }
}
</script>

3、將涉及到的scss複製到Header.vue中或者複製到對應的scss，並引入：

<style src="./Header.scss"  lang="scss"></style>

Header.scss


/* 各種變數  */
@import "./src/assets/layout"; 

/* 各種寬高 */
$--header-height: 48px !default; //頂部的高度


/* 頂部 */
.el-header {
    background-color: $--color-white;
    // height: $--header-height !important;
    line-height: $--header-height;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .05);
    overflow: hidden;
    padding: 0 $--lenght-xll;
    
    .asibe-btn {
        font-size: $--font-size-extra-large;

        &:hover {
            color: $--color-primary;
        }
    }

    .user-info {
        float: right;
        padding-right: $--lenght-xs;

        .el-avatar {
            position: relative;
            top: 8px;
            margin-right: $--lenght-s;
        }
    }
}

採用相同的方法完成SideBar.vue, Main.vue。

將原來homePage/Home.vue頁面另存為,存到view目錄下，並修改頁面程式碼為：

<template>
  <el-container :style="{ height: clientHeight + 'px' }">
     <!-- 側邊欄 -->
      <SideBar></SideBar>
    <el-container :direction ="conDirection">
       <!-- 頭部區域 -->
      <Header></Header>
      <!-- 主內容區域 -->
      <Main></Main>

    </el-container>
  </el-container>
</template>

在引入之前做好的模組，並刪除與當前頁面無關的程式碼

import SideBar from "./common/sideBar/SideBar"
import Header from "./common/header/Header"
import Main from "./common/main/Main"

export default {
  name: 'Home',
  components:{
        SideBar,
        Header,
        Main
  },

  data () {
    return {
      clientHeight:'', //el-container 的高度
      conDirection: 'vertical' //el-container對齊方式,不設定這個頁面佈局會出錯
    }
  },

  mounted(){
    this.initHeight(); // 計算el-container 的高度
  },

  methods: {
    //獲取高度
    initHeight(){  
        //獲取瀏覽器可視區域高度
        this.clientHeight =  window.innerHeight;
        // console.log(this.clientHeight);

        window.onresize = () => {  //當視窗或框架發生改變時觸發
          this.clientHeight =  window.innerHeight;
          // console.log(this.clientHeight);
        };
    }
  }

}
</script>