Merge branch 'dev' into next
This commit is contained in:
chenjiahan
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "create-vant-cli-app",
|
||||
"version": "2.0.0",
|
||||
"description": "Create Vant Cli App",
|
||||
"description": "Create Vant CLI App",
|
||||
"main": "lib/index.js",
|
||||
"bin": {
|
||||
"create-vant-cli-app": "./lib/index.js"
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
"author": "chenjiahan",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.14.21",
|
||||
"esbuild": "^0.14.29",
|
||||
"release-it": "^14.2.2",
|
||||
"typescript": "~4.5.2"
|
||||
},
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
# Vant Cli
|
||||
# Vant CLI
|
||||
|
||||
Vant Cli 是一个 Vue 组件库构建工具，通过 Vant Cli 可以快速搭建一套功能完备的 Vue 组件库。
|
||||
Vant CLI 是一个 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
|
||||
|
||||
### 特性
|
||||
|
||||
- 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
|
||||
- 基于约定的目录结构，自动生成优雅的文档站点和组件示例
|
||||
- 内置 ESlint、Stylelint 校验规则，提交代码时自动执行校验
|
||||
- 内置 ESLint、Stylelint 校验规则，提交代码时自动执行校验
|
||||
- 构建后的组件库默认支持按需引入、主题定制、Tree Shaking
|
||||
|
||||
### 快速上手
|
||||
|
||||
执行以下命令可以快速创建一个基于 Vant Cli 的项目：
|
||||
执行以下命令可以快速创建一个基于 Vant CLI 的项目：
|
||||
|
||||
```bash
|
||||
yarn create vant-cli-app
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# 更新日志
|
||||
|
||||
## v4.0.1
|
||||
|
||||
`2022-03-03`
|
||||
|
||||
- 支持复制示例代码到剪贴板
|
||||
- 修复官网更新日志的版本链接及 issue 链接异常的问题
|
||||
- 修复 ReDoS 安全问题
|
||||
|
||||
## v4.0.0
|
||||
|
||||
`2022-02-07`
|
||||
@@ -10,7 +18,7 @@
|
||||
- 使用 vite 代替 webpack 进行构建，移除了所有 webpack 相关依赖
|
||||
- 使用 esbuild 进行代码转义和压缩
|
||||
- babel preset 添加了 `cjs` 后缀，现在需要通过 `@vant/cli/preset.cjs` 引入
|
||||
- vant.config.js 重命名为 `vant.config.mjs`，由 commonJs 变更为 ESModule 格式
|
||||
- vant.config.js 重命名为 `vant.config.mjs`，由 CommonJS 变更为 ESModule 格式
|
||||
- 站点构建产物的目录由 `site` 调整为 `site-dist`
|
||||
- 不再支持 webpack.config.js 配置文件
|
||||
- 不再支持 less import 语法中使用波浪号
|
||||
@@ -471,7 +479,7 @@ yarn add sass
|
||||
|
||||
`2020-01-12`
|
||||
|
||||
- 支持自定义 Postcss 配置
|
||||
- 支持自定义 PostCSS 配置
|
||||
- 支持自定义 devServer 端口
|
||||
- 优化文档站点的 meta 字段
|
||||
- 新增 API 文档中的版本标签样式
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# 命令
|
||||
|
||||
Vant Cli 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。
|
||||
Vant CLI 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。
|
||||
|
||||
```json
|
||||
// package.json
|
||||
@@ -25,7 +25,7 @@ npx vant-cli dev
|
||||
|
||||
运行本地开发环境。
|
||||
|
||||
运行 dev 命令时，Vant Cli 会通过启动一个本地服务器，用于在开发过程中对文档和示例进行预览。
|
||||
运行 dev 命令时，Vant CLI 会通过启动一个本地服务器，用于在开发过程中对文档和示例进行预览。
|
||||
|
||||
### build
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
- [site.simulator.url](#sitesimulatorurl)
|
||||
- [site.htmlMeta](#sitehtmlmeta)
|
||||
- [site.enableVConsole](#siteenablevconsole)
|
||||
- [Postcss](#postcss)
|
||||
- [PostCSS](#postcss)
|
||||
- [默认配置](#-----1)
|
||||
- [browserslist](#browserslist)
|
||||
|
||||
@@ -335,13 +335,13 @@ module.exports = {
|
||||
|
||||
是否在 dev 时开启 [vConsole](https://github.com/Tencent/vConsole) 调试，用于移动端 debug。
|
||||
|
||||
## Postcss
|
||||
## PostCSS
|
||||
|
||||
通过根目录下的`postcss.config.js`文件可以对 Postcss 进行配置。
|
||||
通过根目录下的`postcss.config.js`文件可以对 PostCSS 进行配置。
|
||||
|
||||
### 默认配置
|
||||
|
||||
`vant-cli` 中默认的 Postcss 配置如下：
|
||||
`vant-cli` 中默认的 PostCSS 配置如下：
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## 源代码目录
|
||||
|
||||
基于 Vant Cli 搭建的组件库的基本目录结构如下所示：
|
||||
基于 Vant CLI 搭建的组件库的基本目录结构如下所示：
|
||||
|
||||
```
|
||||
project
|
||||
@@ -14,7 +14,7 @@ project
|
||||
│ ├─ home.md # 文档首页
|
||||
│ └─ changelog.md # 更新日志
|
||||
│
|
||||
├─ vant.config.mjs # Vant Cli 配置文件
|
||||
├─ vant.config.mjs # Vant CLI 配置文件
|
||||
├─ package.json
|
||||
└─ README.md
|
||||
```
|
||||
@@ -83,7 +83,7 @@ button
|
||||
|
||||
### 生成类型声明
|
||||
|
||||
当组件库使用 TS 编写，且根目录下存在 `tsconfig.declaration.json` 文件，Vant Cli 会自动生成 `.d.ts` 类型声明文件。
|
||||
当组件库使用 TS 编写，且根目录下存在 `tsconfig.declaration.json` 文件，Vant CLI 会自动生成 `.d.ts` 类型声明文件。
|
||||
|
||||
`tsconfig.declaration.json` 的参考格式如下：
|
||||
|
||||
|
||||
@@ -47,8 +47,8 @@
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.16.0",
|
||||
"@babel/preset-typescript": "^7.16.0",
|
||||
"@docsearch/css": "3.0.0-alpha.50",
|
||||
"@docsearch/js": "3.0.0-alpha.50",
|
||||
"@docsearch/css": "^3.0.0",
|
||||
"@docsearch/js": "^3.0.0",
|
||||
"@types/jest": "^27.0.3",
|
||||
"@vant/eslint-config": "^3.3.2",
|
||||
"@vant/markdown-vetur": "^2.2.0",
|
||||
@@ -62,7 +62,7 @@
|
||||
"commander": "^8.3.0",
|
||||
"consola": "^2.15.3",
|
||||
"conventional-changelog": "^3.1.24",
|
||||
"esbuild": "^0.14.21",
|
||||
"esbuild": "^0.14.29",
|
||||
"eslint": "^8.1.0",
|
||||
"execa": "^5.1.1",
|
||||
"fast-glob": "^3.2.7",
|
||||
@@ -86,7 +86,7 @@
|
||||
"stylelint": "^13.0.0",
|
||||
"transliteration": "^2.2.0",
|
||||
"typescript": "^4.5.2",
|
||||
"vite": "^2.8.0",
|
||||
"vite": "^2.9.0",
|
||||
"vite-plugin-html": "^2.1.1",
|
||||
"vite-plugin-md": "^0.11.4",
|
||||
"vue-router": "^4.0.12"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Eslint Config of Vant
|
||||
# ESLint Config of Vant
|
||||
|
||||
## Install
|
||||
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
## Changelog
|
||||
|
||||
## 1.8.0
|
||||
|
||||
- add qq icon
|
||||
- add weibo icon
|
||||
- add link-o icon
|
||||
- add miniprogram-o icon
|
||||
- add wechat-moments icon
|
||||
|
||||
## 1.7.3
|
||||
|
||||
- complete https protocol
|
||||
|
||||
Binary file not shown.
@@ -14,7 +14,12 @@ Vant 图标库托管在 [iconfont.cn](https://iconfont.cn) 上，同时仓库中
|
||||
|
||||
在 Sketch 中绘制所需的图标，并更新到 `assets/icons.sketch` 文件中。
|
||||
|
||||
绘制图标前，请阅读：[iconfont - 图标绘制](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=draw)。
|
||||
绘制图标，请遵循以下图标规范：
|
||||
|
||||
- 首先要遵循 [iconfont - 图标绘制](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=draw) 中的基本规则，保证图标可以正确上传到 iconfont。
|
||||
- 建议采用 `18x18` 规格绘制图标，图标的四周留出 `1px` 空隙，绘制完成后放大至 `1000x1000`。
|
||||
- 绘制线框风格图标时，线条的标准宽度为 `1px`（放大后为 `55.55px`）。
|
||||
- 线框风格图标如果有对应的实底风格图标，需要为名称添加 `-o` 后缀，比如 `star-o` 和 `star` 为一组对应的图标。
|
||||
|
||||
### 2. 上传图标
|
||||
|
||||
@@ -26,10 +31,10 @@ Vant 图标库托管在 [iconfont.cn](https://iconfont.cn) 上，同时仓库中
|
||||
|
||||
### 3. 更新代码
|
||||
|
||||
在 iconfont 中将更新后的图标库下载到本地，并更新以下文件：
|
||||
在 iconfont 中更新图标库代码，将新代码下载到本地，并更新以下文件：
|
||||
|
||||
- `src/index.less`: 更新字体文件的 CDN 链接。
|
||||
- `src/encode-woff2.less`: 更新字体文件的 base64 URL。
|
||||
- `src/encode-woff2.less`: 更新字体文件的 base64 URL 和 CDN 链接。
|
||||
|
||||
如果有新增图标，还需要更新以下文件：
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/icons",
|
||||
"version": "1.7.3",
|
||||
"version": "1.8.0",
|
||||
"description": "vant icons",
|
||||
"main": "./src/config.js",
|
||||
"types": "./src/config.d.ts",
|
||||
|
||||
@@ -977,3 +977,23 @@
|
||||
.van-icon-cash-o:before {
|
||||
content: '\e74d';
|
||||
}
|
||||
|
||||
.van-icon-qq:before {
|
||||
content: '\e74e';
|
||||
}
|
||||
|
||||
.van-icon-wechat-moments:before {
|
||||
content: '\e74f';
|
||||
}
|
||||
|
||||
.van-icon-weibo:before {
|
||||
content: '\e750';
|
||||
}
|
||||
|
||||
.van-icon-link-o:before {
|
||||
content: '\e751';
|
||||
}
|
||||
|
||||
.van-icon-miniprogram-o:before {
|
||||
content: '\e752';
|
||||
}
|
||||
|
||||
@@ -150,6 +150,8 @@ export default {
|
||||
'shield-o',
|
||||
'guide-o',
|
||||
'cash-o',
|
||||
'link-o',
|
||||
'miniprogram-o',
|
||||
],
|
||||
filled: [
|
||||
// has corresponding outline icon
|
||||
@@ -224,7 +226,10 @@ export default {
|
||||
// without corresponding outline icon
|
||||
'wechat',
|
||||
'wechat-pay',
|
||||
'wechat-moments',
|
||||
'qq',
|
||||
'alipay',
|
||||
'weibo',
|
||||
'photograph',
|
||||
'youzan-shield',
|
||||
'umbrella-circle',
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -5,10 +5,10 @@
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
font-family: 'vant-icon';
|
||||
src: url('https://at.alicdn.com/t/font_2553510_5imfhdc20ag.woff2?t=1640074908811')
|
||||
src: url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2?t=1649083952952')
|
||||
format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_2553510_5imfhdc20ag.woff?t=1640074908811')
|
||||
url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff?t=1649083952952')
|
||||
format('woff'),
|
||||
url('https://at.alicdn.com/t/font_2553510_5imfhdc20ag.ttf?t=1640074908811')
|
||||
url('https://at.alicdn.com/t/font_2553510_iv4v8nulyz.ttf?t=1649083952952')
|
||||
format('truetype');
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
"@popperjs/core": "^2.9.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.14.21",
|
||||
"esbuild": "^0.14.29",
|
||||
"release-it": "^14.2.2",
|
||||
"typescript": "~4.5.2"
|
||||
},
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
"author": "chenjiahan",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.14.21",
|
||||
"esbuild": "^0.14.29",
|
||||
"release-it": "^14.0.2",
|
||||
"typescript": "~4.5.2",
|
||||
"vue": "^3.2.27"
|
||||
|
||||
@@ -73,10 +73,10 @@ For enterprise developers, we recommend:
|
||||
|
||||
### CLI
|
||||
|
||||
We recommend to use [Vue Cli](https://cli.vuejs.org/) to create a new project.
|
||||
We recommend to use [Vue CLI](https://cli.vuejs.org/) to create a new project.
|
||||
|
||||
```bash
|
||||
# Install Vue Cli
|
||||
# Install Vue CLI
|
||||
npm install -g @vue/cli
|
||||
|
||||
# Create a project
|
||||
|
||||
@@ -84,7 +84,7 @@ pnpm add vant
|
||||
|
||||
- 基于 Vite 和 Vant 搭建应用
|
||||
- 基于 Nuxt 和 Vant 搭建应用
|
||||
- 基于 Vue Cli 和 Vant 搭建应用
|
||||
- 基于 Vue CLI 和 Vant 搭建应用
|
||||
- 配置按需引入组件
|
||||
- 配置基于 Rem 的适配方案
|
||||
- 配置基于 Viewport 的适配方案
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
"test": "vant-cli test",
|
||||
"build": "vant-cli build",
|
||||
"build:site": "vant-cli build-site",
|
||||
"release": "vant-cli release",
|
||||
"release": "cp ../../README.md ./ && vant-cli release && rm ./README.md",
|
||||
"release:site": "pnpm build:site && gh-pages -d site-dist --add",
|
||||
"test:watch": "vant-cli test --watch",
|
||||
"test:coverage": "open test/coverage/index.html"
|
||||
@@ -64,7 +64,7 @@
|
||||
"components"
|
||||
],
|
||||
"dependencies": {
|
||||
"@vant/icons": "^1.7.1",
|
||||
"@vant/icons": "^1.8.0",
|
||||
"@vant/popperjs": "^1.1.0",
|
||||
"@vant/use": "^1.3.6"
|
||||
},
|
||||
|
||||
@@ -54,6 +54,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
if (offset + (item.date?.getDate() || 1) > 28) {
|
||||
style.marginBottom = 0;
|
||||
}
|
||||
|
||||
return style;
|
||||
});
|
||||
|
||||
|
||||
@@ -395,6 +395,7 @@ The component provides the following CSS variables, which can be used to customi
|
||||
| --van-calendar-month-mark-font-size | _160px_ | - |
|
||||
| --van-calendar-day-height | _64px_ | - |
|
||||
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
|
||||
| --van-calendar-day-margin-bottom | _4px_ | - |
|
||||
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
|
||||
| --van-calendar-range-edge-background | _var(--van-primary-color)_ | - |
|
||||
| --van-calendar-range-middle-color | _var(--van-primary-color)_ | - |
|
||||
|
||||
@@ -401,6 +401,7 @@ calendarRef.value?.reset();
|
||||
| --van-calendar-month-mark-font-size | _160px_ | - |
|
||||
| --van-calendar-day-height | _64px_ | - |
|
||||
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
|
||||
| --van-calendar-day-margin-bottom | _4px_ | - |
|
||||
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
|
||||
| --van-calendar-range-edge-background | _var(--van-primary-color)_ | - |
|
||||
| --van-calendar-range-middle-color | _var(--van-primary-color)_ | - |
|
||||
|
||||
@@ -12,6 +12,7 @@ body {
|
||||
--van-calendar-month-mark-font-size: 160px;
|
||||
--van-calendar-day-height: 64px;
|
||||
--van-calendar-day-font-size: var(--van-font-size-lg);
|
||||
--van-calendar-day-margin-bottom: 4px;
|
||||
--van-calendar-range-edge-color: var(--van-white);
|
||||
--van-calendar-range-edge-background: var(--van-primary-color);
|
||||
--van-calendar-range-middle-color: var(--van-primary-color);
|
||||
@@ -128,6 +129,7 @@ body {
|
||||
width: 14.285%;
|
||||
height: var(--van-calendar-day-height);
|
||||
font-size: var(--van-calendar-day-font-size);
|
||||
margin-bottom: var(--van-calendar-day-margin-bottom);
|
||||
cursor: pointer;
|
||||
|
||||
&--end,
|
||||
|
||||
@@ -251,41 +251,49 @@ exports[`color prop when type is single 1`] = `
|
||||
23
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
24
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
25
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
26
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
27
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
28
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
29
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
31
|
||||
@@ -484,41 +492,49 @@ exports[`formatter prop 1`] = `
|
||||
23
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
24
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
25
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
26
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
27
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
28
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
29
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
31
|
||||
@@ -836,49 +852,49 @@ exports[`row-height prop 1`] = `
|
||||
23
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="height: 50px;"
|
||||
style="height: 50px; margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
24
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="height: 50px;"
|
||||
style="height: 50px; margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
25
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="height: 50px;"
|
||||
style="height: 50px; margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
26
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="height: 50px;"
|
||||
style="height: 50px; margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
27
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="height: 50px;"
|
||||
style="height: 50px; margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
28
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="height: 50px;"
|
||||
style="height: 50px; margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
29
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="height: 50px;"
|
||||
style="height: 50px; margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="height: 50px;"
|
||||
style="height: 50px; margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
31
|
||||
@@ -1083,41 +1099,49 @@ exports[`should render title、footer、subtitle slot correctly 1`] = `
|
||||
23
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
24
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
25
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
26
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
27
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
28
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
29
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
31
|
||||
|
||||
@@ -170,41 +170,49 @@ exports[`lazy-render prop 1`] = `
|
||||
23
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
24
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
25
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
26
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
27
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
28
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
29
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
<div role="gridcell"
|
||||
style="margin-bottom: 0px;"
|
||||
class="van-calendar__day van-calendar__day--disabled"
|
||||
>
|
||||
31
|
||||
|
||||
@@ -55,7 +55,7 @@ export default {
|
||||
return {
|
||||
tel,
|
||||
name,
|
||||
currentContact,
|
||||
onEdit,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { defineComponent, type ExtractPropTypes } from 'vue';
|
||||
import { defineComponent, PropType, type ExtractPropTypes } from 'vue';
|
||||
import {
|
||||
numericProp,
|
||||
Numeric,
|
||||
getSizeStyle,
|
||||
makeStringProp,
|
||||
createNamespace,
|
||||
@@ -13,7 +13,7 @@ const PRESET_IMAGES = ['error', 'search', 'default'];
|
||||
|
||||
const emptyProps = {
|
||||
image: makeStringProp('default'),
|
||||
imageSize: numericProp,
|
||||
imageSize: [Number, String, Array] as PropType<Numeric | [Numeric, Numeric]>,
|
||||
description: String,
|
||||
};
|
||||
|
||||
|
||||
@@ -37,20 +37,31 @@ Use the image prop to display different placeholder images.
|
||||
<van-empty image="search" description="Description" />
|
||||
```
|
||||
|
||||
### Custom Size
|
||||
|
||||
Using `image-size` prop to custom the size of image.
|
||||
|
||||
```html
|
||||
<!-- The default unit is px -->
|
||||
<van-empty image-size="100" description="Description" />
|
||||
<!-- Support other units, such as rem, vh, vw -->
|
||||
<van-empty image-size="10rem" description="Description" />
|
||||
```
|
||||
|
||||
You can set the width and height separately.
|
||||
|
||||
```html
|
||||
<van-empty :image-size="[60, 40]" description="Description" />
|
||||
```
|
||||
|
||||
### Custom Image
|
||||
|
||||
```html
|
||||
<van-empty
|
||||
class="custom-image"
|
||||
image="https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg"
|
||||
image-size="80"
|
||||
description="Description"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.custom-image img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Bottom Content
|
||||
@@ -75,7 +86,7 @@ Use the image prop to display different placeholder images.
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` |
|
||||
| image-size | Image size | _number \| string_ | - |
|
||||
| image-size | Image size | _number \| string \| Array_ | - |
|
||||
| description | Description | _string_ | - |
|
||||
|
||||
### Slots
|
||||
|
||||
@@ -37,23 +37,33 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
<van-empty image="search" description="描述文字" />
|
||||
```
|
||||
|
||||
### 自定义大小
|
||||
|
||||
通过 `image-size` 属性图片的大小。
|
||||
|
||||
```html
|
||||
<!-- 不指定单位，默认为 px -->
|
||||
<van-empty image-size="100" description="描述文字" />
|
||||
<!-- 指定单位，支持 rem, vh, vw -->
|
||||
<van-empty image-size="10rem" description="描述文字" />
|
||||
```
|
||||
|
||||
将 `image-size` 设置为数组格式，可以分别设置宽高。数组第一项对应宽度，数组第二项对应高度。
|
||||
|
||||
```html
|
||||
<van-empty :image-size="[60, 40]" description="描述文字" />
|
||||
```
|
||||
|
||||
### 自定义图片
|
||||
|
||||
需要自定义图片时，可以在 image 属性中传入任意图片 URL。
|
||||
|
||||
```html
|
||||
<van-empty
|
||||
class="custom-image"
|
||||
image="https://cdn.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
|
||||
image-size="80"
|
||||
description="描述文字"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.custom-image .van-empty__image {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 底部内容
|
||||
@@ -80,7 +90,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
|
||||
| image-size | 图片大小，默认单位为 `px` | _number \| string_ | - |
|
||||
| image-size | 图片大小，默认单位为 `px` | _number \| string \| Array_ | - |
|
||||
| description | 图片下方的描述文字 | _string_ | - |
|
||||
|
||||
### Slots
|
||||
|
||||
@@ -12,6 +12,7 @@ const t = useTranslate({
|
||||
search: '搜索提示',
|
||||
network: '网络错误',
|
||||
imageType: '图片类型',
|
||||
customSize: '自定义大小',
|
||||
description: '描述文字',
|
||||
customImage: '自定义图片',
|
||||
bottomContent: '底部内容',
|
||||
@@ -21,6 +22,7 @@ const t = useTranslate({
|
||||
search: 'Search',
|
||||
network: 'Network',
|
||||
imageType: 'Image Type',
|
||||
customSize: 'Custom Size',
|
||||
description: 'Description',
|
||||
customImage: 'Custom Image',
|
||||
bottomContent: 'Bottom Content',
|
||||
@@ -49,10 +51,14 @@ const active = ref('error');
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customSize')">
|
||||
<van-empty image-size="100" :description="t('description')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customImage')">
|
||||
<van-empty
|
||||
class="custom-image"
|
||||
:image="cdnURL('custom-empty-image.png')"
|
||||
:image-size="80"
|
||||
:description="t('description')"
|
||||
/>
|
||||
</demo-block>
|
||||
@@ -68,12 +74,7 @@ const active = ref('error');
|
||||
|
||||
<style lang="less">
|
||||
.demo-empty {
|
||||
.custom-image {
|
||||
.van-empty__image {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
background: var(--van-background-color-light);
|
||||
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
|
||||
@@ -94,8 +94,22 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-empty custom-image">
|
||||
<div class="van-empty__image">
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
</div>
|
||||
<p class="van-empty__description">
|
||||
Description
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image"
|
||||
style="width: 80px; height: 80px;"
|
||||
>
|
||||
<img src="https://cdn.jsdelivr.net/npm/@vant/assets/custom-empty-image.png">
|
||||
</div>
|
||||
<p class="van-empty__description">
|
||||
|
||||
@@ -57,3 +57,15 @@ test('should change image size when using image-size prop', async () => {
|
||||
expect(image.style.width).toEqual('1vw');
|
||||
expect(image.style.height).toEqual('1vw');
|
||||
});
|
||||
|
||||
test('should allow to set image width and height separately by image-size prop', async () => {
|
||||
const wrapper = mount(Empty, {
|
||||
props: {
|
||||
imageSize: [20, 10],
|
||||
},
|
||||
});
|
||||
|
||||
const image = wrapper.find('.van-empty__image');
|
||||
expect(image.style.width).toEqual('20px');
|
||||
expect(image.style.height).toEqual('10px');
|
||||
});
|
||||
|
||||
@@ -222,7 +222,7 @@ imagePreviewRef.value?.swipeTo(1);
|
||||
|
||||
| Attribute | Description | Type |
|
||||
| --------- | ---------------------- | -------- |
|
||||
| url | Url of current image | _number_ |
|
||||
| url | URL of current image | _number_ |
|
||||
| index | Index of current image | _number_ |
|
||||
|
||||
### onScale Parameters
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
<script lang="ts">
|
||||
import Lazyload from '..';
|
||||
import { cdnURL, useTranslate } from '../../../docs/site';
|
||||
|
||||
if (window.app) {
|
||||
window.app.use(Lazyload, { lazyComponent: true });
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
// eslint-disable-next-line import/first
|
||||
import { cdnURL, useTranslate } from '../../../docs/site';
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
|
||||
@@ -38,7 +38,7 @@ export default {
|
||||
setup() {
|
||||
const showShare = ref(false);
|
||||
const options = [
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'WeChat', icon: 'wechat' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'Link', icon: 'link' },
|
||||
{ name: 'Poster', icon: 'poster' },
|
||||
@@ -73,8 +73,8 @@ export default {
|
||||
const showShare = ref(false);
|
||||
const options = [
|
||||
[
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'Wechat Moments', icon: 'wechat-moments' },
|
||||
{ name: 'WeChat', icon: 'wechat' },
|
||||
{ name: 'WeChat Moments', icon: 'wechat-moments' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'QQ', icon: 'qq' },
|
||||
],
|
||||
@@ -147,7 +147,7 @@ export default {
|
||||
setup() {
|
||||
const showShare = ref(false);
|
||||
const options = [
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'WeChat', icon: 'wechat' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'Link', icon: 'link', description: 'Description' },
|
||||
{ name: 'Poster', icon: 'poster' },
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
|
||||
|
||||
// Components
|
||||
import { Icon } from '../icon';
|
||||
import { Popup } from '../popup';
|
||||
|
||||
export type ShareSheetOption = {
|
||||
@@ -23,17 +24,6 @@ export type ShareSheetOption = {
|
||||
|
||||
export type ShareSheetOptions = ShareSheetOption[] | ShareSheetOption[][];
|
||||
|
||||
const PRESET_ICONS = [
|
||||
'qq',
|
||||
'link',
|
||||
'weibo',
|
||||
'wechat',
|
||||
'poster',
|
||||
'qrcode',
|
||||
'weapp-qrcode',
|
||||
'wechat-moments',
|
||||
];
|
||||
|
||||
const popupInheritKeys = [
|
||||
...popupSharedPropKeys,
|
||||
'round',
|
||||
@@ -41,12 +31,16 @@ const popupInheritKeys = [
|
||||
'safeAreaInsetBottom',
|
||||
] as const;
|
||||
|
||||
function getIconURL(icon: string) {
|
||||
if (PRESET_ICONS.includes(icon)) {
|
||||
return `https://img.yzcdn.cn/vant/share-sheet-${icon}.png`;
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
const iconMap: Record<string, string> = {
|
||||
qq: 'qq',
|
||||
link: 'link-o',
|
||||
weibo: 'weibo',
|
||||
qrcode: 'qr',
|
||||
poster: 'photo-o',
|
||||
wechat: 'wechat',
|
||||
'weapp-qrcode': 'miniprogram-o',
|
||||
'wechat-moments': 'wechat-moments',
|
||||
};
|
||||
|
||||
const [name, bem, t] = createNamespace('share-sheet');
|
||||
|
||||
@@ -98,6 +92,17 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
const renderIcon = (icon: string) => {
|
||||
if (iconMap[icon]) {
|
||||
return (
|
||||
<div class={bem('icon', [icon])}>
|
||||
<Icon name={iconMap[icon] || icon} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <img src={icon} class={bem('image-icon')} />;
|
||||
};
|
||||
|
||||
const renderOption = (option: ShareSheetOption, index: number) => {
|
||||
const { name, icon, className, description } = option;
|
||||
return (
|
||||
@@ -107,7 +112,7 @@ export default defineComponent({
|
||||
class={[bem('option'), className, HAPTICS_FEEDBACK]}
|
||||
onClick={() => onSelect(option, index)}
|
||||
>
|
||||
<img src={getIconURL(icon)} class={bem('icon')} />
|
||||
{renderIcon(icon)}
|
||||
{name && <span class={bem('name')}>{name}</span>}
|
||||
{description && (
|
||||
<span class={bem('option-description')}>{description}</span>
|
||||
|
||||
@@ -29,7 +29,7 @@ const t = useTranslate({
|
||||
link: 'Link',
|
||||
title: 'Share',
|
||||
weibo: 'Weibo',
|
||||
wechat: 'Wechat',
|
||||
wechat: 'WeChat',
|
||||
poster: 'Poster',
|
||||
qrcode: 'Qrcode',
|
||||
multiLine: 'Multi Line',
|
||||
@@ -38,7 +38,7 @@ const t = useTranslate({
|
||||
customIcon: 'Custom Icon',
|
||||
description: 'Description',
|
||||
weappQrcode: 'Weapp Qrcode',
|
||||
wechatMoments: 'Wechat Moments',
|
||||
wechatMoments: 'WeChat Moments',
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -64,12 +64,56 @@ body {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
&__icon,
|
||||
&__image-icon {
|
||||
width: var(--van-share-sheet-icon-size);
|
||||
height: var(--van-share-sheet-icon-size);
|
||||
margin: 0 var(--van-padding-md);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--van-gray-7);
|
||||
border-radius: 100%;
|
||||
background-color: var(--van-gray-2);
|
||||
|
||||
&--link,
|
||||
&--poster,
|
||||
&--qrcode {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
&--weapp-qrcode {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
&--qq,
|
||||
&--weibo,
|
||||
&--wechat,
|
||||
&--wechat-moments {
|
||||
font-size: 30px;
|
||||
color: var(--van-white);
|
||||
}
|
||||
|
||||
&--qq {
|
||||
background-color: #38b9fa;
|
||||
}
|
||||
|
||||
&--wechat {
|
||||
background-color: #0bc15f;
|
||||
}
|
||||
|
||||
&--weibo {
|
||||
background-color: #ee575e;
|
||||
}
|
||||
|
||||
&--wechat-moments {
|
||||
background-color: #7bc845;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin-top: var(--van-padding-xs);
|
||||
padding: 0 var(--van-padding-base);
|
||||
|
||||
@@ -45,7 +45,8 @@ export default {
|
||||
},
|
||||
],
|
||||
searchConfig: {
|
||||
apiKey: '90067aecdaa2c85220e2783cd305caac',
|
||||
appId: 'BLI2GGOUL8',
|
||||
apiKey: '07cb725cd26aa496996de6cb8ab9b5cc',
|
||||
indexName: 'vant',
|
||||
searchParameters: {
|
||||
facetFilters: ['lang:zh-CN', 'version:v4'],
|
||||
@@ -487,7 +488,8 @@ export default {
|
||||
},
|
||||
],
|
||||
searchConfig: {
|
||||
apiKey: '90067aecdaa2c85220e2783cd305caac',
|
||||
appId: 'BLI2GGOUL8',
|
||||
apiKey: '07cb725cd26aa496996de6cb8ab9b5cc',
|
||||
indexName: 'vant',
|
||||
searchParameters: {
|
||||
facetFilters: ['lang:en-US', 'version:v4'],
|
||||
|
||||
Reference in New Issue
Block a user