開發微信小程式中，為了符合開發需求自定義了 “摺疊欄“、“普通表格“、“遮罩彈層”元件，已獨立抽取出來的元件作出以下總結，便於後續在其他小程式專案中使用

Zayer-miniprogram自定義元件說明文件：

一.Zayer-flod摺疊欄元件

1. 在引入頁面的json檔案中定義

"usingComponents": {   "zayer-flod" : "元件存放路徑/zayer-flod/index" }

1. 在wxml頁面中直接呼叫

<zayer-flod title="摺疊欄標題" expand="{{true}}" withIcon="{{ true }}" withAttach="{{ true }}" stopFlod="{{ false }}">   <image slot="icon" src="" />   <text slot="title_right" >備註資訊</text>   <view slot="content">     -----------     摺疊內容區域     -----------   </view> </zayer-flod>

1. 屬性變數備註：expand: Boolean  預設false，是否展開withIcon: Boolean  預設false，是否帶圖示withAttach: Boolean 預設false，是否附帶右側按鈕或備註stopFlod: Boolean  預設false，是否禁止展開

2. 多slot說明 可自定義圖示，需宣告帶 slot="icon" 的wxml結構 <image slot="icon" src="" /> 可自定義右側附屬資訊，如文字或按鈕，需宣告 slot="title_right" 的wxml結構 <text slot="title_right" >備註資訊 摺疊內容定義 <view slot="content"> 內容 </view>

二.Zayer-table普通表格元件

1. 在引入頁面的json檔案中定義

"usingComponents": {   "zayer-table": "../../component/zayer-table/index" }

1. 在wxml頁面中直接呼叫

1. 在wxml頁面對應的js檔案中定義

data: {   demoTable: {     thead: [       { title: "姓名", col: "name" },       { title: "年齡", col: "age" },       { title: "性別", col: "gender" },       { title: "地址", col: "address" },       ],     tbody: [       { name: "heavent", age: 24, gender: "男", address: "深圳" },       { name: "lucy", age: 23, gender: "女", address: "廣州" },       { name: "jeremy", age: 22, gender: "男", address: "惠州" },       { name: "tommy", age: 22, gender: "男", address: "東莞" }     ]   } }

1. 屬性說明table: 需要渲染成表格的資料物件custom-class: 自定義樣式

三.Zayer-mask遮罩彈出層元件

1. 在引入頁面的json檔案中定義

"usingComponents": {   "zayer-mask": "../../component/zayer-mask/index" }

1. 在wxml頁面中直接呼叫

<zayer-mask show="{{ showFlag }}" custom-class="demoClass">   <view slot="title">標題   <view slot="dialog">   內容   </view> </zayer-mask>

1. 在wxml頁面對應的js檔案中定義

data: {   showFlag: true }

1. 屬性說明show: 是否顯示遮罩層custom-class: 自定義屬性

2. 多slot說明title：標題wxml結構dialog：主要顯示內容wxml結構