diff --git a/packages/vant/docs/markdown/faq.zh-CN.md b/packages/vant/docs/markdown/faq.zh-CN.md new file mode 100644 index 000000000..9c1b5ac84 --- /dev/null +++ b/packages/vant/docs/markdown/faq.zh-CN.md @@ -0,0 +1,63 @@ +# 常见问题 + +### 如何自定义 Vant 组件的样式？ + +#### 1. 主题定制 + +Vant 基于 CSS 变量提供了主题定制的能力，可以对组件样式进行统一修改，详见 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件。 + +#### 2. 覆盖默认样式 + +如果主题定制不能满足你的需求，也可以通过**自定义样式类**来覆盖默认样式，参考下面的示例： + +```html + + + +``` + +### 在 HTML 中无法正确渲染组件？ + +在 HTML 中使用 Vant 组件时，你可能会碰到部分示例代码无法正确渲染的情况，比如下面的用法： + +```html + + + + +``` + +这是因为 HTML 并不支持自闭合的自定义元素，也就是说 `` 这样的语法是不被识别的，使用完整的闭合标签可以避免这个问题： + +```html + + + + +``` + +在单文件组件、字符串模板和 JSX 中可以使用自闭合的自定义元素，因此不会出现这个问题。 + +### 在 iOS 上点击组件时，无法触发点击反馈效果？ + +这是因为 iOS Safari 默认不会触发 `:active` 伪类，解决方法是在 `body` 标签上添加一个空的 `ontouchstart` 属性： + +```html + + ... + +``` + +参考链接：[stackoverflow - :active pseudo-class doesn't work in mobile safari](https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490) diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md index c5621f6f7..bbebac2a8 100644 --- a/packages/vant/docs/markdown/quickstart.zh-CN.md +++ b/packages/vant/docs/markdown/quickstart.zh-CN.md @@ -186,55 +186,3 @@ app.use(Vant); ``` > Tips: 配置按需引入后，将不允许直接导入所有组件。 - -## 常见问题 - -### 如何自定义 Vant 组件的样式？ - -#### 1. 主题定制 - -Vant 基于 CSS 变量提供了主题定制的能力，可以对组件样式进行统一修改，详见 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件。 - -#### 2. 覆盖默认样式 - -如果主题定制不能满足你的需求，也可以通过**自定义样式类**来覆盖默认样式，参考下面的示例： - -```html - - - -``` - -### 在 HTML 中无法正确渲染组件？ - -在 HTML 中使用 Vant 组件时，你可能会碰到部分示例代码无法正确渲染的情况，比如下面的用法： - -```html - - - - -``` - -这是因为 HTML 并不支持自闭合的自定义元素，也就是说 `` 这样的语法是不被识别的，使用完整的闭合标签可以避免这个问题： - -```html - - - - -``` - -在单文件组件、字符串模板和 JSX 中可以使用自闭合的自定义元素，因此不会出现这个问题。 diff --git a/packages/vant/vant.config.js b/packages/vant/vant.config.js index 720b4631b..56f722e33 100644 --- a/packages/vant/vant.config.js +++ b/packages/vant/vant.config.js @@ -76,6 +76,10 @@ module.exports = { path: 'advanced-usage', title: '进阶用法', }, + { + path: 'faq', + title: '常见问题', + }, { path: 'changelog', title: '更新日志',