Vant4 常見問題

2023-02-16 17:53 更新

如何自定義 Vant 組件的樣式？

1. 主題定制

Vant 基于 CSS 變量提供了主題定制的能力，可以對(duì)組件樣式進(jìn)行統(tǒng)一修改，詳見 ConfigProvider 全局配置 組件。

2. 覆蓋默認(rèn)樣式

如果主題定制不能滿足你的需求，也可以通過自定義樣式類來覆蓋默認(rèn)樣式，參考下面的示例：

<template>
  <van-button class="my-button">按鈕</van-button>
</template>

<style>
  /** 覆蓋 Button 最外層元素的樣式 */
  .my-button {
    width: 200px;
  }

  /** 覆蓋 Button 內(nèi)部子元素的樣式 */
  .my-button .van-button__text {
    color: red;
  }
</style>

在 HTML 中無(wú)法正確渲染組件？

在 HTML 中使用 Vant 組件時(shí)，你可能會(huì)碰到部分示例代碼無(wú)法正確渲染的情況，比如下面的用法：

<van-cell-group>
  <van-cell title="單元格" value="內(nèi)容" />
  <van-cell title="單元格" value="內(nèi)容" />
</van-cell-group>

這是因?yàn)?HTML 并不支持自閉合的自定義元素，也就是說 ?<van-cell />? 這樣的語(yǔ)法是不被識(shí)別的，使用完整的閉合標(biāo)簽可以避免這個(gè)問題：

<van-cell-group>
  <van-cell title="單元格" value="內(nèi)容"></van-cell>
  <van-cell title="單元格" value="內(nèi)容"></van-cell>
</van-cell-group>

在單文件組件、字符串模板和 JSX 中可以使用自閉合的自定義元素，因此不會(huì)出現(xiàn)這個(gè)問題。

在 iOS 上點(diǎn)擊組件時(shí)，無(wú)法觸發(fā)點(diǎn)擊反饋效果？

這是因?yàn)?iOS Safari 默認(rèn)不會(huì)觸發(fā) ?:active? 偽類，解決方法是在 ?body? 標(biāo)簽上添加一個(gè)空的 ?ontouchstart? 屬性：

<body ontouchstart="">
  ...
</body>

參考鏈接：stackoverflow - :active pseudo-class doesn't work in mobile safari

為什么沒有 Select 組件？

Select 是桌面端常用的組件，但它的交互形式不適合移動(dòng)端。

在移動(dòng)端，我們推薦使用 Picker 選擇器組件 作為代替。

是否支持在 uni-app 中使用？

Vant 所有組件都是基于 Vue 框架實(shí)現(xiàn)的，沒有針對(duì) uni-app 進(jìn)行適配，因此不保證各個(gè)組件在 uni-app 下的可用性。

如果你在 uni-app 中使用 Vant 遇到問題，建議向 uni-app 進(jìn)行反饋。

部分組件無(wú)法在桌面端進(jìn)行操作？

參見桌面端適配。

如何進(jìn)行移動(dòng)端響應(yīng)式適配？

參見瀏覽器適配。


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)