elementui入門 按鈕元件的使用及原始碼解析

2020-12-26

**快速成型工具和桌面端元件庫

基於vue的乙個ui框架，該框架基於vue開發了很多相關元件，方便我們快速開發頁面

基於vue開發並且進行了開源 ，element ui 提供的全部都是封裝好的元件

2.1初始化乙個腳手架的專案

vue init webpack element

npm i element-ui -s

//在main.js中引入elementui和它的css樣式

import elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

vue.use(elementui)

import vue from 'vue';

import elementui from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
vue.use(elementui);
new vue();

elementui官方文件

元件使用時，有以下幾個注意點：

1》所有元件都是 「el-元件名稱」 開頭

2》所有元件的屬性全部寫在元件標籤上

3》對於取值為布林值的屬性，不能直接賦值（無論是true或false），js統統認為是true，需要將該屬性繫結到元件上

這裡以按鈕元件為例，開始第乙個元件的學習

3.1建立乙個按鈕元件

我是預設按鈕

type屬性：決定按鈕的顏色

type的取值

含義type=「primary」

主要按鈕

type=「success」

成功按鈕

type=「info」

資訊按鈕

type=「warning」

警告按鈕

type=「danger」

危險按鈕

//el-row 一行顯示

預設按鈕<
/el-button>
"primary"
>主要按鈕<
/el-button>
"success"
>成功按鈕<
/el-button>
"info"
>資訊按鈕<
/el-button>
"warning"
>警告按鈕<
/el-button>
"danger"
>危險按鈕<
/el-button>
<
/el-row>

按鈕的其他屬性很多，以上主要是為了做入門練習，這裡不再做贅述

按鈕組：使得按鈕之間沒有空隙

3.3 按鈕元件的原始碼解析

class

="el-button"
@click=
"handleclick"
:disabled=
"buttondisabled || loading"
:autofocus=
"autofocus"
:type=
"nativetype"
:class
="[      type ?
'el-button--'
+ type :'',
buttonsize ?
'el-button--'
+ buttonsize :'',
]"    >
="el-icon-loading" v-if=
"loading"
>
<
/i>
class
="icon" v-if=
"icon && !loading"
>
<
/i>
"$slots.default"
>
<
/slot>
<
/span>
<
/button>
<
/template>
export
default
,      elformitem:},
props:
,      size: string,
//按鈕尺寸
icon:
,      nativetype:
,      loading: boolean,
//是否載入中狀態
disabled: boolean,
//是否禁用狀態
plain: boolean,
//是否樸素按鈕
autofocus: boolean,
//是否預設聚焦
round: boolean,
//是否圓角按鈕
circle: boolean //是否圓形按鈕},
computed:
).elformitemsize;},
//按鈕尺寸計算
buttonsize()
).size;},
//按鈕是否禁用
buttondisabled()
).disabled;}}
,    methods:}}
;<
/script>

Element UI 的分頁元件

sizechange size 當使用者單擊任意頁碼或實現頁面跳轉時會觸發current page屬性的變化。currentchange current 擷取頁數 woekeralldata.slice pagenumber currentchangeindex 1 pagenumber curre...

學習elementUI元件框架

學習元件框架之前，要有一點vue元件基礎，關於元件通訊，這點很重要，元件框架全部都是寫好的自定義元件，與我們使用的bootstrap不同，bootstrap是基於csshtml的樣式布局，二元件的基於js的vue框架之上封裝的東西，元件的每乙個標籤，都對應乙個vue檔案template，style，...

elementUI分頁元件封裝

在實際開發需求，產品需要的分頁元件比較簡單，只可以一頁頁地翻，就是為了防止用於直接翻看最後的資料 因為有一些歷史資料資料量比較大，檢視的意義不大，檢索效率比較低也比較忙，因為不希望使用者在翻頁的時候可以隨意翻看很久之前的資料 因此需要根據實際需求進行分頁元件封裝 以下封裝的分頁元件，勉強夠用，但是還...