摘要:相對時間組件錨點組件面板分割組件分割線組件單元格組件相對時間組件用于表示幾分鐘前幾小時前等相對于此時此刻的時間描述。單元格組件在手機上比較常見,在上則常用于固定的側邊菜單項。開發者社區這是發布會最勁爆的一款產品了。
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 屬性后,按鈕會以 標簽的形式渲染,點擊可直接跳轉,也支持傳入一個 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這是發布會最勁爆的一款產品了。過去的兩個多月里,我們一直在投入社區的開發中,目的就是徹底解決開發者的問題,更好地服務開發者。
社區地址:https://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,或分享示例給他人參考。
地址:https://run.iviewui.com/
iView Run(beta)目前僅支持 iView 環境,暫不支持 Less 和部分 ES6 語法,這取決于你的瀏覽器。未來將逐步支持,并提供示例共享平臺,你可以分享或瀏覽別人分享的優秀示例。
并且 iView 的文檔未來也會集成 iView Run,文檔中所有的示例未來都可以直接在 iView Run 中運行。
因為在 iView Developer 中,我們開發了一個使用起來還不錯的 markdown 編輯器,所以把它多帶帶開源出來。
iView Editor 參考 Github 的設計風格,可以在 markdown 和預覽之間進行切換,當然,你喜歡實時預覽的話,也是支持的。
地址 http://editor.iviewui.com/
GitHub https://github.com/iview/iview-editor
iView Weapp 2.0我們在一個多月前發布了微信小程序 UI 組件庫 iView Weapp,這次發布會我們帶來了它的 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
重構所有代碼
重寫重要組件
全新權限方案
多級菜單路由
Mock 請求模擬
全局配置
清晰數據流
體驗 iView Admin 2.0: https://iview.github.io/iview-admin
GitHub:https://github.com/iview/iview-admin
以上就是本次 iView 3.0 發布會的核心內容,完整的發布會錄像視頻之后會在 iView Developer 發布。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96418.html
摘要:但是,我們注意到,微信小程序正在崛起,這將是移動端新的一種開發模式。不過微信對小程序越來越開放,給的入口也越來越多,這讓很多開發者投入到小程序的開發上。地址文檔歡迎和是什么微信小程序提供了自定義組件的功能,這使得成為了可能。 showImg(https://segmentfault.com/img/bVbb9fe?w=2856&h=1444); 末尾有彩蛋。 過去的兩年里,iView ...
摘要:在許多志愿者的幫助下,將文檔全部翻譯為英文,在開發者社區頗受歡迎。有了英文版后,更多的國外開發者也參與到討論之中,相信接下來會有更多來自國外的。英文版的翻譯離不開社區的貢獻,在此特別感謝和三位熱心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 兩年前,我開始接觸 Vue.js 框架,當時就被它的輕量、組件...
摘要:在許多志愿者的幫助下,將文檔全部翻譯為英文,在開發者社區頗受歡迎。有了英文版后,更多的國外開發者也參與到討論之中,相信接下來會有更多來自國外的。英文版的翻譯離不開社區的貢獻,在此特別感謝和三位熱心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 兩年前,我開始接觸 Vue.js 框架,當時就被它的輕量、組件...
摘要:工程實踐立足實踐,提示實際水平內聯函數與性能很多關于性能優化的文章都會談及內聯函數,其也是常見的被詬病為拖慢性能表現的元兇之一不過本文卻是打破砂鍋問到底,論證了內聯函數并不一定就會拖慢性能,過度的性能優化反而會有損于應用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...
閱讀 3468·2021-09-02 09:53
閱讀 1791·2021-08-26 14:13
閱讀 2750·2019-08-30 15:44
閱讀 1313·2019-08-30 14:03
閱讀 1961·2019-08-26 13:42
閱讀 3013·2019-08-26 12:21
閱讀 1302·2019-08-26 11:54
閱讀 1899·2019-08-26 10:46