Element-ui簡單使用

首頁>技術>人玉林風2020-06-09 19:24

Element-ui簡單使用

什麼是Element-ui？

根據官網的說法，Element-ui，是一套為開發者、設計師和產品經理準備的基於Vue 2.0的由餓了麼公司出品的桌面端元件庫。

官網：https://element.eleme.cn/#/zh-CN

如何使用？

1、建立資料夾element-ui。

2、下載元件。

npm install vue #安裝Vuenpm i element-ui -S #安裝Element-ui

3、為了程式碼更加清爽，可以將主要依賴vue.min.js和element-ui包放入lib目錄中，lib目錄需手動建立。

4、搭建第一個UI介面入門程式。

1、容器，拿來即用即可。

2、圖示，el內建了許多圖示，使用icon="iconname"屬性即可使用，也推薦使用https://fontawesome.dashgame.com/這個網站中的圖示。

<el-button @click="visible = true" icon="el-icon-search">Button</el-button>

3、對於後臺程式設計師來說，大部分情況下都是在對錶單進行操作。el幾乎內建了開發中會使用的所有表單元件。

前端怎麼寫？

對於一些後臺開發人員來說，可能會存在開發一個專案不知道怎麼開始第一步的問題，其原因大概是：

沒有清晰的介面定義。不會設計資料庫。

對於第一個問題，Element-ui元件可以直接套用，我們平時可以多去看看其他網站如何設計，借鑑學習。

至於第二個問題，其實也是因為第一個問題沒解決，當我們把前端寫好之後，資料庫的結構自然就出來了。解決了這兩個問題，剩下的就是後臺的CRUD了，這是我們最熟悉的部分。

編寫前端的基本套路：

見過足夠多的元件，拼接元件，這樣就形成了網頁的基本形狀。修改CSS即可。

設計多級下拉選單的聯動效果

如下圖所示，現在要實現第一個下拉框選擇不同的選項時，第二個下拉框中的下拉選項也要隨之發生變化的效果，這時可以使用級聯選擇器（cascader）來實現。

&lt;div class=&#34;block&#34;&gt; &nbsp;&lt;span class=&#34;demonstration&#34;&gt;預設 click 觸發子選單&lt;/span&gt; &nbsp;&lt;el-cascader &nbsp; &nbsp;v-model=&#34;value&#34; &nbsp; &nbsp;:options=&#34;options&#34; &nbsp; &nbsp;@change=&#34;handleChange&#34;&gt;&lt;/el-cascader&gt;&lt;/div&gt;&lt;div class=&#34;block&#34;&gt; &nbsp;&lt;span class=&#34;demonstration&#34;&gt;hover 觸發子選單&lt;/span&gt; &nbsp;&lt;el-cascader &nbsp; &nbsp;v-model=&#34;value&#34; &nbsp; &nbsp;:options=&#34;options&#34; &nbsp; &nbsp;:props=&#34;{ expandTrigger: &#39;hover&#39; }&#34; &nbsp; &nbsp;@change=&#34;handleChange&#34;&gt;&lt;/el-cascader&gt;&lt;/div&gt;&lt;script&gt; &nbsp;export default { &nbsp; &nbsp;data() { &nbsp; &nbsp; &nbsp;return { &nbsp; &nbsp; &nbsp; &nbsp;value: [], &nbsp; &nbsp; &nbsp; &nbsp;options: [{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value: &#39;zhinan&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;label: &#39;指南&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;children: [{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value: &#39;shejiyuanze&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;label: &#39;設計原則&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;children: [{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value: &#39;yizhi&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;label: &#39;一致&#39; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value: &#39;fankui&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;label: &#39;反饋&#39; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value: &#39;xiaolv&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;label: &#39;效率&#39; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;value: &#39;kekong&#39;, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;label: &#39;可控&#39; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }] &nbsp; &nbsp; &nbsp; &nbsp; }, { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp>

  
		
		
		
		
		
        		
		
				
					最新評論 
				
								

								
				
				
				發佈評論
		
		
        
		
		  
		
						
		∧ BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
∨ Spring Boot 中三種跨域場景總結


		      	
      	
			
      	    
			熱門排行
			含油廢水被規定要回用？多個案例觀察到會使用這3種處理
43歲做完提眉手術，我後悔了，才明白這些彎路不能走！
成年人最後的倔強，這2年到底有多少人每天在假裝上班？
這樣的國家自然科學基金本子誰不喜歡？
糧食穀物食品重金屬檢測儀
硒（Se）對身體有何益處？如何更好地補硒？
藥明康德創始人李革：一心創造醫藥界華為，讓天下沒有難做的藥
芯片人才薪資上漲3~5倍，高薪挖人成行業常態
Redmi K50宇宙終極大作同價位無敵：影像不及小米12S系列
為什麼現在的年輕人更願意網上購物，而不是到實體店購物？

劇多

Element-ui簡單使用