思路: 1.在組件wxml文件里實現(xiàn)布局、數(shù)據(jù)綁定、事件綁定;
2.組件js文件里定義事件,并將文件所有內(nèi)容作為一個對象export出去; 4.數(shù)據(jù)傳遞。在引用文件對應的js里定義要傳遞的數(shù)據(jù),數(shù)據(jù)名稱與組件wxml文件里的一致; 5.函數(shù)映射。在引用文件對應的js里import組件js對象,并將相應事件映射過來,映射名須與函數(shù)名一致。
例子:公用組件為一個蒙版彈窗,提示內(nèi)容各頁面也有差異,以其中一個為例 效果圖: 代碼(樣式部分的代碼就不貼了=.=) 1.components wxml: (如果要用import方式引入組件,則wxml文件需將template作為根元素)
js: 定義了一個yesIKonw事件來控制關閉蒙蔽層
2.引用頁面 wxml: 通過include引入公共組件 js: 定義要傳遞的數(shù)據(jù)值(flag、alertInfo),并映射函數(shù)yesIKnow,使得在引用頁可控制蒙版組件的展示與隱藏。
PS: 1.需在引用頁的wxss文件里引入公共組件的樣式wxss文件
@import "../components/promptBox/index.wxss";
2.蒙版樣式:
.mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: rgba(0, 0, 0, 0.4);
overflow: hidden;
/* stylelint-disable */ //這個是禁止styleint檢測的語句
z-index: 1;
}
|