weex學習之路 二 元件封裝(1)

2021-08-09 15:48:11 字數 774 閱讀 4872

不管是為了解耦還是為了**的復用,元件封裝都是必須要的。

因為weex使用flex布局,所以每個頁面都可以抽象成 頭部(頂部導航),身體(主體內容),腳(底部),

當然,並不是所有的頁面存在這3個要素,所以元件需要支援一些配置,具體**如下:

flex-direction: column;

} justify-content: flex-start;

} flex: 1;

flex-direction: column;

} justify-content: flex-end;

}然而頭部的導航欄一般也是比較通用的也可以抽象一下

} 0"

:style="titlestyle"

@click="clicktext"

:value="title">

0" class="right-content"

@click="clickright"

:style="righttextstyle"

:value="righttext">

0" class="right-content"

@click="clickright"

:style="righticonstyle"

:src="righticon">

其他的也類似(頁面底部,主體內容)都可以抽象一些通用的東西出來,具體的可以參考

weex 13 元件textarea使用

本節學習目標 熟練掌握textarea元件的使用 它是什麼?textarea 多行輸入元件 特性 1.placehold 設定佔位符,提醒使用者應該輸入什麼內容,或者輸入的規則,只能輸入數字等等 2.disabled 設定是否支援使用者輸入,設定為true 3.autofocus進入頁面是否自動獲得...

元件 1 元件定義

使用vue.extend options 定義元件,引數為乙個包含了被定義組選項的物件。使用vue.component id,definition 註冊定義好的元件,id為該元件名稱。definition 既可以是乙個extend 返回的例項,也可以是乙個包含元件選項的物件 將會自動呼叫extend...

Vue前端之路 二 元件庫element

目錄序言 1.element整合 1.1.npm安裝element 1.2.完整引入element 2.element國際化實現 2.1.準備自定義內容檔案 2.2.相容 vue i18n 5.x配置 2.3.配置檔案繫結到vue例項中 2.4.測試切換中英文功能 2.5.國際化的使用 2.5.1....