ElementUi學習筆記

時間  2020-11-30
標籤 javascript css html vue java git github element-ui 數組 瀏覽器 欄目 JavaScript 简体版
原文   原文鏈接

Layout 佈局

 

整個頁面寬度分位24欄javascript

基礎佈局css

<el-row>
  <el-col :span="24">基礎佈局</el-col>
</el-row>

 

分欄之間存在間隔。html

<el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>

 

分欄之間存在偏移vue

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

 

使用flex佈局:java

將 type 屬性賦值爲 'flex'，能夠啓用 flex 佈局，並可經過 justify 屬性來指定 start, center, end, space-between, space-around 其中的值來定義子元素的排版方式。git

<el-row type="flex" class="row-bg">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

 

 

響應式佈局github

       參照了 Bootstrap 的 響應式設計，預設了五個響應尺寸：xs、sm、md、lg 和 xl。element-ui

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

 

基於斷點的隱藏類

Element 額外提供了一系列類名，用於在某些條件下隱藏元素。這些類名能夠添加在任何 DOM 元素或自定義組件上。若是須要，請自行引入如下文件：數組

import 'element-ui/lib/theme-chalk/display.css';
包含的類名及其含義爲： 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 尺寸時隱藏

 

 

 

 

 

 

Container 佈局容器

 

 <el-container>：外層容器。當子元素中包含 <el-header> 或 <el-footer> 時，所有子元素會垂直上下排列，不然會水平左右排列。瀏覽器

<el-header>：頂欄容器。

<el-aside>：側邊欄容器。

<el-main>：主要區域容器。

<el-footer>：底欄容器。

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

 

Container Attributes:

direction子元素的排列方向,horizontal / vertical,子元素中有 el-header 或 el-footer 時爲 vertical，不然爲 horizontal

Header Attributes:height:60px 默認

Aside Attributes：側邊欄寬度，默認300Px

Footer Attributes:高度，默認60px；

 

 

Color 色彩

 

Element 爲了不視覺傳達差別，使用一套特定的調色板來規定顏色，爲你所搭建的產品提供一致的外觀視覺感覺。

主色,輔助色,中性色

 

 

Typography 字體

 咱們對字體進行統一規範，力求在各個操做系統下都有最佳展現效果。

 

 

Icon 圖標

 

提供了一套經常使用的圖標集合。諸多元素圖標參照官方說明

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

 

 

Button 按鈕

 基礎用法

使用type、plain、round和circle屬性來定義 Button 的樣式。

<el-row>
  <el-button>默認按鈕</el-button>
  <el-button type="primary">主要按鈕</el-button>
  <el-button type="success">成功按鈕</el-button>
  <el-button type="info">信息按鈕</el-button>
  <el-button type="warning">警告按鈕</el-button>
  <el-button type="danger">危險按鈕</el-button>
</el-row>

 

禁用狀態你可使用disabled屬性來定義按鈕是否可用，它接受一個Boolean值。

 

 

 文字按鈕:沒有邊框和背景色的按鈕。

<el-button type="text">文字按鈕</el-button>
<el-button type="text" disabled>文字按鈕</el-button>

 

 圖標按鈕:

<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

按鈕組

<el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left">上一頁</el-button>
  <el-button type="primary">下一頁<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>

 

加載中按鈕

<el-button type="primary" :loading="true">加載中</el-button>

 

不一樣尺寸：size:medium,small ini

<el-row>
  <el-button>默認按鈕</el-button>
  <el-button size="medium">中等按鈕</el-button>
  <el-button size="small">小型按鈕</el-button>
  <el-button size="mini">超小按鈕</el-button>
</el-row>
<el-row>
  <el-button round>默認按鈕</el-button>
  <el-button size="medium" round>中等按鈕</el-button>
  <el-button size="small" round>小型按鈕</el-button>
  <el-button size="mini" round>超小按鈕</el-button>
</el-row>

 

屬性裏面見得少的

autofocus       是否默認聚焦       boolean    —    false native-type     原生 type 屬性    string    button / submit / reset    button

 

Link 文字連接

 

基本用法
<el-link href="https://element.eleme.io" target="_blank">默認連接</el-link>
禁用狀態
<el-link disabled>默認連接</el-link>

有無下劃線
<div> 
 <el-link :underline="false">無下劃線</el-link> 
 <el-link>有下劃線</el-link>
</div>

帶圖標
<div> 
 <el-link icon="el-icon-edit">編輯</el-link> 
 <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link> 
</div>

 

 

Radio 單選框:

要使用 Radio 組件，只須要設置v-model綁定變量，選中意味着變量的值爲相應 Radio label屬性的值，label能夠是String、Number或Boolean。

<template>
  <el-radio v-model="radio" label="1">備選項</el-radio>
  <el-radio v-model="radio" label="2">備選項</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

禁用狀態:只要在元素中設置屬性便可，它接受一個，爲禁用el-radiodisabledBooleantrue

 

單選框組:互斥單選框 另外，還提供了change事件來響應變化，它會傳入一個參數value。

<el-radio-group v-model="radio" v-on:change="change">
    <el-radio :label="3">備選項</el-radio>
    <el-radio :label="6">備選項</el-radio>
    <el-radio :label="9">備選項</el-radio>
  </el-radio-group>

 

按鈕樣式：按鈕樣式的單選框 還提供size 屬性

<el-radio-group v-model="radio2" size="medium">
      <el-radio-button label="上海" ></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="廣州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>

設置border能夠加邊框

<div>
    <el-radio v-model="radio1" label="1" border>備選項1</el-radio>
    <el-radio v-model="radio1" label="2" border>備選項2</el-radio>
  </div>

 

 

Checkbox 多選框

 

基本用法

<template>
  <!-- `checked` 爲 true 或 false -->,如需禁用設置屬性便可
  <el-checkbox v-model="checked">備選項</el-checkbox>
</template>disabled

 

多選框組

checkbox-group元素能把多個 checkbox 管理爲一組，只須要在 Group 中使用v-model綁定Array類型的變量便可。 

el-checkbox 的 label屬性是該 checkbox 對應的值，若該標籤中無內容，則該屬性也充當 checkbox 按鈕後的介紹。

label與數組中的元素值相對應，若是存在指定的值則爲選中狀態，不然爲不選中。

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="複選框 A"></el-checkbox>
    <el-checkbox label="複選框 B"></el-checkbox>
    <el-checkbox label="複選框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="選中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script> export default { data () { return { checkList: ['選中且禁用','複選框 A'] }; } }; </script>

 

 

indeterminate 狀態

indeterminate 屬性用以表示 checkbox 的不肯定狀態("-")，全選是打鉤,全不選是空，部分選中是橫崗，也就是true 展示橫崗

<el-checkbox :indeterminate="checkedCities.length>0&&checkedCities.length<4" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
   <div style="margin: 15px 0;"></div>
   <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
       <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>

 

 

可選項目數量的限制：使用 min 和 max 屬性可以限制能夠被勾選的項目的數量。

 

 

<el-checkbox-group v-model="checkedCities" :min="1" :max="2">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>

 

 

按鈕樣式的多選和邊框(border)：

      只須要把el-checkbox元素替換爲el-checkbox-button元素便可。此外，Element 還提供了size屬性。

    設置border屬性能夠渲染爲帶有邊框的多選框。

 

 

 

Input 輸入框

 

 

 <el-input v-model="input" placeholder="請輸入內容"> </el-input>     //  基礎用法 

 <el-input v-model="input" placeholder="請輸入內容" :disabled="true"> </el-input> 添加disabled可實現只讀效果

 

可清除輸入框

 

<el-input placeholder="請輸入內容"
  v-model="input"
  clearable>
</el-input>

 

 

密碼輸入框

 <el-input placeholder="請輸入密碼" v-model="input" show-password></el-input> 

 

 

帶 icon 的輸入框

<div class="demo-input-suffix">
 屬性方式： <el-input placeholder="請選擇日期" suffix-icon="el-icon-date" v-model="input1"></el-input>
  <el-input placeholder="請輸入內容" prefix-icon="el-icon-search" v-model="input2"></el-input>
</div>
<div class="demo-input-suffix">
 slot 方式： <el-input placeholder="請選擇日期"  v-model="input3"><i slot="suffix" class="el-input__icon el-icon-date"></i>
  </el-input>

  <el-input placeholder="請輸入內容"  v-model="input4">
     <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
</div>

 

textarea:能夠經過:rows控制行數

 

 

<el-input type="textarea"
  :rows="2"
  placeholder="請輸入內容"
  v-model="textarea">
</el-input>

 

 

 

 

 

可自適應文本高度的文本域:type="textarea" 

<el-input type="textarea" autosize placeholder="請輸入內容" v-model="textarea1">
</el-input>
<div style="margin: 20px 0;"></div>
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="請輸入內容" v-model="textarea2">
</el-input>

 

複合型輸入框

 

可前置或後置元素，通常爲標籤或按鈕

 

 

<div>
  <el-input placeholder="請輸入內容" v-model="input1">
    <template slot="prepend">Http://</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="請輸入內容" v-model="input2">
    <template slot="append">.com</template>
  </el-input>
</div>
<div style="margin-top: 15px;">
  <el-input placeholder="請輸入內容" v-model="input3" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="請選擇">
      <el-option label="餐廳名" value="1"></el-option>
      <el-option label="訂單號" value="2"></el-option>
      <el-option label="用戶電話" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>

 

 

 

尺寸:可經過 size 屬性指定輸入框的尺寸，除了默認的大小外，還提供了 large、small 和 mini 三種尺寸。

<el-input size="medium"
    placeholder="請輸入內容"
    suffix-icon="el-icon-date"
    v-model="input2">
  </el-input>

 

 帶輸入建議:autocomplete 是一個可帶輸入建議的輸入框組件，fetch-suggestions 是一個返回輸入建議的方法屬性，

                如 querySearch(queryString, cb)，在該方法中你能夠在你的輸入建議數據準備好時經過 cb(data) 返回到 autocomplete 組件中。

              可配合clearable實現清除，:trigger-on-focus="false" 能夠控制點擊是否彈出備選項

效果:

 

代碼:

<el-row class="demo-autocomplete">
  <el-col :span="12">
    <div class="sub-title">激活即列出輸入建議</div>
    <el-autocomplete class="inline-input"
      v-model="state1"
      :fetch-suggestions="querySearch"
      placeholder="請輸入內容"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
  <el-col :span="12">
    <div class="sub-title">輸入後匹配輸入建議</div>
    <el-autocomplete class="inline-input"
      v-model="state2"
      :fetch-suggestions="querySearch"
      placeholder="請輸入內容"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
  </el-col>
</el-row>
<script> export default { data() { return { restaurants: [], state1: '', state2: '' }; }, methods: { querySearch(queryString, cb) { var restaurants = this.restaurants; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 調用 callback 返回建議列表的數據 cb(results); }, createFilter(queryString) { return (restaurant) => { return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); }; }, loadAll() { return [ { "value": "三全鮮食（北新涇店）", "address": "長寧區新漁路144號" },
          { "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長寧區淞虹路661號" },
          { "value": "新旺角茶餐廳", "address": "上海市普陀區真北路988號創邑金沙谷6號樓113" },
          { "value": "瀧千家(天山西路店)", "address": "天山西路438號" },
          { "value": "胖仙女紙杯蛋糕（上海凌空店）", "address": "上海市長寧區金鐘路968號1幢18號樓一層商鋪18-101" },
          { "value": "貢茶", "address": "上海市長寧區金鐘路633號" },
          { "value": "豪大大香雞排超級奶爸", "address": "上海市嘉定區曹安公路曹安路1685號" },
          { "value": "茶芝蘭（奶茶，手抓餅）", "address": "上海市普陀區同普路1435號" },
          { "value": "十二瀧町", "address": "上海市北翟路1444弄81號B幢-107" },
          { "value": "星移濃縮咖啡", "address": "上海市嘉定區新鬱路817號" },
          { "value": "阿姨奶茶/豪大大", "address": "嘉定區曹安路1611號" },
          { "value": "新麥甜四季甜品炸雞", "address": "嘉定區曹安公路2383弄55號" },
          { "value": "Monica摩托主題咖啡店", "address": "嘉定區江橋鎮曹安公路2409號1F，2383弄62號1F" },
          { "value": "浮生若茶（凌空soho店）", "address": "上海長寧區金鐘路968號9號樓地下一層" },
          { "value": "NONO JUICE 鮮榨果汁", "address": "上海市長寧區天山西路119號" },
          { "value": "CoCo均可(北新涇店）", "address": "上海市長寧區仙霞西路" },
          { "value": "快樂檸檬（神州智慧店）", "address": "上海市長寧區天山西路567號1層R117號店鋪" },
          { "value": "Merci Paul cafe", "address": "上海市普陀區光復西路丹巴路28弄6號樓819" },
          { "value": "貓山王（西郊百聯店）", "address": "上海市長寧區仙霞西路88號第一層G05-F01-1-306" },
          { "value": "槍會山", "address": "上海市普陀區棕櫚路" },
          { "value": "縱食", "address": "元豐天山花園(東門) 雙流路267號" },
          { "value": "錢記", "address": "上海市長寧區天山西路" },
          { "value": "壹杯加", "address": "上海市長寧區通協路" },
          { "value": "唦哇嘀咖", "address": "上海市長寧區新涇鎮金鐘路999號2幢（B幢）第01層第1-02A單元" },
          { "value": "愛茜茜裏(西郊百聯)", "address": "長寧區仙霞西路88號1305室" },
          { "value": "愛茜茜裏(近鐵廣場)", "address": "上海市普陀區真北路818號近鐵城市廣場北區地下二樓N-B2-O2-C商鋪" },
          { "value": "鮮果榨汁（金沙江路和美廣店）", "address": "普陀區金沙江路2239號金沙和美廣場B1-10-6" },
          { "value": "開心麗果（繽谷店）", "address": "上海市長寧區威寧路天山路341號" },
          { "value": "超級雞車（豐莊路店）", "address": "上海市嘉定區豐莊路240號" },
          { "value": "妙生活果園（北新涇店）", "address": "長寧區新漁路144號" },
          { "value": "香宜度麻辣香鍋", "address": "長寧區淞虹路148號" },
          { "value": "凡仔漢堡（老真北路店）", "address": "上海市普陀區老真北路160號" },
          { "value": "港式小鋪", "address": "上海市長寧區金鐘路968號15樓15-105室" },
          { "value": "蜀香源麻辣香鍋（劍河路店）", "address": "劍河路443-1" },
          { "value": "北京餃子館", "address": "長寧區北新涇街道天山西路490-1號" },
          { "value": "飯典*新簡餐（凌空SOHO店）", "address": "上海市長寧區金鐘路968號9號樓地下一層9-83室" },
          { "value": "焦耳·川式快餐（金鐘路店）", "address": "上海市金鐘路633號地下一層甲部" },
          { "value": "動力雞車", "address": "長寧區仙霞西路299弄3號101B" },
          { "value": "瀏陽蒸菜", "address": "天山西路430號" },
          { "value": "四海游龍（天山西路店）", "address": "上海市長寧區天山西路" },
          { "value": "櫻花食堂（凌空店）", "address": "上海市長寧區金鐘路968號15樓15-105室" },
          { "value": "壹分米客家傳統調製米粉(天山店)", "address": "天山西路428號" },
          { "value": "福榮祥燒臘（平溪路店）", "address": "上海市長寧區協和路福泉路255弄57-73號" },
          { "value": "速記黃燜雞米飯", "address": "上海市長寧區北新涇街道金鐘路180號1層01號攤位" },
          { "value": "紅辣椒麻辣燙", "address": "上海市長寧區天山西路492號" },
          { "value": "(小楊生煎)西郊百聯餐廳", "address": "長寧區仙霞西路88號百聯2樓" },
          { "value": "陽陽麻辣燙", "address": "天山西路389號" },
          { "value": "南拳媽媽龍蝦蓋澆飯", "address": "普陀區金沙江路1699號鑫樂惠美食廣場A13" }
 ]; }, handleSelect(item) { console.log(item); } }, mounted() { this.restaurants = this.loadAll(); } } </script>

 

 

自定義模板：可自定義輸入建議的顯示內容和樣式

使用scoped slot自定義輸入建議的模板。 該 scope 的參數爲item，表示當前輸入建議對象。 <el-autocomplete popper-class="my-autocomplete"
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="請輸入內容"
  @select="handleSelect">
  <i class="el-icon-edit el-input__icon"
    slot="suffix"
    @click="handleIconClick">
  </i>
  <template slot-scope="{ item }">
    <div class="name">{{ item.value }}</div>
    <span class="addr">{{ item.address }}</span>
  </template>
</el-autocomplete>

異步獲取數據填充：

<el-autocomplete v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="請輸入內容"
  @select="handleSelect"
></el-autocomplete>

 

長度限制

maxlength 和 minlength 是原生屬性，用來限制輸入框的字符長度，其中字符長度是用 Javascript 的字符串長度統計的。對於類型爲 text 或 textarea 的輸入框，在使用 maxlength 屬性限制最大輸入長度的同時，可經過設置 show-word-limit 屬性來展現字數統計。

<el-input type="text" placeholder="請輸入內容" v-model="text" maxlength="10" show-word-limit >

 

還有相關的一系列對外事件

 

 

InputNumber 計數器:

<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>

 

禁用

 <el-input-number v-model="num" :disabled="true"></el-input-number> 

 

步數

<el-input-number v-model="num" :step="2"></el-input-number>

嚴格倍數

 step-strictly屬性接受一個Boolean。若是這個屬性被設置爲true，則只能輸入步數的倍數。 

 

精度：

 <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number> 

 

尺寸

<el-input-number v-model="num1"></el-input-number>
  <el-input-number size="medium" v-model="num2"></el-input-number>
  <el-input-number size="small" v-model="num3"></el-input-number>
  <el-input-number size="mini" v-model="num4"></el-input-number>

按鈕位置

 <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number> 

 

Select 選擇器

 

基礎用法

<el-select v-model="value" placeholder="請選擇">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

有禁用項目

<el-select v-model="value" placeholder="請選擇">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled">
    </el-option>
  </el-select>

禁用狀態,不可選

<el-select v-model="value" disabled placeholder="請選擇">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

可清空單選

<el-select v-model="value" clearable placeholder="請選擇">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

多選

 

爲el-select設置multiple屬性便可啓用多選，此時v-model的值爲當前選中值所組成的數組。默認狀況下選中值會以 Tag 的形式展示，你也能夠設置collapse-tags屬性將它們合併爲一段文字。

<el-select v-model="value1" multiple placeholder="請選擇">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

  <el-select v-model="value2"
 multiple collapse-tags style="margin-left: 20px;"
    placeholder="請選擇">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

 

 

自定義模板

<template>
  <el-select v-model="value" placeholder="請選擇">
    <el-option v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
    </el-option>
  </el-select>
</template>

 

分組:

<el-select v-model="value" placeholder="請選擇">
    <el-option-group v-for="group in options"
      :key="group.label"
      :label="group.label">
      <el-option v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-option-group>
  </el-select>

 

 可搜索

    爲el-select添加filterable屬性便可啓用搜索功能。默認狀況下，Select 會找出全部label屬性包含輸入值的選項。

     若是但願使用其餘的搜索邏輯，能夠經過傳入一個filter-method來實現。filter-method爲一個Function，它會在輸入值發生變化時調用，參數爲當前輸入值。

<template>
  <el-select v-model="value" filterable placeholder="請選擇">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

 

遠程搜索

         爲了啓用遠程搜索，須要將filterable和remote設置爲true，同時傳入一個remote-method。

   remote-method爲一個Function，它會在輸入值發生變化時調用，參數爲當前輸入值。

        須要注意的是，若是el-option是經過v-for指令渲染出來的，此時須要爲el-option添加key屬性，且其值需具備惟一性，好比此例中的item.value。

<el-select v-model="value"
 multiple filterable remote reserve-keyword placeholder="請輸入關鍵詞"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

 

 建立條目:

 

使用allow-create屬性便可經過在輸入框中輸入文字來建立新的條目。 注意此時filterable必須爲真 本例還使用了default-first-option屬性，在該屬性打開的狀況下，按下回車就能夠選中當前選項列表中的第一個選項，無需使用鼠標或鍵盤方向鍵進行定位。

 

 

 

 

<el-select v-model="value"
 multiple filterable allow-create default-first-option placeholder="請選擇文章標籤">
    <el-option v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

 

 

 

Cascader 級聯選擇器

 

 

Switch 開關

 

 

<el-switch v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>


<el-switch v-model="value1"
  active-text="按月付費"
  inactive-text="按年付費">
</el-switch>

  <el-switch v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0">
  </el-switch>

<el-switch v-model="value1"
  disabled>
</el-switch>

Slider 滑塊

 

經過拖動滑塊在一個固定區間內進行選擇

 

<template>
  <div class="block">
    <span class="demonstration">默認</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">自定義初始值</span>
    <el-slider v-model="value2"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">隱藏 Tooltip</span>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">格式化 Tooltip</span>
    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">禁用</span>
    <el-slider v-model="value5" disabled></el-slider>
  </div>
</template>

 

 

 

離散值:改變step的值能夠改變步長，經過設置show-stops屬性能夠顯示間斷點

 

 帶有輸入框

<div class="block">
    <el-slider v-model="value"
      show-input>
    </el-slider>
  </div>

 

<div class="block">
    <el-slider v-model="value"
 range show-stops :max="10">
    </el-slider>
  </div>

<div class="block">
    <el-slider v-model="value"
 vertical height="200px">
    </el-slider>
  </div>

 

 

<div class="block">
    <el-slider v-model="value"
 range :marks="marks">
    </el-slider>
  </div>

 

 

 

Dialog 對話框

 

 

 

 

 

 

Tag 標籤

 用於標記和選擇。

用type和color定義tag顏色 <el-tag>標籤一</el-tag>
<el-tag type="success">標籤二</el-tag>
<el-tag type="info">標籤三</el-tag>
<el-tag type="warning">標籤四</el-tag>
<el-tag type="danger">標籤五</el-tag>

 

 可移除樣式

設置closable屬性能夠定義一個標籤是否可移除。默認的標籤移除時會附帶漸變更畫，若是不想使用，能夠設置disable-transitions屬性，它接受一個Boolean，true 爲關閉。 <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type"> {{tag.name}} </el-tag>

 

 

動態編輯標籤

動態編輯標籤能夠經過點擊標籤關閉按鈕後觸發的 close 事件來實現

 

 不一樣尺寸：

<el-tag closable>默認標籤</el-tag>
<el-tag size="medium" closable>中等標籤</el-tag>
<el-tag size="small" closable>小型標籤</el-tag>
<el-tag size="mini" closable>超小標籤</el-tag>

 

 

 

不一樣主題和tag組

Tag 組件提供了三個不一樣的主題：dark、light 和 plain

<div class="tag-group">
  <span class="tag-group__title">Dark</span>
  <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark"> {{ item.label }} </el-tag>
</div>
<div class="tag-group">
  <span class="tag-group__title">Plain</span>
  <el-tag v-for="item in items" :key="item.label" :type="item.type" effect="plain"> {{ item.label }} </el-tag>
</div>

 

Progress 進度條

 

用於展現操做進度，告知用戶當前狀態和預期。

 

線形進度條

Progress 組件設置percentage屬性便可，表示進度條對應的百分比，必填，必須在 0-100。經過 format 屬性來指定進度條文字內容。 <el-progress :percentage="50"></el-progress>
<el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress>

 

 

百分比內顯

百分比不佔用額外控件，適用於文件上傳等場景。

<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>

 

 

自定義顏色

能夠經過 color 設置進度條的顏色，color 能夠接受顏色字符串，函數和數組。

el-progress :percentage="percentage" :color="customColor"></el-progress>

<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>

<el-progress :percentage="percentage" :color="customColors"></el-progress>
<div>
  <el-button-group>
    <el-button icon="el-icon-minus" @click="decrease"></el-button>
    <el-button icon="el-icon-plus" @click="increase"></el-button>
  </el-button-group>
</div>

<script> export default { data() { return { percentage: 20, customColor: '#409eff', customColors: [ {color: '#f56c6c', percentage: 20}, {color: '#e6a23c', percentage: 40}, {color: '#5cb87a', percentage: 60}, {color: '#1989fa', percentage: 80}, {color: '#6f7ad3', percentage: 100} ] }; }, methods: { customColorMethod(percentage) { if (percentage < 30) { return '#909399'; } else if (percentage < 70) { return '#e6a23c'; } else { return '#67c23a'; } }, increase() { this.percentage += 10; if (this.percentage > 100) { this.percentage = 100; } }, decrease() { this.percentage -= 10; if (this.percentage < 0) { this.percentage = 0; } } } } </script>

 

 

 

環形進度條

Progress 組件可經過 type 屬性來指定使用環形進度條，在環形進度條中，還能夠經過 width 屬性來設置其大小。

<el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress>

 

儀表盤形進度條

 

<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
<div>
  <el-button-group>
    <el-button icon="el-icon-minus" @click="decrease"></el-button>
    <el-button icon="el-icon-plus" @click="increase"></el-button>
  </el-button-group>
</div>

<script> export default { data() { return { percentage: 10, colors: [ {color: '#f56c6c', percentage: 20}, {color: '#e6a23c', percentage: 40}, {color: '#5cb87a', percentage: 60}, {color: '#1989fa', percentage: 80}, {color: '#6f7ad3', percentage: 100} ] }; }, methods: { increase() { this.percentage += 10; if (this.percentage > 100) { this.percentage = 100; } }, decrease() { this.percentage -= 10; if (this.percentage < 0) { this.percentage = 0; } } } } </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

Transfer 穿梭框

 

<el-transfer v-model="value" :data="data"></el-transfer>
value: [1, 4] data:[{ key: i, label: `備選項 ${ i }`, disabled: i % 4 === 0 }] Transfer 的數據經過 data 屬性傳入。數據須要是一個對象數組，每一個對象有如下屬性：key 爲數據的惟一性標識，label 爲顯示文本，disabled 表示該項數據是否禁止轉移。
目標列表中的數據項會同步到綁定至 v-model 的變量，值爲數據項的 key 所組成的數組。固然，若是但願在初始狀態時目標列表不爲空，能夠像本例同樣爲 v-model 綁定的變量賦予一個初始值。

 

 可搜索的穿梭框

<el-transfer filterable :filter-method="filterMethod"
    filter-placeholder="請輸入城市拼音"
    v-model="value"
    :data="data">
  </el-transfer> 設置 filterable 爲 true 便可開啓搜索模式。 默認狀況下，若數據項的 label 屬性包含搜索關鍵字，則會在搜索結果中顯示。 你也可使用 filter-method 定義本身的搜索邏輯。filter-method 接收一個方法，當搜索關鍵字變化時，會將當前的關鍵字和每一個數據項傳給該方法。若方法返回 true，則會在搜索結果中顯示對應的數據項。

 

 

可自定義

能夠對列表標題文案、按鈕文案、數據項的渲染函數、列表底部的勾選狀態文案、列表底部的內容區等進行自定義。

可使用 titles、button-texts、render-content 和 format 屬性分別對列表標題文案、按鈕文案、數據項的渲染函數和列表頂部的勾選狀態文案進行自定義。數據項的渲染還可使用 scoped-slot 進行自定義。對於列表底部的內容區，提供了兩個具名 slot：left-footer 和 right-footer。此外，若是但願某些數據項在初始化時就被勾選，可使用 left-default-checked 和 right-default-checked 屬性。最後，本例還展現了 change 事件的用法。注意：因爲 jsfiddle 不支持 JSX 語法，因此使用 render-content 自定義數據項的例子在 jsfiddle 中沒法運行。可是在實際的項目中，只要正確地配置了相關依賴，就能夠正常運行。

<template>
  <p style="text-align: center; margin: 0 0 20px">使用 render-content 自定義數據項</p>
  <div style="text-align: center">
    <el-transfer style="text-align: left; display: inline-block" v-model="value" filterable :left-default-checked="[2, 3]" :right-default-checked="[1]" :render-content="renderFunc" :titles="['Source', 'Target']" :button-texts="['到左邊', '到右邊']" :format="{
        noChecked: '${total}', hasChecked: '${checked}/${total}' }"       @change="handleChange" :data="data">
      <el-button class="transfer-footer" slot="left-footer" size="small">操做</el-button>
      <el-button class="transfer-footer" slot="right-footer" size="small">操做</el-button>
    </el-transfer>
  </div>

  <p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定義數據項</p>
  <div style="text-align: center">
    <el-transfer style="text-align: left; display: inline-block" v-model="value4" filterable :left-default-checked="[2, 3]" :right-default-checked="[1]" :titles="['Source', 'Target']" :button-texts="['到左邊', '到右邊']" :format="{
        noChecked: '${total}', hasChecked: '${checked}/${total}' }"       @change="handleChange" :data="data">
      <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
      <el-button class="transfer-footer" slot="left-footer" size="small">操做</el-button>
      <el-button class="transfer-footer" slot="right-footer" size="small">操做</el-button>
    </el-transfer>
  </div>
</template>

 

 

 

數據項屬性別名

默認狀況下，Transfer 僅能識別數據項中的 key、label 和 disabled 字段。若是你的數據的字段名不一樣，可使用 props 屬性爲它們設置別名。

:props="{
      key: 'value', label: 'desc' }"

 

 

 通知框類:

 

 

基礎用法

type:info,success,warning,error

 <el-alert title="成功提示的文案" type="success"> </el-alert> 

主題

Alert 組件提供了兩個不一樣的主題：light和dark。

 

<el-alert title="成功提示的文案" type="success" effect="dark">
  </el-alert>

 

 自定義關閉按鈕

 在 Alert 組件中，你能夠設置是否可關閉，關閉按鈕的文本以及關閉時的回調函數。

closable屬性決定是否可關閉，接受boolean，默認爲true。

你能夠設置close-text屬性來代替右側的關閉圖標，

注意：close-text必須爲文本。

設置close事件來設置關閉時的回調。

<el-alert title="不可關閉的 alert" type="success" :closable="false">
  </el-alert>
  <el-alert title="自定義 close-text" type="info" close-text="知道了">
  </el-alert>
  <el-alert title="設置了回調的 alert" type="warning" @close="hello">
  </el-alert>

帶有 icon

經過設置show-icon屬性來顯示 Alert 的 icon，這能更有效地向用戶展現你的顯示意圖。

  <el-alert title="消息提示的文案" type="info" show-icon></el-alert> 

 

文字居中

使用 center 屬性讓文字水平居中。

<el-alert title="成功提示的文案" type="success" center show-icon></el-alert>

 

帶有輔助性文字介紹

包含標題和內容，解釋更詳細的警告。

除了必填的title屬性外，你能夠設置description屬性來幫助你更好地介紹，咱們稱之爲輔助性文字。輔助性文字只能存放單行文本，會自動換行顯示。

<el-alert title="帶輔助性文字介紹" type="success" description="這是一句繞口令：黑灰化肥會揮發發灰黑化肥揮發；灰黑化肥會揮發發黑灰化肥發揮。 黑灰化肥會揮發發灰黑化肥黑灰揮發化爲灰……">
  </el-alert>

 

帶有 icon 和輔助性文字介紹：show-icon和description組合使用

Loading 加載

 

 區域加載

在表格等容器中加載數據時顯示。

Element 提供了兩種調用 Loading 的方法：指令和服務。

對於自定義指令v-loading，只須要綁定Boolean便可。

默認情況下，Loading 遮罩會插入到綁定元素的子節點，

經過添加body修飾符，可使遮罩插入至 DOM 中的 body 上。

<el-table v-loading="loading" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
  </el-table>

 

自定義

可自定義加載文案、圖標和背景色。

在綁定了v-loading指令的元素上添加element-loading-text屬性，其值會被渲染爲加載文案，並顯示在加載圖標的下方。相似地，element-loading-spinner和element-loading-background屬性分別用來設定圖標類名和背景色值。

<el-table v-loading="loading" element-loading-text="拼命加載中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">

整頁加載

頁面數據加載時顯示。

當使用指令方式時，全屏遮罩須要添加fullscreen修飾符（遮罩會插入至 body 上），此時若須要鎖定屏幕的滾動，可使用lock修飾符；

當使用服務方式時，遮罩默認即爲全屏，無需額外設置。

<el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading"> 指令方式 </el-button>
  <el-button type="primary" @click="openFullScreen2"> 服務方式 </el-button>

 

export default { data() { return { fullscreenLoading: false } }, methods: { openFullScreen1() { this.fullscreenLoading = true; setTimeout(() => { this.fullscreenLoading = false; }, 2000); }, openFullScreen2() { const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); setTimeout(() => { loading.close(); }, 2000); } } }

 

 ndoe 環境服務注入

import { Loading } from 'element-ui'; Loading.service(options); let loadingInstance = Loading.service(options); this.$nextTick(() => { // 以服務的方式調用的 Loading 須要異步關閉
 loadingInstance.close(); }); 須要注意的是，以服務的方式調用的全屏 Loading 是單例的： 若在前一個全屏 Loading 關閉前再次調用全屏 Loading，並不會建立一個新的 Loading 實例，而是返回現有全屏 Loading 的實例： let loadingInstance1 = Loading.service({ fullscreen: true }); let loadingInstance2 = Loading.service({ fullscreen: true }); console.log(loadingInstance1 === loadingInstance2); // true
 若是完整引入了 Element，那麼 Vue.prototype 上會有一個全局方法 $loading，它的調用方式爲：this.$loading(options)，一樣會返回一個 Loading 實例。

 

Message 消息提示

經常使用於主動操做後的反饋提示。與 Notification 的區別是後者更多用於系統級通知的被動提醒。

  • 基礎用法：從頂部出現，3 秒後自動消失。Element 註冊了一個$message方法用於調用，Message 能夠接收一個字符串或一個 VNode 做爲參數，它會被顯示爲正文內容。

<script> export default { methods: { open() { this.$message('這是一條消息提示'); }, openVn() { const h = this.$createElement; this.$message({ message: h('p', null, [ h('span', null, '內容能夠是 '), h('i', { style: 'color: teal' }, 'VNode') ]) }); } } } </script>

  • 不一樣狀態:用來顯示「成功、警告、消息、錯誤」類的操做反饋。當須要自定義更多屬性時，Message 也能夠接收一個對象爲參數。好比，設置type字段能夠定義不一樣的狀態，默認爲info。此時正文內容以message的值傳入。同時，咱們也爲 Message 的各類 type 註冊了方法，能夠在不傳入type字段的狀況下像open4那樣直接調用

 

<script> export default { methods: { open1() { this.$message('這是一條消息提示'); }, open2() { this.$message({ message: '恭喜你，這是一條成功消息', type: 'success' }); }, open3() { this.$message({ message: '警告哦，這是一條警告消息', type: 'warning' }); }, open4() { this.$message.error('錯了哦，這是一條錯誤消息'); } } } </script>

  • 可關閉:能夠添加關閉按鈕。

this.$message({ showClose: true, message: '恭喜你，這是一條成功消息', type: 'success' });
  • 文字居中:添加添加屬性:center:true

  • 使用 HTML 片斷 message 屬性支持傳入 HTML 片斷

          將dangerouslyUseHTMLString屬性設置爲 true，message 就會被看成 HTML 片斷處理

    message 屬性雖然支持傳入 HTML 片斷，可是在網站上動態渲染任意 HTML 是很是危險的，由於容易致使 XSS 攻擊。

         所以在 dangerouslyUseHTMLString 打開的狀況下，請確保 message 的內容是可信的，永遠不要將用戶提交的內容賦值給 message 屬性。

 methods: { openHTML() { this.$message({ dangerouslyUseHTMLString: true, message: '<strong>這是 <i>HTML</i> 片斷</strong>' }); } }
  • 全局方式:Element 爲 Vue.prototype 添加了全局方法 $message。所以在 vue instance 中能夠採用本頁面中的方式調用 Message

  • 單獨引用：單獨引入 Message：

      此時調用方法爲 。咱們也爲每一個 type 定義了各自的方法，如 。而且能夠調用  手動關閉全部實例。import { Message } from 'element-ui'Message(options)Message.success(options)Message.closeAll()

 

 

MessageBox 彈框

 

用於消息提示、確認消息和提交內容。MessageBox 的做用是美化系統自帶的 alert、confirm 和 prompt，所以適合展現較爲簡單的內容。若是須要彈出較爲複雜的內容，請使用 Dialog。

 它模擬了系統的 alert，沒法經過按下 ESC 或點擊框外關閉

此例中接收了兩個參數，message和title。值得一提的是，窗口被關閉後，它默認會返回一個Promise對象便於進行後續操做的處理。若不肯定瀏覽器是否支持Promise，可自行引入第三方 polyfill 或像本例同樣使用回調進行後續處理

 

消息提示.單個確認按鈕

this.$alert('這是一段內容', '標題名稱', { confirmButtonText: '肯定', callback: action => { this.$message({ type: 'info', message: `action: ${ action }` });

 

用戶確認

調用$confirm方法便可打開消息提示，它模擬了系統的 confirm。 Message Box 組件也擁有極高的定製性，咱們能夠傳入options做爲第三個參數，它是一個字面量對象。 type字段代表消息類型，能夠爲success，error，info和warning，無效的設置將會被忽略。 注意，第二個參數title必須定義爲String類型，若是是Object，會被理解爲options。 在這裏咱們用了 Promise 來處理後續響應。 this.$confirm('此操做將永久刪除該文件, 是否繼續?', '提示', { confirmButtonText: '肯定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '刪除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消刪除' }); });

 

inputBox:帶校驗的輸入框

能夠用inputPattern字段本身規定匹配模式 或者用inputValidator規定校驗函數，能夠返回Boolean或String，返回false或字符串時均表示校驗未經過，同時返回的字符串至關於定義了inputErrorMessage字段。 此外，能夠用inputPlaceholder字段來定義輸入框的佔位符。 this.$prompt('請輸入郵箱', '提示', { confirmButtonText: '肯定', cancelButtonText: '取消', inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, inputErrorMessage: '郵箱格式不正確' }).then(({ value }) => { this.$message({ type: 'success', message: '你的郵箱是: ' + value }); }).catch(() => { this.$message({ type: 'info', message: '取消輸入' }); });

 

 

自定義:可自定義配置不一樣內容。以上三個方法都是對$msgbox方法的再包裝。

本例直接調用$msgbox方法，使用了showCancelButton字段，用於顯示取消按鈕。

另外可以使用cancelButtonClass爲其添加自定義樣式，

使用cancelButtonText來自定義按鈕文本。

此例還使用了beforeClose屬性，它的值是一個方法，會在 MessageBox 的實例關閉前被調用，同時暫停實例的關閉。

它有三個參數：action、實例自己和done方法。使用它可以在關閉前對實例進行一些操做，好比爲肯定按鈕添加loading狀態等；此時若須要關閉實例，能夠調用done方法（若在beforeClose中沒有調用done，則實例不會關閉）

const h = this.$createElement; this.$msgbox({ title: '消息', message: h('p', null, [ h('span', null, '內容能夠是 '), h('i', { style: 'color: teal' }, 'VNode') ]), showCancelButton: true, confirmButtonText: '肯定', cancelButtonText: '取消', beforeClose: (action, instance, done) => { if (action === 'confirm') { instance.confirmButtonLoading = true; instance.confirmButtonText = '執行中...'; setTimeout(() => { done(); setTimeout(() => { instance.confirmButtonLoading = false; }, 300); }, 3000); } else { done(); } } }).then(action => { this.$message({ type: 'info', message: 'action: ' + action }); });

說明:彈出層的內容能夠是 VNode，因此咱們能把一些自定義組件傳入其中。每次彈出層打開後，Vue 會對新老 VNode 節點進行比對，而後將根據比較結果進行最小單位地修改視圖。這也許會形成彈出層內容區域的組件沒有從新渲染，例如 #8931。當這類問題出現時，解決方案是給 VNode 加上一個不相同的 key，

 

 

使用 HTML 片斷

   this.$alert('<strong>這是 <i>HTML</i> 片斷</strong>', 'HTML 片斷', {
          dangerouslyUseHTMLString: true
 });
 屬性雖然支持傳入 HTML 片斷，可是在網站上動態渲染任意 HTML 是很是危險的，由於容易致使 XSS 攻擊。所以在  打開的狀況下，請確保  的內容是可信的，永遠不要將用戶提交的內容賦值給  屬性。
messagedangerouslyUseHTMLStringmessagemessage

 

區分取消與關閉

有些場景下，點擊取消按鈕與點擊關閉按鈕有着不一樣的含義。

默認狀況下，當用戶觸發取消（點擊取消按鈕）和觸發關閉（點擊關閉按鈕或遮罩層、按下 ESC 鍵）時，Promise 的 reject 回調和callback回調的參數均爲 'cancel'。
若是將distinguishCancelAndClose屬性設置爲 true，則上述兩種行爲的參數分別爲 'cancel' 和 'close'。
this.$confirm('檢測到未保存的內容，是否在離開頁面前保存修改？', '確認信息', { distinguishCancelAndClose: true, confirmButtonText: '保存', cancelButtonText: '放棄修改' }) .then(() => { this.$message({ type: 'info', message: '保存修改' }); }) .catch(action => { this.$message({ type: 'info', message: action === 'cancel'
                ? '放棄保存並離開頁面' : '停留在當前頁面' }) });

 

 

居中佈局

內容支持居中佈局center 設置爲 true 便可開啓居中佈局

 

 

全局方法

若是你完整引入了 Element，它會爲 Vue.prototype 添加以下全局方法：$msgbox, $alert, $confirm 和 $prompt。所以在 Vue instance 中能夠採用本頁面中的方式調用 MessageBox。調用參數爲：

  • $msgbox(options)
  • $alert(message, title, options) 或 $alert(message, options)
  • $confirm(message, title, options) 或 $confirm(message, options)
  • $prompt(message, title, options) 或 $prompt(message, options)

 

單獨引用

若是單獨引入 MessageBox：

import { MessageBox } from 'element-ui';

那麼對應於上述四個全局方法的調用方法依次爲：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt，調用參數與全局方法相同。

 

而後就是一堆選項配置

 

 

Notification 通知

 

懸浮出如今頁面角落，顯示全局的通知提醒消息。

 Notification 組件提供通知功能，Element 註冊了$notify方法，接收一個options字面量參數，在最簡單的狀況下，你能夠設置title字段和message字段，用於設置通知的標題和正文。

默認狀況下，通過一段時間後 Notification 組件會自動關閉，可是經過設置duration，能夠控制關閉的時間間隔，特別的是，若是設置爲0，則不會自動關閉。

注意：duration接收一個Number，單位爲毫秒，默認爲4500。

 

this.$notify({ title: '標題名稱', message: h('i', { style: 'color: teal'}, '這是提示文案這是提示文案 
 這是提示文案這是提示文案這是提示文案這是提示文案這是提示文案這 是提示文案')
});

 

 

帶有傾向性

帶有 icon，經常使用來顯示「成功、警告、消息、錯誤」類的系統消息

 

success, warning, info, error。經過type字段來設置 咱們也爲 Notification 的各類 type 註冊了方法，能夠在不傳入type字段的狀況下像open3和open4那樣直接調用。 this.$notify({ title: '成功', message: '這是一條成功的提示消息', type: 'success' }); this.$notify.info({ title: '消息', message: '這是一條消息的提示消息' });

 

 

自定義彈出位置

可讓 Notification 從屏幕四角中的任意一角彈出

使用position屬性定義 Notification 的彈出位置，支持四個選項：top-right、top-left、bottom-right、bottom-left，默認爲top-right。

 

帶有偏移

讓 Notification 偏移一些位置

Notification 提供設置偏移量的功能，經過設置 offset 字段，可使彈出的消息距屏幕邊緣偏移一段距離。注意在同一時刻，全部的 Notification 實例應當具備一個相同的偏移量。

 

使用html片斷

this.$notify({ title: 'HTML 片斷', dangerouslyUseHTMLString: true, message: '<strong>這是 <i>HTML</i> 片斷</strong>' });

 

隱藏關閉按鈕

能夠不顯示關閉按鈕，將showClose屬性設置爲false便可隱藏關閉按鈕。

 

全局方法

Element 爲 Vue.prototype 添加了全局方法 $notify。所以在 vue instance 中能夠採用本頁面中的方式調用 Notification。

 

單獨引用

單獨引入 Notification：

import { Notification } from 'element-ui';

此時調用方法爲 Notification(options)。咱們也爲每一個 type 定義了各自的方法，如 Notification.success(options)。而且能夠調用 Notification.closeAll() 手動關閉全部實例。

 

 

 

 

NavMenu 導航菜單

 

導航菜單默認爲垂直模式，經過mode屬性可使導航菜單變動爲水平模式。mode="horizontal"

另外，在菜單中經過submenu組件能夠生成二級菜單。

background-color:設置菜單的背景色

text-color:菜單的文字顏色

active-text-color:當前激活菜單的文字顏色

@select="handleSelect" 綁定在el-menu上

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">處理中心</el-menu-item>
              <el-submenu index="2">
                        <template slot="title">個人工做臺</template>
                        <el-menu-item index="2-1">選項1</el-menu-item>
                        <el-menu-item index="2-2">選項2</el-menu-item>
                        <el-menu-item index="2-3">選項3</el-menu-item>
                <el-submenu index="2-4">
                      <template slot="title">選項4</template>
                      <el-menu-item index="2-4-1">選項1</el-menu-item>
                      <el-menu-item index="2-4-2">選項2</el-menu-item>
                      <el-menu-item index="2-4-3">選項3</el-menu-item>
                </el-submenu>
              </el-submenu>
              
              
              <el-menu-item index="3" disabled>消息中心</el-menu-item>
              <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">訂單管理</a></el-menu-item>
 </el-menu>

 

 

 

 

側欄垂直菜單，可內嵌子菜單。

 經過el-menu-item-group組件能夠實現菜單進行分組，分組名能夠經過title屬性直接設定，也能夠經過具名 slot 來設定。

 

 

 

<el-row class="tac">
  <el-col :span="12">
    <h5>默認顏色</h5>
    <el-menu default-active="2"
      class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>導航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分組一</template>
          <el-menu-item index="1-1">選項1</el-menu-item>
          <el-menu-item index="1-2">選項2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分組2">
          <el-menu-item index="1-3">選項3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">選項4</template>
          <el-menu-item index="1-4-1">選項1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">導航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">導航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">導航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="12">
    <h5>自定義顏色</h5>
    <el-menu default-active="2"
      class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>導航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分組一</template>
          <el-menu-item index="1-1">選項1</el-menu-item>
          <el-menu-item index="1-2">選項2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分組2">
          <el-menu-item index="1-3">選項3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">選項4</template>
          <el-menu-item index="1-4-1">選項1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">導航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">導航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">導航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>

 

 菜單摺疊

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展開</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>


<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">

 

 

 多tab頁面

 

 基礎用法:Tabs 組件提供了選項卡功能，默認選中第一個標籤頁，你也能夠經過 value 屬性來指定當前選中的標籤頁。

 

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
  </el-tabs>

 

 選項卡樣式

<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
  </el-tabs>

 

 卡片化標籤頁

<el-tabs type="border-card">
  <el-tab-pane label="用戶管理">用戶管理</el-tab-pane>
  <el-tab-pane label="配置管理">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
  <el-tab-pane label="定時任務補償">定時任務補償</el-tab-pane>
</el-tabs>

 

位置標籤

 標籤一共有四個方向的設置 tabPosition="left|right|top|bottom"

<template>
  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
    <el-radio-button label="top">top</el-radio-button>
    <el-radio-button label="right">right</el-radio-button>
    <el-radio-button label="bottom">bottom</el-radio-button>
    <el-radio-button label="left">left</el-radio-button>
  </el-radio-group>

  <el-tabs :tab-position="tabPosition" style="height: 200px;">
    <el-tab-pane label="用戶管理">用戶管理</el-tab-pane>
    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定時任務補償">定時任務補償</el-tab-pane>
  </el-tabs>
</template>

 

自定義tab

 

<el-tabs type="border-card">
  <el-tab-pane>
    <span slot="label"><i class="el-icon-date"></i> 個人行程</span> 個人行程 </el-tab-pane>
  <el-tab-pane label="消息中心">消息中心</el-tab-pane>
  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
  <el-tab-pane label="定時任務補償">定時任務補償</el-tab-pane>
</el-tabs>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程