資訊專欄INFORMATION COLUMN
摘要：相對時間組件錨點組件面板分割組件分割線組件單元格組件相對時間組件用于表示幾分鐘前幾小時前等相對于此時此刻的時間描述。單元格組件在手機上比較常見，在上則常用于固定的側(cè)邊菜單項。開發(fā)者社區(qū)這是發(fā)布會最勁爆的一款產(chǎn)品了。
7 月 28 日，我們成功地召開了 iView 3.0 暨神秘新品發(fā)布會，這可能是前端開源圈第一次舉行線下+線上的發(fā)布會。現(xiàn)場座無虛席，線上直播也有超過 2 萬人觀看。同時這一天也是 iView 兩周歲生日，發(fā)布會結(jié)束后，我們舉行了生日會。
iView 3.0：更輕量的設(shè)計，更強大的組件和功能3.0 文檔地址
GitHub 地址
3.0 更新日志
我們設(shè)計了全新的 iView Logo，維持了原先 i 和 v 的造型，并讓顏色更立體：
3.x 的版本代號依然沿用 iOS 優(yōu)秀獨立游戲的名稱，3.0 的版本代號為兩周前剛發(fā)布的 RPG 游戲 Battleheart。
全民彩蛋計劃為慶祝 iView 兩周歲生日，以及 3.0 版本的發(fā)布，我們在 iView 文檔 中放置了三枚彩蛋，它們埋藏在不同的頁面里，可能是一段隱藏的代碼，或是一段需要破解的密碼等等，總之，聰明的你一定會找到并破譯它們。當(dāng)然，找到三枚彩蛋，你并不能繼承 iView 作者的遺產(chǎn)！彩蛋可以兌換大量的 IO 幣，詳見下文開發(fā)者社區(qū)。
設(shè)計許多用戶選擇 iView，很大的原因是認(rèn)可 iView 的設(shè)計，所以在 iView 3.0 里，我們對 UI 進行了進一步的優(yōu)化。
iView 的 icon 采用開源項目 ionicons 提供的圖標(biāo)，這次也是將 ionicons 圖標(biāo)庫從 2.0 升級至 3.0。
3.0 的圖標(biāo)庫在命名上更加的規(guī)范，只分為 ios ,md, logo 三種，圖標(biāo)也比以前豐富和好看。
3.0 還新增了屬性 custom，可以自定義圖標(biāo)。
整體的設(shè)計風(fēng)格趨向于簡潔、輕量，去掉了冗余的設(shè)計，部分顏色做了調(diào)整，看起來更加醒目，比如：
iView 的組件是全球同類產(chǎn)品里數(shù)量最多，功能最豐富的，3.0 更是增加了 5 個全新的組件。
相對時間組件 Time
錨點組件 Anchor
面板分割組件 Split
分割線組件 Divider
單元格組件 Cell
相對時間組件 Time 用于表示幾分鐘前、幾小時前等相對于此時此刻的時間描述。相比一個固定的日期時間，它更能體現(xiàn)出最近的狀態(tài)。
錨點組件 Anchor 可以快速跳轉(zhuǎn)到頁面指定的位置，經(jīng)常用于導(dǎo)航文章或文檔中的目錄結(jié)構(gòu)，隨著頁面的滾動，它可以自動定位當(dāng)前瀏覽區(qū)域所對應(yīng)的標(biāo)題，點擊對應(yīng)的標(biāo)題，頁面也會跳轉(zhuǎn)到對應(yīng)的位置。
面板分割組件 Split 可將一片區(qū)域，分割為可以拖拽調(diào)整寬度或高度的兩部分區(qū)域，并支持嵌套使用。
分割線組件 Divider，常用于對不同章節(jié)的文本段落進行分割，或者對行內(nèi)文字/鏈接進行分割，例如表格的操作列。
單元格組件 Cell 在手機上比較常見，在 PC 上則常用于固定的側(cè)邊菜單項。Cell 可以是一個簡單的菜單項，也可以跳轉(zhuǎn)到其它頁面，或者跟 徽標(biāo) Badge 或 開關(guān) Switch 等組件一起使用。
新特性iView 3.0 有超過 40 項新特性及功能的優(yōu)化。
首先是全局配置，使用 iView 3 時，可以進行全局配置組件的一些屬性。目前只支持配置 transfer 和 size 兩個屬性。組件會優(yōu)先使用 prop 設(shè)置的屬性，如果未設(shè)置，再使用全局配置。
transfer：所有帶浮層的組件，是否將浮層放置在 body 內(nèi)，默認(rèn)為不設(shè)置，詳見各組件默認(rèn)的 transfer 值?？蛇x值為 true 或 false。
size：所有帶有 size 屬性的組件的尺寸，默認(rèn)為不設(shè)置，詳見各組件默認(rèn)的 size 值?？蛇x值為 default、small 或 large。
用法如下：
Vue.use(iView, {
transfer: true,
size: "large"
});
Button 是 iView 最基礎(chǔ)，也是最常用的組件?？此圃俸唵尾贿^的一個組件，其實里面有很多學(xué)問。
iView 3 廢棄了 type="ghost"，而是新增了布爾選項 ghost，定義按鈕為幽靈按鈕，幽靈按鈕的背景是透明的，常用于有色背景上面。
還新增了 3 個用于跳轉(zhuǎn)的 props：to、replace、target：
添加 to 屬性后，按鈕會以 標(biāo)簽的形式渲染，點擊可直接跳轉(zhuǎn)，也支持傳入一個 vue-router 對象，iView 會做智能判斷。如果使用了 vue-router，會以前端路由的形式跳轉(zhuǎn)，否則會用傳統(tǒng)的方式跳轉(zhuǎn)。
replace 屬性開啟后，跳轉(zhuǎn)不會保存歷史記錄。
target 的行為和 a 標(biāo)簽類似，比如設(shè)置在新窗口打開。
支持 跳轉(zhuǎn) 的組件，除了 按鈕組件 Button，還有面包屑組件 Breadcrumb、菜單組件 Menu、以及單元格組件 Cell，這些組件都具有 to、replace 和 target 三個屬性，體驗也完全一致。后續(xù)還會支持到更多組件，比如 Dropdown。
以 Menu 為例，使用 to 來跳轉(zhuǎn)，要比以前通過自定義事件 @on-select 獲取 name 再用 vue-router 的編程式導(dǎo)航跳轉(zhuǎn)方便的太多，并且會渲染為帶有鏈接屬性的 a 標(biāo)簽，在 SEO 上也更友好。
所有支持跳轉(zhuǎn)的組件，都支持了鍵盤按鍵（Mac 為 command，Windows 為 ctrl）加鼠標(biāo)左鍵在新窗口打開的特性（無論是否設(shè)置 target="_blank"，這種組合行為都會在新窗口打開，與瀏覽器原生體驗完全一致）。
對話框組件 Modal 新增了三個屬性：
fullscreen 全屏
draggable 拖拽
mask 是否隱藏遮罩層
開啟全屏屬性 fullscreen 后，會鋪滿整個屏幕，并且只有內(nèi)容區(qū)域可滾動。
開啟拖拽屬性 draggable 后，會默認(rèn)隱藏遮罩層，此時拖動 Modal 的標(biāo)題欄就可以移動了，可以支持同時開啟多個 Modal 進行拖拽。
表格組件 Table 新增了兩個屬性
indexMethod
tooltip
當(dāng)設(shè)置列有 type="index" 時，可以使用 indexMethod 進行自定義序號了。
給某一列設(shè)置屬性 tooltip="true" 時，當(dāng)該列內(nèi)容過長，一行無法顯示時，鼠標(biāo)經(jīng)過會以 Tooltip 的形式顯示完整內(nèi)容。
其余的更新內(nèi)容可以到 3.0 更新日志查看。
開發(fā)者社區(qū) iView Developer這是發(fā)布會最勁爆的一款產(chǎn)品了。過去的兩個多月里，我們一直在投入社區(qū)的開發(fā)中，目的就是徹底解決開發(fā)者的問題，更好地服務(wù)開發(fā)者。
社區(qū)地址：https://dev.iviewui.com/
一對一提問遇到編程問題，怎樣才能有效解決呢？
QQ / 微信群
SegmentFault / Stackoverflow 等技術(shù)社區(qū)
問同事
每個人都期望加入大群，但都在小群活躍。QQ / 微信群是程序員很活躍的地方，iView 也組建過官方的 QQ 群，累計有 5000 人左右，每天都沉淀了大量的討論，雖然我不會一一過目，但偶爾也會快速瀏覽一下。其中一部分問題是文檔中已有的，一部分是比較基礎(chǔ)的用法，還有一些相對綜合的問題。提問的人很多，解答的人缺少，因為群里的人，絕大多數(shù)都是和“你”一類的用戶，他們加群也是想解決問題來的，但事實上，并沒有得到很好和及時的解決。
Stackoverflow 就不說了，這是一個門檻較高的程序員社區(qū)，不過對于高級程序員來說，是尋找答案最好的地方。我們來說說國內(nèi)的技術(shù)社區(qū)。以 SegmentFault 為例，我們以往也一直鼓勵除了 bug 反饋，都到 SF 提問，因為 GitHub 只適合處理 bug 本身的問題，對于如何使用不適合在上面探討。
至于問同事和朋友嘛，首先你得有一個懂你的領(lǐng)域問題的同事或朋友，而且，對方得有時間和耐心。
為什么得不到有效解決？
其實理由很簡單：
“你”問的圈子的人，也都跟“你”一樣，是主動提問型的。
專業(yè)問題（比如 iView / Vue.js），不是所有人都知道。
能解決你問題的人，一般都是大牛，而大牛都很忙，根本沒空理你。
說的很露骨，但卻一針見血。
怎樣才能解決問題
如果你想問 iView 的問題，那這個世界上誰對 iView 最了解？當(dāng)然是 iView 作者本人了，那自然也對 Vue.js 的問題了如指掌。如果作者解決不了的，但基本也沒什么人能解決，所以，要想徹底解決問題，就是直接向 iView 作者提問。
所以，一對一提問，是 iView Developer 最核心的功能，也是最能解決你痛點的。
高級示例針對 Vue.js 及 iView，精心編寫了大量業(yè)務(wù)中的高級示例，對 iView 官方文檔作補充。比如 Table 的服務(wù)端分頁及服務(wù)端排序、過濾；Upload 的手動上傳及七牛云的集成。所有示例都有詳細(xì)說明、源碼及演示，并可以收藏。高級示例會不斷增加。
高級示例也是 iView Developer 另一重要的板塊，里面會陸續(xù)更新豐富而針對性的實例，以 iView 和 Vue.js 為主。高級示例具體到某個詳細(xì)的問題，比如 Table 組件和 Page 組件聯(lián)合使用并做服務(wù)端的分頁、排序、過濾。大量的最佳實踐和詳盡的代碼講解、瀏覽體驗，對于 iView 使用者來說是很好的補充。
每周都會更新一些示例，并提示您，并且可以對示例進行收藏。
除此之外，還有獨家寫作、商城等功能，期待你的探索！
iView Run：隨時隨地運行 iView 示例iView Run 是一個集成了 iView 環(huán)境的在線運行 iView 示例的工具，左邊寫代碼，右邊預(yù)覽，可以直接編寫一個 .vue 文件，它包含了 template、script、style 三部分。
編寫好的示例保存后，會生成一個鏈接，并可以預(yù)覽，鏈接可用于提交 bug，或分享示例給他人參考。
地址：https://run.iviewui.com/
iView Run（beta）目前僅支持 iView 環(huán)境，暫不支持 Less 和部分 ES6 語法，這取決于你的瀏覽器。未來將逐步支持，并提供示例共享平臺，你可以分享或瀏覽別人分享的優(yōu)秀示例。
并且 iView 的文檔未來也會集成 iView Run，文檔中所有的示例未來都可以直接在 iView Run 中運行。
因為在 iView Developer 中，我們開發(fā)了一個使用起來還不錯的 markdown 編輯器，所以把它多帶帶開源出來。
iView Editor 參考 Github 的設(shè)計風(fēng)格，可以在 markdown 和預(yù)覽之間進行切換，當(dāng)然，你喜歡實時預(yù)覽的話，也是支持的。
地址 http://editor.iviewui.com/
GitHub https://github.com/iview/iview-editor
iView Weapp 2.0我們在一個多月前發(fā)布了微信小程序 UI 組件庫 iView Weapp，這次發(fā)布會我們帶來了它的 2.0 版本。
2.0 文檔 https://weapp.iviewui.com/
GitHub https://github.com/TalkingData/iview-weapp
iView Weapp 2.0 新增了 7 個全新的組件：
索引選擇器 Index
吸頂容器Sticky
滑動菜單 Swipeout
倒計時 CountDown
分隔符 Divider
折疊面板 Collapse
頁底提示 LoadMore
掃描小程序碼，立即體驗 iView Weapp 2.0：
iView Admin 2.0iView Admin 2.0 也進行了一波大的升級：
基于 Vue Cli 3.0
重構(gòu)所有代碼
重寫重要組件
全新權(quán)限方案
多級菜單路由
Mock 請求模擬
全局配置
清晰數(shù)據(jù)流
體驗 iView Admin 2.0： https://iview.github.io/iview-admin
GitHub：https://github.com/iview/iview-admin
以上就是本次 iView 3.0 發(fā)布會的核心內(nèi)容，完整的發(fā)布會錄像視頻之后會在 iView Developer 發(fā)布。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96418.html
摘要：但是，我們注意到，微信小程序正在崛起，這將是移動端新的一種開發(fā)模式。不過微信對小程序越來越開放，給的入口也越來越多，這讓很多開發(fā)者投入到小程序的開發(fā)上。地址文檔歡迎和是什么微信小程序提供了自定義組件的功能，這使得成為了可能。 showImg(https://segmentfault.com/img/bVbb9fe?w=2856&h=1444); 末尾有彩蛋。 過去的兩年里，iView ...
摘要：在許多志愿者的幫助下，將文檔全部翻譯為英文，在開發(fā)者社區(qū)頗受歡迎。有了英文版后，更多的國外開發(fā)者也參與到討論之中，相信接下來會有更多來自國外的。英文版的翻譯離不開社區(qū)的貢獻，在此特別感謝和三位熱心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 兩年前，我開始接觸 Vue.js 框架，當(dāng)時就被它的輕量、組件...
摘要：在許多志愿者的幫助下，將文檔全部翻譯為英文，在開發(fā)者社區(qū)頗受歡迎。有了英文版后，更多的國外開發(fā)者也參與到討論之中，相信接下來會有更多來自國外的。英文版的翻譯離不開社區(qū)的貢獻，在此特別感謝和三位熱心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 兩年前，我開始接觸 Vue.js 框架，當(dāng)時就被它的輕量、組件...
摘要：工程實踐立足實踐，提示實際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會談及內(nèi)聯(lián)函數(shù)，其也是常見的被詬病為拖慢性能表現(xiàn)的元兇之一不過本文卻是打破砂鍋問到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會拖慢性能，過度的性能優(yōu)化反而會有損于應(yīng)用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...
閱讀 3488·2021-09-02 09:53
閱讀 1807·2021-08-26 14:13
閱讀 2769·2019-08-30 15:44
閱讀 1331·2019-08-30 14:03
閱讀 1980·2019-08-26 13:42
閱讀 3028·2019-08-26 12:21
閱讀 1317·2019-08-26 11:54
閱讀 1910·2019-08-26 10:46
