Vant 基于 CSS 变量提供了主题定制的能力,可以对组件样式进行统一修改,详见 ConfigProvider 全局配置 组件。
如果主题定制不能满足你的需求,也可以通过自定义样式类来覆盖默认样式,参考下面的示例:
<template>
<van-button class="my-button">按钮</van-button>
</template>
<style>
.my-button {
width: 200px;
}
.my-button .van-button__text {
color: red;
}
</style>
在 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 中可以使用自闭合的自定义元素,因此不会出现这个问题。
这是因为 iOS Safari 默认不会触发 :active
伪类,解决方法是在 body
标签上添加一个空的 ontouchstart
属性:
<body ontouchstart="">
...
</body>
参考链接:stackoverflow - :active pseudo-class doesn"t work in mobile safari
Select 是桌面端常用的组件,但它的交互形式不适合移动端。
在移动端,我们推荐使用 Picker 选择器组件 作为代替。
Vant 所有组件都是基于 Vue 框架实现的,没有针对 uni-app 进行适配,因此不保证各个组件在 uni-app 下的可用性。
如果你在 uni-app 中使用 Vant 遇到问题,建议向 uni-app 进行反馈。
参见桌面端适配。
参见浏览器适配。
介绍加载图标,用于表示加载中的过渡状态。引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。import { createApp }...
介绍感谢你使用 Vant。以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前,请先花几分钟时间阅读以下...
介绍Vant 采用中文作为默认语言,同时支持多语言切换,请按照下方教程进行国际化设置。使用方法多语言切换Vant 通过 Locale 组件...
介绍底部弹起的模态面板,包含与当前情境相关的多个选项。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册...
介绍选项卡组件,用于在不同的内容区域之间进行切换。实例演示引入通过以下方式来全局注册组件,更多注册方式请参考组件注册。im...