Skip to content

Commit

Permalink
docs: fix date-picker range endtag (#288)
Browse files Browse the repository at this point in the history
  • Loading branch information
zhenyuWang authored Jan 16, 2022
1 parent b442792 commit 4cf794f
Show file tree
Hide file tree
Showing 18 changed files with 131 additions and 134 deletions.
50 changes: 25 additions & 25 deletions packages/varlet-ui/docs/cli.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
# @varlet/cli

开箱即用的`Vue3组件库`快速成型工具,提供了一系列命令和工具去解决组件库开发上的问题
开箱即用的 `Vue3组件库` 快速成型工具,提供了一系列命令和工具去解决组件库开发上的问题

### 特性

- 1.开箱即用的组件库开发环境
- 2.开箱即用的组件库编译工具,支持导出`esm``umd`两种模块代码
- 2.开箱即用的组件库编译工具,支持导出 `esm``umd` 两种模块代码
- 3.基于配置文件的组件库文档站点,支持百度统计和主题定制
- 4.支持`单文件组件(sfc)``tsx,jsx`两种风格的组件库编写风格
- 4.支持 `单文件组件(sfc)``tsx,jsx` 两种风格的组件库编写风格
- 5.开箱即用的代码检查工具
- 6.开箱即用的单元测试工具
- 7.开箱即用的代码发布工具,发布到npm和github,并自动生成更新日志
- 8.支持`Typescript`
- 9.支持`暗黑模式`
- 10.基于`pnpm`
- 7.开箱即用的代码发布工具,发布到 npm 和 github,并自动生成更新日志
- 8.支持 `Typescript`
- 9.支持 `暗黑模式`
- 10.基于 `pnpm`

### 快速开始

`@varlet/cli`内置了`单文件组件(sfc)``tsx, jsx`两种风格的组件库项目模板,可以通过`gen`命令直接生成。
帮助用户直接进入组件本身的开发,推荐使用`pnpm`作为包管理工具。
`@varlet/cli` 内置了 `单文件组件(sfc)``tsx, jsx` 两种风格的组件库项目模板,可以通过 `gen` 命令直接生成。
帮助用户直接进入组件本身的开发,推荐使用 `pnpm` 作为包管理工具。

```shell
# 安装命令行工具
Expand All @@ -36,7 +36,7 @@ pnpm dev

### 配置文件

项目根目录下的`varlet.config.js`用来管理整个组件库项目的具体细节
项目根目录下的 `varlet.config.js` 用来管理整个组件库项目的具体细节

| 参数 | 说明 | 类型 | 默认值 |
| ----- | -------------- | -------- | ---------- |
Expand All @@ -45,32 +45,32 @@ pnpm dev
| `name` | 组件库全名 | _string_ | `Varlet` |
| `namespace` | 组件库命名空间, 会作为组件前缀 | _string_ | `var` |
| `title` | 文档中组件库的标题 | _string_ | `VARLET` |
| `logo` | 文档中组件库的logo | _string_ | `-` |
| `logo` | 文档中组件库的 logo | _string_ | `-` |
| `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |
| `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |
| `themes` | 文档主题 | _SiteThemes_ | `-` |
| `darkThemes` | 暗黑模式文档主题 | _SiteThemes_ | `-` |
| `highlight` | 文档代码片段样式相关 | _SiteHighlight_ | `-` |
| `analysis` | 文档统计相关 | _SiteAnalysis_ | `-` |
| `pc` | pc端文档结构配置 | _SitePC_ | `-` |
| `mobile` | mobile端文档结构配置 | _SiteMobile_ | `-` |
| `pc` | pc 端文档结构配置 | _SitePC_ | `-` |
| `mobile` | mobile 端文档结构配置 | _SiteMobile_ | `-` |
| `moduleCompatible` | 模块兼容配置 | _Record<string, string>_ | `-` |

#### 模块适配对象

一些外部依赖可能需要进行模块语法的适配,以达到可以正确编译到`commonjs``esmodule`的目的,例如`dayjs``esmodule`写法是
一些外部依赖可能需要进行模块语法的适配,以达到可以正确编译到 `commonjs``esmodule` 的目的,例如 `dayjs``esmodule` 写法是

```js
import dayjs from 'dayjs/esm'
```

而为了构建`commonjs`时的写法是
而为了构建 `commonjs` 时的写法是

```js
import * as dayjs from 'dayjs'
```

在项目中我们拥抱`esmodule`模块使用第一种写法,并做如下配置进行适配
在项目中我们拥抱 `esmodule` 模块使用第一种写法,并做如下配置进行适配

```js
// varlet.config.js
Expand All @@ -83,7 +83,7 @@ module.exports = {

#### SiteThemes

主题变量相关,由于默认的主题变量可能时常修改,以`varlet`官方文档的主题为准
主题变量相关,由于默认的主题变量可能时常修改,以 `varlet` 官方文档的主题为准

| 参数 |
| ----- |
Expand Down Expand Up @@ -116,7 +116,7 @@ module.exports = {

| 参数 | 说明 | 类型 | 默认值 |
| ----- | -------------- | -------- | ---------- |
| `style` | highlight的css地址 | _string_ | `-` |
| `style` | highlight 的 css 地址 | _string_ | `-` |

#### SiteAnalysis

Expand Down Expand Up @@ -259,7 +259,7 @@ varlet-cli gen <projectName>

### babel

`babel`进行配置,首先在`package.json`中指定目标浏览器
`babel` 进行配置,首先在 `package.json` 中指定目标浏览器

```json
{
Expand All @@ -270,7 +270,7 @@ varlet-cli gen <projectName>
}
```

创建`babel.config,js`
创建 `babel.config,js`

```js
// babel.config.js
Expand All @@ -290,7 +290,7 @@ module.exports = {

#### git-hook

`husky``lint-staged`配合`eslint``stylelint``varlet-cli commit-lint`做commit前的检查`package.json`配置如下
`husky``lint-staged` 配合 `eslint``stylelint``varlet-cli commit-lint` 做 commit 前的检查`package.json` 配置如下

```json
{
Expand Down Expand Up @@ -332,7 +332,7 @@ module.exports = {
}
```

创建`.prettierignore`
创建 `.prettierignore`

```text
// .prettierignore
Expand All @@ -347,7 +347,7 @@ src/*/__tests__/**

### typescript

创建`tsconfig.json`
创建 `tsconfig.json`

```json
{
Expand All @@ -367,5 +367,5 @@ src/*/__tests__/**

#### 发布前注意

- 1.npm的仓库源必须指向npm官方镜像
- 2.执行npm login进行登录
- 1.npm 的仓库源必须指向 npm 官方镜像
- 2.执行 npm login 进行登录
4 changes: 2 additions & 2 deletions packages/varlet-ui/docs/openSourceGuide.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
首先感谢您有兴趣加入我们的开源项目,以下介绍一些注意事项。

### 快速开始
包管理的安装和link依赖都必须使用[pnpm](https://pnpm.io/)
包管理的安装和link依赖都必须使用 [pnpm](https://pnpm.io/)
首先 fork 仓库,基于 dev 分支进行开发,在项目根目录下。
node 版本 16+。

Expand All @@ -19,5 +19,5 @@ pnpm dev

### 加入我们

如果您想参与组件库的开发和维护,可以在[issue](https://github.com/varletjs/varlet/issues)中留下您的邮箱,
如果您想参与组件库的开发和维护,可以在 [issue](https://github.com/varletjs/varlet/issues) 中留下您的邮箱,
我们会给您发送邀请邮件。
2 changes: 1 addition & 1 deletion packages/varlet-ui/docs/quickstart.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
### Webpack/Vite

```shell
# 通过 npm 或 yarn 安装 或 pnpm安装
# 通过 npm 或 yarn 安装 或 pnpm 安装

# npm
npm i @varlet/ui -S
Expand Down
3 changes: 1 addition & 2 deletions packages/varlet-ui/src/badge/docs/zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export default {
| `max-value` | 徽标中显示的最大值,当 `value` 大于 `max-value` 时会显示 `max-value+` (当 `value``max-value` 都存在时生效)| _number_ | `-` |
| `position` | 徽标标签中有其他标签时定义徽标在其他标签上的位置,可选值 `right-top` `top-bottom` `left-top` `left-bottom` | _string_ | `right-top` |
| `color` | 自定义徽标颜色 | _string_ | `-` |
| `icon` | 自定义徽标中图标的内容(优先级高于`value`| _string_ | `-` |
| `icon` | 自定义徽标中图标的内容(优先级高于 `value` | _string_ | `-` |

### 插槽

Expand All @@ -168,4 +168,3 @@ export default {
| `--badge-success-color` | `var(--color-success)`|
| `--badge-warning-color` | `var(--color-warning)`|
| `--badge-info-color` | `var(--color-info)`|

6 changes: 3 additions & 3 deletions packages/varlet-ui/src/collapse/docs/zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default {
const changeHandle = (val) => {
console.log(val)
}

return {
value,
changeHandle
Expand Down Expand Up @@ -69,7 +69,7 @@ import { ref } from 'vue'
export default {
setup() {
const value = ref('')

return {
value
}
Expand Down Expand Up @@ -162,7 +162,7 @@ export default {
| ----- | -------------- | -------- |
| `default` | 面板的内容 | `-` |
| `title` | 面板的标题 | `-` |
| `icon` | 自定义右侧icon | `-` |
| `icon` | 自定义右侧 icon | `-` |

### 样式变量
以下为组件使用的 css 变量,可以使用 [StyleProvider 组件](#/zh-CN/style-provider)进行样式定制
Expand Down
30 changes: 15 additions & 15 deletions packages/varlet-ui/src/image/docs/zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
### 介绍

组件提供了更方便的尺寸,填充模式,圆角的设置方式,水波效果增强图片点击交互体验。
支持`懒加载``loading 图片``error 图片`、应用 `Lazy` 指令的默认设置。
支持 `懒加载``loading 图片``error 图片`、应用 `Lazy` 指令的默认设置。

### 引入

Expand All @@ -25,32 +25,32 @@ createApp().use(Image)
```html
<var-image width="85px" height="85px" src="https://varlet.gitee.io/varlet-ui/cat.jpg" />

<var-image
width="85px"
<var-image
width="85px"
height="85px"
fit="cover"
src="https://varlet.gitee.io/varlet-ui/cat.jpg"
fit="cover"
src="https://varlet.gitee.io/varlet-ui/cat.jpg"
/>

<var-image
<var-image
width="85px"
height="85px"
height="85px"
fit="contain"
src="https://varlet.gitee.io/varlet-ui/cat.jpg"
src="https://varlet.gitee.io/varlet-ui/cat.jpg"
/>

<var-image
<var-image
width="85px"
height="85px"
fit="none"
src="https://varlet.gitee.io/varlet-ui/cat.jpg"
/>

<var-image
<var-image
width="85px"
height="85px"
height="85px"
fit="scale-down"
src="https://varlet.gitee.io/varlet-ui/cat.jpg"
src="https://varlet.gitee.io/varlet-ui/cat.jpg"
/>
```

Expand Down Expand Up @@ -89,7 +89,7 @@ createApp().use(Image)
### 设置懒加载状态图片

```html
<var-image
<var-image
lazy
loading="https://xxx.xxx/loading.png"
error="https://xxx.xxx/error.png"
Expand Down Expand Up @@ -127,8 +127,8 @@ export default {

### 属性

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `src` | 图片地址 | _string_ | `-` |
| `fit` | 填充模式, 可选值为 `fill` `contain` `cover` `none` `scale-down` | _string_ | `fill` |
| `alt` | 替代文本 | _string_ | `-` |
Expand Down
34 changes: 17 additions & 17 deletions packages/varlet-ui/src/list/docs/zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ createApp().use(List)

### 基本使用

当检测到滚动容器滚动到底部底部时会触发`load`事件,并会设置`loading``true`,在加载结束时您需要手动设置`loading``false`,表示加载结束。
当检测到滚动容器滚动到底部底部时会触发 `load` 事件,并会设置 `loading``true`,在加载结束时您需要手动设置 `loading``false`,表示加载结束。

```html
<var-list
Expand All @@ -36,7 +36,7 @@ export default {
const loading = ref(false)
const finished = ref(false)
const list = reactive([])

const load = () => {
setTimeout(() => {
for (let i = 0; i < 20; i++) {
Expand All @@ -63,7 +63,7 @@ export default {

### 加载失败

您可以使用`v-model:error`手动设置错误状态,会展示错误提示,点击错误提示会帮您把`error`设置成`false`并再次触发`load`事件。
您可以使用 `v-model:error` 手动设置错误状态,会展示错误提示,点击错误提示会帮您把 `error` 设置成 `false` 并再次触发 `load` 事件。

```html
<var-list
Expand All @@ -85,7 +85,7 @@ export default {
const loading = ref(false)
const error = ref(false)
const list = reactive([])

const load = () => {
setTimeout(() => {
if (list.length === 40) {
Expand Down Expand Up @@ -115,12 +115,12 @@ export default {
### 提示文字

```html
<var-list
loading-text="正在努力输出"
finished-text="一滴都没有了"
error-text="出错了出错了"
:finished="finished"
v-model:loading="loading"
<var-list
loading-text="正在努力输出"
finished-text="一滴都没有了"
error-text="出错了出错了"
:finished="finished"
v-model:loading="loading"
@load="load"
>
<var-cell :key="item" v-for="item in list">
Expand All @@ -137,7 +137,7 @@ export default {
const loading = ref(false)
const finished = ref(false)
const list = reactive([])

const load = () => {
setTimeout(() => {
for (let i = 0; i < 20; i++) {
Expand All @@ -163,17 +163,17 @@ export default {
```

### 注意
我们是通过监听滚动容器的`scroll`事件检测是否触底并执行加载。
滚动容器是指最近的一个`overflow-y``auto`或者`scroll`的元素。
当您设置一个元素的`overflow-x`为除了`visible`以外的值时,浏览器为了维护一个`bfc`的结构会使您的`overflow-y`修正为`auto`
我们是通过监听滚动容器的 `scroll` 事件检测是否触底并执行加载。
滚动容器是指最近的一个 `overflow-y``auto` 或者 `scroll` 的元素。
当您设置一个元素的 `overflow-x` 为除了 `visible` 以外的值时,浏览器为了维护一个 `bfc` 的结构会使您的 `overflow-y` 修正为 `auto`
这时我们就会误认为这个元素也是一个滚动容器,注意规避。

## API

### 属性

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `v-model:loading` | 加载状态 | _boolean_ | `false` |
| `v-model:error` | 错误状态 | _boolean_ | `false` |
| `immediate-check` | 是否在组件初始化时立刻检测位置 | _boolean_ | `true` |
Expand All @@ -187,7 +187,7 @@ export default {

| 方法名 | 说明 | 参数 |
| --- | --- | --- |
| `check` | 触发位置检查, 触底触发load事件| `-` |
| `check` | 触发位置检查, 触底触发 load 事件| `-` |

### 事件

Expand Down
2 changes: 1 addition & 1 deletion packages/varlet-ui/src/loading/docs/zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export default {
| `description` | `loading` 的描述文字 | `-` |

### 样式变量
以下为组件使用的 css 变量,可以使用[StyleProvider组件] (#/zh-CN/style-provider)进行样式定制。
以下为组件使用的 css 变量,可以使用[ StyleProvider 组件] ( #/zh-CN/style-provider )进行样式定制。

| 变量名 | 默认值 |
| --- | --- |
Expand Down
Loading

0 comments on commit 4cf794f

Please sign in to comment.