iView 發佈 3.0 版本，以及開發者社區等 5 款新產品

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

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

• 3.0 文檔地址
• GitHub 地址
• 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

相對時間組件 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 中運行。

iView Editor：簡約而不簡單的 markdown 編輯器

由於在 iView Developer 中，咱們開發了一個使用起來還不錯的 markdown 編輯器，因此把它單獨開源出來。 iView Editor 參考 Github 的設計風格，能夠在 markdown 和預覽之間進行切換，固然，你喜歡實時預覽的話，也是支持的。

• 地址 editor.iviewui.com/
• GitHub github.com/iview/iview…

iView Weapp 2.0

咱們在一個多月前發佈了微信小程序 UI 組件庫 iView Weapp，此次發佈會咱們帶來了它的 2.0 版本。

• 2.0 文檔 weapp.iviewui.com/
• GitHub github.com/TalkingData…

iView Weapp 2.0 新增了 7 個全新的組件：

• 索引選擇器 Index
• 吸頂容器Sticky
• 滑動菜單 Swipeout
• 倒計時 CountDown
• 分隔符 Divider
• 摺疊面板 Collapse
• 頁底提示 LoadMore

掃描小程序碼，當即體驗 iView Weapp 2.0：

iView Admin 2.0

iView Admin 2.0 也進行了一波大的升級：

• 基於 Vue Cli 3.0
• 重構全部代碼
• 重寫重要組件
• 全新權限方案
• 多級菜單路由
• Mock 請求模擬
• 全局配置
• 清晰數據流

體驗 iView Admin 2.0： iview.github.io/iview-admin GitHub：github.com/iview/iview…

以上就是本次 iView 3.0 發佈會的核心內容，完整的發佈會錄像視頻以後會在 iView Developer 發佈。