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