elementUI學習筆記（一）

elementUI學習筆記（一）

文章目錄

• • • elementUI學習筆記（一）
    • • Basic
      • Form

Basic

• 按鈕組件的使用

  使用elementui的相關組件時全部組件都是el-組件名開頭
  在elementui中全部組件的屬性所有寫在組件標籤上
  

  <el-button 屬性名=「屬性」>默認按鈕</el-button>

• 文字連接組件的使用

  <el-link href="https://element.eleme.io" target="_blank">默認連接</el-link>

• layout佈局和container佈局容器

  經過基礎的 24 分欄，迅速簡便地建立佈局
  經過 row 和 col 組件，並經過 col 組件的 span 屬性咱們就能夠自由地組合佈局
  

  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
   </el-row>

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

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

  混合佈局：經過基礎的 1/24 分欄任意擴展組合造成較爲複雜的混合佈局
  分欄偏移：支持偏移指定的欄數，經過制定 col 組件的 offset 屬性能夠指定分欄偏移的欄數
  

  <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>

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

  <el-row type="flex" class="row-bg" justify="center">
      <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>

  響應式佈局：參照了 Bootstrap 的 響應式設計，預設了五個響應尺寸：xs、sm、md、lg 和 xl
  基於斷點的隱藏類：Element 額外提供了一系列類名，用於在某些條件下隱藏元素。這些類名能夠添加在任何 DOM 元素或自定義組件上。若是須要，請自行引入如下文件：
  

  import 'element-ui/lib/theme-chalk/display.css';

  container佈局容器 ：

  • ：外層容器
  • 當子元素中包含 或 時，所有子元素會垂直上下排列，不然會水平左右排列
  • 以上組件採用了 flex 佈局，使用前請肯定目標瀏覽器是否兼容。此外， 的子元素只能是後四者，後四者的父元素也只能是

Form

• 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-radio元素中設置disabled屬性便可，它接受一個Boolean，true爲禁用

  <template>
    <el-radio disabled v-model="radio" label="禁用">備選項</el-radio>
    <el-radio disabled v-model="radio" label="選中且禁用">備選項</el-radio>      </template>
  
  <script> export default {  data () {  return {  radio: '選中且禁用' }; } } </script>