iView 釋出 3.0 版本，以及開發者社群等 5 款新產品

Aresn發表於2019-03-01

原文網址 : https://flycode.co/archives/263837

7 月 28 日，我們成功地召開了 iView 3.0 暨神祕新品釋出會，這可能是前端開源圈第一次舉行線下+線上的釋出會。現場座無虛席，線上直播也有超過 2 萬人觀看。同時這一天也是 iView 兩週歲生日，釋出會結束後，我們舉行了生日會。

iView 3.0：更輕量的設計，更強大的元件和功能

我們設計了全新的 iView Logo，維持了原先 i 和 v 的造型，並讓顏色更立體：

3.x 的版本代號依然沿用 iOS 優秀獨立遊戲的名稱，3.0 的版本代號為兩週前剛釋出的 RPG 遊戲 Battleheart。

全民彩蛋計劃

為慶祝 iView 兩週歲生日，以及 3.0 版本的釋出，我們在 iView 文件中放置了三枚彩蛋，它們埋藏在不同的頁面裡，可能是一段隱藏的程式碼，或是一段需要破解的密碼等等，總之，聰明的你一定會找到並破譯它們。當然，找到三枚彩蛋，你並不能繼承 iView 作者的遺產！彩蛋可以兌換大量的 IO 幣，詳見下文開發者社群。

設計

許多使用者選擇 iView，很大的原因是認可 iView 的設計，所以在 iView 3.0 裡，我們對 UI 進行了進一步的優化。

iView 的 icon 採用開源專案 ionicons 提供的圖示，這次也是將 ionicons 圖示庫從 2.0 升級至 3.0。 3.0 的圖示庫在命名上更加的規範，只分為 ios ,md, logo 三種，圖示也比以前豐富和好看。 3.0 還新增了屬性 custom，可以自定義圖示。

整體的設計風格趨向於簡潔、輕量，去掉了冗餘的設計，部分顏色做了調整，看起來更加醒目，比如：

新元件

iView 的元件是全球同類產品裡數量最多，功能最豐富的，3.0 更是增加了 5 個全新的元件。

相對時間元件 Time 用於表示幾分鐘前、幾小時前等相對於此時此刻的時間描述。相比一個固定的日期時間，它更能體現出最近的狀態。

錨點元件 Anchor 可以快速跳轉到頁面指定的位置，經常用於導航文章或文件中的目錄結構，隨著頁面的滾動，它可以自動定位當前瀏覽區域所對應的標題，點選對應的標題，頁面也會跳轉到對應的位置。

皮膚分割元件 Split 可將一片區域，分割為可以拖拽調整寬度或高度的兩部分割槽域，並支援巢狀使用。

分割線元件 Divider，常用於對不同章節的文字段落進行分割，或者對行內文字/連結進行分割，例如表格的操作列。

單元格元件 Cell 在手機上比較常見，在 PC 上則常用於固定的側邊選單項。Cell 可以是一個簡單的選單項，也可以跳轉到其它頁面，或者跟徽標 Badge 或開關 Switch 等元件一起使用。

新特性

iView 3.0 有超過 40 項新特性及功能的優化。

首先是**全域性配置**，使用 iView 3 時，可以進行全域性配置元件的一些屬性。目前只支援配置 transfer 和 size 兩個屬性。元件會優先使用 prop 設定的屬性，如果未設定，再使用全域性配置。

transfer：所有帶浮層的元件，是否將浮層放置在 body 內，預設為不設定，詳見各元件預設的 transfer 值。可選值為 true 或 false。
size：所有帶有 size 屬性的元件的尺寸，預設為不設定，詳見各元件預設的 size 值。可選值為 default、small 或 large。

用法如下：

Vue.use(iView, {
    transfer: true,
    size: 'large'
});
複製程式碼

Button 是 iView 最基礎，也是最常用的元件。看似再簡單不過的一個元件，其實裡面有很多學問。 iView 3 廢棄了 type="ghost"，而是新增了布林選項 ghost，定義按鈕為幽靈按鈕，幽靈按鈕的背景是透明的，常用於有色背景上面。

還新增了 3 個用於跳轉的 props：to、replace、target：

新增 to 屬性後，按鈕會以 <a> 標籤的形式渲染，點選可直接跳轉，也支援傳入一個 vue-router 物件，iView 會做智慧判斷。如果使用了 vue-router，會以前端路由的形式跳轉，否則會用傳統的方式跳轉。 replace 屬性開啟後，跳轉不會儲存歷史記錄。 target 的行為和 a 標籤類似，比如設定在新視窗開啟。

支援跳轉的元件，除了按鈕元件 Button，還有面包屑元件 Breadcrumb、選單元件 Menu、以及單元格元件 Cell，這些元件都具有 to、replace 和 target 三個屬性，體驗也完全一致。後續還會支援到更多元件，比如 Dropdown。

以 Menu 為例，使用 to 來跳轉，要比以前通過自定義事件 @on-select 獲取 name 再用 vue-router 的程式設計式導航跳轉方便的太多，並且會渲染為帶有連結屬性的 a 標籤，在 SEO 上也更友好。

所有支援跳轉的元件，都支援了鍵盤按鍵（Mac 為 command，Windows 為 ctrl）加滑鼠左鍵在新視窗開啟的特性（無論是否設定 target="_blank"，這種組合行為都會在新視窗開啟，與瀏覽器原生體驗完全一致）。

對話方塊元件 Modal 新增了三個屬性：

fullscreen 全屏
draggable 拖拽
mask 是否隱藏遮罩層

開啟全屏屬性 fullscreen 後，會鋪滿整個螢幕，並且只有內容區域可滾動。開啟拖拽屬性 draggable 後，會預設隱藏遮罩層，此時拖動 Modal 的標題欄就可以移動了，可以支援同時開啟多個 Modal 進行拖拽。

表格元件 Table 新增了兩個屬性

indexMethod
tooltip

當設定列有 type="index" 時，可以使用 indexMethod 進行自定義序號了。給某一列設定屬性 tooltip="true" 時，當該列內容過長，一行無法顯示時，滑鼠經過會以 Tooltip 的形式顯示完整內容。

其餘的更新內容可以到 3.0 更新日誌檢視。

開發者社群 iView Developer

這是釋出會最勁爆的一款產品了。過去的兩個多月裡，我們一直在投入社群的開發中，目的就是徹底解決開發者的問題，更好地服務開發者。

社群地址：dev.iviewui.com/

一對一提問

遇到程式設計問題，怎樣才能有效解決呢？

QQ / 微信群
SegmentFault / Stackoverflow 等技術社群
問同事

每個人都期望加入大群，但都在小群活躍。QQ / 微信群是程式設計師很活躍的地方，iView 也組建過官方的 QQ 群，累計有 5000 人左右，每天都沉澱了大量的討論，雖然我不會一一過目，但偶爾也會快速瀏覽一下。其中一部分問題是文件中已有的，一部分是比較基礎的用法，還有一些相對綜合的問題。提問的人很多，解答的人缺少，因為群裡的人，絕大多數都是和“你”一類的使用者，他們加群也是想解決問題來的，但事實上，並沒有得到很好和及時的解決。

Stackoverflow 就不說了，這是一個門檻較高的程式設計師社群，不過對於高階程式設計師來說，是尋找答案最好的地方。我們來說說國內的技術社群。以 SegmentFault 為例，我們以往也一直鼓勵除了 bug 反饋，都到 SF 提問，因為 GitHub 只適合處理 bug 本身的問題，對於如何使用不適合在上面探討。

至於問同事和朋友嘛，首先你得有一個懂你的領域問題的同事或朋友，而且，對方得有時間和耐心。

為什麼得不到有效解決？

其實理由很簡單：

“你”問的圈子的人，也都跟“你”一樣，是主動提問型的。
專業問題（比如 iView / Vue.js），不是所有人都知道。
能解決你問題的人，一般都是大牛，而大牛都很忙，根本沒空理你。

說的很露骨，但卻一針見血。

怎樣才能解決問題

如果你想問 iView 的問題，那這個世界上誰對 iView 最瞭解？當然是 iView 作者本人了，那自然也對 Vue.js 的問題了如指掌。如果作者解決不了的，但基本也沒什麼人能解決，所以，要想徹底解決問題，就是直接向 iView 作者提問。

所以，一對一提問，是 iView Developer 最核心的功能，也是最能解決你痛點的。

高階示例

針對 Vue.js 及 iView，精心編寫了大量業務中的高階示例，對 iView 官方文件作補充。比如 Table 的服務端分頁及服務端排序、過濾；Upload 的手動上傳及七牛雲的整合。所有示例都有詳細說明、原始碼及演示，並可以收藏。高階示例會不斷增加。

高階示例也是 iView Developer 另一重要的板塊，裡面會陸續更新豐富而針對性的例項，以 iView 和 Vue.js 為主。高階示例具體到某個詳細的問題，比如 Table 元件和 Page 元件聯合使用並做服務端的分頁、排序、過濾。大量的最佳實踐和詳盡的程式碼講解、瀏覽體驗，對於 iView 使用者來說是很好的補充。

每週都會更新一些示例，並提示您，並且可以對示例進行收藏。

除此之外，還有獨家寫作、商城等功能，期待你的探索！

iView Run：隨時隨地執行 iView 示例

iView Run 是一個整合了 iView 環境的線上執行 iView 示例的工具，左邊寫程式碼，右邊預覽，可以直接編寫一個 .vue 檔案，它包含了 template、script、style 三部分。編寫好的示例儲存後，會生成一個連結，並可以預覽，連結可用於提交 bug，或分享示例給他人蔘考。

地址：run.iviewui.com/

iView Run（beta）目前僅支援 iView 環境，暫不支援 Less 和部分 ES6 語法，這取決於你的瀏覽器。未來將逐步支援，並提供示例共享平臺，你可以分享或瀏覽別人分享的優秀示例。並且 iView 的文件未來也會整合 iView Run，文件中所有的示例未來都可以直接在 iView Run 中執行。