uni-app裡的拓展元件uni ui與UI架構uView UI的Popup 彈出層的差別！
文章目錄
- 1.官網Popup 彈出層連結
- 2.屬性不同
- 3.屬性對照
- 4.彈出的方式
- 5.uView特有屬性
1.官網Popup 彈出層連結
uni ui的官方位址：https://ext.dcloud.net.cn/plugin?id=329
uView ui的官方位址：http://uviewui.com/components/popup.html
2.屬性不同
uni ui的官網上提供了3個屬性：如圖所示：
uView ui的官網上提供的屬性有很多，如圖所示：
3.屬性對照
| 屬性說明 | uni ui | uView ui |
|---|---|---|
| 是否開啟動畫 | animation | zoom |
| 彈出方式 | type | mode |
| 蒙版點選是否關閉彈窗 | maskClick | mask-close-able |
| 是否顯示關閉圖示 | x | closeable |
| 關閉圖示的更改 | x | close-icon |
| 自定義關閉圖示位置 | x | close-icon-pos |
| 彈窗圓角值 | x | border-radius |
| … | … | … |
由于太多屬性了，就不一一列舉了！
對于屬性來講，更多的是uView ui，因為uView ui其實可以說是對uni ui的應該補充與完善的ui。是以它所擁有的功能回比uni ui更多得多！
4.彈出的方式
再來看彈出的方式差別
uni ui的type參數：
| 屬性名 | 說明 |
|---|---|
| top | 頂部彈出 |
| center | 居中彈出 |
| bottom | 底部彈出 |
| message | 預置樣式 ：消息提示 |
| dialog | 預置樣式 ：對話框 |
| share | 預置樣式 ：底部彈出分享示例 |
uView ui的mode參數：
| 屬性名 | 說明 |
|---|---|
| left | 左彈出 |
| top | 頂部彈出 |
| right | 右彈出 |
| bottom | 底部彈出 |
| center | 居中彈出 |
5.uView特有屬性
控制彈窗的寬度 | 高度
内置了scroll-view元素，内如内容超出容器的高度，将會自動獲得垂直滾動的特性，通過設定height參數可以設定高度
這裡說的寬度，指的是左邊，右邊，中部彈出的場景，高度指的是頂部和底部彈出的場景(因為這兩個場景寬度都是100%)。
uView提供了length來控制此種情況，此值可以是數值(機關rpx)，auto，百分比等，内部會自動處理對應的邏輯。 如果為auto的時候，表示彈窗的寬度 | 高度由内容撐開。
1.3.7版本新增width和height參數：
1.3.7版本後，優先推薦width和height參數，并且優先級會高于length，這3個參數都可以設定百分比、auto、數值(機關rpx)、或者是帶px和rpx機關的字元串：
- width — 隻對mode = left | center | right模式有效
- height — 隻對mode = top | center | bottom模式有效
1.3.7版本後，内置了scroll-view元素，内如内容超出容器的高度，将會自動獲得垂直滾動的特性，如果您因為在slot内容做了滾動的處理，而造成了 沖突的話，請移除自定義關于滾動部分的邏輯。
這個東西完美解決了uni ui的大麻煩，因為在uni ui中的popup彈出層，如果你的内容過多的話，那麼你的内容就回被頂上去，就回看不到了，之前的做法是利用scroll-view元素，通過設定滾動來解決這個問題，不過這樣很麻煩，而新版本的uView的width和height參數就是來解決這個高度跟寬度問題的！！！
暫時整理這麼多，後續再更！！