vant UI 組件庫(kù)是有贊前端團(tuán)隊(duì)開發(fā)的一個(gè) Vue 組件庫(kù)懈凹，提供了一整套的 UI 基礎(chǔ)組件和業(yè)務(wù)組件弓柱，通過(guò) vant 可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面沟堡。
官方地址：vant UI 組件庫(kù)
安裝
- 安裝 vant 組件庫(kù)：
npm i @vant/weapp -S --production
- 修改 app.json
將 app.json 中的 "style": "v2" 去除，小程序的新版基礎(chǔ)組件強(qiáng)行加上了許多樣式矢空，難以覆蓋航罗，不關(guān)閉將造成部分組件樣式混亂。
- 本地設(shè)置勾選 npm 模塊屁药。
勾選 npm模塊.png
- 構(gòu)建 npm
工具 -> 構(gòu)建 npm
使用
- 相應(yīng) json 頁(yè)面引入組件
"usingComponents": {
"van-circle": "@vant/weapp/circle/index"
}
- 使用
<van-circle value="{{ 30 }}" text="text" />
效果：
van-circle.png
使用 vant 內(nèi)置樣式
內(nèi)置樣式：https://vant-contrib.gitee.io/vant-weapp/#/common
Vant 中默認(rèn)包含了一些常用樣式粥血，可以直接通過(guò) className 的方式使用。
- app.wxss 中引入
@import 'miniprogram_npm/@vant/weapp/common/index.wxss';
- 使用
<!-- 單行超出省略 -->
<view class="van-ellipsis" style="width:100px">
這是一段寬度限制 250px 的文字酿箭，后面的內(nèi)容會(huì)省略复亏。
</view>
<!-- 最多顯示兩行 -->
<view class="van-multi-ellipsis--l2">
這是一段最多顯示兩行的文字，后面的內(nèi)容會(huì)省略缭嫡。
</view>
<!-- 最多顯示三行 -->
<view class="van-multi-ellipsis--l3">
這是一段最多顯示三行的文字缔御，后面的內(nèi)容會(huì)省略。
</view>
添加1px 邊框妇蛀，為元素添加 Retina 屏幕下的 1px 邊框（即 hairline）耕突，基于偽類 transform 實(shí)現(xiàn)。如果不是基于偽類實(shí)現(xiàn)的评架，則我們?cè)谔砑拥?1px 邊框在 Retina 下默認(rèn)是 2px 眷茁。
<!-- 上下邊框 -->
<view class="van-hairline--top-bottom"></view>
