blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore: prettier markdown files

Browse Source
This commit is contained in:
chenjiahan 2020-04-02 15:39:06 +08:00
parent 2fb5cca49a
commit d48cd73adb
10 changed files with 105 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/markdown/home.en-US.md
View File

@ -8,14 +8,14 @@
### Features ### Features
* 60+ Reusable components - 60+ Reusable components
* 90% Unit test coverage - 90% Unit test coverage
* Extensive documentation and demos - Extensive documentation and demos
* Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) - Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
* Support Custom Theme - Support Custom Theme
* Support i18n - Support i18n
* Support TS - Support TS
* Support SSR - Support SSR
### Quickstart ### Quickstart
@ -31,18 +31,18 @@ Modern browsers and Android 4.0+, iOS 8.0+.
### Ecosystem ### Ecosystem
| Project | Description | | Project | Description |
|-----|------| | ------------------------------------------------------------------------------------------- | ------------------------------ |
| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection | | [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection |
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI | | [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library | | [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons | | [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers | | [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
### Links ### Links
* [Feedback](https://github.com/youzan/vant/issues) - [Feedback](https://github.com/youzan/vant/issues)
* [Changelog](#/en-US/changelog) - [Changelog](#/en-US/changelog)
### LICENSE ### LICENSE

34
docs/markdown/home.zh-CN.md
View File

@ -8,14 +8,14 @@
### 特性 ### 特性
* 60+ 高质量组件 - 60+ 高质量组件
* 90% 单元测试覆盖率 - 90% 单元测试覆盖率
* 完善的中英文文档和示例 - 完善的中英文文档和示例
* 支持按需引入 - 支持按需引入
* 支持主题定制 - 支持主题定制
* 支持国际化 - 支持国际化
* 支持 TS - 支持 TS
* 支持 SSR - 支持 SSR
### 快速上手 ### 快速上手
@ -47,19 +47,19 @@
### 生态 ### 生态
| 项目 | 描述 | | 项目 | 描述 |
|-----|------| | ------------------------------------------------------------------------------------------- | -------------------------- |
| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 | | [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 |
| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 | | [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 |
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 | | [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 | | [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 | | [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
### 链接 ### 链接
* [意见反馈](https://github.com/youzan/vant/issues) - [意见反馈](https://github.com/youzan/vant/issues)
* [更新日志](#/zh-CN/changelog) - [更新日志](#/zh-CN/changelog)
* [码云镜像](https://gitee.com/organizations/vant-contrib) - [码云镜像](https://gitee.com/organizations/vant-contrib)
### 开源协议 ### 开源协议

23
docs/markdown/quickstart.en-US.md
View File

@ -78,7 +78,7 @@ import { Button } from 'vant';
import Button from 'vant/lib/button'; import Button from 'vant/lib/button';
import 'vant/lib/button/style'; import 'vant/lib/button/style';
``` ```
### 3. Import all components ### 3. Import all components
```js ```js
@ -97,7 +97,10 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
```html ```html
<!-- import style --> <!-- import style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css"> <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css"
/>
<!-- import script --> <!-- import script -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
@ -107,7 +110,7 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
// Render the Button component // Render the Button component
new Vue({ new Vue({
el: '#app', el: '#app',
template: `<van-button>Button</van-button>` template: `<van-button>Button</van-button>`,
}); });
// Call function component // Call function component
@ -131,13 +134,13 @@ postcss config example:
```js ```js
module.exports = { module.exports = {
plugins: { plugins: {
'autoprefixer': { autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'] browsers: ['Android >= 4.0', 'iOS >= 8'],
}, },
'postcss-pxtorem': { 'postcss-pxtorem': {
rootValue: 37.5, rootValue: 37.5,
propList: ['*'] propList: ['*'],
} },
} },
} };
``` ```

45
docs/markdown/quickstart.zh-CN.md
View File

@ -41,7 +41,6 @@ yarn add vant
- 配置基于 TypeScript 的工程 - 配置基于 TypeScript 的工程
- 配置自定义主题色方案 - 配置自定义主题色方案
## 引入组件 ## 引入组件
### 方式一. 自动按需引入组件 (推荐) ### 方式一. 自动按需引入组件 (推荐)
@ -115,21 +114,24 @@ Vue.use(Vant);
```html ```html
<!-- 引入样式文件 --> <!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css"> <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 --> <!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js"></script>
<script> <script>
// 在 #app 标签下渲染一个按钮组件 // 在 #app 标签下渲染一个按钮组件
new Vue({ new Vue({
el: '#app', el: '#app',
template: `<van-button>按钮</van-button>` template: `<van-button>按钮</van-button>`,
}); });
// 调用函数组件，弹出一个 Toast // 调用函数组件，弹出一个 Toast
vant.Toast('提示'); vant.Toast('提示');
</script> </script>
``` ```
@ -149,15 +151,15 @@ Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，
```js ```js
module.exports = { module.exports = {
plugins: { plugins: {
'autoprefixer': { autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'] browsers: ['Android >= 4.0', 'iOS >= 8'],
}, },
'postcss-pxtorem': { 'postcss-pxtorem': {
rootValue: 37.5, rootValue: 37.5,
propList: ['*'] propList: ['*'],
} },
} },
} };
``` ```
> 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译 > 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译
@ -184,7 +186,10 @@ iPhone X 等机型底部存在底部指示条，指示条的操作区域与页
```html ```html
<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 --> <!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> <meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<!-- 开启 safe-area-inset-bottom 属性 --> <!-- 开启 safe-area-inset-bottom 属性 -->
<van-number-keyboard safe-area-inset-bottom /> <van-number-keyboard safe-area-inset-bottom />
@ -207,14 +212,14 @@ Vant 中的许多组件提供了实例方法，调用实例方法时，我们需
export default { export default {
data() { data() {
return { return {
checked: false checked: false,
}; };
}, },
// 注意：组件挂载后才能访问到 ref 对象 // 注意：组件挂载后才能访问到 ref 对象
mounted() { mounted() {
this.$refs.checkbox.toggle(); this.$refs.checkbox.toggle();
} },
} };
``` ```
## 常见问题 ## 常见问题
@ -230,7 +235,7 @@ export default {
</van-cell-group> </van-cell-group>
``` ```
这是因为 HTML 并不支持自闭合的自定义元素，也就是说 `<van-cell />` 这样的语法是不被识别的，使用完整的闭合标签可以避免这个问题： 这是因为 HTML 并不支持自闭合的自定义元素，也就是说 `<van-cell />` 这样的语法是不被识别的，使用完整的闭合标签可以避免这个问题：
```html ```html
<van-cell-group> <van-cell-group>

66
docs/markdown/style-guide.zh-CN.md
View File

@ -12,18 +12,18 @@
// bad // bad
export default { export default {
data: { data: {
foo: 'bar' foo: 'bar',
} },
} };
// good // good
export default { export default {
data () { data() {
return { return {
foo: 'bar' foo: 'bar',
} };
} },
} };
``` ```
### 单文件组件文件名称 ### 单文件组件文件名称
@ -78,16 +78,16 @@ components/
// bad // bad
export default { export default {
props: { props: {
'greeting-text': String 'greeting-text': String,
} },
}; };
// good // good
export default { export default {
props: { props: {
greetingText: String greetingText: String,
} },
} };
``` ```
```html ```html
@ -98,38 +98,16 @@ export default {
<welcome-message greeting-text="hi" /> <welcome-message greeting-text="hi" />
``` ```
### Props 换行
多个 Props 的元素应该分多行撰写，每个 Props 一行，闭合标签单起一行。
```html
<!-- bad -->
<my-component foo="a" bar="b" baz="c" />
<!-- good -->
<my-component
foo="a"
bar="b"
baz="c"
/>
```
### 指令缩写 ### 指令缩写
指令缩写，用 `:` 表示 `v-bind:` ，用 `@` 表示 `v-on:` 指令缩写，用 `:` 表示 `v-bind:` ，用 `@` 表示 `v-on:`
```html ```html
<!-- bad --> <!-- bad -->
<input <input v-bind:value="value" v-on:input="onInput" />
v-bind:value="value"
v-on:input="onInput"
>
<!-- good --> <!-- good -->
<input <input :value="value" @input="onInput" />
:value="value"
@input="onInput"
>
``` ```
### Props 顺序 ### Props 顺序
@ -175,7 +153,7 @@ export default {
destroyed() {}, destroyed() {},
methods: {} methods: {},
}; };
``` ```
@ -192,7 +170,7 @@ export default {
styles() { styles() {
// ... // ...
} },
}, },
methods: { methods: {
@ -202,8 +180,8 @@ export default {
onChange() { onChange() {
// ... // ...
} },
} },
}; };
``` ```
@ -213,14 +191,14 @@ export default {
```html ```html
<template> <template>
... ...
</template> </template>
<script> <script>
/* ... */ /* ... */
</script> </script>
<style> <style>
/* ... */ /* ... */
</style> </style>
``` ```

10
docs/markdown/theme.en-US.md
View File

@ -21,7 +21,6 @@ There are some basic variables below, all available variables could be found in
## How to custom theme ## How to custom theme
### Step 1: import less file ### Step 1: import less file
First you should import the less source file to your project. you can use babel-plugin-import to automatically import or just manually import less file. First you should import the less source file to your project. you can use babel-plugin-import to automatically import or just manually import less file.
@ -39,11 +38,11 @@ module.exports = {
libraryName: 'vant', libraryName: 'vant',
libraryDirectory: 'es', libraryDirectory: 'es',
// specify less file path // specify less file path
style: name => `${name}/style/less` style: (name) => `${name}/style/less`,
}, },
'vant' 'vant',
] ],
] ],
}; };
``` ```
@ -107,4 +106,3 @@ module.exports = {
}, },
}; };
``` ```

8
docs/markdown/theme.zh-CN.md
View File

@ -42,11 +42,11 @@ module.exports = {
libraryName: 'vant', libraryName: 'vant',
libraryDirectory: 'es', libraryDirectory: 'es',
// 指定样式路径 // 指定样式路径
style: name => `${name}/style/less` style: (name) => `${name}/style/less`,
}, },
'vant' 'vant',
] ],
] ],
}; };
``` ```

4
docs/site/mobile.js
View File

@ -49,7 +49,7 @@ Vue.mixin({
const locales = {}; const locales = {};
const camelizedName = camelize(name); const camelizedName = camelize(name);
Object.keys(i18n).forEach(key => { Object.keys(i18n).forEach((key) => {
locales[key] = { [camelizedName]: i18n[key] }; locales[key] = { [camelizedName]: i18n[key] };
}); });
@ -60,7 +60,7 @@ Vue.mixin({
// switch lang after routing // switch lang after routing
if (window.vueRouter) { if (window.vueRouter) {
window.vueRouter.afterEach(to => { window.vueRouter.afterEach((to) => {
const { lang } = to.meta || {}; const { lang } = to.meta || {};
if (lang) { if (lang) {

2
test/dom.ts
View File

@ -43,7 +43,7 @@ export function mockGetBoundingClientRect(
Element.prototype.getBoundingClientRect = <any>jest.fn(() => rect); Element.prototype.getBoundingClientRect = <any>jest.fn(() => rect);
return function() { return function () {
Element.prototype.getBoundingClientRect = originMethod; Element.prototype.getBoundingClientRect = originMethod;
}; };
} }

2
test/index.ts
View File

@ -9,7 +9,7 @@ Vue.component('transition', TransitionStub as any);
// promisify setTimeout // promisify setTimeout
export function later(delay: number = 0): Promise<void> { export function later(delay: number = 0): Promise<void> {
return new Promise(resolve => { return new Promise((resolve) => {
setTimeout(resolve, delay); setTimeout(resolve, delay);
}); });
} }