Deer 數位筆記

Element UI 文章

如何快速製作 UI ?

手稿 快速製作 UI 雛形

1 蒐集 Element UI 原型寫法
2 預寫 Data 資料結構
3 繪製版型及 Data
4 撰寫版型 Html

如何在父組件下引用 Element UI 的子組件來修改樣式?

修改 Element UI 組件的方式有三種

第一種是直接於父組件下直接對 Element UI 的 Class 樣式做修改

<style scoped>
   .el-input__inner{
       background-color: red;
   }
</style>

• 優點:可以快速修改樣式。
• 缺點:如果把 scoped 拿掉的話，就會汙染到全局，不理想。

第二種直接將 Element UI 預設的 CSS 另外增加你的樣式，並由 JS 去添加

找到預設 Element UI 預設路徑
node_mouled/element-ui/lib/theme-chalk
引用預設樣式，並在你所預設路徑上增加樣式
src
├── assets
    ├── css
        └── vendors-extensions
            └── element-ui.scss

/* color:  */
$--color-primary: rgb(128, 0, 64);

/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

在 src 目錄下建立一個資料夾及一個 JS 並引用你增加的樣式
src
├── plugins
    └── element.js

//element.js
import Vue from 'vue'
import Element from 'element-ui'
import '../assets/css/vendors-extensions/element-ui.scss'  //引用自訂樣式
import locale from 'element-ui/lib/locale/lang/zh-TW'

Vue.use(Element, { locale })

• 優點:不會覆寫原本 Element UI 的預設樣式
• 缺點: 需要花時間將整包 CSS 架構看完

第三種是直接在父組件中使用 vue loader 提供的 scoped 功能修改樣式

這裡有兩種寫法: >>> 和 /deep/ 
於 scoped 樣式中使用 ' 深度作用選擇器 '來影響子組件的樣式

style(scoped)
 .a>>>.b         //此段樣式編譯為下方程式碼
 .a[data-v-f3f3eg9] .b

style(scoped)
 .a /deep/ .b    //與 >>> 效果一樣
 .a[data-v-f3f3eg9] .b

• 優點:可以直接在父組件中立即修改樣式
• 缺點:以這種覆寫 Element UI 的 CSS 效能有待驗證

參考資料

1. Vue Loader 作用域CSS（scoped）- /deep/ 深入組件選擇器
2. Vue Element-ui 全局變量
3. 如何在Vue裡面使用Element-ui並修改CSS樣式呢？

Element UI 筆記

Layout 布局

通過基礎 24分欄，迅速簡便地創建布局

基本布局

<el-row>
  <el-col :span="24"></el-col>
</el-row>

.el-row{
  margin-button: 20px;
  &:last-child{
    margin-bottom:0;
  }
}

以此可以分為一欄(24)、二欄(12)、三欄(8)、四欄(6)、五欄(4)

分欄間隔

<el-row :gutter="20">
  <el-col :span="12"></el-col>
  <el-col :span="12"></el-col>
</el-row>

Row 組件提供 gutter 屬性來指定每一欄之間的間隔，默認間隔為 0

:gutter 是利用 el-col 內的 padding 去控制

對齊方式

通過 flex 布局對齊分欄進行靈活的對齊

<el-row type="flex" justify="center">
  <el-col :span="12"></el-col>
  <el-col :span="12"></el-col>
</el-row>

將 type 屬性賦予 flex，並通過 justify 屬性指定  start, center, end, space-between, space-around 子元素排版方式。通過 align 屬性指定 flex 布局下的水平排列方式

響應式布局

參照 Bootstrap 的響應式設計，預設五個響應尺寸:xs、sm、md、lg、xl

<el-row>
  <el-col :xs="8" :sm="6" :md="4" :xl="1"></el-col>
  <el-col :xs="8" :sm="6" :md="4" :xl="1"></el-col>
</el-row>

Container 佈局容器

<el-container></el-container>:外層容器。當子元素中包含<el-header> 或 <el-footer> 時，全部子元素會垂直上下排列，否則水平

<el-header>：頂欄容器。
<el-aside>：側邊欄容器。
<el-main>：主要區域容器。
<el-footer>：底欄容器。

以上元件採用了 flex 佈局，使用前請確定目標瀏覽器是否相容。此外，<el-container> 的子元素只能是後四者，後四者的父元素也只能是 <el-container>。

基於斷點的隱藏類
包含的類名及其含意為：

hidden-xs-only - 當視覺在 xs 尺寸時隱藏
hidden-sm-only - 當視覺在 sm 尺寸時隱藏
hidden-sm-and-down - 當視覺在 sm 及以下尺寸時隱藏
hidden-sm-and-up - 當視覺在 sm 及以上尺寸時隱藏
hidden-md-only - 當視覺在 md 尺寸時隱藏
hidden-md-and-down - 當視覺在 md 及以下尺寸時隱藏
hidden-md-and-up - 當視覺在 md 及以上尺寸時隱藏
hidden-lg-only - 當視覺在 lg 尺寸時隱藏
hidden-lg-and-down - 當視覺在 lg 及以下尺寸時隱藏
hidden-lg-and-up - 當視覺在 lg 及以上尺寸時隱藏
hidden-xl-only - 當視覺在 xl 尺寸時隱藏

/* Element 基於斷點的隱藏類 */
@media only screen and (max-width: 767px) {
  .hidden-xs-only {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  .hidden-sm-and-up {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hidden-sm-only {
    display: none !important;
  }
}
@media only screen and (max-width: 991px) {
  .hidden-sm-and-down {
    display: none !important;
  }
}
@media only screen and (min-width: 992px) {
  .hidden-md-and-up {
    display: none !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hidden-md-only {
    display: none !important;
  }
}
@media only screen and (max-width: 1199px) {
  .hidden-md-and-down {
    display: none !important;
  }
}
@media only screen and (min-width: 1200px) {
  .hidden-lg-and-up {
    display: none !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
  .hidden-lg-only {
    display: none !important;
  }
}
@media only screen and (max-width: 1919px) {
  .hidden-lg-and-down {
    display: none !important;
  }
}
@media only screen and (min-width: 1920px) {
  .hidden-xl-only {
    display: none !important;
  }
}

斷點使用在class上

<el-col :span="12" :md="12" class="hidden-xs-only">
  <div class="grid-content bg-purple "></div>
</el-col>

符合此寸大小時隱藏:

hidden-xs-only <767px 
hidden-sm-only 768px-991px
hidden-md-only 992px-1100px
hidden-lg-only 1200px-1919px
hidden-xl-only >1920px

Button 按鈕

修改 ElBottom 樣式
<template lang="pug>
.a
 ElButton(type="success" size="medium") 按鈕
 ElButton(type="success" size="medium") 按鈕
</template>
<style lang="scss">
.a {
  .el-button {
    background-color: rgb(145, 199, 163);
    border:none;
    &:hover {
      color:rgb(100, 138, 112);
      background-color: rgba(145, 199, 163, 0.5);
    }
  }
}
</style>

Radio 單選框

Checkbox 多選框

修改樣式
.is-bordered{
  margin:0;
}
.el-checkbox.is-bordered + .el-checkbox.is-bordered{
  margin-left:0.5rem;
} // border 之間距離

Select 選擇器

解決使用 v-for 的問題，需要加上 value-key="id"，來指定他唯一的值

參考資料

1. Element UI-[Select] :Value

Card 卡片

Carousel 走馬燈

在有限空間內，循環播放同一類圖片、文字等內容

Color 顏色

NavMenu 導覽菜單

導覽菜單默認垂直模式，通過 mode 屬性可以使導覽菜單變更為水平模式。另外，在菜單中通過 submenu 組件可以生成二級菜單。Menu 還提供了 background-color,text-color 和 active-text-color。

Menu Attribute

mode="horizontal 垂直 / vertical 水平" 設定 Menu 為水平或垂直

background-color="#FFFFFF" 背景顏色

text-color="#303133" 文字顏色

active-text-color="#409EFF" 激活顏色

Menu Events

@select="hangleSelect" 菜單激活回調 index:選單中菜單的index,indexPath:選中菜單項的 index path

        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">Home</el-menu-item>
          <el-submenu index="2">
            <template slot="title"
              >PAGE</template
            >
            <el-menu-item index="2-1">選項一</el-menu-item>
            <el-menu-item index="2-2">選項二</el-menu-item>
            <el-menu-item index="2-3">選項三</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title"
                >選項四</template
              >
              <el-menu-item index="2-4-1">選項一</el-menu-item>
              <el-menu-item index="2-4-2">選項二</el-menu-item>
              <el-menu-item index="2-4-3">選項三</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3"
            ><a href="#">MEN</a></el-menu-item
          >
        </el-menu>

      data() {
        return {
          activeIndex: "1",
          activeIndex2: "1"
        };
      },
      methods: {
        handleSelect(index, indexPath) {
          console.log(index, indexPath);
        }
      }

<el-meun>
  //單一層寫法
  <el-menu-item index="1"></el-menu-item>

  //兩層以上寫法 
  <el-submenu>
   <template solt="title">顯示於第一層文字</template>
   //顯示第二層文字
   <el-menu-item index="1-1">選項一</el-menu-item>
   <el-menu-item index="1-2">選項二</el-menu-item>
  </el-submenu>
</el-meun>

:default-active，他說明為當前激活菜單的 index，其實，即使不加這個屬性，也能正常顯示選中的 item 變亮，但是之所以要加這個屬性，是為了瀏覽器刷新後，仍然可以定位到之前選中的路由

如果沒有多層嵌套路由的話，可以令:default-active="router.path"，但是如果有多層嵌套，建議在計算屬性裡，更新數據如:

computed: {
 defaultActive() {
  return '/' + this.$route.path.split('/').reverse()[0];
}

elementui框架裡導航菜單的default-active的作用 v-for里key的意義

v-for裡，包含與此類似的指令，都需要綁定 Key，是因為這裡的key用於element 框架裡重新渲染定位，如果沒有，輕則重新渲染全部組件，重責報錯。並且，最好佈要綁定 index，否則述則更新的話，會重新渲染內容，最好能使用獨一無二的 id。

Menu 樣式修改

/* 設定 main 顯示寬度 */
#header {
  margin: 0 auto;
  width: 100%;
  padding: 0 15%;
}
/* 設定 el-menu */
#header .el-menu {
  display: flex;
  justify-content: space-between;
}
/* 水平第一層 無下拉 */
/* 水平第一層 有下拉 */
#header .el-menu--horizontal .el-menu-item,
#header .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 3rem;
  line-height: 3rem;
}
#header .el-menu--horizontal .el-menu-item:hover a {
  text-decoration: none;
}
/* 水平下拉 sole="title" */
/* 水平下拉 除sole以外的所有的子菜單 */
.el-menu--horizontal .el-menu .el-submenu > .el-submenu__title,
.el-menu--horizontal .el-menu .el-menu-item {
  height: 2.5rem;
  line-height: 2.5rem;
}

關於 Element UI 修改樣式的問題

Element-UI 這個前端框架，裡面的自定義標籤(例如 el-menu、el-header等)基本上都是通過設定原生 html 標籤的 class 屬性實現，包括自定義標籤的其他屬性，最後大部分都轉換成了class的值（例如el-menu的mode屬性如果是horizo​​ntal，那麼最後會轉換成class中的一個值“el-menu–horizo​​ntal”，而菜單中的slot屬性title會轉換為“ .el-submenu__title”，bootstrap就很直接，直接設置原生html標籤的類屬性），所以修改樣式時只需找到這些標籤對應的類名稱，然後按照結構用css語法做相應的處理。

element 組件結構

<el-row>
 <el-col></el-col>
</el-row>

//的結構為

<div class="el-row">
  <div class="el-col"></div>
</div>

引用 Element-UI

#main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI) 

修改 Heme.vue

#Home.vue
<template>
  <div>
    <el-button type="success">測試</el-button>
  </div>
</template>

參考資料

1. Layout 布局
2. Element-UI 技術揭密（3）— Layout 布局組件的設計與實現
3. ElementUI學習筆記
4. Element 基於斷點的隱藏類
5. Element-UI 修改默認的菜單樣式