Vant4 常見問題

2023-02-16 17:53 更新

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

1. 主題定制

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

2. 覆蓋默認樣式

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

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

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

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

在 HTML 中無法正確渲染組件？

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

<van-cell-group>
  <van-cell title="單元格" value="內容" />
  <van-cell title="單元格" value="內容" />
</van-cell-group>

這是因為 HTML 并不支持自閉合的自定義元素，也就是說 ?<van-cell />? 這樣的語法是不被識別的，使用完整的閉合標簽可以避免這個問題：

<van-cell-group>
  <van-cell title="單元格" value="內容"></van-cell>
  <van-cell title="單元格" value="內容"></van-cell>
</van-cell-group>

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

在 iOS 上點擊組件時，無法觸發(fā)點擊反饋效果？

這是因為 iOS Safari 默認不會觸發(fā) ?:active? 偽類，解決方法是在 ?body? 標簽上添加一個空的 ?ontouchstart? 屬性：

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

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

為什么沒有 Select 組件？

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

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

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

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

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

部分組件無法在桌面端進行操作？

參見桌面端適配。

如何進行移動端響應式適配？

參見瀏覽器適配。


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號