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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/198273.html

標籤：AI

上一篇：精選開源SpringBoot專案快速入門CRM專案【筆記+原始碼+檔案】

下一篇：float現象（是什么,脫標,排序,貼靠,字圍,高度問題）