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 中三種跨域場景總結


		      	
      	
			
      	    
			熱門排行
			專科院校土木工程有前途嗎？同宿舍6人，畢業2年後的生活現狀
地下室明明做了防水，裝了除溼機，為什麼還是潮溼發黴？
有關於植筋與植筋膠，有話要講
自我介紹如何彰顯明星範兒，完美拿捏
“職場委屈”降臨時，你該如何應對？
“情聖”杜牧，寫給暗戀女孩的書法作品，為故宮博物院珍寶之一
最好養的蘭花品種？盆栽金荷，開品穩定大氣，蘭香四溢，養蘭首選
曝光！被嚴重低估的中報業績高增長個股
2022年互聯網的一些形勢變化
內窺鏡革命：一次性產品站上臺前，誰能脫穎而出？

劇多

Element-ui簡單使用