資訊專欄INFORMATION COLUMN
摘要：優惠券選擇器優惠券選擇器提供了優惠券單元格和優惠券選擇功能。優惠券單元格只需傳入優惠券列表和當前使用的優惠券即可正確展示。使用參數可以控制優惠券單元格是否展示右側箭頭，這個可以用于提醒用戶能否切換優惠券。
Vant ( ?v?nt ) 是有贊前端團隊基于有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效率。目前已有近50個組件，這些組件被廣泛使用于有贊的各個移動端業務中。我們會在此基礎上不斷完善，開發更多實用的組件。
我們的目標是更快、更簡單開發基于 Vue 的美觀易用的移動站點。如果你需要開發一個移動商城，用 Vant 就再合適不過了。
一、特性組件都是來源于有贊的微商城業務，并且經過有贊業務的檢驗，更靠譜
完善詳實的 中文文檔
專門的設計師團隊維護視覺規范，統一而優雅
支持 babel-plugin-import
單測覆蓋率超過90%
建議搭配 webpack，babel 使用 Vant，這樣可以使用 webpack 提供的豐富插件和個性化配置。Vant 支持了 babel-plugin-import，通過 babel 插件使用 Vant，可以優化代碼體積，提高前端性能。
Vant 提供了詳細的文檔，每個組件各個功能點都有詳細的說明和代碼示例。如果需要使用對應功能，直接復制文檔上的代碼即可。
當然，這些只能讓 Vant 成為一個優秀的 Vue UI 組件。那么，Vant 相比其它 Vue UI 組件庫的優勢在哪里？
二、豐富實用的業務組件Vant 不只是提供基礎的UI組件，為了方便開發者快速構建移動商城，Vant 增加了許多移動商城內常用的業務組件。類似于sku選擇，優惠券選擇，省市縣選擇 等。
Vant 之后會不斷豐富業務組件。從下面的不完整規劃圖可以看到，我們會把適用于不同業務場景的組件進行整理，逐漸完善成一個大的電商商城組件體系。羅列的大部分組件都已經在整理，近期會補充到 Vant 中。
在商品頁，選擇商品規格進行購買是一個常見的業務場景。商品可以有多層級多種類sku，再考慮常見的限購、庫存展示、購買留言、sku對應展示圖片等功能，整個商品規格選擇過程會變得很復雜。Vant 提供的 Sku 組件，通過指定數據傳入后，即可滿足上述所有需求。
常見的購買過程中，數量選擇只支持通過點按加減來更改購買數量。但是在需要大量購買的場景下，手動輸入購買數量會更方便用戶操作，我們將 Sku 組件的購買數量支持了用戶直接輸入數字。同時，在用戶輸入時，會根據限購數量自動判斷是否可以購買，并進行購買數量調節。
商品留言方面，Sku 組件提供了各種形式的商品留言支持，包括身份證、文本、電話、日期、時間、郵件。支持必填商品留言的展示與校驗。
Vant 提供了常見的省市縣選擇功能，將指定數據格式的省市縣列表數據傳入后，即可展示。Area 支持少于三列的選擇方式，參數 columnsNum 可指定 Area 需要展示的列數，滿足特殊場景下，只需要選擇省或者省市的情況。
Area 對外提供了 cancel，confirm 事件。開發者在代碼中監聽此事件，即可捕捉到用戶的操作，并進行相應的處理。
3、Coupon 優惠券選擇器優惠券選擇器提供了優惠券單元格和優惠券選擇功能。
優惠券單元格只需傳入優惠券列表和當前使用的優惠券即可正確展示。使用 editable 參數可以控制優惠券單元格是否展示右側箭頭，這個可以用于提醒用戶能否切換優惠券。
優惠券選擇模塊功能較多。優惠券選擇支持優惠碼兌換功能，用戶在填入優惠碼以后，點擊兌換，即會觸發 exchange 事件。開發者在代碼中監聽此事件，可以實現自己的優惠碼兌換。同時，優惠券選擇列表支持優惠券可用和不可用的展示，對優惠券不同狀態不同的展示，對用戶更加友好。
在近期，優惠券選擇器會支持開發者自由替換優惠券選擇列表中，每項優惠券的展示方式。
近期，我們會發布地址選擇組件，完善 Vant 組件在地址管理方面的功能。
以下是一個基于 Vant 搭建的商城
demo，數據通過mock，生成的完整的購物流程。搭配優惠促銷活動和用戶管理界面，一個簡單的買家商城就完成了。
Vant 現在還有很多不足。業務組件才剛起步，不夠完善，需要補充更多業務組件到 Vant 中。缺乏英文文檔以及對 flow / typescript 的支持。期望得到大家的批評和建議，一起建立一個更好的 Vant。
完整代碼請移步 github，使用指南請移步文檔網站。
本文首發于有贊技術博客。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88720.html
摘要：前端日報精選是如何工作的內存管理如何處理個常見的內存泄漏譯中的面向對象原型原型鏈繼承源碼事件機制考拉升級經驗掘金中文第期你知道編譯與解釋的區別嗎視頻在白鷺引擎中的實踐王澤變量自定義屬性使用指南眾成翻譯禁止手機虛擬鍵盤彈出做 2017-09-27 前端日報 精選 JavaScript是如何工作的：內存管理 + 如何處理4個常見的內存泄漏(譯) js中的面向對象、原型、原型鏈、繼承Vue....
摘要：是有贊前端團隊維護的移動端組件庫，提供了一整套基礎組件和業務組件。一關于距離首次發布剛好過去了半年時間，在這半年時間里團隊廣泛吸納社區的反饋和建議，持續對組件進行打磨優化，使得逐漸成長為一個輕量可靠的移動端組件庫。 Vant 是有贊前端團隊維護的移動端 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant 可以快速搭建出風格統一的頁面，提升開發效率。 showImg(...
Element iView Vuex Mint UI Vant cube-ui，對比六大 vue ui 組件庫，選中最適合的那個。 Element(pc) 介紹 & 版本 餓了么前端團隊開發的桌面端組件庫，當前最新版本：2.4.8 Star：32.067k 項目特色 團隊維護 支持三個版本：vue、react、angular 支持 Nuxt.js 常規支持：多語言、自定義主題、按需引入、內置...
摘要：導讀記錄一次基于原有的后端構建移動端商城，參照已有的安卓應用設計圖開發。 導讀 記錄一次基于原有的后端api構建移動端商城，參照已有的安卓應用UI設計圖開發。 技術選型 后端 Spring Cloud OAuth2 + Spring Cloud Eureka + Spring Boot 前端 Vue + Vue Router + Vue CLI3 + Vant ；移動商城從技術選型到項...
摘要：前言一個集微信公眾號商城小程序商城商城后臺的一個開源項目，后臺是基于開發的，是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發多公眾號管理配置簡單。微信小程序項目下載整個包之后，進行根目錄文件夾。 前言 一個集微信公眾號商城/小程序商城/商城后臺的一個開源項目，后臺是基于WeiPHP5.0開發的，WeiPHP是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發,多...
閱讀 1967·2021-11-22 15:33
閱讀 3005·2021-11-18 10:02
閱讀 2612·2021-11-08 13:16
閱讀 1623·2021-10-09 09:57
閱讀 1372·2021-09-30 09:47
閱讀 2008·2019-08-29 13:05
閱讀 3071·2019-08-29 12:46
閱讀 1010·2019-08-29 12:19
