mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
Compare commits
No commits in common. "dev" and "v1.7.0" have entirely different histories.
@ -1,3 +1,3 @@
|
|||||||
你好,请使用下面的链接创建 issue 以帮助我们更快的排查问题,不规范的 issue 会被关闭,感谢配合。
|
你好,请使用下面的链接创建 issue 以帮助我们更快的排查问题,不规范的 issue 会被关闭,感谢配合。
|
||||||
|
|
||||||
http://vant-ui.github.io/vant-issue-generater?repo=VantWeapp
|
http://vant-contrib.gitee.io/vant-issue-generater?repo=VantWeapp
|
||||||
|
12
.github/FUNDING.yml
vendored
12
.github/FUNDING.yml
vendored
@ -1,12 +0,0 @@
|
|||||||
# These are supported funding model platforms
|
|
||||||
|
|
||||||
github: [chenjiahan, nemo-shen]
|
|
||||||
patreon: # Replace with a single Patreon username
|
|
||||||
open_collective: # Replace with a single Open Collective username
|
|
||||||
ko_fi: # Replace with a single Ko-fi username
|
|
||||||
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
|
|
||||||
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
|
|
||||||
liberapay: # Replace with a single Liberapay username
|
|
||||||
issuehunt: # Replace with a single IssueHunt username
|
|
||||||
otechie: # Replace with a single Otechie username
|
|
||||||
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
|
|
3
.github/ISSUE_TEMPLATE.md
vendored
Normal file
3
.github/ISSUE_TEMPLATE.md
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
你好,请使用下面的链接创建 issue 以帮助我们更快的排查问题,不规范的 issue 会被关闭,感谢配合。
|
||||||
|
|
||||||
|
http://vant-contrib.gitee.io/vant-issue-generater?repo=VantWeapp
|
1
.github/ISSUE_TEMPLATE/config.yml
vendored
1
.github/ISSUE_TEMPLATE/config.yml
vendored
@ -1 +0,0 @@
|
|||||||
blank_issues_enabled: false
|
|
@ -1,56 +0,0 @@
|
|||||||
name: 我要反馈 Vant Weapp 的 Bug
|
|
||||||
description: 通过标准模板进行 Bug 反馈
|
|
||||||
title: "[Bug Report] 请在此填写标题"
|
|
||||||
labels: ["bug: need confirm"]
|
|
||||||
body:
|
|
||||||
- type: markdown
|
|
||||||
attributes:
|
|
||||||
value: |
|
|
||||||
在提交 Bug 报告前,请注意:
|
|
||||||
|
|
||||||
- 确认你的问题无法通过官方文档得到解决。
|
|
||||||
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant-weapp/issues),并且没有发现同样的问题。
|
|
||||||
- 如果不是反馈 Bug,请到 [Discussions 讨论区](https://github.com/youzan/vant-weapp/discussions) 发帖。
|
|
||||||
|
|
||||||
- type: textarea
|
|
||||||
id: reproduce
|
|
||||||
attributes:
|
|
||||||
label: 重现链接
|
|
||||||
description: 请提供一个尽可能简单的微信小程序代码片段协助我们排查,这可以更快的帮助我们定位问题,解决 issue。
|
|
||||||
validations:
|
|
||||||
required: true
|
|
||||||
|
|
||||||
- type: input
|
|
||||||
id: version
|
|
||||||
attributes:
|
|
||||||
label: Vant Weapp 版本
|
|
||||||
description: 你正在使用的 Vant Weapp 版本是多少?(请填写 node_modules/@vant/weapp/package.json 里实际安装的版本)
|
|
||||||
placeholder: 比如 1.10.5
|
|
||||||
validations:
|
|
||||||
required: true
|
|
||||||
|
|
||||||
- type: textarea
|
|
||||||
id: description
|
|
||||||
attributes:
|
|
||||||
label: 描述一下你遇到的问题。
|
|
||||||
placeholder: 比如:弹窗无法展示、日历组件报错
|
|
||||||
validations:
|
|
||||||
required: true
|
|
||||||
|
|
||||||
- type: textarea
|
|
||||||
id: reproduce-steps
|
|
||||||
attributes:
|
|
||||||
label: 重现步骤
|
|
||||||
description: 请提供一个最简单的操作步骤,方便我们快速重现问题。
|
|
||||||
placeholder: |
|
|
||||||
比如:
|
|
||||||
1. 点击按钮
|
|
||||||
2. 弹窗无法展示
|
|
||||||
validations:
|
|
||||||
required: true
|
|
||||||
|
|
||||||
- type: input
|
|
||||||
id: browsers
|
|
||||||
attributes:
|
|
||||||
label: 设备/浏览器
|
|
||||||
description: 在哪些设备/浏览器上能重现这个问题?
|
|
@ -1,33 +0,0 @@
|
|||||||
name: 我想要一个 Vant Weapp 的新功能
|
|
||||||
description: 通过标准模板描述一下你的功能需求。
|
|
||||||
title: "[Feature Request] 请在此填写标题"
|
|
||||||
labels: ["feature: need confirm"]
|
|
||||||
body:
|
|
||||||
- type: markdown
|
|
||||||
attributes:
|
|
||||||
value: |
|
|
||||||
在提交功能需求前,请注意:
|
|
||||||
|
|
||||||
- 确认这是一个通用功能,并且无法通过现有的 API 或 Slot 实现。
|
|
||||||
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant-weapp/issues),并且没有发现同样的需求。
|
|
||||||
- 可以先到 [Discussions 讨论区](https://github.com/youzan/vant-weapp/discussions) 发帖,讨论一下需求是否合理。
|
|
||||||
|
|
||||||
- type: textarea
|
|
||||||
id: description
|
|
||||||
attributes:
|
|
||||||
label: 这个功能解决了什么问题?
|
|
||||||
description: 请尽可能详细地说明这个功能的使用场景。
|
|
||||||
validations:
|
|
||||||
required: true
|
|
||||||
|
|
||||||
- type: textarea
|
|
||||||
id: api
|
|
||||||
attributes:
|
|
||||||
label: 你期望的 API 是什么样子的?
|
|
||||||
description: 描述一下这个新功能的 API,并提供一些代码示例。
|
|
||||||
placeholder: |
|
|
||||||
```xml
|
|
||||||
<van-button some-prop="xxx" />
|
|
||||||
```
|
|
||||||
validations:
|
|
||||||
required: true
|
|
2
.github/dependabot.yml
vendored
2
.github/dependabot.yml
vendored
@ -3,7 +3,7 @@ updates:
|
|||||||
- package-ecosystem: npm
|
- package-ecosystem: npm
|
||||||
directory: "/"
|
directory: "/"
|
||||||
schedule:
|
schedule:
|
||||||
interval: monthly
|
interval: daily
|
||||||
open-pull-requests-limit: 10
|
open-pull-requests-limit: 10
|
||||||
ignore:
|
ignore:
|
||||||
- dependency-name: miniprogram-api-typings
|
- dependency-name: miniprogram-api-typings
|
||||||
|
10
.github/pr-labeler.yml
vendored
10
.github/pr-labeler.yml
vendored
@ -1,10 +0,0 @@
|
|||||||
"change: feat":
|
|
||||||
- "/^(feat|types|style)/"
|
|
||||||
"change: fix":
|
|
||||||
- "/^fix/"
|
|
||||||
"change: perf":
|
|
||||||
- "/^perf/"
|
|
||||||
"change: breaking":
|
|
||||||
- "/^breaking change/"
|
|
||||||
"change: docs":
|
|
||||||
- "/^docs/"
|
|
20
.github/workflows/deploy-site.yml
vendored
20
.github/workflows/deploy-site.yml
vendored
@ -4,10 +4,7 @@ on:
|
|||||||
push:
|
push:
|
||||||
branches: [dev]
|
branches: [dev]
|
||||||
paths:
|
paths:
|
||||||
- 'docs/**/*.md'
|
- 'docs/**'
|
||||||
- 'packages/**/*.md'
|
|
||||||
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
build-and-deploy:
|
build-and-deploy:
|
||||||
@ -24,16 +21,9 @@ jobs:
|
|||||||
- name: Build Site
|
- name: Build Site
|
||||||
run: npx --no-install vant-cli build-site
|
run: npx --no-install vant-cli build-site
|
||||||
|
|
||||||
- name: Deploy for GitHub 🚀
|
- name: Deploy 🚀
|
||||||
uses: JamesIves/github-pages-deploy-action@v4.6.0
|
uses: JamesIves/github-pages-deploy-action@4.1.1
|
||||||
with:
|
with:
|
||||||
branch: gh-pages
|
branch: gh-pages
|
||||||
folder: site-dist
|
folder: site
|
||||||
token: ${{ secrets.VANT_UI_TOKEN }}
|
clean-exclude: 0.x
|
||||||
repository-name: vant-ui/vant-ui.github.io
|
|
||||||
target-folder: vant-weapp
|
|
||||||
# enable single-commit to reduce the repo size
|
|
||||||
single-commit: true
|
|
||||||
clean: true
|
|
||||||
clean-exclude: |
|
|
||||||
0.x
|
|
||||||
|
20
.github/workflows/pr-label.yaml
vendored
20
.github/workflows/pr-label.yaml
vendored
@ -1,20 +0,0 @@
|
|||||||
name: PR Labeler
|
|
||||||
|
|
||||||
on:
|
|
||||||
pull_request_target:
|
|
||||||
types:
|
|
||||||
- opened
|
|
||||||
- edited
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
change-labeling:
|
|
||||||
name: Labeling for changes
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- uses: github/issue-labeler@v3.4
|
|
||||||
with:
|
|
||||||
repo-token: "${{ secrets.GITHUB_TOKEN }}"
|
|
||||||
configuration-path: .github/pr-labeler.yml
|
|
||||||
enable-versioned-regex: 0
|
|
||||||
include-title: 1
|
|
||||||
sync-labels: 1
|
|
11
.github/workflows/release-tag.yml
vendored
11
.github/workflows/release-tag.yml
vendored
@ -11,12 +11,13 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout code
|
- name: Checkout code
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@master
|
||||||
|
|
||||||
- name: Create Release for Tag
|
- name: Create Release for Tag
|
||||||
id: release_tag
|
id: release_tag
|
||||||
uses: ncipollo/release-action@v1
|
uses: yyx990803/release-tag@master
|
||||||
|
env:
|
||||||
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
with:
|
with:
|
||||||
generateReleaseNotes: "true"
|
tag_name: ${{ github.ref }}
|
||||||
body: |
|
body: |
|
||||||
> 请访问 [更新日志](https://vant-ui.github.io/vant-weapp/#/changelog) 了解所有更新。
|
更新内容参见 [CHANGELOG](https://vant-contrib.gitee.io/vant-weapp/#/changelog)。
|
||||||
|
20
.github/workflows/sync-gitee.yml
vendored
Normal file
20
.github/workflows/sync-gitee.yml
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
name: Sync to Gitee
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [dev, gh-pages]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Sync to Gitee
|
||||||
|
uses: wearerequired/git-mirror-action@master
|
||||||
|
env:
|
||||||
|
# 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
|
||||||
|
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
|
||||||
|
with:
|
||||||
|
# 注意替换为你的 GitHub 源仓库地址
|
||||||
|
source-repo: git@github.com:youzan/vant-weapp.git
|
||||||
|
# 注意替换为你的 Gitee 目标仓库地址
|
||||||
|
destination-repo: git@gitee.com:vant-contrib/vant-weapp.git
|
28
.github/workflows/test.yml
vendored
28
.github/workflows/test.yml
vendored
@ -9,7 +9,7 @@ jobs:
|
|||||||
- uses: actions/checkout@v1
|
- uses: actions/checkout@v1
|
||||||
- uses: actions/setup-node@v1
|
- uses: actions/setup-node@v1
|
||||||
with:
|
with:
|
||||||
node-version: '18.x'
|
node-version: '14.x'
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
uses: bahmutov/npm-install@v1
|
uses: bahmutov/npm-install@v1
|
||||||
@ -17,37 +17,13 @@ jobs:
|
|||||||
- name: Run linter
|
- name: Run linter
|
||||||
run: npm run lint
|
run: npm run lint
|
||||||
|
|
||||||
test:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- uses: szenius/set-timezone@v1.0
|
|
||||||
with:
|
|
||||||
timezoneLinux: "Asia/Shanghai"
|
|
||||||
timezoneMacos: "Asia/Shanghai"
|
|
||||||
timezoneWindows: "China Standard Time"
|
|
||||||
- uses: actions/checkout@v1
|
|
||||||
- uses: actions/setup-node@v1
|
|
||||||
with:
|
|
||||||
node-version: '18.x'
|
|
||||||
|
|
||||||
- name: Install dependencies
|
|
||||||
uses: bahmutov/npm-install@v1
|
|
||||||
|
|
||||||
- name: Run test cases
|
|
||||||
run: npm test
|
|
||||||
|
|
||||||
- name: Upload coverage to Codecov
|
|
||||||
uses: codecov/codecov-action@v1
|
|
||||||
with:
|
|
||||||
token: ${{ secrets.CODECOV_TOKEN }}
|
|
||||||
|
|
||||||
build:
|
build:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v1
|
- uses: actions/checkout@v1
|
||||||
- uses: actions/setup-node@v1
|
- uses: actions/setup-node@v1
|
||||||
with:
|
with:
|
||||||
node-version: '18.x'
|
node-version: '14.x'
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
uses: bahmutov/npm-install@v1
|
uses: bahmutov/npm-install@v1
|
||||||
|
3
.gitignore
vendored
3
.gitignore
vendored
@ -4,11 +4,10 @@
|
|||||||
.idea
|
.idea
|
||||||
.vscode
|
.vscode
|
||||||
node_modules
|
node_modules
|
||||||
site-dist
|
site
|
||||||
docs/dist
|
docs/dist
|
||||||
example/dist
|
example/dist
|
||||||
.history
|
.history
|
||||||
changelog.generated.md
|
changelog.generated.md
|
||||||
package-lock.json
|
package-lock.json
|
||||||
build/private.wx1c01b35002d3ba14.key
|
build/private.wx1c01b35002d3ba14.key
|
||||||
project.private.config.json
|
|
||||||
|
@ -1,2 +0,0 @@
|
|||||||
lib
|
|
||||||
dist
|
|
@ -1,4 +1,5 @@
|
|||||||
{
|
{
|
||||||
|
"printWidth": 90,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"proseWrap": "never"
|
"trailingComma": "none"
|
||||||
}
|
}
|
||||||
|
57
README.md
57
README.md
@ -11,24 +11,24 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
🔥 <a href="https://vant.pro/vant-weapp/">文档网站(国内)</a>
|
🔥 <a href="https://vant-contrib.gitee.io/vant-weapp">文档网站(国内)</a>
|
||||||
|
|
||||||
🔥 <a href="https://vant-ui.github.io/vant-weapp/">文档网站(GitHub)</a>
|
🌈 <a href="https://youzan.github.io/vant-weapp">文档网站(GitHub)</a>
|
||||||
|
|
||||||
🚀 <a href="https://github.com/vant-ui/vant" target="_blank">Vue 版</a>
|
🚀 <a href="https://github.com/youzan/vant" target="_blank">Vue 版</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### 介绍
|
### 介绍
|
||||||
|
|
||||||
Vant 是一个**轻量、可靠的移动端组件库**,于 2017 年开源。
|
Vant 是**有赞前端团队**开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。
|
||||||
|
|
||||||
目前 Vant 官方提供了 [Vue 2 版本](https://vant-ui.github.io/vant/v2/)、[Vue 3 版本](https://vant-ui.github.io/vant/)和[微信小程序版本](http://vant-ui.github.io/vant-weapp/),并由社区团队维护 [React 版本](https://github.com/3lang3/react-vant)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。
|
目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant)、[Vue 3 版本](https://vant-contrib.gitee.io/vant/v3)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp),并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。
|
||||||
|
|
||||||
## 预览
|
## 预览
|
||||||
|
|
||||||
扫描下方小程序二维码,体验组件库示例。注意:因微信审核机制限制,目前示例小程序不是最新版本,可以 clone 代码到本地开发工具预览
|
扫描下方小程序二维码,体验组件库示例:
|
||||||
|
|
||||||
<img src="https://img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg" width="200" height="200" style="margin-top: 10px;" >
|
<img src="https://img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg" width="200" height="200" style="margin-top: 10px;" >
|
||||||
|
|
||||||
@ -55,8 +55,7 @@ npm i vant-weapp -S --production
|
|||||||
|
|
||||||
### 方式二. 下载代码
|
### 方式二. 下载代码
|
||||||
|
|
||||||
直接通过 git 下载 Vant Weapp 源代码,并将 `dist` 目录拷贝到自己的项目中。
|
直接通过 git 下载 Vant Weapp 源代码,并将`dist`目录拷贝到自己的项目中
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone https://github.com/youzan/vant-weapp.git
|
git clone https://github.com/youzan/vant-weapp.git
|
||||||
```
|
```
|
||||||
@ -91,41 +90,27 @@ npm run dev
|
|||||||
|
|
||||||
打开[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),把`vant-weapp/example`目录添加进去就可以预览示例了。
|
打开[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),把`vant-weapp/example`目录添加进去就可以预览示例了。
|
||||||
|
|
||||||
PS:关于 `van-area` Area 省市区选择组件,地区数据初始化可以直接在云开发环境中导入`vant-weapp/example/database_area.JSON` 文件使用。
|
PS:关于 `van-area` Area 省市区选择组件,地区数据初始化可以直接在云开发环境中导入`vant-weapp/example/database_area.JSON`文件使用
|
||||||
|
|
||||||
## 基础库版本
|
## 基础库版本
|
||||||
|
|
||||||
Vant Weapp 最低支持到小程序基础库 2.6.5 版本。
|
Vant Weapp 最低支持到小程序基础库 2.2.3 版本
|
||||||
|
|
||||||
## 链接
|
## 链接
|
||||||
|
|
||||||
- [文档网站(GitHub)](https://vant-ui.github.io/vant-weapp/)
|
* [更新日志](https://github.com/youzan/vant-weapp/blob/dev/docs/markdown/changelog.md)
|
||||||
- [文档网站(国内)](https://vant.pro/vant-weapp/)
|
* [意见反馈](https://github.com/youzan/vant-weapp/issues)
|
||||||
- [意见反馈](https://github.com/youzan/vant-weapp/issues)
|
* [加入我们](https://job.youzan.com)
|
||||||
- [设计资源](https://vant-ui.github.io/vant/#/zh-CN/design)
|
* [Vant Vue 版](https://github.com/youzan/vant)
|
||||||
- [更新日志](https://vant-ui.github.io/vant-weapp/#/changelog)
|
|
||||||
- [官方示例](https://github.com/vant-ui/vant-demo)
|
|
||||||
|
|
||||||
## 核心团队
|
|
||||||
|
|
||||||
以下是 Vant 和 Vant Weapp 的核心贡献者们:
|
|
||||||
|
|
||||||
| [](https://github.com/chenjiahan/) | [](https://github.com/cookfront/) | [](https://github.com/w91/) | [](https://github.com/pangxie1991/) | [](https://github.com/rex-zsd/) | [](https://github.com/nemo-shen/) |
|
|
||||||
| :-: | :-: | :-: | :-: | :-: | :-: |
|
|
||||||
| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) |
|
|
||||||
|
|
||||||
| [](https://github.com/Lindysen/) | [](https://github.com/JakeLaoyu/) | [](https://github.com/landluck/) | [](https://github.com/wjw-gavin/) | [](https://github.com/inottn/) | [](https://github.com/zhousg/) |
|
|
||||||
| :-: | :-: | :-: | :-: | :-: | :-: |
|
|
||||||
| [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) | [landluck](https://github.com/landluck/) | [wjw-gavin](https://github.com/wjw-gavin/) | [inottn](https://github.com/inottn/) | [zhousg](https://github.com/zhousg/) |
|
|
||||||
|
|
||||||
## 贡献者们
|
|
||||||
|
|
||||||
感谢以下小伙伴们为 Vant Weapp 发展做出的贡献:
|
|
||||||
|
|
||||||
<a href="https://github.com/youzan/vant-weapp/graphs/contributors">
|
|
||||||
<img src="https://opencollective.com/vant-weapp/contributors.svg?width=890&button=false" alt="contributors">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
## 开源协议
|
## 开源协议
|
||||||
|
|
||||||
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)协议,请自由地享受和参与开源。
|
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)协议,请自由地享受和参与开源。
|
||||||
|
|
||||||
|
[vant-weapp]: https://github.com/youzan/vant-weapp
|
||||||
|
[issue]: https://github.com/youzan/vant-weapp/issues/new
|
||||||
|
[PR]: https://github.com/youzan/vant-weapp/compare
|
||||||
|
[MIT]: http://opensource.org/licenses/MIT
|
||||||
|
[小程序简易教程]: https://developers.weixin.qq.com/miniprogram/dev/framework/
|
||||||
|
[小程序框架介绍]: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
|
||||||
|
[微信开发者工具]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
|
||||||
|
@ -8,10 +8,4 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
env: {
|
|
||||||
test: {
|
|
||||||
presets: ['@babel/preset-typescript'],
|
|
||||||
plugins: ['@babel/plugin-transform-modules-commonjs'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
@ -1,13 +1,10 @@
|
|||||||
const fs = require('fs');
|
|
||||||
const gulp = require('gulp');
|
const gulp = require('gulp');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const less = require('gulp-less');
|
const less = require('gulp-less');
|
||||||
const insert = require('gulp-insert');
|
const insert = require('gulp-insert');
|
||||||
const rename = require('gulp-rename');
|
const rename = require('gulp-rename');
|
||||||
const postcss = require('gulp-postcss');
|
const postcss = require('gulp-postcss');
|
||||||
const ts = require('gulp-typescript');
|
|
||||||
const util = require('util');
|
const util = require('util');
|
||||||
const merge2 = require('merge2');
|
|
||||||
const exec = util.promisify(require('child_process').exec);
|
const exec = util.promisify(require('child_process').exec);
|
||||||
|
|
||||||
const src = path.resolve(__dirname, '../packages');
|
const src = path.resolve(__dirname, '../packages');
|
||||||
@ -19,20 +16,14 @@ const exampleConfig = path.resolve(__dirname, '../tsconfig.example.json');
|
|||||||
|
|
||||||
const libDir = path.resolve(__dirname, '../lib');
|
const libDir = path.resolve(__dirname, '../lib');
|
||||||
const esDir = path.resolve(__dirname, '../dist');
|
const esDir = path.resolve(__dirname, '../dist');
|
||||||
const exampleDistDir = path.resolve(__dirname, '../example/dist');
|
const exampleDir = path.resolve(__dirname, '../example/dist');
|
||||||
const examplePagesDir = path.resolve(__dirname, '../example/pages');
|
|
||||||
|
|
||||||
const exampleAppJsonPath = path.resolve(__dirname, '../example/app.json');
|
|
||||||
const baseCssPath = path.resolve(__dirname, '../packages/common/index.wxss');
|
const baseCssPath = path.resolve(__dirname, '../packages/common/index.wxss');
|
||||||
|
|
||||||
const lessCompiler = (dist) =>
|
const lessCompiler = (dist) =>
|
||||||
function compileLess() {
|
function compileLess() {
|
||||||
const srcPath = [`${src}/**/*.less`];
|
|
||||||
if ([esDir, libDir].indexOf(dist) !== -1) {
|
|
||||||
srcPath.push(`!${src}/**/demo/**/*.less`);
|
|
||||||
}
|
|
||||||
return gulp
|
return gulp
|
||||||
.src(srcPath)
|
.src(`${src}/**/*.less`)
|
||||||
.pipe(less())
|
.pipe(less())
|
||||||
.pipe(postcss())
|
.pipe(postcss())
|
||||||
.pipe(
|
.pipe(
|
||||||
@ -54,51 +45,14 @@ const lessCompiler = (dist) =>
|
|||||||
};
|
};
|
||||||
|
|
||||||
const tsCompiler = (dist, config) =>
|
const tsCompiler = (dist, config) =>
|
||||||
function compileTs() {
|
async function compileTs() {
|
||||||
const tsProject = ts.createProject(config, {
|
await exec(`npx tsc -p ${config}`);
|
||||||
declaration: true,
|
await exec(`npx tscpaths -p ${config} -s ../packages -o ${dist}`);
|
||||||
});
|
|
||||||
const tsResult = tsProject.src().pipe(tsProject());
|
|
||||||
|
|
||||||
return merge2(
|
|
||||||
tsResult.js
|
|
||||||
.pipe(
|
|
||||||
insert.transform((contents, file) => {
|
|
||||||
if (dist === exampleDistDir && file.path.includes(`${path.sep}demo${path.sep}`)) {
|
|
||||||
const iconConfig = '@vant/icons/src/config';
|
|
||||||
contents = contents.replace(
|
|
||||||
iconConfig,
|
|
||||||
path.relative(
|
|
||||||
path.dirname(file.path),
|
|
||||||
`${exampleDistDir}/${iconConfig}`
|
|
||||||
).replace(/\\/g, '/')
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return contents;
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.pipe(gulp.dest(dist)),
|
|
||||||
tsResult.dts.pipe(gulp.dest(dist))
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const copier = (dist, ext) =>
|
const copier = (dist, ext) =>
|
||||||
function copy() {
|
function copy() {
|
||||||
const srcPath = [`${src}/**/*.${ext}`];
|
return gulp.src(`${src}/**/*.${ext}`).pipe(gulp.dest(dist));
|
||||||
if ([esDir, libDir].indexOf(dist) !== -1) {
|
|
||||||
srcPath.push(`!${src}/**/demo/**/*.${ext}`);
|
|
||||||
}
|
|
||||||
return gulp
|
|
||||||
.src(srcPath)
|
|
||||||
.pipe(
|
|
||||||
insert.transform((contents, file) => {
|
|
||||||
if (ext === 'json' && file.path.includes(`${path.sep}demo${path.sep}`) ) {
|
|
||||||
contents = contents.replace('/example', '');
|
|
||||||
}
|
|
||||||
return contents;
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.pipe(gulp.dest(dist));
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const staticCopier = (dist) =>
|
const staticCopier = (dist) =>
|
||||||
@ -129,51 +83,18 @@ const tasks = [
|
|||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
tasks.buildExample = gulp.series(
|
tasks.buildExample = gulp.series(
|
||||||
cleaner(exampleDistDir),
|
cleaner(exampleDir),
|
||||||
gulp.parallel(
|
gulp.parallel(
|
||||||
tsCompiler(exampleDistDir, exampleConfig),
|
tsCompiler(exampleDir, exampleConfig),
|
||||||
lessCompiler(exampleDistDir),
|
lessCompiler(exampleDir),
|
||||||
staticCopier(exampleDistDir),
|
staticCopier(exampleDir),
|
||||||
() =>
|
() =>
|
||||||
gulp
|
gulp.src(`${icons}/**/*`).pipe(gulp.dest(`${exampleDir}/@vant/icons`)),
|
||||||
.src(`${icons}/**/*`)
|
|
||||||
.pipe(gulp.dest(`${exampleDistDir}/@vant/icons`)),
|
|
||||||
() => {
|
() => {
|
||||||
const appJson = JSON.parse(fs.readFileSync(exampleAppJsonPath));
|
gulp.watch(`${src}/**/*.less`, lessCompiler(exampleDir));
|
||||||
const excludePages = ['pages/dashboard/index'];
|
gulp.watch(`${src}/**/*.wxml`, copier(exampleDir, 'wxml'));
|
||||||
appJson.pages
|
gulp.watch(`${src}/**/*.wxs`, copier(exampleDir, 'wxs'));
|
||||||
.filter((page) => page.indexOf(excludePages) === -1)
|
gulp.watch(`${src}/**/*.json`, copier(exampleDir, 'json'));
|
||||||
.forEach((path) => {
|
|
||||||
const component = path.replace(/(pages\/|\/index)/g, '');
|
|
||||||
const writeFiles = [
|
|
||||||
{
|
|
||||||
path: `${examplePagesDir}/${component}/index.js`,
|
|
||||||
contents: "import Page from '../../common/page';\n\nPage();",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: `${examplePagesDir}/${component}/index.wxml`,
|
|
||||||
contents: `<van-${component}-demo />`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
writeFiles.forEach((writeFile) => {
|
|
||||||
fs.access(writeFile.path, fs.constants.F_OK, (fileNotExists) => {
|
|
||||||
if (fileNotExists) {
|
|
||||||
fs.writeFile(writeFile.path, writeFile.contents, (err) => {
|
|
||||||
if (err) {
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
() => {
|
|
||||||
gulp.watch(`${src}/**/*.less`, lessCompiler(exampleDistDir));
|
|
||||||
gulp.watch(`${src}/**/*.wxml`, copier(exampleDistDir, 'wxml'));
|
|
||||||
gulp.watch(`${src}/**/*.wxs`, copier(exampleDistDir, 'wxs'));
|
|
||||||
gulp.watch(`${src}/**/*.ts`, tsCompiler(exampleDistDir, exampleConfig));
|
|
||||||
gulp.watch(`${src}/**/*.json`, copier(exampleDistDir, 'json'));
|
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
15
build/dev.js
Normal file
15
build/dev.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const { dev } = require('@vant/cli');
|
||||||
|
const { exec } = require('child_process');
|
||||||
|
|
||||||
|
const gulpConfig = path.resolve(__dirname, './compiler.js');
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
await dev();
|
||||||
|
|
||||||
|
const p = exec(`npx gulp -f ${gulpConfig} buildExample --color`);
|
||||||
|
p.stdout.on('data', (stdout) => console.info(stdout));
|
||||||
|
p.stderr.on('data', (stderr) => console.info(stderr));
|
||||||
|
}
|
||||||
|
|
||||||
|
run();
|
@ -1,17 +0,0 @@
|
|||||||
import { dirname, resolve } from 'path';
|
|
||||||
import { fileURLToPath } from 'url';
|
|
||||||
import { dev } from '@vant/cli/lib/commands/dev.js';
|
|
||||||
import { exec } from 'child_process';
|
|
||||||
|
|
||||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
||||||
const gulpConfig = resolve(__dirname, './compiler.js');
|
|
||||||
|
|
||||||
async function run() {
|
|
||||||
await dev();
|
|
||||||
|
|
||||||
const p = exec(`npx gulp -f ${gulpConfig} buildExample --color`);
|
|
||||||
p.stdout.on('data', (stdout) => console.info(stdout));
|
|
||||||
p.stderr.on('data', (stderr) => console.info(stderr));
|
|
||||||
}
|
|
||||||
|
|
||||||
run();
|
|
@ -1,3 +1,6 @@
|
|||||||
|
git checkout master
|
||||||
|
git merge dev
|
||||||
|
|
||||||
#!/usr/bin/env sh
|
#!/usr/bin/env sh
|
||||||
set -e
|
set -e
|
||||||
echo "Enter release version: "
|
echo "Enter release version: "
|
||||||
@ -16,10 +19,10 @@ then
|
|||||||
fi
|
fi
|
||||||
|
|
||||||
# commit
|
# commit
|
||||||
npm version $VERSION --message "release: $VERSION"
|
npm version $VERSION --message "build: release $VERSION"
|
||||||
|
|
||||||
# publish
|
# publish
|
||||||
git push origin dev
|
git push origin master
|
||||||
git push origin refs/tags/v$VERSION
|
git push origin refs/tags/v$VERSION
|
||||||
|
|
||||||
if [[ $VERSION =~ [beta] ]]
|
if [[ $VERSION =~ [beta] ]]
|
||||||
@ -28,4 +31,12 @@ then
|
|||||||
else
|
else
|
||||||
npm publish
|
npm publish
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
# sync dev
|
||||||
|
git checkout dev
|
||||||
|
git rebase master
|
||||||
|
git push origin dev
|
||||||
|
|
||||||
|
# changelog
|
||||||
|
vant-cli changelog
|
||||||
fi
|
fi
|
||||||
|
133
dist/action-sheet/index.js
vendored
133
dist/action-sheet/index.js
vendored
@ -1,75 +1,70 @@
|
|||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
import { button } from '../mixins/button';
|
import { button } from '../mixins/button';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
classes: ['list-class'],
|
mixins: [button],
|
||||||
mixins: [button],
|
props: {
|
||||||
props: {
|
show: Boolean,
|
||||||
show: Boolean,
|
title: String,
|
||||||
title: String,
|
cancelText: String,
|
||||||
cancelText: String,
|
description: String,
|
||||||
description: String,
|
round: {
|
||||||
round: {
|
type: Boolean,
|
||||||
type: Boolean,
|
value: true,
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
zIndex: {
|
|
||||||
type: Number,
|
|
||||||
value: 100,
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
type: Array,
|
|
||||||
value: [],
|
|
||||||
},
|
|
||||||
overlay: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
closeOnClickOverlay: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
closeOnClickAction: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
safeAreaInsetBottom: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
rootPortal: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
methods: {
|
zIndex: {
|
||||||
onSelect(event) {
|
type: Number,
|
||||||
const { index } = event.currentTarget.dataset;
|
value: 100,
|
||||||
const { actions, closeOnClickAction, canIUseGetUserProfile } = this.data;
|
|
||||||
const item = actions[index];
|
|
||||||
if (item) {
|
|
||||||
this.$emit('select', item);
|
|
||||||
if (closeOnClickAction) {
|
|
||||||
this.onClose();
|
|
||||||
}
|
|
||||||
if (item.openType === 'getUserInfo' && canIUseGetUserProfile) {
|
|
||||||
wx.getUserProfile({
|
|
||||||
desc: item.getUserProfileDesc || ' ',
|
|
||||||
complete: (userProfile) => {
|
|
||||||
this.$emit('getuserinfo', userProfile);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onCancel() {
|
|
||||||
this.$emit('cancel');
|
|
||||||
},
|
|
||||||
onClose() {
|
|
||||||
this.$emit('close');
|
|
||||||
},
|
|
||||||
onClickOverlay() {
|
|
||||||
this.$emit('click-overlay');
|
|
||||||
this.onClose();
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
actions: {
|
||||||
|
type: Array,
|
||||||
|
value: [],
|
||||||
|
},
|
||||||
|
overlay: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
closeOnClickOverlay: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
closeOnClickAction: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
safeAreaInsetBottom: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSelect(event) {
|
||||||
|
const { index } = event.currentTarget.dataset;
|
||||||
|
const { actions, closeOnClickAction, canIUseGetUserProfile } = this.data;
|
||||||
|
const item = actions[index];
|
||||||
|
if (item) {
|
||||||
|
this.$emit('select', item);
|
||||||
|
if (closeOnClickAction) {
|
||||||
|
this.onClose();
|
||||||
|
}
|
||||||
|
if (item.openType === 'getUserInfo' && canIUseGetUserProfile) {
|
||||||
|
wx.getUserProfile({
|
||||||
|
desc: item.getUserProfileDesc || ' ',
|
||||||
|
complete: (userProfile) => {
|
||||||
|
this.$emit('getuserinfo', userProfile);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
this.$emit('cancel');
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.$emit('close');
|
||||||
|
},
|
||||||
|
onClickOverlay() {
|
||||||
|
this.$emit('click-overlay');
|
||||||
|
this.onClose();
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
5
dist/action-sheet/index.wxml
vendored
5
dist/action-sheet/index.wxml
vendored
@ -6,10 +6,9 @@
|
|||||||
round="{{ round }}"
|
round="{{ round }}"
|
||||||
z-index="{{ zIndex }}"
|
z-index="{{ zIndex }}"
|
||||||
overlay="{{ overlay }}"
|
overlay="{{ overlay }}"
|
||||||
custom-class="van-action-sheet custom-class"
|
custom-class="van-action-sheet"
|
||||||
safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
|
safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
|
||||||
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
||||||
root-portal="{{ rootPortal }}"
|
|
||||||
bind:close="onClickOverlay"
|
bind:close="onClickOverlay"
|
||||||
>
|
>
|
||||||
<view wx:if="{{ title }}" class="van-action-sheet__header">
|
<view wx:if="{{ title }}" class="van-action-sheet__header">
|
||||||
@ -23,7 +22,7 @@
|
|||||||
<view wx:if="{{ description }}" class="van-action-sheet__description van-hairline--bottom">
|
<view wx:if="{{ description }}" class="van-action-sheet__description van-hairline--bottom">
|
||||||
{{ description }}
|
{{ description }}
|
||||||
</view>
|
</view>
|
||||||
<view wx:if="{{ actions && actions.length }}" class="list-class">
|
<view wx:if="{{ actions && actions.length }}">
|
||||||
<!-- button外包一层view,防止actions动态变化,导致渲染时button被打散 -->
|
<!-- button外包一层view,防止actions动态变化,导致渲染时button被打散 -->
|
||||||
<button
|
<button
|
||||||
wx:for="{{ actions }}"
|
wx:for="{{ actions }}"
|
||||||
|
2
dist/action-sheet/index.wxss
vendored
2
dist/action-sheet/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-action-sheet{color:var(--action-sheet-item-text-color,#323233);max-height:var(--action-sheet-max-height,90%)!important}.van-action-sheet__cancel,.van-action-sheet__item{background-color:var(--action-sheet-item-background,#fff);font-size:var(--action-sheet-item-font-size,16px);line-height:var(--action-sheet-item-line-height,22px);padding:14px 16px;text-align:center}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5}.van-action-sheet__cancel:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,#646566)}.van-action-sheet__gap{background-color:var(--action-sheet-cancel-padding-color,#f7f8fa);display:block;height:var(--action-sheet-cancel-padding-top,8px)}.van-action-sheet__item--disabled{color:var(--action-sheet-item-disabled-text-color,#c8c9cc)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__subname{color:var(--action-sheet-subname-color,#969799);font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.van-action-sheet__header{font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--font-weight-bold,500);line-height:var(--action-sheet-header-height,48px);text-align:center}.van-action-sheet__description{color:var(--action-sheet-description-color,#969799);font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.van-action-sheet__close{color:var(--action-sheet-close-icon-color,#c8c9cc);font-size:var(--action-sheet-close-icon-size,22px)!important;line-height:inherit!important;padding:var(--action-sheet-close-icon-padding,0 16px);position:absolute!important;right:0;top:0}.van-action-sheet__loading{display:flex!important}
|
@import '../common/index.wxss';.van-action-sheet{max-height:90%!important;max-height:var(--action-sheet-max-height,90%)!important;color:#323233;color:var(--action-sheet-item-text-color,#323233)}.van-action-sheet__cancel,.van-action-sheet__item{padding:14px 16px;text-align:center;font-size:16px;font-size:var(--action-sheet-item-font-size,16px);line-height:22px;line-height:var(--action-sheet-item-line-height,22px);background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-action-sheet__cancel:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:#646566;color:var(--action-sheet-cancel-text-color,#646566)}.van-action-sheet__gap{display:block;height:8px;height:var(--action-sheet-cancel-padding-top,8px);background-color:#f7f8fa;background-color:var(--action-sheet-cancel-padding-color,#f7f8fa)}.van-action-sheet__item--disabled{color:#c8c9cc;color:var(--action-sheet-item-disabled-text-color,#c8c9cc)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__subname{margin-top:8px;margin-top:var(--padding-xs,8px);font-size:12px;font-size:var(--action-sheet-subname-font-size,12px);color:#969799;color:var(--action-sheet-subname-color,#969799);line-height:20px;line-height:var(--action-sheet-subname-line-height,20px)}.van-action-sheet__header{text-align:center;font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--action-sheet-header-font-size,16px);line-height:48px;line-height:var(--action-sheet-header-height,48px)}.van-action-sheet__description{text-align:center;padding:20px 16px;padding:20px var(--padding-md,16px);color:#969799;color:var(--action-sheet-description-color,#969799);font-size:14px;font-size:var(--action-sheet-description-font-size,14px);line-height:20px;line-height:var(--action-sheet-description-line-height,20px)}.van-action-sheet__close{position:absolute!important;top:0;right:0;line-height:inherit!important;padding:0 16px;padding:var(--action-sheet-close-icon-padding,0 16px);font-size:22px!important;font-size:var(--action-sheet-close-icon-size,22px)!important;color:#c8c9cc;color:var(--action-sheet-close-icon-color,#c8c9cc)}.van-action-sheet__loading{display:-webkit-flex!important;display:flex!important}
|
435
dist/area/index.js
vendored
435
dist/area/index.js
vendored
@ -3,218 +3,233 @@ import { pickerProps } from '../picker/shared';
|
|||||||
import { requestAnimationFrame } from '../common/utils';
|
import { requestAnimationFrame } from '../common/utils';
|
||||||
const EMPTY_CODE = '000000';
|
const EMPTY_CODE = '000000';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
classes: ['active-class', 'toolbar-class', 'column-class'],
|
classes: ['active-class', 'toolbar-class', 'column-class'],
|
||||||
props: Object.assign(Object.assign({}, pickerProps), { showToolbar: {
|
props: Object.assign(Object.assign({}, pickerProps), {
|
||||||
type: Boolean,
|
value: {
|
||||||
value: true,
|
type: String,
|
||||||
}, value: {
|
observer(value) {
|
||||||
type: String,
|
this.code = value;
|
||||||
observer(value) {
|
this.setValues();
|
||||||
this.code = value;
|
},
|
||||||
this.setValues();
|
|
||||||
},
|
|
||||||
}, areaList: {
|
|
||||||
type: Object,
|
|
||||||
value: {},
|
|
||||||
observer: 'setValues',
|
|
||||||
}, columnsNum: {
|
|
||||||
type: null,
|
|
||||||
value: 3,
|
|
||||||
}, columnsPlaceholder: {
|
|
||||||
type: Array,
|
|
||||||
observer(val) {
|
|
||||||
this.setData({
|
|
||||||
typeToColumnsPlaceholder: {
|
|
||||||
province: val[0] || '',
|
|
||||||
city: val[1] || '',
|
|
||||||
county: val[2] || '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
} }),
|
|
||||||
data: {
|
|
||||||
columns: [{ values: [] }, { values: [] }, { values: [] }],
|
|
||||||
typeToColumnsPlaceholder: {},
|
|
||||||
},
|
},
|
||||||
mounted() {
|
areaList: {
|
||||||
requestAnimationFrame(() => {
|
type: Object,
|
||||||
this.setValues();
|
value: {},
|
||||||
|
observer: 'setValues',
|
||||||
|
},
|
||||||
|
columnsNum: {
|
||||||
|
type: null,
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
columnsPlaceholder: {
|
||||||
|
type: Array,
|
||||||
|
observer(val) {
|
||||||
|
this.setData({
|
||||||
|
typeToColumnsPlaceholder: {
|
||||||
|
province: val[0] || '',
|
||||||
|
city: val[1] || '',
|
||||||
|
county: val[2] || '',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
}),
|
||||||
getPicker() {
|
data: {
|
||||||
if (this.picker == null) {
|
columns: [{ values: [] }, { values: [] }, { values: [] }],
|
||||||
this.picker = this.selectComponent('.van-area__picker');
|
typeToColumnsPlaceholder: {},
|
||||||
}
|
},
|
||||||
return this.picker;
|
mounted() {
|
||||||
},
|
requestAnimationFrame(() => {
|
||||||
onCancel(event) {
|
this.setValues();
|
||||||
this.emit('cancel', event.detail);
|
});
|
||||||
},
|
},
|
||||||
onConfirm(event) {
|
methods: {
|
||||||
const { index } = event.detail;
|
getPicker() {
|
||||||
let { value } = event.detail;
|
if (this.picker == null) {
|
||||||
value = this.parseValues(value);
|
this.picker = this.selectComponent('.van-area__picker');
|
||||||
this.emit('confirm', { value, index });
|
}
|
||||||
},
|
return this.picker;
|
||||||
emit(type, detail) {
|
|
||||||
detail.values = detail.value;
|
|
||||||
delete detail.value;
|
|
||||||
this.$emit(type, detail);
|
|
||||||
},
|
|
||||||
parseValues(values) {
|
|
||||||
const { columnsPlaceholder } = this.data;
|
|
||||||
return values.map((value, index) => {
|
|
||||||
if (value &&
|
|
||||||
(!value.code || value.name === columnsPlaceholder[index])) {
|
|
||||||
return Object.assign(Object.assign({}, value), { code: '', name: '' });
|
|
||||||
}
|
|
||||||
return value;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onChange(event) {
|
|
||||||
var _a;
|
|
||||||
const { index, picker, value } = event.detail;
|
|
||||||
this.code = value[index].code;
|
|
||||||
(_a = this.setValues()) === null || _a === void 0 ? void 0 : _a.then(() => {
|
|
||||||
this.$emit('change', {
|
|
||||||
picker,
|
|
||||||
values: this.parseValues(picker.getValues()),
|
|
||||||
index,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getConfig(type) {
|
|
||||||
const { areaList } = this.data;
|
|
||||||
return (areaList && areaList[`${type}_list`]) || {};
|
|
||||||
},
|
|
||||||
getList(type, code) {
|
|
||||||
if (type !== 'province' && !code) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
const { typeToColumnsPlaceholder } = this.data;
|
|
||||||
const list = this.getConfig(type);
|
|
||||||
let result = Object.keys(list).map((code) => ({
|
|
||||||
code,
|
|
||||||
name: list[code],
|
|
||||||
}));
|
|
||||||
if (code != null) {
|
|
||||||
// oversea code
|
|
||||||
if (code[0] === '9' && type === 'city') {
|
|
||||||
code = '9';
|
|
||||||
}
|
|
||||||
result = result.filter((item) => item.code.indexOf(code) === 0);
|
|
||||||
}
|
|
||||||
if (typeToColumnsPlaceholder[type] && result.length) {
|
|
||||||
// set columns placeholder
|
|
||||||
const codeFill = type === 'province'
|
|
||||||
? ''
|
|
||||||
: type === 'city'
|
|
||||||
? EMPTY_CODE.slice(2, 4)
|
|
||||||
: EMPTY_CODE.slice(4, 6);
|
|
||||||
result.unshift({
|
|
||||||
code: `${code}${codeFill}`,
|
|
||||||
name: typeToColumnsPlaceholder[type],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
},
|
|
||||||
getIndex(type, code) {
|
|
||||||
let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
|
|
||||||
const list = this.getList(type, code.slice(0, compareNum - 2));
|
|
||||||
// oversea code
|
|
||||||
if (code[0] === '9' && type === 'province') {
|
|
||||||
compareNum = 1;
|
|
||||||
}
|
|
||||||
code = code.slice(0, compareNum);
|
|
||||||
for (let i = 0; i < list.length; i++) {
|
|
||||||
if (list[i].code.slice(0, compareNum) === code) {
|
|
||||||
return i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
},
|
|
||||||
setValues() {
|
|
||||||
const picker = this.getPicker();
|
|
||||||
if (!picker) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let code = this.code || this.getDefaultCode();
|
|
||||||
const provinceList = this.getList('province');
|
|
||||||
const cityList = this.getList('city', code.slice(0, 2));
|
|
||||||
const stack = [];
|
|
||||||
const indexes = [];
|
|
||||||
const { columnsNum } = this.data;
|
|
||||||
if (columnsNum >= 1) {
|
|
||||||
stack.push(picker.setColumnValues(0, provinceList, false));
|
|
||||||
indexes.push(this.getIndex('province', code));
|
|
||||||
}
|
|
||||||
if (columnsNum >= 2) {
|
|
||||||
stack.push(picker.setColumnValues(1, cityList, false));
|
|
||||||
indexes.push(this.getIndex('city', code));
|
|
||||||
if (cityList.length && code.slice(2, 4) === '00') {
|
|
||||||
[{ code }] = cityList;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (columnsNum === 3) {
|
|
||||||
stack.push(picker.setColumnValues(2, this.getList('county', code.slice(0, 4)), false));
|
|
||||||
indexes.push(this.getIndex('county', code));
|
|
||||||
}
|
|
||||||
return Promise.all(stack)
|
|
||||||
.catch(() => { })
|
|
||||||
.then(() => picker.setIndexes(indexes))
|
|
||||||
.catch(() => { });
|
|
||||||
},
|
|
||||||
getDefaultCode() {
|
|
||||||
const { columnsPlaceholder } = this.data;
|
|
||||||
if (columnsPlaceholder.length) {
|
|
||||||
return EMPTY_CODE;
|
|
||||||
}
|
|
||||||
const countyCodes = Object.keys(this.getConfig('county'));
|
|
||||||
if (countyCodes[0]) {
|
|
||||||
return countyCodes[0];
|
|
||||||
}
|
|
||||||
const cityCodes = Object.keys(this.getConfig('city'));
|
|
||||||
if (cityCodes[0]) {
|
|
||||||
return cityCodes[0];
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
getValues() {
|
|
||||||
const picker = this.getPicker();
|
|
||||||
if (!picker) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
return this.parseValues(picker.getValues().filter((value) => !!value));
|
|
||||||
},
|
|
||||||
getDetail() {
|
|
||||||
const values = this.getValues();
|
|
||||||
const area = {
|
|
||||||
code: '',
|
|
||||||
country: '',
|
|
||||||
province: '',
|
|
||||||
city: '',
|
|
||||||
county: '',
|
|
||||||
};
|
|
||||||
if (!values.length) {
|
|
||||||
return area;
|
|
||||||
}
|
|
||||||
const names = values.map((item) => item.name);
|
|
||||||
area.code = values[values.length - 1].code;
|
|
||||||
if (area.code[0] === '9') {
|
|
||||||
area.country = names[1] || '';
|
|
||||||
area.province = names[2] || '';
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
area.province = names[0] || '';
|
|
||||||
area.city = names[1] || '';
|
|
||||||
area.county = names[2] || '';
|
|
||||||
}
|
|
||||||
return area;
|
|
||||||
},
|
|
||||||
reset(code) {
|
|
||||||
this.code = code || '';
|
|
||||||
return this.setValues();
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
onCancel(event) {
|
||||||
|
this.emit('cancel', event.detail);
|
||||||
|
},
|
||||||
|
onConfirm(event) {
|
||||||
|
const { index } = event.detail;
|
||||||
|
let { value } = event.detail;
|
||||||
|
value = this.parseValues(value);
|
||||||
|
this.emit('confirm', { value, index });
|
||||||
|
},
|
||||||
|
emit(type, detail) {
|
||||||
|
detail.values = detail.value;
|
||||||
|
delete detail.value;
|
||||||
|
this.$emit(type, detail);
|
||||||
|
},
|
||||||
|
parseValues(values) {
|
||||||
|
const { columnsPlaceholder } = this.data;
|
||||||
|
return values.map((value, index) => {
|
||||||
|
if (
|
||||||
|
value &&
|
||||||
|
(!value.code || value.name === columnsPlaceholder[index])
|
||||||
|
) {
|
||||||
|
return Object.assign(Object.assign({}, value), {
|
||||||
|
code: '',
|
||||||
|
name: '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onChange(event) {
|
||||||
|
var _a;
|
||||||
|
const { index, picker, value } = event.detail;
|
||||||
|
this.code = value[index].code;
|
||||||
|
(_a = this.setValues()) === null || _a === void 0
|
||||||
|
? void 0
|
||||||
|
: _a.then(() => {
|
||||||
|
this.$emit('change', {
|
||||||
|
picker,
|
||||||
|
values: this.parseValues(picker.getValues()),
|
||||||
|
index,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getConfig(type) {
|
||||||
|
const { areaList } = this.data;
|
||||||
|
return (areaList && areaList[`${type}_list`]) || {};
|
||||||
|
},
|
||||||
|
getList(type, code) {
|
||||||
|
if (type !== 'province' && !code) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const { typeToColumnsPlaceholder } = this.data;
|
||||||
|
const list = this.getConfig(type);
|
||||||
|
let result = Object.keys(list).map((code) => ({
|
||||||
|
code,
|
||||||
|
name: list[code],
|
||||||
|
}));
|
||||||
|
if (code != null) {
|
||||||
|
// oversea code
|
||||||
|
if (code[0] === '9' && type === 'city') {
|
||||||
|
code = '9';
|
||||||
|
}
|
||||||
|
result = result.filter((item) => item.code.indexOf(code) === 0);
|
||||||
|
}
|
||||||
|
if (typeToColumnsPlaceholder[type] && result.length) {
|
||||||
|
// set columns placeholder
|
||||||
|
const codeFill =
|
||||||
|
type === 'province'
|
||||||
|
? ''
|
||||||
|
: type === 'city'
|
||||||
|
? EMPTY_CODE.slice(2, 4)
|
||||||
|
: EMPTY_CODE.slice(4, 6);
|
||||||
|
result.unshift({
|
||||||
|
code: `${code}${codeFill}`,
|
||||||
|
name: typeToColumnsPlaceholder[type],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
getIndex(type, code) {
|
||||||
|
let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
|
||||||
|
const list = this.getList(type, code.slice(0, compareNum - 2));
|
||||||
|
// oversea code
|
||||||
|
if (code[0] === '9' && type === 'province') {
|
||||||
|
compareNum = 1;
|
||||||
|
}
|
||||||
|
code = code.slice(0, compareNum);
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
if (list[i].code.slice(0, compareNum) === code) {
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
setValues() {
|
||||||
|
const picker = this.getPicker();
|
||||||
|
if (!picker) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let code = this.code || this.getDefaultCode();
|
||||||
|
const provinceList = this.getList('province');
|
||||||
|
const cityList = this.getList('city', code.slice(0, 2));
|
||||||
|
const stack = [];
|
||||||
|
const indexes = [];
|
||||||
|
const { columnsNum } = this.data;
|
||||||
|
if (columnsNum >= 1) {
|
||||||
|
stack.push(picker.setColumnValues(0, provinceList, false));
|
||||||
|
indexes.push(this.getIndex('province', code));
|
||||||
|
}
|
||||||
|
if (columnsNum >= 2) {
|
||||||
|
stack.push(picker.setColumnValues(1, cityList, false));
|
||||||
|
indexes.push(this.getIndex('city', code));
|
||||||
|
if (cityList.length && code.slice(2, 4) === '00') {
|
||||||
|
[{ code }] = cityList;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (columnsNum === 3) {
|
||||||
|
stack.push(
|
||||||
|
picker.setColumnValues(
|
||||||
|
2,
|
||||||
|
this.getList('county', code.slice(0, 4)),
|
||||||
|
false
|
||||||
|
)
|
||||||
|
);
|
||||||
|
indexes.push(this.getIndex('county', code));
|
||||||
|
}
|
||||||
|
return Promise.all(stack)
|
||||||
|
.catch(() => {})
|
||||||
|
.then(() => picker.setIndexes(indexes))
|
||||||
|
.catch(() => {});
|
||||||
|
},
|
||||||
|
getDefaultCode() {
|
||||||
|
const { columnsPlaceholder } = this.data;
|
||||||
|
if (columnsPlaceholder.length) {
|
||||||
|
return EMPTY_CODE;
|
||||||
|
}
|
||||||
|
const countyCodes = Object.keys(this.getConfig('county'));
|
||||||
|
if (countyCodes[0]) {
|
||||||
|
return countyCodes[0];
|
||||||
|
}
|
||||||
|
const cityCodes = Object.keys(this.getConfig('city'));
|
||||||
|
if (cityCodes[0]) {
|
||||||
|
return cityCodes[0];
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
getValues() {
|
||||||
|
const picker = this.getPicker();
|
||||||
|
if (!picker) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
return this.parseValues(picker.getValues().filter((value) => !!value));
|
||||||
|
},
|
||||||
|
getDetail() {
|
||||||
|
const values = this.getValues();
|
||||||
|
const area = {
|
||||||
|
code: '',
|
||||||
|
country: '',
|
||||||
|
province: '',
|
||||||
|
city: '',
|
||||||
|
county: '',
|
||||||
|
};
|
||||||
|
if (!values.length) {
|
||||||
|
return area;
|
||||||
|
}
|
||||||
|
const names = values.map((item) => item.name);
|
||||||
|
area.code = values[values.length - 1].code;
|
||||||
|
if (area.code[0] === '9') {
|
||||||
|
area.country = names[1] || '';
|
||||||
|
area.province = names[2] || '';
|
||||||
|
} else {
|
||||||
|
area.province = names[0] || '';
|
||||||
|
area.city = names[1] || '';
|
||||||
|
area.county = names[2] || '';
|
||||||
|
}
|
||||||
|
return area;
|
||||||
|
},
|
||||||
|
reset(code) {
|
||||||
|
this.code = code || '';
|
||||||
|
return this.setValues();
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/area/index.wxml
vendored
2
dist/area/index.wxml
vendored
@ -5,7 +5,7 @@
|
|||||||
active-class="active-class"
|
active-class="active-class"
|
||||||
toolbar-class="toolbar-class"
|
toolbar-class="toolbar-class"
|
||||||
column-class="column-class"
|
column-class="column-class"
|
||||||
show-toolbar="{{ showToolbar }}"
|
show-toolbar
|
||||||
value-key="name"
|
value-key="name"
|
||||||
title="{{ title }}"
|
title="{{ title }}"
|
||||||
loading="{{ loading }}"
|
loading="{{ loading }}"
|
||||||
|
111
dist/button/index.js
vendored
111
dist/button/index.js
vendored
@ -3,62 +3,67 @@ import { button } from '../mixins/button';
|
|||||||
import { canIUseFormFieldButton } from '../common/version';
|
import { canIUseFormFieldButton } from '../common/version';
|
||||||
const mixins = [button];
|
const mixins = [button];
|
||||||
if (canIUseFormFieldButton()) {
|
if (canIUseFormFieldButton()) {
|
||||||
mixins.push('wx://form-field-button');
|
mixins.push('wx://form-field-button');
|
||||||
}
|
}
|
||||||
VantComponent({
|
VantComponent({
|
||||||
mixins,
|
mixins,
|
||||||
classes: ['hover-class', 'loading-class'],
|
classes: ['hover-class', 'loading-class'],
|
||||||
data: {
|
data: {
|
||||||
baseStyle: '',
|
baseStyle: '',
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
formType: String,
|
||||||
|
icon: String,
|
||||||
|
classPrefix: {
|
||||||
|
type: String,
|
||||||
|
value: 'van-icon',
|
||||||
},
|
},
|
||||||
props: {
|
plain: Boolean,
|
||||||
formType: String,
|
block: Boolean,
|
||||||
icon: String,
|
round: Boolean,
|
||||||
classPrefix: {
|
square: Boolean,
|
||||||
type: String,
|
loading: Boolean,
|
||||||
value: 'van-icon',
|
hairline: Boolean,
|
||||||
},
|
disabled: Boolean,
|
||||||
plain: Boolean,
|
loadingText: String,
|
||||||
block: Boolean,
|
customStyle: String,
|
||||||
round: Boolean,
|
loadingType: {
|
||||||
square: Boolean,
|
type: String,
|
||||||
loading: Boolean,
|
value: 'circular',
|
||||||
hairline: Boolean,
|
|
||||||
disabled: Boolean,
|
|
||||||
loadingText: String,
|
|
||||||
customStyle: String,
|
|
||||||
loadingType: {
|
|
||||||
type: String,
|
|
||||||
value: 'circular',
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
value: 'default',
|
|
||||||
},
|
|
||||||
dataset: null,
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
value: 'normal',
|
|
||||||
},
|
|
||||||
loadingSize: {
|
|
||||||
type: String,
|
|
||||||
value: '20px',
|
|
||||||
},
|
|
||||||
color: String,
|
|
||||||
},
|
},
|
||||||
methods: {
|
type: {
|
||||||
onClick(event) {
|
type: String,
|
||||||
this.$emit('click', event);
|
value: 'default',
|
||||||
const { canIUseGetUserProfile, openType, getUserProfileDesc, lang, } = this.data;
|
|
||||||
if (openType === 'getUserInfo' && canIUseGetUserProfile) {
|
|
||||||
wx.getUserProfile({
|
|
||||||
desc: getUserProfileDesc || ' ',
|
|
||||||
lang: lang || 'en',
|
|
||||||
complete: (userProfile) => {
|
|
||||||
this.$emit('getuserinfo', userProfile);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
dataset: null,
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
value: 'normal',
|
||||||
|
},
|
||||||
|
loadingSize: {
|
||||||
|
type: String,
|
||||||
|
value: '20px',
|
||||||
|
},
|
||||||
|
color: String,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick(event) {
|
||||||
|
this.$emit('click', event);
|
||||||
|
const {
|
||||||
|
canIUseGetUserProfile,
|
||||||
|
openType,
|
||||||
|
getUserProfileDesc,
|
||||||
|
lang,
|
||||||
|
} = this.data;
|
||||||
|
if (openType === 'getUserInfo' && canIUseGetUserProfile) {
|
||||||
|
wx.getUserProfile({
|
||||||
|
desc: getUserProfileDesc || ' ',
|
||||||
|
lang: lang || 'en',
|
||||||
|
complete: (userProfile) => {
|
||||||
|
this.$emit('getuserinfo', userProfile);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
7
dist/button/index.wxml
vendored
7
dist/button/index.wxml
vendored
@ -2,10 +2,10 @@
|
|||||||
<wxs src="./index.wxs" module="computed" />
|
<wxs src="./index.wxs" module="computed" />
|
||||||
|
|
||||||
<button
|
<button
|
||||||
id="{{ id || buttonId }}"
|
id="{{ id }}"
|
||||||
data-detail="{{ dataset }}"
|
data-detail="{{ dataset }}"
|
||||||
class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
|
class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
|
||||||
hover-class="{{ disabled || loading ? '' : 'van-button--active hover-class'}}"
|
hover-class="van-button--active hover-class"
|
||||||
lang="{{ lang }}"
|
lang="{{ lang }}"
|
||||||
form-type="{{ formType }}"
|
form-type="{{ formType }}"
|
||||||
style="{{ computed.rootStyle({ plain, color, customStyle }) }}"
|
style="{{ computed.rootStyle({ plain, color, customStyle }) }}"
|
||||||
@ -22,12 +22,9 @@
|
|||||||
bindgetuserinfo="onGetUserInfo"
|
bindgetuserinfo="onGetUserInfo"
|
||||||
bindcontact="onContact"
|
bindcontact="onContact"
|
||||||
bindgetphonenumber="onGetPhoneNumber"
|
bindgetphonenumber="onGetPhoneNumber"
|
||||||
bindgetrealtimephonenumber="onGetRealTimePhoneNumber"
|
|
||||||
bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
|
|
||||||
binderror="onError"
|
binderror="onError"
|
||||||
bindlaunchapp="onLaunchApp"
|
bindlaunchapp="onLaunchApp"
|
||||||
bindopensetting="onOpenSetting"
|
bindopensetting="onOpenSetting"
|
||||||
bindchooseavatar="onChooseAvatar"
|
|
||||||
>
|
>
|
||||||
<block wx:if="{{ loading }}">
|
<block wx:if="{{ loading }}">
|
||||||
<van-loading
|
<van-loading
|
||||||
|
2
dist/button/index.wxss
vendored
2
dist/button/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-button{-webkit-text-size-adjust:100%;align-items:center;-webkit-appearance:none;border-radius:var(--button-border-radius,2px);box-sizing:border-box;display:inline-flex;font-size:var(--button-default-font-size,16px);height:var(--button-default-height,44px);justify-content:center;line-height:var(--button-line-height,20px);padding:0;position:relative;text-align:center;transition:opacity .2s;vertical-align:middle}.van-button:before{background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:" ";height:100%;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{background:var(--button-default-background-color,#fff);border:var(--button-border-width,1px) solid var(--button-default-border-color,#ebedf0);color:var(--button-default-color,#323233)}.van-button--primary{background:var(--button-primary-background-color,#07c160);border:var(--button-border-width,1px) solid var(--button-primary-border-color,#07c160);color:var(--button-primary-color,#fff)}.van-button--info{background:var(--button-info-background-color,#1989fa);border:var(--button-border-width,1px) solid var(--button-info-border-color,#1989fa);color:var(--button-info-color,#fff)}.van-button--danger{background:var(--button-danger-background-color,#ee0a24);border:var(--button-border-width,1px) solid var(--button-danger-border-color,#ee0a24);color:var(--button-danger-color,#fff)}.van-button--warning{background:var(--button-warning-background-color,#ff976a);border:var(--button-border-width,1px) solid var(--button-warning-border-color,#ff976a);color:var(--button-warning-color,#fff)}.van-button--plain{background:var(--button-plain-background-color,#fff)}.van-button--plain.van-button--primary{color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:var(--button-warning-background-color,#ff976a)}.van-button--large{height:var(--button-large-height,50px);width:100%}.van-button--normal{font-size:var(--button-normal-font-size,14px);padding:0 15px}.van-button--small{font-size:var(--button-small-font-size,12px);height:var(--button-small-height,30px);min-width:var(--button-small-min-width,60px);padding:0 var(--padding-xs,8px)}.van-button--mini{display:inline-block;font-size:var(--button-mini-font-size,10px);height:var(--button-mini-height,22px);min-width:var(--button-mini-min-width,50px)}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:flex;width:100%}.van-button--round{border-radius:var(--button-round-border-radius,999px)}.van-button--square{border-radius:0}.van-button--disabled{opacity:var(--button-disabled-opacity,.5)}.van-button__text{display:inline}.van-button__icon+.van-button__text:not(:empty),.van-button__loading-text{margin-left:4px}.van-button__icon{line-height:inherit!important;min-width:1em;vertical-align:top}.van-button--hairline{border-width:0;padding-top:1px}.van-button--hairline:after{border-color:inherit;border-radius:calc(var(--button-border-radius, 2px)*2);border-width:1px}.van-button--hairline.van-button--round:after{border-radius:var(--button-round-border-radius,999px)}.van-button--hairline.van-button--square:after{border-radius:0}
|
@import '../common/index.wxss';.van-button{position:relative;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;padding:0;text-align:center;vertical-align:middle;-webkit-appearance:none;-webkit-text-size-adjust:100%;height:44px;height:var(--button-default-height,44px);line-height:20px;line-height:var(--button-line-height,20px);font-size:16px;font-size:var(--button-default-font-size,16px);transition:opacity .2s;transition:opacity var(--animation-duration-fast,.2s);border-radius:2px;border-radius:var(--button-border-radius,2px)}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;border:inherit;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:" ";background-color:#000;background-color:var(--black,#000);border-color:#000;border-color:var(--black,#000)}.van-button:after{border-width:0}.van-button--active:before{opacity:.15}.van-button--unclickable:after{display:none}.van-button--default{color:#323233;color:var(--button-default-color,#323233);background:#fff;background:var(--button-default-background-color,#fff);border:1px solid #ebedf0;border:var(--button-border-width,1px) solid var(--button-default-border-color,#ebedf0)}.van-button--primary{color:#fff;color:var(--button-primary-color,#fff);background:#07c160;background:var(--button-primary-background-color,#07c160);border:1px solid #07c160;border:var(--button-border-width,1px) solid var(--button-primary-border-color,#07c160)}.van-button--info{color:#fff;color:var(--button-info-color,#fff);background:#1989fa;background:var(--button-info-background-color,#1989fa);border:1px solid #1989fa;border:var(--button-border-width,1px) solid var(--button-info-border-color,#1989fa)}.van-button--danger{color:#fff;color:var(--button-danger-color,#fff);background:#ee0a24;background:var(--button-danger-background-color,#ee0a24);border:1px solid #ee0a24;border:var(--button-border-width,1px) solid var(--button-danger-border-color,#ee0a24)}.van-button--warning{color:#fff;color:var(--button-warning-color,#fff);background:#ff976a;background:var(--button-warning-background-color,#ff976a);border:1px solid #ff976a;border:var(--button-border-width,1px) solid var(--button-warning-border-color,#ff976a)}.van-button--plain{background:#fff;background:var(--button-plain-background-color,#fff)}.van-button--plain.van-button--primary{color:#07c160;color:var(--button-primary-background-color,#07c160)}.van-button--plain.van-button--info{color:#1989fa;color:var(--button-info-background-color,#1989fa)}.van-button--plain.van-button--danger{color:#ee0a24;color:var(--button-danger-background-color,#ee0a24)}.van-button--plain.van-button--warning{color:#ff976a;color:var(--button-warning-background-color,#ff976a)}.van-button--large{width:100%;height:50px;height:var(--button-large-height,50px)}.van-button--normal{padding:0 15px;font-size:14px;font-size:var(--button-normal-font-size,14px)}.van-button--small{min-width:60px;min-width:var(--button-small-min-width,60px);height:30px;height:var(--button-small-height,30px);padding:0 8px;padding:0 var(--padding-xs,8px);font-size:12px;font-size:var(--button-small-font-size,12px)}.van-button--mini{display:inline-block;min-width:50px;min-width:var(--button-mini-min-width,50px);height:22px;height:var(--button-mini-height,22px);font-size:10px;font-size:var(--button-mini-font-size,10px)}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{display:-webkit-flex;display:flex;width:100%}.van-button--round{border-radius:999px;border-radius:var(--button-round-border-radius,999px)}.van-button--square{border-radius:0}.van-button--disabled{opacity:.5;opacity:var(--button-disabled-opacity,.5)}.van-button__text{display:inline}.van-button__icon+.van-button__text:not(:empty),.van-button__loading-text{margin-left:4px}.van-button__icon{min-width:1em;line-height:inherit!important;vertical-align:top}.van-button--hairline{padding-top:1px;border-width:0}.van-button--hairline:after{border-color:inherit;border-width:1px;border-radius:4px;border-radius:calc(var(--button-border-radius, 2px)*2)}.van-button--hairline.van-button--round:after{border-radius:999px;border-radius:var(--button-round-border-radius,999px)}.van-button--hairline.van-button--square:after{border-radius:0}
|
7
dist/calendar/calendar.wxml
vendored
7
dist/calendar/calendar.wxml
vendored
@ -1,5 +1,3 @@
|
|||||||
<wxs src="./index.wxs" module="computed" />
|
|
||||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
||||||
<view class="van-calendar">
|
<view class="van-calendar">
|
||||||
<header
|
<header
|
||||||
title="{{ title }}"
|
title="{{ title }}"
|
||||||
@ -7,7 +5,6 @@
|
|||||||
subtitle="{{ subtitle }}"
|
subtitle="{{ subtitle }}"
|
||||||
showSubtitle="{{ showSubtitle }}"
|
showSubtitle="{{ showSubtitle }}"
|
||||||
firstDayOfWeek="{{ firstDayOfWeek }}"
|
firstDayOfWeek="{{ firstDayOfWeek }}"
|
||||||
bind:click-subtitle="onClickSubtitle"
|
|
||||||
>
|
>
|
||||||
<slot name="title" slot="title"></slot>
|
<slot name="title" slot="title"></slot>
|
||||||
</header>
|
</header>
|
||||||
@ -56,12 +53,12 @@
|
|||||||
type="danger"
|
type="danger"
|
||||||
color="{{ color }}"
|
color="{{ color }}"
|
||||||
custom-class="van-calendar__confirm"
|
custom-class="van-calendar__confirm"
|
||||||
disabled="{{ computed.getButtonDisabled(type, currentDate, minRange) }}"
|
disabled="{{ computed.getButtonDisabled(type, currentDate) }}"
|
||||||
nativeType="text"
|
nativeType="text"
|
||||||
bind:click="onConfirm"
|
bind:click="onConfirm"
|
||||||
>
|
>
|
||||||
{{
|
{{
|
||||||
computed.getButtonDisabled(type, currentDate, minRange)
|
computed.getButtonDisabled(type, currentDate)
|
||||||
? confirmDisabledText
|
? confirmDisabledText
|
||||||
: confirmText
|
: confirmText
|
||||||
}}
|
}}
|
||||||
|
59
dist/calendar/components/header/index.js
vendored
59
dist/calendar/components/header/index.js
vendored
@ -1,37 +1,34 @@
|
|||||||
import { VantComponent } from '../../../common/component';
|
import { VantComponent } from '../../../common/component';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
value: '日期选择',
|
value: '日期选择',
|
||||||
},
|
|
||||||
subtitle: String,
|
|
||||||
showTitle: Boolean,
|
|
||||||
showSubtitle: Boolean,
|
|
||||||
firstDayOfWeek: {
|
|
||||||
type: Number,
|
|
||||||
observer: 'initWeekDay',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: {
|
subtitle: String,
|
||||||
weekdays: [],
|
showTitle: Boolean,
|
||||||
|
showSubtitle: Boolean,
|
||||||
|
firstDayOfWeek: {
|
||||||
|
type: Number,
|
||||||
|
observer: 'initWeekDay',
|
||||||
},
|
},
|
||||||
created() {
|
},
|
||||||
this.initWeekDay();
|
data: {
|
||||||
},
|
weekdays: [],
|
||||||
methods: {
|
},
|
||||||
initWeekDay() {
|
created() {
|
||||||
const defaultWeeks = ['日', '一', '二', '三', '四', '五', '六'];
|
this.initWeekDay();
|
||||||
const firstDayOfWeek = this.data.firstDayOfWeek || 0;
|
},
|
||||||
this.setData({
|
methods: {
|
||||||
weekdays: [
|
initWeekDay() {
|
||||||
...defaultWeeks.slice(firstDayOfWeek, 7),
|
const defaultWeeks = ['日', '一', '二', '三', '四', '五', '六'];
|
||||||
...defaultWeeks.slice(0, firstDayOfWeek),
|
const firstDayOfWeek = this.data.firstDayOfWeek || 0;
|
||||||
],
|
this.setData({
|
||||||
});
|
weekdays: [
|
||||||
},
|
...defaultWeeks.slice(firstDayOfWeek, 7),
|
||||||
onClickSubtitle(event) {
|
...defaultWeeks.slice(0, firstDayOfWeek),
|
||||||
this.$emit('click-subtitle', event);
|
],
|
||||||
},
|
});
|
||||||
},
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/calendar/components/header/index.wxml
vendored
2
dist/calendar/components/header/index.wxml
vendored
@ -4,7 +4,7 @@
|
|||||||
<view class="van-calendar__header-title">{{ title }}</view>
|
<view class="van-calendar__header-title">{{ title }}</view>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<view wx:if="{{ showSubtitle }}" class="van-calendar__header-subtitle" bind:tap="onClickSubtitle">
|
<view wx:if="{{ showSubtitle }}" class="van-calendar__header-subtitle">
|
||||||
{{ subtitle }}
|
{{ subtitle }}
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
2
dist/calendar/components/header/index.wxss
vendored
2
dist/calendar/components/header/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../../../common/index.wxss';.van-calendar__header{box-shadow:var(--calendar-header-box-shadow,0 2px 10px hsla(220,1%,50%,.16));flex-shrink:0}.van-calendar__header-subtitle,.van-calendar__header-title{font-weight:var(--font-weight-bold,500);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.van-calendar__header-title+.van-calendar__header-title,.van-calendar__header-title:empty{display:none}.van-calendar__header-title:empty+.van-calendar__header-title{display:block!important}.van-calendar__weekdays{display:flex}.van-calendar__weekday{flex:1;font-size:var(--calendar-weekdays-font-size,12px);line-height:var(--calendar-weekdays-height,30px);text-align:center}
|
@import '../../../common/index.wxss';.van-calendar__header{-webkit-flex-shrink:0;flex-shrink:0;box-shadow:0 2px 10px rgba(125,126,128,.16);box-shadow:var(--calendar-header-box-shadow,0 2px 10px rgba(125,126,128,.16))}.van-calendar__header-subtitle,.van-calendar__header-title{text-align:center;height:44px;height:var(--calendar-header-title-height,44px);font-weight:500;font-weight:var(--font-weight-bold,500);line-height:44px;line-height:var(--calendar-header-title-height,44px)}.van-calendar__header-title+.van-calendar__header-title,.van-calendar__header-title:empty{display:none}.van-calendar__header-title:empty+.van-calendar__header-title{display:block!important}.van-calendar__weekdays{display:-webkit-flex;display:flex}.van-calendar__weekday{-webkit-flex:1;flex:1;text-align:center;font-size:12px;font-size:var(--calendar-weekdays-font-size,12px);line-height:30px;line-height:var(--calendar-weekdays-height,30px)}
|
7
dist/calendar/components/month/index.d.ts
vendored
7
dist/calendar/components/month/index.d.ts
vendored
@ -1,6 +1 @@
|
|||||||
export interface Day {
|
export {};
|
||||||
date: Date;
|
|
||||||
type: string;
|
|
||||||
text: number;
|
|
||||||
bottomInfo?: string;
|
|
||||||
}
|
|
||||||
|
305
dist/calendar/components/month/index.js
vendored
305
dist/calendar/components/month/index.js
vendored
@ -1,154 +1,163 @@
|
|||||||
import { VantComponent } from '../../../common/component';
|
import { VantComponent } from '../../../common/component';
|
||||||
import { getMonthEndDay, compareDay, getPrevDay, getNextDay, } from '../../utils';
|
import {
|
||||||
|
getMonthEndDay,
|
||||||
|
compareDay,
|
||||||
|
getPrevDay,
|
||||||
|
getNextDay,
|
||||||
|
} from '../../utils';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
props: {
|
props: {
|
||||||
date: {
|
date: {
|
||||||
type: null,
|
type: null,
|
||||||
observer: 'setDays',
|
observer: 'setDays',
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
color: String,
|
|
||||||
minDate: {
|
|
||||||
type: null,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
maxDate: {
|
|
||||||
type: null,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
showMark: Boolean,
|
|
||||||
rowHeight: null,
|
|
||||||
formatter: {
|
|
||||||
type: null,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
currentDate: {
|
|
||||||
type: null,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
firstDayOfWeek: {
|
|
||||||
type: Number,
|
|
||||||
observer: 'setDays',
|
|
||||||
},
|
|
||||||
allowSameDay: Boolean,
|
|
||||||
showSubtitle: Boolean,
|
|
||||||
showMonthTitle: Boolean,
|
|
||||||
},
|
},
|
||||||
data: {
|
type: {
|
||||||
visible: true,
|
type: String,
|
||||||
days: [],
|
observer: 'setDays',
|
||||||
},
|
},
|
||||||
methods: {
|
color: String,
|
||||||
onClick(event) {
|
minDate: {
|
||||||
const { index } = event.currentTarget.dataset;
|
type: null,
|
||||||
const item = this.data.days[index];
|
observer: 'setDays',
|
||||||
if (item.type !== 'disabled') {
|
|
||||||
this.$emit('click', item);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setDays() {
|
|
||||||
const days = [];
|
|
||||||
const startDate = new Date(this.data.date);
|
|
||||||
const year = startDate.getFullYear();
|
|
||||||
const month = startDate.getMonth();
|
|
||||||
const totalDay = getMonthEndDay(startDate.getFullYear(), startDate.getMonth() + 1);
|
|
||||||
for (let day = 1; day <= totalDay; day++) {
|
|
||||||
const date = new Date(year, month, day);
|
|
||||||
const type = this.getDayType(date);
|
|
||||||
let config = {
|
|
||||||
date,
|
|
||||||
type,
|
|
||||||
text: day,
|
|
||||||
bottomInfo: this.getBottomInfo(type),
|
|
||||||
};
|
|
||||||
if (this.data.formatter) {
|
|
||||||
config = this.data.formatter(config);
|
|
||||||
}
|
|
||||||
days.push(config);
|
|
||||||
}
|
|
||||||
this.setData({ days });
|
|
||||||
},
|
|
||||||
getMultipleDayType(day) {
|
|
||||||
const { currentDate } = this.data;
|
|
||||||
if (!Array.isArray(currentDate)) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
const isSelected = (date) => currentDate.some((item) => compareDay(item, date) === 0);
|
|
||||||
if (isSelected(day)) {
|
|
||||||
const prevDay = getPrevDay(day);
|
|
||||||
const nextDay = getNextDay(day);
|
|
||||||
const prevSelected = isSelected(prevDay);
|
|
||||||
const nextSelected = isSelected(nextDay);
|
|
||||||
if (prevSelected && nextSelected) {
|
|
||||||
return 'multiple-middle';
|
|
||||||
}
|
|
||||||
if (prevSelected) {
|
|
||||||
return 'end';
|
|
||||||
}
|
|
||||||
return nextSelected ? 'start' : 'multiple-selected';
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
getRangeDayType(day) {
|
|
||||||
const { currentDate, allowSameDay } = this.data;
|
|
||||||
if (!Array.isArray(currentDate)) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
const [startDay, endDay] = currentDate;
|
|
||||||
if (!startDay) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
const compareToStart = compareDay(day, startDay);
|
|
||||||
if (!endDay) {
|
|
||||||
return compareToStart === 0 ? 'start' : '';
|
|
||||||
}
|
|
||||||
const compareToEnd = compareDay(day, endDay);
|
|
||||||
if (compareToStart === 0 && compareToEnd === 0 && allowSameDay) {
|
|
||||||
return 'start-end';
|
|
||||||
}
|
|
||||||
if (compareToStart === 0) {
|
|
||||||
return 'start';
|
|
||||||
}
|
|
||||||
if (compareToEnd === 0) {
|
|
||||||
return 'end';
|
|
||||||
}
|
|
||||||
if (compareToStart > 0 && compareToEnd < 0) {
|
|
||||||
return 'middle';
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
getDayType(day) {
|
|
||||||
const { type, minDate, maxDate, currentDate } = this.data;
|
|
||||||
if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
|
|
||||||
return 'disabled';
|
|
||||||
}
|
|
||||||
if (type === 'single') {
|
|
||||||
return compareDay(day, currentDate) === 0 ? 'selected' : '';
|
|
||||||
}
|
|
||||||
if (type === 'multiple') {
|
|
||||||
return this.getMultipleDayType(day);
|
|
||||||
}
|
|
||||||
/* istanbul ignore else */
|
|
||||||
if (type === 'range') {
|
|
||||||
return this.getRangeDayType(day);
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
getBottomInfo(type) {
|
|
||||||
if (this.data.type === 'range') {
|
|
||||||
if (type === 'start') {
|
|
||||||
return '开始';
|
|
||||||
}
|
|
||||||
if (type === 'end') {
|
|
||||||
return '结束';
|
|
||||||
}
|
|
||||||
if (type === 'start-end') {
|
|
||||||
return '开始/结束';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
maxDate: {
|
||||||
|
type: null,
|
||||||
|
observer: 'setDays',
|
||||||
|
},
|
||||||
|
showMark: Boolean,
|
||||||
|
rowHeight: null,
|
||||||
|
formatter: {
|
||||||
|
type: null,
|
||||||
|
observer: 'setDays',
|
||||||
|
},
|
||||||
|
currentDate: {
|
||||||
|
type: null,
|
||||||
|
observer: 'setDays',
|
||||||
|
},
|
||||||
|
firstDayOfWeek: {
|
||||||
|
type: Number,
|
||||||
|
observer: 'setDays',
|
||||||
|
},
|
||||||
|
allowSameDay: Boolean,
|
||||||
|
showSubtitle: Boolean,
|
||||||
|
showMonthTitle: Boolean,
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
visible: true,
|
||||||
|
days: [],
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick(event) {
|
||||||
|
const { index } = event.currentTarget.dataset;
|
||||||
|
const item = this.data.days[index];
|
||||||
|
if (item.type !== 'disabled') {
|
||||||
|
this.$emit('click', item);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setDays() {
|
||||||
|
const days = [];
|
||||||
|
const startDate = new Date(this.data.date);
|
||||||
|
const year = startDate.getFullYear();
|
||||||
|
const month = startDate.getMonth();
|
||||||
|
const totalDay = getMonthEndDay(
|
||||||
|
startDate.getFullYear(),
|
||||||
|
startDate.getMonth() + 1
|
||||||
|
);
|
||||||
|
for (let day = 1; day <= totalDay; day++) {
|
||||||
|
const date = new Date(year, month, day);
|
||||||
|
const type = this.getDayType(date);
|
||||||
|
let config = {
|
||||||
|
date,
|
||||||
|
type,
|
||||||
|
text: day,
|
||||||
|
bottomInfo: this.getBottomInfo(type),
|
||||||
|
};
|
||||||
|
if (this.data.formatter) {
|
||||||
|
config = this.data.formatter(config);
|
||||||
|
}
|
||||||
|
days.push(config);
|
||||||
|
}
|
||||||
|
this.setData({ days });
|
||||||
|
},
|
||||||
|
getMultipleDayType(day) {
|
||||||
|
const { currentDate } = this.data;
|
||||||
|
if (!Array.isArray(currentDate)) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const isSelected = (date) =>
|
||||||
|
currentDate.some((item) => compareDay(item, date) === 0);
|
||||||
|
if (isSelected(day)) {
|
||||||
|
const prevDay = getPrevDay(day);
|
||||||
|
const nextDay = getNextDay(day);
|
||||||
|
const prevSelected = isSelected(prevDay);
|
||||||
|
const nextSelected = isSelected(nextDay);
|
||||||
|
if (prevSelected && nextSelected) {
|
||||||
|
return 'multiple-middle';
|
||||||
|
}
|
||||||
|
if (prevSelected) {
|
||||||
|
return 'end';
|
||||||
|
}
|
||||||
|
return nextSelected ? 'start' : 'multiple-selected';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
getRangeDayType(day) {
|
||||||
|
const { currentDate, allowSameDay } = this.data;
|
||||||
|
if (!Array.isArray(currentDate)) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const [startDay, endDay] = currentDate;
|
||||||
|
if (!startDay) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const compareToStart = compareDay(day, startDay);
|
||||||
|
if (!endDay) {
|
||||||
|
return compareToStart === 0 ? 'start' : '';
|
||||||
|
}
|
||||||
|
const compareToEnd = compareDay(day, endDay);
|
||||||
|
if (compareToStart === 0 && compareToEnd === 0 && allowSameDay) {
|
||||||
|
return 'start-end';
|
||||||
|
}
|
||||||
|
if (compareToStart === 0) {
|
||||||
|
return 'start';
|
||||||
|
}
|
||||||
|
if (compareToEnd === 0) {
|
||||||
|
return 'end';
|
||||||
|
}
|
||||||
|
if (compareToStart > 0 && compareToEnd < 0) {
|
||||||
|
return 'middle';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
getDayType(day) {
|
||||||
|
const { type, minDate, maxDate, currentDate } = this.data;
|
||||||
|
if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
|
||||||
|
return 'disabled';
|
||||||
|
}
|
||||||
|
if (type === 'single') {
|
||||||
|
return compareDay(day, currentDate) === 0 ? 'selected' : '';
|
||||||
|
}
|
||||||
|
if (type === 'multiple') {
|
||||||
|
return this.getMultipleDayType(day);
|
||||||
|
}
|
||||||
|
/* istanbul ignore else */
|
||||||
|
if (type === 'range') {
|
||||||
|
return this.getRangeDayType(day);
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
getBottomInfo(type) {
|
||||||
|
if (this.data.type === 'range') {
|
||||||
|
if (type === 'start') {
|
||||||
|
return '开始';
|
||||||
|
}
|
||||||
|
if (type === 'end') {
|
||||||
|
return '结束';
|
||||||
|
}
|
||||||
|
if (type === 'start-end') {
|
||||||
|
return '开始/结束';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/calendar/components/month/index.wxml
vendored
2
dist/calendar/components/month/index.wxml
vendored
@ -19,7 +19,7 @@
|
|||||||
data-index="{{ index }}"
|
data-index="{{ index }}"
|
||||||
bindtap="onClick"
|
bindtap="onClick"
|
||||||
>
|
>
|
||||||
<view wx:if="{{ item.type === 'selected' }}" class="van-calendar__selected-day" style="width: {{ rowHeight }}px; height: {{ rowHeight }}px; background: {{ color }}">
|
<view wx:if="{{ item.type === 'selected' }}" class="van-calendar__selected-day" style="background: {{ color }}">
|
||||||
<view wx:if="{{ item.topInfo }}" class="van-calendar__top-info">{{ item.topInfo }}</view>
|
<view wx:if="{{ item.topInfo }}" class="van-calendar__top-info">{{ item.topInfo }}</view>
|
||||||
{{ item.text }}
|
{{ item.text }}
|
||||||
<view wx:if="{{ item.bottomInfo }}" class="van-calendar__bottom-info">
|
<view wx:if="{{ item.bottomInfo }}" class="van-calendar__bottom-info">
|
||||||
|
2
dist/calendar/components/month/index.wxss
vendored
2
dist/calendar/components/month/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../../../common/index.wxss';.van-calendar{background-color:var(--calendar-background-color,#fff);display:flex;flex-direction:column;height:100%}.van-calendar__month-title{font-size:var(--calendar-month-title-font-size,14px);font-weight:var(--font-weight-bold,500);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.van-calendar__days{display:flex;flex-wrap:wrap;position:relative;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{color:var(--calendar-month-mark-color,rgba(242,243,245,.8));font-size:var(--calendar-month-mark-font-size,160px);left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:0}.van-calendar__day,.van-calendar__selected-day{align-items:center;display:flex;justify-content:center;text-align:center}.van-calendar__day{font-size:var(--calendar-day-font-size,16px);height:var(--calendar-day-height,64px);position:relative;width:14.285%}.van-calendar__day--end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected,.van-calendar__day--start,.van-calendar__day--start-end{background-color:var(--calendar-range-edge-background-color,#ee0a24);color:var(--calendar-range-edge-color,#fff)}.van-calendar__day--start{border-radius:4px 0 0 4px}.van-calendar__day--end{border-radius:0 4px 4px 0}.van-calendar__day--multiple-selected,.van-calendar__day--start-end{border-radius:4px}.van-calendar__day--middle{color:var(--calendar-range-middle-color,#ee0a24)}.van-calendar__day--middle:after{background-color:currentColor;bottom:0;content:"";left:0;opacity:var(--calendar-range-middle-background-opacity,.1);position:absolute;right:0;top:0}.van-calendar__day--disabled{color:var(--calendar-day-disabled-color,#c8c9cc);cursor:default}.van-calendar__bottom-info,.van-calendar__top-info{font-size:var(--calendar-info-font-size,10px);left:0;line-height:var(--calendar-info-line-height,14px);position:absolute;right:0}@media (max-width:350px){.van-calendar__bottom-info,.van-calendar__top-info{font-size:9px}}.van-calendar__top-info{top:6px}.van-calendar__bottom-info{bottom:6px}.van-calendar__selected-day{background-color:var(--calendar-selected-day-background-color,#ee0a24);border-radius:4px;color:var(--calendar-selected-day-color,#fff);height:var(--calendar-selected-day-size,54px);width:var(--calendar-selected-day-size,54px)}
|
@import '../../../common/index.wxss';.van-calendar{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;height:100%;background-color:#fff;background-color:var(--calendar-background-color,#fff)}.van-calendar__month-title{text-align:center;height:44px;height:var(--calendar-header-title-height,44px);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:14px;font-size:var(--calendar-month-title-font-size,14px);line-height:44px;line-height:var(--calendar-header-title-height,44px)}.van-calendar__days{position:relative;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-user-select:none;user-select:none}.van-calendar__month-mark{position:absolute;top:50%;left:50%;z-index:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none;color:rgba(242,243,245,.8);color:var(--calendar-month-mark-color,rgba(242,243,245,.8));font-size:160px;font-size:var(--calendar-month-mark-font-size,160px)}.van-calendar__day,.van-calendar__selected-day{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;text-align:center}.van-calendar__day{position:relative;width:14.285%;height:64px;height:var(--calendar-day-height,64px);font-size:16px;font-size:var(--calendar-day-font-size,16px)}.van-calendar__day--end,.van-calendar__day--multiple-middle,.van-calendar__day--multiple-selected,.van-calendar__day--start,.van-calendar__day--start-end{color:#fff;color:var(--calendar-range-edge-color,#fff);background-color:#ee0a24;background-color:var(--calendar-range-edge-background-color,#ee0a24)}.van-calendar__day--start{border-radius:4px 0 0 4px;border-radius:var(--border-radius-md,4px) 0 0 var(--border-radius-md,4px)}.van-calendar__day--end{border-radius:0 4px 4px 0;border-radius:0 var(--border-radius-md,4px) var(--border-radius-md,4px) 0}.van-calendar__day--multiple-selected,.van-calendar__day--start-end{border-radius:4px;border-radius:var(--border-radius-md,4px)}.van-calendar__day--middle{color:#ee0a24;color:var(--calendar-range-middle-color,#ee0a24)}.van-calendar__day--middle:after{position:absolute;top:0;right:0;bottom:0;left:0;background-color:currentColor;content:"";opacity:.1;opacity:var(--calendar-range-middle-background-opacity,.1)}.van-calendar__day--disabled{cursor:default;color:#c8c9cc;color:var(--calendar-day-disabled-color,#c8c9cc)}.van-calendar__bottom-info,.van-calendar__top-info{position:absolute;right:0;left:0;font-size:10px;font-size:var(--calendar-info-font-size,10px);line-height:14px;line-height:var(--calendar-info-line-height,14px)}@media (max-width:350px){.van-calendar__bottom-info,.van-calendar__top-info{font-size:9px}}.van-calendar__top-info{top:6px}.van-calendar__bottom-info{bottom:6px}.van-calendar__selected-day{width:54px;width:var(--calendar-selected-day-size,54px);height:54px;height:var(--calendar-selected-day-size,54px);color:#fff;color:var(--calendar-selected-day-color,#fff);background-color:#ee0a24;background-color:var(--calendar-selected-day-background-color,#ee0a24);border-radius:4px;border-radius:var(--border-radius-md,4px)}
|
649
dist/calendar/index.js
vendored
649
dist/calendar/index.js
vendored
@ -1,360 +1,309 @@
|
|||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
import { ROW_HEIGHT, getPrevDay, getNextDay, getToday, compareDay, copyDates, calcDateNum, formatMonthTitle, compareMonth, getMonths, getDayByOffset, } from './utils';
|
import {
|
||||||
|
ROW_HEIGHT,
|
||||||
|
getNextDay,
|
||||||
|
compareDay,
|
||||||
|
copyDates,
|
||||||
|
calcDateNum,
|
||||||
|
formatMonthTitle,
|
||||||
|
compareMonth,
|
||||||
|
getMonths,
|
||||||
|
getDayByOffset,
|
||||||
|
} from './utils';
|
||||||
import Toast from '../toast/toast';
|
import Toast from '../toast/toast';
|
||||||
import { requestAnimationFrame } from '../common/utils';
|
import { requestAnimationFrame } from '../common/utils';
|
||||||
const initialMinDate = getToday().getTime();
|
|
||||||
const initialMaxDate = (() => {
|
|
||||||
const now = getToday();
|
|
||||||
return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()).getTime();
|
|
||||||
})();
|
|
||||||
const getTime = (date) => date instanceof Date ? date.getTime() : date;
|
|
||||||
VantComponent({
|
VantComponent({
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
value: '日期选择',
|
value: '日期选择',
|
||||||
},
|
|
||||||
color: String,
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
observer(val) {
|
|
||||||
if (val) {
|
|
||||||
this.initRect();
|
|
||||||
this.scrollIntoView();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
formatter: null,
|
|
||||||
confirmText: {
|
|
||||||
type: String,
|
|
||||||
value: '确定',
|
|
||||||
},
|
|
||||||
confirmDisabledText: {
|
|
||||||
type: String,
|
|
||||||
value: '确定',
|
|
||||||
},
|
|
||||||
rangePrompt: String,
|
|
||||||
showRangePrompt: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
defaultDate: {
|
|
||||||
type: null,
|
|
||||||
value: getToday().getTime(),
|
|
||||||
observer(val) {
|
|
||||||
this.setData({ currentDate: val });
|
|
||||||
this.scrollIntoView();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
allowSameDay: Boolean,
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
value: 'single',
|
|
||||||
observer: 'reset',
|
|
||||||
},
|
|
||||||
minDate: {
|
|
||||||
type: Number,
|
|
||||||
value: initialMinDate,
|
|
||||||
},
|
|
||||||
maxDate: {
|
|
||||||
type: Number,
|
|
||||||
value: initialMaxDate,
|
|
||||||
},
|
|
||||||
position: {
|
|
||||||
type: String,
|
|
||||||
value: 'bottom',
|
|
||||||
},
|
|
||||||
rowHeight: {
|
|
||||||
type: null,
|
|
||||||
value: ROW_HEIGHT,
|
|
||||||
},
|
|
||||||
round: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
poppable: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
showMark: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
showTitle: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
showConfirm: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
showSubtitle: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
safeAreaInsetBottom: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
closeOnClickOverlay: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
maxRange: {
|
|
||||||
type: null,
|
|
||||||
value: null,
|
|
||||||
},
|
|
||||||
minRange: {
|
|
||||||
type: Number,
|
|
||||||
value: 1,
|
|
||||||
},
|
|
||||||
firstDayOfWeek: {
|
|
||||||
type: Number,
|
|
||||||
value: 0,
|
|
||||||
},
|
|
||||||
readonly: Boolean,
|
|
||||||
rootPortal: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: {
|
color: String,
|
||||||
subtitle: '',
|
show: {
|
||||||
currentDate: null,
|
type: Boolean,
|
||||||
scrollIntoView: '',
|
observer(val) {
|
||||||
},
|
if (val) {
|
||||||
watch: {
|
this.initRect();
|
||||||
minDate() {
|
this.scrollIntoView();
|
||||||
this.initRect();
|
|
||||||
},
|
|
||||||
maxDate() {
|
|
||||||
this.initRect();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.setData({
|
|
||||||
currentDate: this.getInitialDate(this.data.defaultDate),
|
|
||||||
});
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (this.data.show || !this.data.poppable) {
|
|
||||||
this.initRect();
|
|
||||||
this.scrollIntoView();
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
formatter: null,
|
||||||
reset() {
|
confirmText: {
|
||||||
this.setData({ currentDate: this.getInitialDate(this.data.defaultDate) });
|
type: String,
|
||||||
this.scrollIntoView();
|
value: '确定',
|
||||||
},
|
},
|
||||||
initRect() {
|
rangePrompt: String,
|
||||||
if (this.contentObserver != null) {
|
showRangePrompt: {
|
||||||
this.contentObserver.disconnect();
|
type: Boolean,
|
||||||
}
|
value: true,
|
||||||
const contentObserver = this.createIntersectionObserver({
|
},
|
||||||
thresholds: [0, 0.1, 0.9, 1],
|
defaultDate: {
|
||||||
observeAll: true,
|
type: null,
|
||||||
});
|
observer(val) {
|
||||||
this.contentObserver = contentObserver;
|
this.setData({ currentDate: val });
|
||||||
contentObserver.relativeTo('.van-calendar__body');
|
this.scrollIntoView();
|
||||||
contentObserver.observe('.month', (res) => {
|
},
|
||||||
if (res.boundingClientRect.top <= res.relativeRect.top) {
|
},
|
||||||
// @ts-ignore
|
allowSameDay: Boolean,
|
||||||
this.setData({ subtitle: formatMonthTitle(res.dataset.date) });
|
confirmDisabledText: String,
|
||||||
}
|
type: {
|
||||||
});
|
type: String,
|
||||||
},
|
value: 'single',
|
||||||
limitDateRange(date, minDate = null, maxDate = null) {
|
observer: 'reset',
|
||||||
minDate = minDate || this.data.minDate;
|
},
|
||||||
maxDate = maxDate || this.data.maxDate;
|
minDate: {
|
||||||
if (compareDay(date, minDate) === -1) {
|
type: null,
|
||||||
return minDate;
|
value: Date.now(),
|
||||||
}
|
},
|
||||||
if (compareDay(date, maxDate) === 1) {
|
maxDate: {
|
||||||
return maxDate;
|
type: null,
|
||||||
}
|
value: new Date(
|
||||||
return date;
|
new Date().getFullYear(),
|
||||||
},
|
new Date().getMonth() + 6,
|
||||||
getInitialDate(defaultDate = null) {
|
new Date().getDate()
|
||||||
const { type, minDate, maxDate, allowSameDay } = this.data;
|
).getTime(),
|
||||||
if (!defaultDate)
|
},
|
||||||
return [];
|
position: {
|
||||||
const now = getToday().getTime();
|
type: String,
|
||||||
if (type === 'range') {
|
value: 'bottom',
|
||||||
if (!Array.isArray(defaultDate)) {
|
},
|
||||||
defaultDate = [];
|
rowHeight: {
|
||||||
}
|
type: null,
|
||||||
const [startDay, endDay] = defaultDate || [];
|
value: ROW_HEIGHT,
|
||||||
const startDate = getTime(startDay || now);
|
},
|
||||||
const start = this.limitDateRange(startDate, minDate, allowSameDay ? startDate : getPrevDay(new Date(maxDate)).getTime());
|
round: {
|
||||||
const date = getTime(endDay || now);
|
type: Boolean,
|
||||||
const end = this.limitDateRange(date, allowSameDay ? date : getNextDay(new Date(minDate)).getTime());
|
value: true,
|
||||||
return [start, end];
|
},
|
||||||
}
|
poppable: {
|
||||||
if (type === 'multiple') {
|
type: Boolean,
|
||||||
if (Array.isArray(defaultDate)) {
|
value: true,
|
||||||
return defaultDate.map((date) => this.limitDateRange(date));
|
},
|
||||||
}
|
showMark: {
|
||||||
return [this.limitDateRange(now)];
|
type: Boolean,
|
||||||
}
|
value: true,
|
||||||
if (!defaultDate || Array.isArray(defaultDate)) {
|
},
|
||||||
defaultDate = now;
|
showTitle: {
|
||||||
}
|
type: Boolean,
|
||||||
return this.limitDateRange(defaultDate);
|
value: true,
|
||||||
},
|
},
|
||||||
scrollIntoView() {
|
showConfirm: {
|
||||||
requestAnimationFrame(() => {
|
type: Boolean,
|
||||||
const { currentDate, type, show, poppable, minDate, maxDate } = this.data;
|
value: true,
|
||||||
if (!currentDate)
|
},
|
||||||
return;
|
showSubtitle: {
|
||||||
// @ts-ignore
|
type: Boolean,
|
||||||
const targetDate = type === 'single' ? currentDate : currentDate[0];
|
value: true,
|
||||||
const displayed = show || !poppable;
|
},
|
||||||
if (!targetDate || !displayed) {
|
safeAreaInsetBottom: {
|
||||||
return;
|
type: Boolean,
|
||||||
}
|
value: true,
|
||||||
const months = getMonths(minDate, maxDate);
|
},
|
||||||
months.some((month, index) => {
|
closeOnClickOverlay: {
|
||||||
if (compareMonth(month, targetDate) === 0) {
|
type: Boolean,
|
||||||
this.setData({ scrollIntoView: `month${index}` });
|
value: true,
|
||||||
return true;
|
},
|
||||||
}
|
maxRange: {
|
||||||
return false;
|
type: null,
|
||||||
});
|
value: null,
|
||||||
});
|
},
|
||||||
},
|
firstDayOfWeek: {
|
||||||
onOpen() {
|
type: Number,
|
||||||
this.$emit('open');
|
value: 0,
|
||||||
},
|
},
|
||||||
onOpened() {
|
},
|
||||||
this.$emit('opened');
|
data: {
|
||||||
},
|
subtitle: '',
|
||||||
onClose() {
|
currentDate: null,
|
||||||
this.$emit('close');
|
scrollIntoView: '',
|
||||||
},
|
},
|
||||||
onClosed() {
|
created() {
|
||||||
this.$emit('closed');
|
this.setData({
|
||||||
},
|
currentDate: this.getInitialDate(),
|
||||||
onClickDay(event) {
|
});
|
||||||
if (this.data.readonly) {
|
},
|
||||||
return;
|
mounted() {
|
||||||
}
|
if (this.data.show || !this.data.poppable) {
|
||||||
let { date } = event.detail;
|
this.initRect();
|
||||||
const { type, currentDate, allowSameDay } = this.data;
|
this.scrollIntoView();
|
||||||
if (type === 'range') {
|
}
|
||||||
// @ts-ignore
|
},
|
||||||
const [startDay, endDay] = currentDate;
|
methods: {
|
||||||
if (startDay && !endDay) {
|
reset() {
|
||||||
const compareToStart = compareDay(date, startDay);
|
this.setData({ currentDate: this.getInitialDate() });
|
||||||
if (compareToStart === 1) {
|
this.scrollIntoView();
|
||||||
const { days } = this.selectComponent('.month').data;
|
},
|
||||||
days.some((day, index) => {
|
initRect() {
|
||||||
const isDisabled = day.type === 'disabled' &&
|
if (this.contentObserver != null) {
|
||||||
getTime(startDay) < getTime(day.date) &&
|
this.contentObserver.disconnect();
|
||||||
getTime(day.date) < getTime(date);
|
}
|
||||||
if (isDisabled) {
|
const contentObserver = this.createIntersectionObserver({
|
||||||
({ date } = days[index - 1]);
|
thresholds: [0, 0.1, 0.9, 1],
|
||||||
}
|
observeAll: true,
|
||||||
return isDisabled;
|
});
|
||||||
});
|
this.contentObserver = contentObserver;
|
||||||
this.select([startDay, date], true);
|
contentObserver.relativeTo('.van-calendar__body');
|
||||||
}
|
contentObserver.observe('.month', (res) => {
|
||||||
else if (compareToStart === -1) {
|
if (res.boundingClientRect.top <= res.relativeRect.top) {
|
||||||
this.select([date, null]);
|
// @ts-ignore
|
||||||
}
|
this.setData({ subtitle: formatMonthTitle(res.dataset.date) });
|
||||||
else if (allowSameDay) {
|
}
|
||||||
this.select([date, date], true);
|
});
|
||||||
}
|
},
|
||||||
}
|
getInitialDate() {
|
||||||
else {
|
const { type, defaultDate, minDate } = this.data;
|
||||||
this.select([date, null]);
|
if (type === 'range') {
|
||||||
}
|
const [startDay, endDay] = defaultDate || [];
|
||||||
}
|
return [
|
||||||
else if (type === 'multiple') {
|
startDay || minDate,
|
||||||
let selectedIndex;
|
endDay || getNextDay(new Date(minDate)).getTime(),
|
||||||
// @ts-ignore
|
];
|
||||||
const selected = currentDate.some((dateItem, index) => {
|
}
|
||||||
const equal = compareDay(dateItem, date) === 0;
|
if (type === 'multiple') {
|
||||||
if (equal) {
|
return defaultDate || [minDate];
|
||||||
selectedIndex = index;
|
}
|
||||||
}
|
return defaultDate || minDate;
|
||||||
return equal;
|
},
|
||||||
});
|
scrollIntoView() {
|
||||||
if (selected) {
|
requestAnimationFrame(() => {
|
||||||
// @ts-ignore
|
const {
|
||||||
const cancelDate = currentDate.splice(selectedIndex, 1);
|
currentDate,
|
||||||
this.setData({ currentDate });
|
type,
|
||||||
this.unselect(cancelDate);
|
show,
|
||||||
}
|
poppable,
|
||||||
else {
|
minDate,
|
||||||
// @ts-ignore
|
maxDate,
|
||||||
this.select([...currentDate, date]);
|
} = this.data;
|
||||||
}
|
// @ts-ignore
|
||||||
}
|
const targetDate = type === 'single' ? currentDate : currentDate[0];
|
||||||
else {
|
const displayed = show || !poppable;
|
||||||
this.select(date, true);
|
if (!targetDate || !displayed) {
|
||||||
}
|
return;
|
||||||
},
|
}
|
||||||
unselect(dateArray) {
|
const months = getMonths(minDate, maxDate);
|
||||||
const date = dateArray[0];
|
months.some((month, index) => {
|
||||||
if (date) {
|
if (compareMonth(month, targetDate) === 0) {
|
||||||
this.$emit('unselect', copyDates(date));
|
this.setData({ scrollIntoView: `month${index}` });
|
||||||
}
|
|
||||||
},
|
|
||||||
select(date, complete) {
|
|
||||||
if (complete && this.data.type === 'range') {
|
|
||||||
const valid = this.checkRange(date);
|
|
||||||
if (!valid) {
|
|
||||||
// auto selected to max range if showConfirm
|
|
||||||
if (this.data.showConfirm) {
|
|
||||||
this.emit([
|
|
||||||
date[0],
|
|
||||||
getDayByOffset(date[0], this.data.maxRange - 1),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.emit(date);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.emit(date);
|
|
||||||
if (complete && !this.data.showConfirm) {
|
|
||||||
this.onConfirm();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emit(date) {
|
|
||||||
this.setData({
|
|
||||||
currentDate: Array.isArray(date) ? date.map(getTime) : getTime(date),
|
|
||||||
});
|
|
||||||
this.$emit('select', copyDates(date));
|
|
||||||
},
|
|
||||||
checkRange(date) {
|
|
||||||
const { maxRange, rangePrompt, showRangePrompt } = this.data;
|
|
||||||
if (maxRange && calcDateNum(date) > maxRange) {
|
|
||||||
if (showRangePrompt) {
|
|
||||||
Toast({
|
|
||||||
context: this,
|
|
||||||
message: rangePrompt || `选择天数不能超过 ${maxRange} 天`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.$emit('over-range');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
return true;
|
||||||
},
|
}
|
||||||
onConfirm() {
|
return false;
|
||||||
if (this.data.type === 'range' &&
|
});
|
||||||
!this.checkRange(this.data.currentDate)) {
|
});
|
||||||
return;
|
|
||||||
}
|
|
||||||
wx.nextTick(() => {
|
|
||||||
// @ts-ignore
|
|
||||||
this.$emit('confirm', copyDates(this.data.currentDate));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onClickSubtitle(event) {
|
|
||||||
this.$emit('click-subtitle', event);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
onOpen() {
|
||||||
|
this.$emit('open');
|
||||||
|
},
|
||||||
|
onOpened() {
|
||||||
|
this.$emit('opened');
|
||||||
|
},
|
||||||
|
onClose() {
|
||||||
|
this.$emit('close');
|
||||||
|
},
|
||||||
|
onClosed() {
|
||||||
|
this.$emit('closed');
|
||||||
|
},
|
||||||
|
onClickDay(event) {
|
||||||
|
const { date } = event.detail;
|
||||||
|
const { type, currentDate, allowSameDay } = this.data;
|
||||||
|
if (type === 'range') {
|
||||||
|
// @ts-ignore
|
||||||
|
const [startDay, endDay] = currentDate;
|
||||||
|
if (startDay && !endDay) {
|
||||||
|
const compareToStart = compareDay(date, startDay);
|
||||||
|
if (compareToStart === 1) {
|
||||||
|
this.select([startDay, date], true);
|
||||||
|
} else if (compareToStart === -1) {
|
||||||
|
this.select([date, null]);
|
||||||
|
} else if (allowSameDay) {
|
||||||
|
this.select([date, date]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.select([date, null]);
|
||||||
|
}
|
||||||
|
} else if (type === 'multiple') {
|
||||||
|
let selectedIndex;
|
||||||
|
// @ts-ignore
|
||||||
|
const selected = currentDate.some((dateItem, index) => {
|
||||||
|
const equal = compareDay(dateItem, date) === 0;
|
||||||
|
if (equal) {
|
||||||
|
selectedIndex = index;
|
||||||
|
}
|
||||||
|
return equal;
|
||||||
|
});
|
||||||
|
if (selected) {
|
||||||
|
// @ts-ignore
|
||||||
|
const cancelDate = currentDate.splice(selectedIndex, 1);
|
||||||
|
this.setData({ currentDate });
|
||||||
|
this.unselect(cancelDate);
|
||||||
|
} else {
|
||||||
|
// @ts-ignore
|
||||||
|
this.select([...currentDate, date]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.select(date, true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unselect(dateArray) {
|
||||||
|
const date = dateArray[0];
|
||||||
|
if (date) {
|
||||||
|
this.$emit('unselect', copyDates(date));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
select(date, complete) {
|
||||||
|
if (complete && this.data.type === 'range') {
|
||||||
|
const valid = this.checkRange(date);
|
||||||
|
if (!valid) {
|
||||||
|
// auto selected to max range if showConfirm
|
||||||
|
if (this.data.showConfirm) {
|
||||||
|
this.emit([
|
||||||
|
date[0],
|
||||||
|
getDayByOffset(date[0], this.data.maxRange - 1),
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
this.emit(date);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.emit(date);
|
||||||
|
if (complete && !this.data.showConfirm) {
|
||||||
|
this.onConfirm();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emit(date) {
|
||||||
|
const getTime = (date) => (date instanceof Date ? date.getTime() : date);
|
||||||
|
this.setData({
|
||||||
|
currentDate: Array.isArray(date) ? date.map(getTime) : getTime(date),
|
||||||
|
});
|
||||||
|
this.$emit('select', copyDates(date));
|
||||||
|
},
|
||||||
|
checkRange(date) {
|
||||||
|
const { maxRange, rangePrompt, showRangePrompt } = this.data;
|
||||||
|
if (maxRange && calcDateNum(date) > maxRange) {
|
||||||
|
if (showRangePrompt) {
|
||||||
|
Toast({
|
||||||
|
duration: 0,
|
||||||
|
context: this,
|
||||||
|
message: rangePrompt || `选择天数不能超过 ${maxRange} 天`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.$emit('over-range');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
onConfirm() {
|
||||||
|
if (
|
||||||
|
this.data.type === 'range' &&
|
||||||
|
!this.checkRange(this.data.currentDate)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
wx.nextTick(() => {
|
||||||
|
// @ts-ignore
|
||||||
|
this.$emit('confirm', copyDates(this.data.currentDate));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
6
dist/calendar/index.wxml
vendored
6
dist/calendar/index.wxml
vendored
@ -12,16 +12,14 @@
|
|||||||
position="{{ position }}"
|
position="{{ position }}"
|
||||||
closeable="{{ showTitle || showSubtitle }}"
|
closeable="{{ showTitle || showSubtitle }}"
|
||||||
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
||||||
safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
|
|
||||||
root-portal="{{ rootPortal }}"
|
|
||||||
bind:enter="onOpen"
|
bind:enter="onOpen"
|
||||||
bind:close="onClose"
|
bind:close="onClose"
|
||||||
bind:after-enter="onOpened"
|
bind:after-enter="onOpened"
|
||||||
bind:after-leave="onClosed"
|
bind:after-leave="onClosed"
|
||||||
>
|
>
|
||||||
<include src="./calendar.wxml" />
|
<include src="calendar.wxml" />
|
||||||
</van-popup>
|
</van-popup>
|
||||||
|
|
||||||
<include wx:else src="./calendar.wxml" />
|
<include wx:else src="calendar.wxml" />
|
||||||
|
|
||||||
<van-toast id="van-toast" />
|
<van-toast id="van-toast" />
|
||||||
|
4
dist/calendar/index.wxs
vendored
4
dist/calendar/index.wxs
vendored
@ -15,7 +15,7 @@ function getMonths(minDate, maxDate) {
|
|||||||
return months;
|
return months;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getButtonDisabled(type, currentDate, minRange) {
|
function getButtonDisabled(type, currentDate) {
|
||||||
if (currentDate == null) {
|
if (currentDate == null) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@ -25,7 +25,7 @@ function getButtonDisabled(type, currentDate, minRange) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (type === 'multiple') {
|
if (type === 'multiple') {
|
||||||
return currentDate.length < minRange;
|
return !currentDate.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
return !currentDate;
|
return !currentDate;
|
||||||
|
2
dist/calendar/index.wxss
vendored
2
dist/calendar/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-calendar{background-color:var(--calendar-background-color,#fff);display:flex;flex-direction:column;height:var(--calendar-height,100%)}.van-calendar__close-icon{top:11px}.van-calendar__popup--bottom,.van-calendar__popup--top{height:var(--calendar-popup-height,90%)}.van-calendar__popup--left,.van-calendar__popup--right{height:100%}.van-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.van-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.van-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.van-calendar__footer+.van-calendar__footer,.van-calendar__footer:empty{display:none}.van-calendar__footer:empty+.van-calendar__footer{display:block!important}.van-calendar__confirm{height:var(--calendar-confirm-button-height,36px)!important;line-height:var(--calendar-confirm-button-line-height,34px)!important;margin:var(--calendar-confirm-button-margin,7px 0)!important}
|
@import '../common/index.wxss';.van-calendar{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;height:100%;height:var(--calendar-height,100%);background-color:#fff;background-color:var(--calendar-background-color,#fff)}.van-calendar__close-icon{top:11px}.van-calendar__popup--bottom,.van-calendar__popup--top{height:80%;height:var(--calendar-popup-height,80%)}.van-calendar__popup--left,.van-calendar__popup--right{height:100%}.van-calendar__body{-webkit-flex:1;flex:1;overflow:auto;-webkit-overflow-scrolling:touch}.van-calendar__footer{-webkit-flex-shrink:0;flex-shrink:0;padding:0 16px;padding:0 var(--padding-md,16px)}.van-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.van-calendar__footer+.van-calendar__footer,.van-calendar__footer:empty{display:none}.van-calendar__footer:empty+.van-calendar__footer{display:block!important}.van-calendar__confirm{height:36px!important;height:var(--calendar-confirm-button-height,36px)!important;margin:7px 0!important;margin:var(--calendar-confirm-button-margin,7px 0)!important;line-height:34px!important;line-height:var(--calendar-confirm-button-line-height,34px)!important}
|
11
dist/calendar/utils.d.ts
vendored
11
dist/calendar/utils.d.ts
vendored
@ -1,11 +1,16 @@
|
|||||||
export declare const ROW_HEIGHT = 64;
|
export declare const ROW_HEIGHT = 64;
|
||||||
export declare function formatMonthTitle(date: Date): string;
|
export declare function formatMonthTitle(date: Date): string;
|
||||||
export declare function compareMonth(date1: Date | number, date2: Date | number): 0 | 1 | -1;
|
export declare function compareMonth(
|
||||||
export declare function compareDay(day1: Date | number, day2: Date | number): 0 | 1 | -1;
|
date1: Date | number,
|
||||||
|
date2: Date | number
|
||||||
|
): 1 | -1 | 0;
|
||||||
|
export declare function compareDay(
|
||||||
|
day1: Date | number,
|
||||||
|
day2: Date | number
|
||||||
|
): 1 | -1 | 0;
|
||||||
export declare function getDayByOffset(date: Date, offset: number): Date;
|
export declare function getDayByOffset(date: Date, offset: number): Date;
|
||||||
export declare function getPrevDay(date: Date): Date;
|
export declare function getPrevDay(date: Date): Date;
|
||||||
export declare function getNextDay(date: Date): Date;
|
export declare function getNextDay(date: Date): Date;
|
||||||
export declare function getToday(): Date;
|
|
||||||
export declare function calcDateNum(date: [Date, Date]): number;
|
export declare function calcDateNum(date: [Date, Date]): number;
|
||||||
export declare function copyDates(dates: Date | Date[]): Date | Date[];
|
export declare function copyDates(dates: Date | Date[]): Date | Date[];
|
||||||
export declare function getMonthEndDay(year: number, month: number): number;
|
export declare function getMonthEndDay(year: number, month: number): number;
|
||||||
|
119
dist/calendar/utils.js
vendored
119
dist/calendar/utils.js
vendored
@ -1,83 +1,78 @@
|
|||||||
export const ROW_HEIGHT = 64;
|
export const ROW_HEIGHT = 64;
|
||||||
export function formatMonthTitle(date) {
|
export function formatMonthTitle(date) {
|
||||||
if (!(date instanceof Date)) {
|
if (!(date instanceof Date)) {
|
||||||
date = new Date(date);
|
date = new Date(date);
|
||||||
}
|
}
|
||||||
return `${date.getFullYear()}年${date.getMonth() + 1}月`;
|
return `${date.getFullYear()}年${date.getMonth() + 1}月`;
|
||||||
}
|
}
|
||||||
export function compareMonth(date1, date2) {
|
export function compareMonth(date1, date2) {
|
||||||
if (!(date1 instanceof Date)) {
|
if (!(date1 instanceof Date)) {
|
||||||
date1 = new Date(date1);
|
date1 = new Date(date1);
|
||||||
}
|
}
|
||||||
if (!(date2 instanceof Date)) {
|
if (!(date2 instanceof Date)) {
|
||||||
date2 = new Date(date2);
|
date2 = new Date(date2);
|
||||||
}
|
}
|
||||||
const year1 = date1.getFullYear();
|
const year1 = date1.getFullYear();
|
||||||
const year2 = date2.getFullYear();
|
const year2 = date2.getFullYear();
|
||||||
const month1 = date1.getMonth();
|
const month1 = date1.getMonth();
|
||||||
const month2 = date2.getMonth();
|
const month2 = date2.getMonth();
|
||||||
if (year1 === year2) {
|
if (year1 === year2) {
|
||||||
return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
|
return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
|
||||||
}
|
}
|
||||||
return year1 > year2 ? 1 : -1;
|
return year1 > year2 ? 1 : -1;
|
||||||
}
|
}
|
||||||
export function compareDay(day1, day2) {
|
export function compareDay(day1, day2) {
|
||||||
if (!(day1 instanceof Date)) {
|
if (!(day1 instanceof Date)) {
|
||||||
day1 = new Date(day1);
|
day1 = new Date(day1);
|
||||||
}
|
}
|
||||||
if (!(day2 instanceof Date)) {
|
if (!(day2 instanceof Date)) {
|
||||||
day2 = new Date(day2);
|
day2 = new Date(day2);
|
||||||
}
|
}
|
||||||
const compareMonthResult = compareMonth(day1, day2);
|
const compareMonthResult = compareMonth(day1, day2);
|
||||||
if (compareMonthResult === 0) {
|
if (compareMonthResult === 0) {
|
||||||
const date1 = day1.getDate();
|
const date1 = day1.getDate();
|
||||||
const date2 = day2.getDate();
|
const date2 = day2.getDate();
|
||||||
return date1 === date2 ? 0 : date1 > date2 ? 1 : -1;
|
return date1 === date2 ? 0 : date1 > date2 ? 1 : -1;
|
||||||
}
|
}
|
||||||
return compareMonthResult;
|
return compareMonthResult;
|
||||||
}
|
}
|
||||||
export function getDayByOffset(date, offset) {
|
export function getDayByOffset(date, offset) {
|
||||||
date = new Date(date);
|
date = new Date(date);
|
||||||
date.setDate(date.getDate() + offset);
|
date.setDate(date.getDate() + offset);
|
||||||
return date;
|
return date;
|
||||||
}
|
}
|
||||||
export function getPrevDay(date) {
|
export function getPrevDay(date) {
|
||||||
return getDayByOffset(date, -1);
|
return getDayByOffset(date, -1);
|
||||||
}
|
}
|
||||||
export function getNextDay(date) {
|
export function getNextDay(date) {
|
||||||
return getDayByOffset(date, 1);
|
return getDayByOffset(date, 1);
|
||||||
}
|
|
||||||
export function getToday() {
|
|
||||||
const today = new Date();
|
|
||||||
today.setHours(0, 0, 0, 0);
|
|
||||||
return today;
|
|
||||||
}
|
}
|
||||||
export function calcDateNum(date) {
|
export function calcDateNum(date) {
|
||||||
const day1 = new Date(date[0]).getTime();
|
const day1 = new Date(date[0]).getTime();
|
||||||
const day2 = new Date(date[1]).getTime();
|
const day2 = new Date(date[1]).getTime();
|
||||||
return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
|
return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
|
||||||
}
|
}
|
||||||
export function copyDates(dates) {
|
export function copyDates(dates) {
|
||||||
if (Array.isArray(dates)) {
|
if (Array.isArray(dates)) {
|
||||||
return dates.map((date) => {
|
return dates.map((date) => {
|
||||||
if (date === null) {
|
if (date === null) {
|
||||||
return date;
|
return date;
|
||||||
}
|
}
|
||||||
return new Date(date);
|
return new Date(date);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return new Date(dates);
|
return new Date(dates);
|
||||||
}
|
}
|
||||||
export function getMonthEndDay(year, month) {
|
export function getMonthEndDay(year, month) {
|
||||||
return 32 - new Date(year, month - 1, 32).getDate();
|
return 32 - new Date(year, month - 1, 32).getDate();
|
||||||
}
|
}
|
||||||
export function getMonths(minDate, maxDate) {
|
export function getMonths(minDate, maxDate) {
|
||||||
const months = [];
|
const months = [];
|
||||||
const cursor = new Date(minDate);
|
const cursor = new Date(minDate);
|
||||||
cursor.setDate(1);
|
cursor.setDate(1);
|
||||||
do {
|
do {
|
||||||
months.push(cursor.getTime());
|
months.push(cursor.getTime());
|
||||||
cursor.setMonth(cursor.getMonth() + 1);
|
cursor.setMonth(cursor.getMonth() + 1);
|
||||||
} while (compareMonth(cursor, maxDate) !== 1);
|
} while (compareMonth(cursor, maxDate) !== 1);
|
||||||
return months;
|
return months;
|
||||||
}
|
}
|
||||||
|
86
dist/card/index.js
vendored
86
dist/card/index.js
vendored
@ -1,49 +1,49 @@
|
|||||||
import { link } from '../mixins/link';
|
import { link } from '../mixins/link';
|
||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
classes: [
|
classes: [
|
||||||
'num-class',
|
'num-class',
|
||||||
'desc-class',
|
'desc-class',
|
||||||
'thumb-class',
|
'thumb-class',
|
||||||
'title-class',
|
'title-class',
|
||||||
'price-class',
|
'price-class',
|
||||||
'origin-price-class',
|
'origin-price-class',
|
||||||
],
|
],
|
||||||
mixins: [link],
|
mixins: [link],
|
||||||
props: {
|
props: {
|
||||||
tag: String,
|
tag: String,
|
||||||
num: String,
|
num: String,
|
||||||
desc: String,
|
desc: String,
|
||||||
thumb: String,
|
thumb: String,
|
||||||
title: String,
|
title: String,
|
||||||
price: {
|
price: {
|
||||||
type: String,
|
type: String,
|
||||||
observer: 'updatePrice',
|
observer: 'updatePrice',
|
||||||
},
|
|
||||||
centered: Boolean,
|
|
||||||
lazyLoad: Boolean,
|
|
||||||
thumbLink: String,
|
|
||||||
originPrice: String,
|
|
||||||
thumbMode: {
|
|
||||||
type: String,
|
|
||||||
value: 'aspectFit',
|
|
||||||
},
|
|
||||||
currency: {
|
|
||||||
type: String,
|
|
||||||
value: '¥',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
methods: {
|
centered: Boolean,
|
||||||
updatePrice() {
|
lazyLoad: Boolean,
|
||||||
const { price } = this.data;
|
thumbLink: String,
|
||||||
const priceArr = price.toString().split('.');
|
originPrice: String,
|
||||||
this.setData({
|
thumbMode: {
|
||||||
integerStr: priceArr[0],
|
type: String,
|
||||||
decimalStr: priceArr[1] ? `.${priceArr[1]}` : '',
|
value: 'aspectFit',
|
||||||
});
|
|
||||||
},
|
|
||||||
onClickThumb() {
|
|
||||||
this.jumpLink('thumbLink');
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
currency: {
|
||||||
|
type: String,
|
||||||
|
value: '¥',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updatePrice() {
|
||||||
|
const { price } = this.data;
|
||||||
|
const priceArr = price.toString().split('.');
|
||||||
|
this.setData({
|
||||||
|
integerStr: priceArr[0],
|
||||||
|
decimalStr: priceArr[1] ? `.${priceArr[1]}` : '',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onClickThumb() {
|
||||||
|
this.jumpLink('thumbLink');
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/card/index.wxss
vendored
2
dist/card/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-card{background-color:var(--card-background-color,#fafafa);box-sizing:border-box;color:var(--card-text-color,#323233);font-size:var(--card-font-size,12px);padding:var(--card-padding,8px 16px);position:relative}.van-card__header{display:flex}.van-card__header--center{align-items:center;justify-content:center}.van-card__thumb{flex:none;height:var(--card-thumb-size,88px);margin-right:var(--padding-xs,8px);position:relative;width:var(--card-thumb-size,88px)}.van-card__thumb:empty{display:none}.van-card__img{border-radius:8px;height:100%;width:100%}.van-card__content{display:flex;flex:1;flex-direction:column;justify-content:space-between;min-height:var(--card-thumb-size,88px);min-width:0;position:relative}.van-card__content--center{justify-content:center}.van-card__desc,.van-card__title{word-wrap:break-word}.van-card__title{font-weight:700;line-height:var(--card-title-line-height,16px)}.van-card__desc{color:var(--card-desc-color,#646566);line-height:var(--card-desc-line-height,20px)}.van-card__bottom{line-height:20px}.van-card__price{color:var(--card-price-color,#ee0a24);display:inline-block;font-size:var(--card-price-font-size,12px);font-weight:700}.van-card__price-integer{font-size:var(--card-price-integer-font-size,16px)}.van-card__price-decimal,.van-card__price-integer{font-family:var(--card-price-font-family,Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif)}.van-card__origin-price{color:var(--card-origin-price-color,#646566);display:inline-block;font-size:var(--card-origin-price-font-size,10px);margin-left:5px;text-decoration:line-through}.van-card__num{float:right}.van-card__tag{left:0;position:absolute!important;top:2px}.van-card__footer{flex:none;text-align:right;width:100%}
|
@import '../common/index.wxss';.van-card{position:relative;box-sizing:border-box;padding:8px 16px;padding:var(--card-padding,8px 16px);font-size:12px;font-size:var(--card-font-size,12px);color:#323233;color:var(--card-text-color,#323233);background-color:#fafafa;background-color:var(--card-background-color,#fafafa)}.van-card__header{display:-webkit-flex;display:flex}.van-card__header--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:relative;-webkit-flex:none;flex:none;width:88px;width:var(--card-thumb-size,88px);height:88px;height:var(--card-thumb-size,88px);margin-right:8px;margin-right:var(--padding-xs,8px)}.van-card__thumb:empty{display:none}.van-card__img{width:100%;height:100%;border-radius:8px;border-radius:var(--border-radius-lg,8px)}.van-card__content{position:relative;display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;min-width:0;min-height:88px;min-height:var(--card-thumb-size,88px)}.van-card__content--center{-webkit-justify-content:center;justify-content:center}.van-card__desc,.van-card__title{word-wrap:break-word}.van-card__title{font-weight:700;line-height:16px;line-height:var(--card-title-line-height,16px)}.van-card__desc{line-height:20px;line-height:var(--card-desc-line-height,20px);color:#646566;color:var(--card-desc-color,#646566)}.van-card__bottom{line-height:20px}.van-card__price{display:inline-block;font-weight:700;color:#ee0a24;color:var(--card-price-color,#ee0a24);font-size:12px;font-size:var(--card-price-font-size,12px)}.van-card__price-integer{font-size:16px;font-size:var(--card-price-integer-font-size,16px)}.van-card__price-decimal,.van-card__price-integer{font-family:Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif;font-family:var(--card-price-font-family,Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif)}.van-card__origin-price{display:inline-block;margin-left:5px;text-decoration:line-through;font-size:10px;font-size:var(--card-origin-price-font-size,10px);color:#646566;color:var(--card-origin-price-color,#646566)}.van-card__num{float:right}.van-card__tag{position:absolute!important;top:2px;left:0}.van-card__footer{-webkit-flex:none;flex:none;width:100%;text-align:right}
|
1
dist/cascader/index.d.ts
vendored
1
dist/cascader/index.d.ts
vendored
@ -1 +0,0 @@
|
|||||||
export {};
|
|
210
dist/cascader/index.js
vendored
210
dist/cascader/index.js
vendored
@ -1,210 +0,0 @@
|
|||||||
import { VantComponent } from '../common/component';
|
|
||||||
var FieldName;
|
|
||||||
(function (FieldName) {
|
|
||||||
FieldName["TEXT"] = "text";
|
|
||||||
FieldName["VALUE"] = "value";
|
|
||||||
FieldName["CHILDREN"] = "children";
|
|
||||||
})(FieldName || (FieldName = {}));
|
|
||||||
const defaultFieldNames = {
|
|
||||||
text: FieldName.TEXT,
|
|
||||||
value: FieldName.VALUE,
|
|
||||||
children: FieldName.CHILDREN,
|
|
||||||
};
|
|
||||||
VantComponent({
|
|
||||||
props: {
|
|
||||||
title: String,
|
|
||||||
value: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
value: '请选择',
|
|
||||||
},
|
|
||||||
activeColor: {
|
|
||||||
type: String,
|
|
||||||
value: '#1989fa',
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
type: Array,
|
|
||||||
value: [],
|
|
||||||
},
|
|
||||||
swipeable: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
closeable: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
showHeader: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
closeIcon: {
|
|
||||||
type: String,
|
|
||||||
value: 'cross',
|
|
||||||
},
|
|
||||||
fieldNames: {
|
|
||||||
type: Object,
|
|
||||||
value: defaultFieldNames,
|
|
||||||
observer: 'updateFieldNames',
|
|
||||||
},
|
|
||||||
useTitleSlot: Boolean,
|
|
||||||
},
|
|
||||||
data: {
|
|
||||||
tabs: [],
|
|
||||||
activeTab: 0,
|
|
||||||
textKey: FieldName.TEXT,
|
|
||||||
valueKey: FieldName.VALUE,
|
|
||||||
childrenKey: FieldName.CHILDREN,
|
|
||||||
innerValue: '',
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
options() {
|
|
||||||
this.updateTabs();
|
|
||||||
},
|
|
||||||
value(newVal) {
|
|
||||||
this.updateValue(newVal);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.updateTabs();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateValue(val) {
|
|
||||||
if (val !== undefined) {
|
|
||||||
const values = this.data.tabs.map((tab) => tab.selected && tab.selected[this.data.valueKey]);
|
|
||||||
if (values.indexOf(val) > -1) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.innerValue = val;
|
|
||||||
this.updateTabs();
|
|
||||||
},
|
|
||||||
updateFieldNames() {
|
|
||||||
const { text = 'text', value = 'value', children = 'children', } = this.data.fieldNames || defaultFieldNames;
|
|
||||||
this.setData({
|
|
||||||
textKey: text,
|
|
||||||
valueKey: value,
|
|
||||||
childrenKey: children,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getSelectedOptionsByValue(options, value) {
|
|
||||||
for (let i = 0; i < options.length; i++) {
|
|
||||||
const option = options[i];
|
|
||||||
if (option[this.data.valueKey] === value) {
|
|
||||||
return [option];
|
|
||||||
}
|
|
||||||
if (option[this.data.childrenKey]) {
|
|
||||||
const selectedOptions = this.getSelectedOptionsByValue(option[this.data.childrenKey], value);
|
|
||||||
if (selectedOptions) {
|
|
||||||
return [option, ...selectedOptions];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateTabs() {
|
|
||||||
const { options } = this.data;
|
|
||||||
const { innerValue } = this;
|
|
||||||
if (!options.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (innerValue !== undefined) {
|
|
||||||
const selectedOptions = this.getSelectedOptionsByValue(options, innerValue);
|
|
||||||
if (selectedOptions) {
|
|
||||||
let optionsCursor = options;
|
|
||||||
const tabs = selectedOptions.map((option) => {
|
|
||||||
const tab = {
|
|
||||||
options: optionsCursor,
|
|
||||||
selected: option,
|
|
||||||
};
|
|
||||||
const next = optionsCursor.find((item) => item[this.data.valueKey] === option[this.data.valueKey]);
|
|
||||||
if (next) {
|
|
||||||
optionsCursor = next[this.data.childrenKey];
|
|
||||||
}
|
|
||||||
return tab;
|
|
||||||
});
|
|
||||||
if (optionsCursor) {
|
|
||||||
tabs.push({
|
|
||||||
options: optionsCursor,
|
|
||||||
selected: null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.setData({
|
|
||||||
tabs,
|
|
||||||
});
|
|
||||||
wx.nextTick(() => {
|
|
||||||
this.setData({
|
|
||||||
activeTab: tabs.length - 1,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.setData({
|
|
||||||
tabs: [
|
|
||||||
{
|
|
||||||
options,
|
|
||||||
selected: null,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
activeTab: 0,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onClose() {
|
|
||||||
this.$emit('close');
|
|
||||||
},
|
|
||||||
onClickTab(e) {
|
|
||||||
const { index: tabIndex, title } = e.detail;
|
|
||||||
this.$emit('click-tab', { title, tabIndex });
|
|
||||||
this.setData({
|
|
||||||
activeTab: tabIndex,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 选中
|
|
||||||
onSelect(e) {
|
|
||||||
const { option, tabIndex } = e.currentTarget.dataset;
|
|
||||||
if (option && option.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { valueKey, childrenKey } = this.data;
|
|
||||||
let { tabs } = this.data;
|
|
||||||
tabs[tabIndex].selected = option;
|
|
||||||
if (tabs.length > tabIndex + 1) {
|
|
||||||
tabs = tabs.slice(0, tabIndex + 1);
|
|
||||||
}
|
|
||||||
if (option[childrenKey]) {
|
|
||||||
const nextTab = {
|
|
||||||
options: option[childrenKey],
|
|
||||||
selected: null,
|
|
||||||
};
|
|
||||||
if (tabs[tabIndex + 1]) {
|
|
||||||
tabs[tabIndex + 1] = nextTab;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
tabs.push(nextTab);
|
|
||||||
}
|
|
||||||
wx.nextTick(() => {
|
|
||||||
this.setData({
|
|
||||||
activeTab: tabIndex + 1,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.setData({
|
|
||||||
tabs,
|
|
||||||
});
|
|
||||||
const selectedOptions = tabs.map((tab) => tab.selected).filter(Boolean);
|
|
||||||
const value = option[valueKey];
|
|
||||||
const params = {
|
|
||||||
value,
|
|
||||||
tabIndex,
|
|
||||||
selectedOptions,
|
|
||||||
};
|
|
||||||
this.innerValue = value;
|
|
||||||
this.$emit('change', params);
|
|
||||||
if (!option[childrenKey]) {
|
|
||||||
this.$emit('finish', params);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
8
dist/cascader/index.json
vendored
8
dist/cascader/index.json
vendored
@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"component": true,
|
|
||||||
"usingComponents": {
|
|
||||||
"van-icon": "../icon/index",
|
|
||||||
"van-tab": "../tab/index",
|
|
||||||
"van-tabs": "../tabs/index"
|
|
||||||
}
|
|
||||||
}
|
|
54
dist/cascader/index.wxml
vendored
54
dist/cascader/index.wxml
vendored
@ -1,54 +0,0 @@
|
|||||||
<wxs src="./index.wxs" module="utils" />
|
|
||||||
|
|
||||||
<view wx:if="{{ showHeader }}" class="van-cascader__header">
|
|
||||||
<slot name="title" wx:if="{{ useTitleSlot }}"></slot>
|
|
||||||
<text class="van-cascader__title" wx:else>{{ title }}</text>
|
|
||||||
<van-icon
|
|
||||||
wx:if="{{ closeable }}"
|
|
||||||
name="{{ closeIcon }}"
|
|
||||||
class="van-cascader__close-icon"
|
|
||||||
bind:tap="onClose"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<van-tabs
|
|
||||||
active="{{ activeTab }}"
|
|
||||||
custom-class="van-cascader__tabs"
|
|
||||||
wrap-class="van-cascader__tabs-wrap"
|
|
||||||
tab-class="van-cascader__tab"
|
|
||||||
color="{{ activeColor }}"
|
|
||||||
border="{{ false }}"
|
|
||||||
swipeable="{{ swipeable }}"
|
|
||||||
bind:click="onClickTab"
|
|
||||||
>
|
|
||||||
<van-tab
|
|
||||||
wx:for="{{ tabs }}"
|
|
||||||
wx:for-item="tab"
|
|
||||||
wx:for-index="tabIndex"
|
|
||||||
wx:key="tabIndex"
|
|
||||||
title="{{ tab.selected ? tab.selected[textKey] : placeholder }}"
|
|
||||||
style="width: 100%;"
|
|
||||||
title-style="{{ !tab.selected ? 'color: #969799;font-weight:normal;' : '' }}"
|
|
||||||
>
|
|
||||||
<!-- 暂不支持 -->
|
|
||||||
<!-- <slot name="options-top"></slot> -->
|
|
||||||
|
|
||||||
<view class="van-cascader__options">
|
|
||||||
<view
|
|
||||||
wx:for="{{ tab.options }}"
|
|
||||||
wx:for-item="option"
|
|
||||||
wx:key="index"
|
|
||||||
class="{{ option.className }} {{ utils.optionClass(tab, valueKey, option) }}"
|
|
||||||
style="{{ utils.optionStyle({ tab, valueKey, option, activeColor }) }}"
|
|
||||||
data-option="{{ option }}"
|
|
||||||
data-tab-index="{{ tabIndex }}"
|
|
||||||
bind:tap="onSelect"
|
|
||||||
>
|
|
||||||
<text>{{ option[textKey] }}</text>
|
|
||||||
<van-icon wx:if="{{ utils.isSelected(tab, valueKey, option) }}" name="success" size="18" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 暂不支持 -->
|
|
||||||
<!-- <slot name="options-bottom"></slot> -->
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
24
dist/cascader/index.wxs
vendored
24
dist/cascader/index.wxs
vendored
@ -1,24 +0,0 @@
|
|||||||
var utils = require('../wxs/utils.wxs');
|
|
||||||
var style = require('../wxs/style.wxs');
|
|
||||||
|
|
||||||
function isSelected(tab, valueKey, option) {
|
|
||||||
return tab.selected && tab.selected[valueKey] === option[valueKey]
|
|
||||||
}
|
|
||||||
|
|
||||||
function optionClass(tab, valueKey, option) {
|
|
||||||
return utils.bem('cascader__option', { selected: isSelected(tab, valueKey, option), disabled: option.disabled })
|
|
||||||
}
|
|
||||||
|
|
||||||
function optionStyle(data) {
|
|
||||||
var color = data.option.color || (isSelected(data.tab, data.valueKey, data.option) ? data.activeColor : undefined);
|
|
||||||
return style({
|
|
||||||
color
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
isSelected: isSelected,
|
|
||||||
optionClass: optionClass,
|
|
||||||
optionStyle: optionStyle,
|
|
||||||
};
|
|
1
dist/cascader/index.wxss
vendored
1
dist/cascader/index.wxss
vendored
@ -1 +0,0 @@
|
|||||||
@import '../common/index.wxss';.van-cascader__header{align-items:center;display:flex;height:48px;justify-content:space-between;padding:0 16px}.van-cascader__title{font-size:16px;font-weight:600;line-height:20px}.van-cascader__close-icon{color:#c8c9cc;font-size:22px;height:22px}.van-cascader__tabs-wrap{height:48px!important;padding:0 8px}.van-cascader__tab{color:#323233!important;flex:none!important;font-weight:600!important;padding:0 8px!important}.van-cascader__tab--unselected{color:#969799!important;font-weight:400!important}.van-cascader__option{align-items:center;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;line-height:20px;padding:10px 16px}.van-cascader__option:active{background-color:#f2f3f5}.van-cascader__option--selected{color:#1989fa;font-weight:600}.van-cascader__option--disabled{color:#c8c9cc;cursor:not-allowed}.van-cascader__option--disabled:active{background-color:initial}.van-cascader__options{-webkit-overflow-scrolling:touch;box-sizing:border-box;height:384px;overflow-y:auto;padding-top:6px}
|
|
13
dist/cell-group/index.js
vendored
13
dist/cell-group/index.js
vendored
@ -1,11 +1,10 @@
|
|||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
props: {
|
props: {
|
||||||
title: String,
|
title: String,
|
||||||
border: {
|
border: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: true,
|
value: true,
|
||||||
},
|
|
||||||
inset: Boolean,
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
6
dist/cell-group/index.wxml
vendored
6
dist/cell-group/index.wxml
vendored
@ -1,11 +1,9 @@
|
|||||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
||||||
|
|
||||||
<view
|
<view
|
||||||
wx:if="{{ title }}"
|
wx:if="{{ title }}"
|
||||||
class="{{ utils.bem('cell-group__title', { inset }) }}"
|
class="van-cell-group__title"
|
||||||
>
|
>
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</view>
|
</view>
|
||||||
<view class="custom-class {{ utils.bem('cell-group', { inset }) }} {{ border ? 'van-hairline--top-bottom' : '' }}">
|
<view class="custom-class van-cell-group {{ border ? 'van-hairline--top-bottom' : '' }}">
|
||||||
<slot />
|
<slot />
|
||||||
</view>
|
</view>
|
||||||
|
2
dist/cell-group/index.wxss
vendored
2
dist/cell-group/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-cell-group--inset{border-radius:var(--cell-group-inset-border-radius,8px);margin:var(--cell-group-inset-padding,0 16px);overflow:hidden}.van-cell-group__title{color:var(--cell-group-title-color,#969799);font-size:var(--cell-group-title-font-size,14px);line-height:var(--cell-group-title-line-height,16px);padding:var(--cell-group-title-padding,16px 16px 8px)}.van-cell-group__title--inset{padding:var(--cell-group-inset-title-padding,16px 16px 8px 32px)}
|
@import '../common/index.wxss';.van-cell-group__title{padding:16px 16px 8px;padding:var(--cell-group-title-padding,16px 16px 8px);font-size:14px;font-size:var(--cell-group-title-font-size,14px);line-height:16px;line-height:var(--cell-group-title-line-height,16px);color:#969799;color:var(--cell-group-title-color,#969799)}
|
64
dist/cell/index.js
vendored
64
dist/cell/index.js
vendored
@ -1,38 +1,38 @@
|
|||||||
import { link } from '../mixins/link';
|
import { link } from '../mixins/link';
|
||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
classes: [
|
classes: [
|
||||||
'title-class',
|
'title-class',
|
||||||
'label-class',
|
'label-class',
|
||||||
'value-class',
|
'value-class',
|
||||||
'right-icon-class',
|
'right-icon-class',
|
||||||
'hover-class',
|
'hover-class',
|
||||||
],
|
],
|
||||||
mixins: [link],
|
mixins: [link],
|
||||||
props: {
|
props: {
|
||||||
title: null,
|
title: null,
|
||||||
value: null,
|
value: null,
|
||||||
icon: String,
|
icon: String,
|
||||||
size: String,
|
size: String,
|
||||||
label: String,
|
label: String,
|
||||||
center: Boolean,
|
center: Boolean,
|
||||||
isLink: Boolean,
|
isLink: Boolean,
|
||||||
required: Boolean,
|
required: Boolean,
|
||||||
clickable: Boolean,
|
clickable: Boolean,
|
||||||
titleWidth: String,
|
titleWidth: String,
|
||||||
customStyle: String,
|
customStyle: String,
|
||||||
arrowDirection: String,
|
arrowDirection: String,
|
||||||
useLabelSlot: Boolean,
|
useLabelSlot: Boolean,
|
||||||
border: {
|
border: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: true,
|
value: true,
|
||||||
},
|
|
||||||
titleStyle: String,
|
|
||||||
},
|
},
|
||||||
methods: {
|
titleStyle: String,
|
||||||
onClick(event) {
|
},
|
||||||
this.$emit('click', event.detail);
|
methods: {
|
||||||
this.jumpLink();
|
onClick(event) {
|
||||||
},
|
this.$emit('click', event.detail);
|
||||||
|
this.jumpLink();
|
||||||
},
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/cell/index.wxss
vendored
2
dist/cell/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-cell{background-color:var(--cell-background-color,#fff);box-sizing:border-box;color:var(--cell-text-color,#323233);display:flex;font-size:var(--cell-font-size,14px);line-height:var(--cell-line-height,24px);padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);position:relative;width:100%}.van-cell:after{border-bottom:1px solid #ebedf0;bottom:0;box-sizing:border-box;content:" ";left:16px;pointer-events:none;position:absolute;right:16px;transform:scaleY(.5);transform-origin:center}.van-cell--borderless:after{display:none}.van-cell-group{background-color:var(--cell-background-color,#fff)}.van-cell__label{color:var(--cell-label-color,#969799);font-size:var(--cell-label-font-size,12px);line-height:var(--cell-label-line-height,18px);margin-top:var(--cell-label-margin-top,3px)}.van-cell__value{color:var(--cell-value-color,#969799);overflow:hidden;text-align:right;vertical-align:middle}.van-cell__title,.van-cell__value{flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{align-items:center;display:flex;font-size:var(--cell-icon-size,16px);height:var(--cell-line-height,24px)}.van-cell__left-icon-wrap{margin-right:var(--padding-base,4px)}.van-cell__right-icon-wrap{color:var(--cell-right-icon-color,#969799);margin-left:var(--padding-base,4px)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:var(--cell-line-height,24px)}.van-cell--clickable.van-cell--hover{background-color:var(--cell-active-color,#f2f3f5)}.van-cell--required{overflow:visible}.van-cell--required:before{color:var(--cell-required-color,#ee0a24);content:"*";font-size:var(--cell-font-size,14px);left:var(--padding-xs,8px);position:absolute}.van-cell--center{align-items:center}.van-cell--large{padding-bottom:var(--cell-large-vertical-padding,12px);padding-top:var(--cell-large-vertical-padding,12px)}.van-cell--large .van-cell__title{font-size:var(--cell-large-title-font-size,16px)}.van-cell--large .van-cell__value{font-size:var(--cell-large-value-font-size,16px)}.van-cell--large .van-cell__label{font-size:var(--cell-large-label-font-size,14px)}
|
@import '../common/index.wxss';.van-cell{position:relative;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:10px 16px;padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);font-size:14px;font-size:var(--cell-font-size,14px);line-height:24px;line-height:var(--cell-line-height,24px);color:#323233;color:var(--cell-text-color,#323233);background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;right:16px;bottom:0;left:16px;border-bottom:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-cell--borderless:after{display:none}.van-cell-group{background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell__label{margin-top:3px;margin-top:var(--cell-label-margin-top,3px);font-size:12px;font-size:var(--cell-label-font-size,12px);line-height:18px;line-height:var(--cell-label-line-height,18px);color:#969799;color:var(--cell-label-color,#969799)}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle;color:#969799;color:var(--cell-value-color,#969799)}.van-cell__title,.van-cell__value{-webkit-flex:1;flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:24px;height:var(--cell-line-height,24px);font-size:16px;font-size:var(--cell-icon-size,16px)}.van-cell__left-icon-wrap{margin-right:4px;margin-right:var(--padding-base,4px)}.van-cell__right-icon-wrap{margin-left:4px;margin-left:var(--padding-base,4px);color:#969799;color:var(--cell-right-icon-color,#969799)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:24px;line-height:var(--cell-line-height,24px)}.van-cell--clickable.van-cell--hover{background-color:#f2f3f5;background-color:var(--cell-active-color,#f2f3f5)}.van-cell--required{overflow:visible}.van-cell--required:before{position:absolute;content:"*";left:8px;left:var(--padding-xs,8px);font-size:14px;font-size:var(--cell-font-size,14px);color:#ee0a24;color:var(--cell-required-color,#ee0a24)}.van-cell--center{-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:12px;padding-top:var(--cell-large-vertical-padding,12px);padding-bottom:12px;padding-bottom:var(--cell-large-vertical-padding,12px)}.van-cell--large .van-cell__title{font-size:16px;font-size:var(--cell-large-title-font-size,16px)}.van-cell--large .van-cell__value{font-size:16px;font-size:var(--cell-large-value-font-size,16px)}.van-cell--large .van-cell__label{font-size:14px;font-size:var(--cell-large-label-font-size,14px)}
|
60
dist/checkbox-group/index.js
vendored
60
dist/checkbox-group/index.js
vendored
@ -1,36 +1,36 @@
|
|||||||
import { useChildren } from '../common/relation';
|
import { useChildren } from '../common/relation';
|
||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
field: true,
|
field: true,
|
||||||
relation: useChildren('checkbox', function (target) {
|
relation: useChildren('checkbox', function (target) {
|
||||||
this.updateChild(target);
|
this.updateChild(target);
|
||||||
}),
|
}),
|
||||||
props: {
|
props: {
|
||||||
max: Number,
|
max: Number,
|
||||||
value: {
|
value: {
|
||||||
type: Array,
|
type: Array,
|
||||||
observer: 'updateChildren',
|
observer: 'updateChildren',
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
observer: 'updateChildren',
|
|
||||||
},
|
|
||||||
direction: {
|
|
||||||
type: String,
|
|
||||||
value: 'vertical',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
methods: {
|
disabled: {
|
||||||
updateChildren() {
|
type: Boolean,
|
||||||
this.children.forEach((child) => this.updateChild(child));
|
observer: 'updateChildren',
|
||||||
},
|
|
||||||
updateChild(child) {
|
|
||||||
const { value, disabled, direction } = this.data;
|
|
||||||
child.setData({
|
|
||||||
value: value.indexOf(child.data.name) !== -1,
|
|
||||||
parentDisabled: disabled,
|
|
||||||
direction,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
direction: {
|
||||||
|
type: String,
|
||||||
|
value: 'vertical',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateChildren() {
|
||||||
|
this.children.forEach((child) => this.updateChild(child));
|
||||||
|
},
|
||||||
|
updateChild(child) {
|
||||||
|
const { value, disabled, direction } = this.data;
|
||||||
|
child.setData({
|
||||||
|
value: value.indexOf(child.data.name) !== -1,
|
||||||
|
parentDisabled: disabled,
|
||||||
|
direction,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/checkbox-group/index.wxss
vendored
2
dist/checkbox-group/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-checkbox-group--horizontal{display:flex;flex-wrap:wrap}
|
@import '../common/index.wxss';.van-checkbox-group--horizontal{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}
|
134
dist/checkbox/index.js
vendored
134
dist/checkbox/index.js
vendored
@ -1,77 +1,75 @@
|
|||||||
import { useParent } from '../common/relation';
|
import { useParent } from '../common/relation';
|
||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
function emit(target, value) {
|
function emit(target, value) {
|
||||||
target.$emit('input', value);
|
target.$emit('input', value);
|
||||||
target.$emit('change', value);
|
target.$emit('change', value);
|
||||||
}
|
}
|
||||||
VantComponent({
|
VantComponent({
|
||||||
field: true,
|
field: true,
|
||||||
relation: useParent('checkbox-group'),
|
relation: useParent('checkbox-group'),
|
||||||
classes: ['icon-class', 'label-class'],
|
classes: ['icon-class', 'label-class'],
|
||||||
props: {
|
props: {
|
||||||
value: Boolean,
|
value: Boolean,
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
useIconSlot: Boolean,
|
useIconSlot: Boolean,
|
||||||
checkedColor: String,
|
checkedColor: String,
|
||||||
labelPosition: {
|
labelPosition: {
|
||||||
type: String,
|
type: String,
|
||||||
value: 'right',
|
value: 'right',
|
||||||
},
|
|
||||||
labelDisabled: Boolean,
|
|
||||||
shape: {
|
|
||||||
type: String,
|
|
||||||
value: 'round',
|
|
||||||
},
|
|
||||||
iconSize: {
|
|
||||||
type: null,
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: {
|
labelDisabled: Boolean,
|
||||||
parentDisabled: false,
|
shape: {
|
||||||
direction: 'vertical',
|
type: String,
|
||||||
|
value: 'round',
|
||||||
},
|
},
|
||||||
methods: {
|
iconSize: {
|
||||||
emitChange(value) {
|
type: null,
|
||||||
if (this.parent) {
|
value: 20,
|
||||||
this.setParentValue(this.parent, value);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
emit(this, value);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toggle() {
|
|
||||||
const { parentDisabled, disabled, value } = this.data;
|
|
||||||
if (!disabled && !parentDisabled) {
|
|
||||||
this.emitChange(!value);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onClickLabel() {
|
|
||||||
const { labelDisabled, parentDisabled, disabled, value } = this.data;
|
|
||||||
if (!disabled && !labelDisabled && !parentDisabled) {
|
|
||||||
this.emitChange(!value);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setParentValue(parent, value) {
|
|
||||||
const parentValue = parent.data.value.slice();
|
|
||||||
const { name } = this.data;
|
|
||||||
const { max } = parent.data;
|
|
||||||
if (value) {
|
|
||||||
if (max && parentValue.length >= max) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (parentValue.indexOf(name) === -1) {
|
|
||||||
parentValue.push(name);
|
|
||||||
emit(parent, parentValue);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const index = parentValue.indexOf(name);
|
|
||||||
if (index !== -1) {
|
|
||||||
parentValue.splice(index, 1);
|
|
||||||
emit(parent, parentValue);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
parentDisabled: false,
|
||||||
|
direction: 'vertical',
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
emitChange(value) {
|
||||||
|
if (this.parent) {
|
||||||
|
this.setParentValue(this.parent, value);
|
||||||
|
} else {
|
||||||
|
emit(this, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggle() {
|
||||||
|
const { parentDisabled, disabled, value } = this.data;
|
||||||
|
if (!disabled && !parentDisabled) {
|
||||||
|
this.emitChange(!value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClickLabel() {
|
||||||
|
const { labelDisabled, parentDisabled, disabled, value } = this.data;
|
||||||
|
if (!disabled && !labelDisabled && !parentDisabled) {
|
||||||
|
this.emitChange(!value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setParentValue(parent, value) {
|
||||||
|
const parentValue = parent.data.value.slice();
|
||||||
|
const { name } = this.data;
|
||||||
|
const { max } = parent.data;
|
||||||
|
if (value) {
|
||||||
|
if (max && parentValue.length >= max) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (parentValue.indexOf(name) === -1) {
|
||||||
|
parentValue.push(name);
|
||||||
|
emit(parent, parentValue);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const index = parentValue.indexOf(name);
|
||||||
|
if (index !== -1) {
|
||||||
|
parentValue.splice(index, 1);
|
||||||
|
emit(parent, parentValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/checkbox/index.wxss
vendored
2
dist/checkbox/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-checkbox{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox--horizontal{margin-right:12px}.van-checkbox__icon-wrap,.van-checkbox__label{line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{flex:none}.van-checkbox__icon{align-items:center;border:1px solid var(--checkbox-border-color,#c8c9cc);box-sizing:border-box;color:transparent;display:flex;font-size:var(--checkbox-size,20px);height:1em;justify-content:center;text-align:center;transition-duration:var(--checkbox-transition-duration,.2s);transition-property:color,border-color,background-color;width:1em}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:var(--checkbox-checked-icon-color,#1989fa);color:#fff}.van-checkbox__icon--disabled{background-color:var(--checkbox-disabled-background-color,#ebedf0);border-color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__label{word-wrap:break-word;color:var(--checkbox-label-color,#323233);padding-left:var(--checkbox-label-margin,10px)}.van-checkbox__label--left{float:left;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:var(--checkbox-disabled-label-color,#c8c9cc)}.van-checkbox__label:empty{margin:0}
|
@import '../common/index.wxss';.van-checkbox{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox--horizontal{margin-right:12px}.van-checkbox__icon-wrap,.van-checkbox__label{line-height:20px;line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{-webkit-flex:none;flex:none}.van-checkbox__icon{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:1em;height:1em;color:transparent;text-align:center;transition-property:color,border-color,background-color;font-size:20px;font-size:var(--checkbox-size,20px);border:1px solid #c8c9cc;border:1px solid var(--checkbox-border-color,#c8c9cc);transition-duration:.2s;transition-duration:var(--checkbox-transition-duration,.2s)}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{color:#fff;color:var(--white,#fff);background-color:#1989fa;background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:#1989fa;border-color:var(--checkbox-checked-icon-color,#1989fa)}.van-checkbox__icon--disabled{background-color:#ebedf0;background-color:var(--checkbox-disabled-background-color,#ebedf0);border-color:#c8c9cc;border-color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:#c8c9cc;color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__label{word-wrap:break-word;margin-left:10px;margin-left:var(--checkbox-label-margin,10px);color:#323233;color:var(--checkbox-label-color,#323233)}.van-checkbox__label--left{float:left;margin:0 10px 0 0;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:#c8c9cc;color:var(--checkbox-disabled-label-color,#c8c9cc)}.van-checkbox__label:empty{margin:0}
|
6
dist/circle/canvas.d.ts
vendored
6
dist/circle/canvas.d.ts
vendored
@ -1,4 +1,6 @@
|
|||||||
/// <reference types="miniprogram-api-typings" />
|
/// <reference types="miniprogram-api-typings" />
|
||||||
type CanvasContext = WechatMiniprogram.CanvasContext;
|
declare type CanvasContext = WechatMiniprogram.CanvasContext;
|
||||||
export declare function adaptor(ctx: CanvasContext & Record<string, unknown>): CanvasContext;
|
export declare function adaptor(
|
||||||
|
ctx: CanvasContext & Record<string, unknown>
|
||||||
|
): CanvasContext;
|
||||||
export {};
|
export {};
|
||||||
|
82
dist/circle/canvas.js
vendored
82
dist/circle/canvas.js
vendored
@ -1,43 +1,43 @@
|
|||||||
export function adaptor(ctx) {
|
export function adaptor(ctx) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return Object.assign(ctx, {
|
return Object.assign(ctx, {
|
||||||
setStrokeStyle(val) {
|
setStrokeStyle(val) {
|
||||||
ctx.strokeStyle = val;
|
ctx.strokeStyle = val;
|
||||||
},
|
},
|
||||||
setLineWidth(val) {
|
setLineWidth(val) {
|
||||||
ctx.lineWidth = val;
|
ctx.lineWidth = val;
|
||||||
},
|
},
|
||||||
setLineCap(val) {
|
setLineCap(val) {
|
||||||
ctx.lineCap = val;
|
ctx.lineCap = val;
|
||||||
},
|
},
|
||||||
setFillStyle(val) {
|
setFillStyle(val) {
|
||||||
ctx.fillStyle = val;
|
ctx.fillStyle = val;
|
||||||
},
|
},
|
||||||
setFontSize(val) {
|
setFontSize(val) {
|
||||||
ctx.font = String(val);
|
ctx.font = String(val);
|
||||||
},
|
},
|
||||||
setGlobalAlpha(val) {
|
setGlobalAlpha(val) {
|
||||||
ctx.globalAlpha = val;
|
ctx.globalAlpha = val;
|
||||||
},
|
},
|
||||||
setLineJoin(val) {
|
setLineJoin(val) {
|
||||||
ctx.lineJoin = val;
|
ctx.lineJoin = val;
|
||||||
},
|
},
|
||||||
setTextAlign(val) {
|
setTextAlign(val) {
|
||||||
ctx.textAlign = val;
|
ctx.textAlign = val;
|
||||||
},
|
},
|
||||||
setMiterLimit(val) {
|
setMiterLimit(val) {
|
||||||
ctx.miterLimit = val;
|
ctx.miterLimit = val;
|
||||||
},
|
},
|
||||||
setShadow(offsetX, offsetY, blur, color) {
|
setShadow(offsetX, offsetY, blur, color) {
|
||||||
ctx.shadowOffsetX = offsetX;
|
ctx.shadowOffsetX = offsetX;
|
||||||
ctx.shadowOffsetY = offsetY;
|
ctx.shadowOffsetY = offsetY;
|
||||||
ctx.shadowBlur = blur;
|
ctx.shadowBlur = blur;
|
||||||
ctx.shadowColor = color;
|
ctx.shadowColor = color;
|
||||||
},
|
},
|
||||||
setTextBaseline(val) {
|
setTextBaseline(val) {
|
||||||
ctx.textBaseline = val;
|
ctx.textBaseline = val;
|
||||||
},
|
},
|
||||||
createCircularGradient() { },
|
createCircularGradient() {},
|
||||||
draw() { },
|
draw() {},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
347
dist/circle/index.js
vendored
347
dist/circle/index.js
vendored
@ -5,193 +5,186 @@ import { isObj } from '../common/validator';
|
|||||||
import { canIUseCanvas2d } from '../common/version';
|
import { canIUseCanvas2d } from '../common/version';
|
||||||
import { adaptor } from './canvas';
|
import { adaptor } from './canvas';
|
||||||
function format(rate) {
|
function format(rate) {
|
||||||
return Math.min(Math.max(rate, 0), 100);
|
return Math.min(Math.max(rate, 0), 100);
|
||||||
}
|
}
|
||||||
const PERIMETER = 2 * Math.PI;
|
const PERIMETER = 2 * Math.PI;
|
||||||
const BEGIN_ANGLE = -Math.PI / 2;
|
const BEGIN_ANGLE = -Math.PI / 2;
|
||||||
const STEP = 1;
|
const STEP = 1;
|
||||||
VantComponent({
|
VantComponent({
|
||||||
props: {
|
props: {
|
||||||
text: String,
|
text: String,
|
||||||
lineCap: {
|
lineCap: {
|
||||||
type: String,
|
type: String,
|
||||||
value: 'round',
|
value: 'round',
|
||||||
},
|
|
||||||
value: {
|
|
||||||
type: Number,
|
|
||||||
value: 0,
|
|
||||||
observer: 'reRender',
|
|
||||||
},
|
|
||||||
speed: {
|
|
||||||
type: Number,
|
|
||||||
value: 50,
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
type: Number,
|
|
||||||
value: 100,
|
|
||||||
observer() {
|
|
||||||
this.drawCircle(this.currentValue);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: String,
|
|
||||||
layerColor: {
|
|
||||||
type: String,
|
|
||||||
value: WHITE,
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: null,
|
|
||||||
value: BLUE,
|
|
||||||
observer() {
|
|
||||||
this.setHoverColor().then(() => {
|
|
||||||
this.drawCircle(this.currentValue);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
value: '',
|
|
||||||
},
|
|
||||||
strokeWidth: {
|
|
||||||
type: Number,
|
|
||||||
value: 4,
|
|
||||||
},
|
|
||||||
clockwise: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: {
|
value: {
|
||||||
hoverColor: BLUE,
|
type: Number,
|
||||||
|
value: 0,
|
||||||
|
observer: 'reRender',
|
||||||
},
|
},
|
||||||
methods: {
|
speed: {
|
||||||
getContext() {
|
type: Number,
|
||||||
const { type, size } = this.data;
|
value: 50,
|
||||||
if (type === '' || !canIUseCanvas2d()) {
|
|
||||||
const ctx = wx.createCanvasContext('van-circle', this);
|
|
||||||
return Promise.resolve(ctx);
|
|
||||||
}
|
|
||||||
const dpr = getSystemInfoSync().pixelRatio;
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
wx.createSelectorQuery()
|
|
||||||
.in(this)
|
|
||||||
.select('#van-circle')
|
|
||||||
.node()
|
|
||||||
.exec((res) => {
|
|
||||||
const canvas = res[0].node;
|
|
||||||
const ctx = canvas.getContext(type);
|
|
||||||
if (!this.inited) {
|
|
||||||
this.inited = true;
|
|
||||||
canvas.width = size * dpr;
|
|
||||||
canvas.height = size * dpr;
|
|
||||||
ctx.scale(dpr, dpr);
|
|
||||||
}
|
|
||||||
resolve(adaptor(ctx));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
setHoverColor() {
|
|
||||||
const { color, size } = this.data;
|
|
||||||
if (isObj(color)) {
|
|
||||||
return this.getContext().then((context) => {
|
|
||||||
if (!context)
|
|
||||||
return;
|
|
||||||
const LinearColor = context.createLinearGradient(size, 0, 0, 0);
|
|
||||||
Object.keys(color)
|
|
||||||
.sort((a, b) => parseFloat(a) - parseFloat(b))
|
|
||||||
.map((key) => LinearColor.addColorStop(parseFloat(key) / 100, color[key]));
|
|
||||||
this.hoverColor = LinearColor;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.hoverColor = color;
|
|
||||||
return Promise.resolve();
|
|
||||||
},
|
|
||||||
presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) {
|
|
||||||
const { strokeWidth, lineCap, clockwise, size } = this.data;
|
|
||||||
const position = size / 2;
|
|
||||||
const radius = position - strokeWidth / 2;
|
|
||||||
context.setStrokeStyle(strokeStyle);
|
|
||||||
context.setLineWidth(strokeWidth);
|
|
||||||
context.setLineCap(lineCap);
|
|
||||||
context.beginPath();
|
|
||||||
context.arc(position, position, radius, beginAngle, endAngle, !clockwise);
|
|
||||||
context.stroke();
|
|
||||||
if (fill) {
|
|
||||||
context.setFillStyle(fill);
|
|
||||||
context.fill();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
renderLayerCircle(context) {
|
|
||||||
const { layerColor, fill } = this.data;
|
|
||||||
this.presetCanvas(context, layerColor, 0, PERIMETER, fill);
|
|
||||||
},
|
|
||||||
renderHoverCircle(context, formatValue) {
|
|
||||||
const { clockwise } = this.data;
|
|
||||||
// 结束角度
|
|
||||||
const progress = PERIMETER * (formatValue / 100);
|
|
||||||
const endAngle = clockwise
|
|
||||||
? BEGIN_ANGLE + progress
|
|
||||||
: 3 * Math.PI - (BEGIN_ANGLE + progress);
|
|
||||||
this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle);
|
|
||||||
},
|
|
||||||
drawCircle(currentValue) {
|
|
||||||
const { size } = this.data;
|
|
||||||
this.getContext().then((context) => {
|
|
||||||
if (!context)
|
|
||||||
return;
|
|
||||||
context.clearRect(0, 0, size, size);
|
|
||||||
this.renderLayerCircle(context);
|
|
||||||
const formatValue = format(currentValue);
|
|
||||||
if (formatValue !== 0) {
|
|
||||||
this.renderHoverCircle(context, formatValue);
|
|
||||||
}
|
|
||||||
context.draw();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
reRender() {
|
|
||||||
// tofector 动画暂时没有想到好的解决方案
|
|
||||||
const { value, speed } = this.data;
|
|
||||||
if (speed <= 0 || speed > 1000) {
|
|
||||||
this.drawCircle(value);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.clearMockInterval();
|
|
||||||
this.currentValue = this.currentValue || 0;
|
|
||||||
const run = () => {
|
|
||||||
this.interval = setTimeout(() => {
|
|
||||||
if (this.currentValue !== value) {
|
|
||||||
if (Math.abs(this.currentValue - value) < STEP) {
|
|
||||||
this.currentValue = value;
|
|
||||||
}
|
|
||||||
else if (this.currentValue < value) {
|
|
||||||
this.currentValue += STEP;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.currentValue -= STEP;
|
|
||||||
}
|
|
||||||
this.drawCircle(this.currentValue);
|
|
||||||
run();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.clearMockInterval();
|
|
||||||
}
|
|
||||||
}, 1000 / speed);
|
|
||||||
};
|
|
||||||
run();
|
|
||||||
},
|
|
||||||
clearMockInterval() {
|
|
||||||
if (this.interval) {
|
|
||||||
clearTimeout(this.interval);
|
|
||||||
this.interval = null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mounted() {
|
size: {
|
||||||
this.currentValue = this.data.value;
|
type: Number,
|
||||||
|
value: 100,
|
||||||
|
observer() {
|
||||||
|
this.drawCircle(this.currentValue);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fill: String,
|
||||||
|
layerColor: {
|
||||||
|
type: String,
|
||||||
|
value: WHITE,
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: null,
|
||||||
|
value: BLUE,
|
||||||
|
observer() {
|
||||||
this.setHoverColor().then(() => {
|
this.setHoverColor().then(() => {
|
||||||
this.drawCircle(this.currentValue);
|
this.drawCircle(this.currentValue);
|
||||||
});
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
destroyed() {
|
type: {
|
||||||
this.clearMockInterval();
|
type: String,
|
||||||
|
value: '',
|
||||||
},
|
},
|
||||||
|
strokeWidth: {
|
||||||
|
type: Number,
|
||||||
|
value: 4,
|
||||||
|
},
|
||||||
|
clockwise: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
hoverColor: BLUE,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getContext() {
|
||||||
|
const { type, size } = this.data;
|
||||||
|
if (type === '' || !canIUseCanvas2d()) {
|
||||||
|
const ctx = wx.createCanvasContext('van-circle', this);
|
||||||
|
return Promise.resolve(ctx);
|
||||||
|
}
|
||||||
|
const dpr = getSystemInfoSync().pixelRatio;
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
wx.createSelectorQuery()
|
||||||
|
.in(this)
|
||||||
|
.select('#van-circle')
|
||||||
|
.node()
|
||||||
|
.exec((res) => {
|
||||||
|
const canvas = res[0].node;
|
||||||
|
const ctx = canvas.getContext(type);
|
||||||
|
if (!this.inited) {
|
||||||
|
this.inited = true;
|
||||||
|
canvas.width = size * dpr;
|
||||||
|
canvas.height = size * dpr;
|
||||||
|
ctx.scale(dpr, dpr);
|
||||||
|
}
|
||||||
|
resolve(adaptor(ctx));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setHoverColor() {
|
||||||
|
const { color, size } = this.data;
|
||||||
|
if (isObj(color)) {
|
||||||
|
return this.getContext().then((context) => {
|
||||||
|
const LinearColor = context.createLinearGradient(size, 0, 0, 0);
|
||||||
|
Object.keys(color)
|
||||||
|
.sort((a, b) => parseFloat(a) - parseFloat(b))
|
||||||
|
.map((key) =>
|
||||||
|
LinearColor.addColorStop(parseFloat(key) / 100, color[key])
|
||||||
|
);
|
||||||
|
this.hoverColor = LinearColor;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.hoverColor = color;
|
||||||
|
return Promise.resolve();
|
||||||
|
},
|
||||||
|
presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) {
|
||||||
|
const { strokeWidth, lineCap, clockwise, size } = this.data;
|
||||||
|
const position = size / 2;
|
||||||
|
const radius = position - strokeWidth / 2;
|
||||||
|
context.setStrokeStyle(strokeStyle);
|
||||||
|
context.setLineWidth(strokeWidth);
|
||||||
|
context.setLineCap(lineCap);
|
||||||
|
context.beginPath();
|
||||||
|
context.arc(position, position, radius, beginAngle, endAngle, !clockwise);
|
||||||
|
context.stroke();
|
||||||
|
if (fill) {
|
||||||
|
context.setFillStyle(fill);
|
||||||
|
context.fill();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
renderLayerCircle(context) {
|
||||||
|
const { layerColor, fill } = this.data;
|
||||||
|
this.presetCanvas(context, layerColor, 0, PERIMETER, fill);
|
||||||
|
},
|
||||||
|
renderHoverCircle(context, formatValue) {
|
||||||
|
const { clockwise } = this.data;
|
||||||
|
// 结束角度
|
||||||
|
const progress = PERIMETER * (formatValue / 100);
|
||||||
|
const endAngle = clockwise
|
||||||
|
? BEGIN_ANGLE + progress
|
||||||
|
: 3 * Math.PI - (BEGIN_ANGLE + progress);
|
||||||
|
this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle);
|
||||||
|
},
|
||||||
|
drawCircle(currentValue) {
|
||||||
|
const { size } = this.data;
|
||||||
|
this.getContext().then((context) => {
|
||||||
|
context.clearRect(0, 0, size, size);
|
||||||
|
this.renderLayerCircle(context);
|
||||||
|
const formatValue = format(currentValue);
|
||||||
|
if (formatValue !== 0) {
|
||||||
|
this.renderHoverCircle(context, formatValue);
|
||||||
|
}
|
||||||
|
context.draw();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
reRender() {
|
||||||
|
// tofector 动画暂时没有想到好的解决方案
|
||||||
|
const { value, speed } = this.data;
|
||||||
|
if (speed <= 0 || speed > 1000) {
|
||||||
|
this.drawCircle(value);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.clearInterval();
|
||||||
|
this.currentValue = this.currentValue || 0;
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
if (this.currentValue !== value) {
|
||||||
|
if (Math.abs(this.currentValue - value) < STEP) {
|
||||||
|
this.currentValue = value;
|
||||||
|
} else {
|
||||||
|
if (this.currentValue < value) {
|
||||||
|
this.currentValue += STEP;
|
||||||
|
} else {
|
||||||
|
this.currentValue -= STEP;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.drawCircle(this.currentValue);
|
||||||
|
} else {
|
||||||
|
this.clearInterval();
|
||||||
|
}
|
||||||
|
}, 1000 / speed);
|
||||||
|
},
|
||||||
|
clearInterval() {
|
||||||
|
if (this.interval) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
this.interval = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.currentValue = this.data.value;
|
||||||
|
this.setHoverColor().then(() => {
|
||||||
|
this.drawCircle(this.currentValue);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
this.clearInterval();
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/circle/index.wxss
vendored
2
dist/circle/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-circle{display:inline-block;position:relative;text-align:center}.van-circle__text{color:var(--circle-text-color,#323233);left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}
|
@import '../common/index.wxss';.van-circle{position:relative;display:inline-block;text-align:center}.van-circle__text{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#323233;color:var(--circle-text-color,#323233)}
|
10
dist/col/index.js
vendored
10
dist/col/index.js
vendored
@ -1,9 +1,9 @@
|
|||||||
import { useParent } from '../common/relation';
|
import { useParent } from '../common/relation';
|
||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
relation: useParent('row'),
|
relation: useParent('row'),
|
||||||
props: {
|
props: {
|
||||||
span: Number,
|
span: Number,
|
||||||
offset: Number,
|
offset: Number,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/col/index.wxss
vendored
2
dist/col/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-col{box-sizing:border-box;float:left}.van-col--1{width:4.16666667%}.van-col--offset-1{margin-left:4.16666667%}.van-col--2{width:8.33333333%}.van-col--offset-2{margin-left:8.33333333%}.van-col--3{width:12.5%}.van-col--offset-3{margin-left:12.5%}.van-col--4{width:16.66666667%}.van-col--offset-4{margin-left:16.66666667%}.van-col--5{width:20.83333333%}.van-col--offset-5{margin-left:20.83333333%}.van-col--6{width:25%}.van-col--offset-6{margin-left:25%}.van-col--7{width:29.16666667%}.van-col--offset-7{margin-left:29.16666667%}.van-col--8{width:33.33333333%}.van-col--offset-8{margin-left:33.33333333%}.van-col--9{width:37.5%}.van-col--offset-9{margin-left:37.5%}.van-col--10{width:41.66666667%}.van-col--offset-10{margin-left:41.66666667%}.van-col--11{width:45.83333333%}.van-col--offset-11{margin-left:45.83333333%}.van-col--12{width:50%}.van-col--offset-12{margin-left:50%}.van-col--13{width:54.16666667%}.van-col--offset-13{margin-left:54.16666667%}.van-col--14{width:58.33333333%}.van-col--offset-14{margin-left:58.33333333%}.van-col--15{width:62.5%}.van-col--offset-15{margin-left:62.5%}.van-col--16{width:66.66666667%}.van-col--offset-16{margin-left:66.66666667%}.van-col--17{width:70.83333333%}.van-col--offset-17{margin-left:70.83333333%}.van-col--18{width:75%}.van-col--offset-18{margin-left:75%}.van-col--19{width:79.16666667%}.van-col--offset-19{margin-left:79.16666667%}.van-col--20{width:83.33333333%}.van-col--offset-20{margin-left:83.33333333%}.van-col--21{width:87.5%}.van-col--offset-21{margin-left:87.5%}.van-col--22{width:91.66666667%}.van-col--offset-22{margin-left:91.66666667%}.van-col--23{width:95.83333333%}.van-col--offset-23{margin-left:95.83333333%}.van-col--24{width:100%}.van-col--offset-24{margin-left:100%}
|
@import '../common/index.wxss';.van-col{float:left;box-sizing:border-box}.van-col--1{width:100%/24}.van-col--offset-1{margin-left:100%/24}.van-col--2{width:200%/24}.van-col--offset-2{margin-left:200%/24}.van-col--3{width:300%/24}.van-col--offset-3{margin-left:300%/24}.van-col--4{width:400%/24}.van-col--offset-4{margin-left:400%/24}.van-col--5{width:500%/24}.van-col--offset-5{margin-left:500%/24}.van-col--6{width:600%/24}.van-col--offset-6{margin-left:600%/24}.van-col--7{width:700%/24}.van-col--offset-7{margin-left:700%/24}.van-col--8{width:800%/24}.van-col--offset-8{margin-left:800%/24}.van-col--9{width:900%/24}.van-col--offset-9{margin-left:900%/24}.van-col--10{width:1000%/24}.van-col--offset-10{margin-left:1000%/24}.van-col--11{width:1100%/24}.van-col--offset-11{margin-left:1100%/24}.van-col--12{width:1200%/24}.van-col--offset-12{margin-left:1200%/24}.van-col--13{width:1300%/24}.van-col--offset-13{margin-left:1300%/24}.van-col--14{width:1400%/24}.van-col--offset-14{margin-left:1400%/24}.van-col--15{width:1500%/24}.van-col--offset-15{margin-left:1500%/24}.van-col--16{width:1600%/24}.van-col--offset-16{margin-left:1600%/24}.van-col--17{width:1700%/24}.van-col--offset-17{margin-left:1700%/24}.van-col--18{width:1800%/24}.van-col--offset-18{margin-left:1800%/24}.van-col--19{width:1900%/24}.van-col--offset-19{margin-left:1900%/24}.van-col--20{width:2000%/24}.van-col--offset-20{margin-left:2000%/24}.van-col--21{width:2100%/24}.van-col--offset-21{margin-left:2100%/24}.van-col--22{width:2200%/24}.van-col--offset-22{margin-left:2200%/24}.van-col--23{width:2300%/24}.van-col--offset-23{margin-left:2300%/24}.van-col--24{width:2400%/24}.van-col--offset-24{margin-left:2400%/24}
|
6
dist/collapse-item/animate.d.ts
vendored
6
dist/collapse-item/animate.d.ts
vendored
@ -1,2 +1,6 @@
|
|||||||
/// <reference types="miniprogram-api-typings" />
|
/// <reference types="miniprogram-api-typings" />
|
||||||
export declare function setContentAnimate(context: WechatMiniprogram.Component.TrivialInstance, expanded: boolean, mounted: boolean): void;
|
export declare function setContentAnimate(
|
||||||
|
context: WechatMiniprogram.Component.TrivialInstance,
|
||||||
|
expanded: boolean,
|
||||||
|
mounted: boolean
|
||||||
|
): void;
|
||||||
|
93
dist/collapse-item/animate.js
vendored
93
dist/collapse-item/animate.js
vendored
@ -1,39 +1,70 @@
|
|||||||
|
import { canIUseAnimate } from '../common/version';
|
||||||
import { getRect } from '../common/utils';
|
import { getRect } from '../common/utils';
|
||||||
function useAnimation(context, expanded, mounted, height) {
|
function useAnimate(context, expanded, mounted, height) {
|
||||||
const animation = wx.createAnimation({
|
const selector = '.van-collapse-item__wrapper';
|
||||||
duration: 0,
|
if (expanded) {
|
||||||
timingFunction: 'ease-in-out',
|
context.animate(
|
||||||
});
|
selector,
|
||||||
if (expanded) {
|
[
|
||||||
if (height === 0) {
|
{ height: 0, ease: 'ease-in-out', offset: 0 },
|
||||||
animation.height('auto').top(1).step();
|
{ height: `${height}px`, ease: 'ease-in-out', offset: 1 },
|
||||||
}
|
{ height: `auto`, ease: 'ease-in-out', offset: 1 },
|
||||||
else {
|
],
|
||||||
animation
|
mounted ? 300 : 0,
|
||||||
.height(height)
|
() => {
|
||||||
.top(1)
|
context.clearAnimation(selector);
|
||||||
.step({
|
}
|
||||||
duration: mounted ? 300 : 1,
|
);
|
||||||
})
|
return;
|
||||||
.height('auto')
|
}
|
||||||
.step();
|
context.animate(
|
||||||
}
|
selector,
|
||||||
context.setData({
|
[
|
||||||
animation: animation.export(),
|
{ height: `${height}px`, ease: 'ease-in-out', offset: 0 },
|
||||||
});
|
{ height: 0, ease: 'ease-in-out', offset: 1 },
|
||||||
return;
|
],
|
||||||
|
300,
|
||||||
|
() => {
|
||||||
|
context.clearAnimation(selector);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function useAnimation(context, expanded, mounted, height) {
|
||||||
|
const animation = wx.createAnimation({
|
||||||
|
duration: 0,
|
||||||
|
timingFunction: 'ease-in-out',
|
||||||
|
});
|
||||||
|
if (expanded) {
|
||||||
|
if (height === 0) {
|
||||||
|
animation.height('auto').top(1).step();
|
||||||
|
} else {
|
||||||
|
animation
|
||||||
|
.height(height)
|
||||||
|
.top(1)
|
||||||
|
.step({
|
||||||
|
duration: mounted ? 300 : 1,
|
||||||
|
})
|
||||||
|
.height('auto')
|
||||||
|
.step();
|
||||||
}
|
}
|
||||||
animation.height(height).top(0).step({ duration: 1 }).height(0).step({
|
|
||||||
duration: 300,
|
|
||||||
});
|
|
||||||
context.setData({
|
context.setData({
|
||||||
animation: animation.export(),
|
animation: animation.export(),
|
||||||
});
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
animation.height(height).top(0).step({ duration: 1 }).height(0).step({
|
||||||
|
duration: 300,
|
||||||
|
});
|
||||||
|
context.setData({
|
||||||
|
animation: animation.export(),
|
||||||
|
});
|
||||||
}
|
}
|
||||||
export function setContentAnimate(context, expanded, mounted) {
|
export function setContentAnimate(context, expanded, mounted) {
|
||||||
getRect(context, '.van-collapse-item__content')
|
getRect(context, '.van-collapse-item__content')
|
||||||
.then((rect) => rect.height)
|
.then((rect) => rect.height)
|
||||||
.then((height) => {
|
.then((height) => {
|
||||||
useAnimation(context, expanded, mounted, height);
|
canIUseAnimate()
|
||||||
|
? useAnimate(context, expanded, mounted, height)
|
||||||
|
: useAnimation(context, expanded, mounted, height);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
101
dist/collapse-item/index.js
vendored
101
dist/collapse-item/index.js
vendored
@ -2,59 +2,58 @@ import { VantComponent } from '../common/component';
|
|||||||
import { useParent } from '../common/relation';
|
import { useParent } from '../common/relation';
|
||||||
import { setContentAnimate } from './animate';
|
import { setContentAnimate } from './animate';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
classes: ['title-class', 'content-class'],
|
classes: ['title-class', 'content-class'],
|
||||||
relation: useParent('collapse'),
|
relation: useParent('collapse'),
|
||||||
props: {
|
props: {
|
||||||
size: String,
|
name: null,
|
||||||
name: null,
|
title: null,
|
||||||
title: null,
|
value: null,
|
||||||
value: null,
|
icon: String,
|
||||||
icon: String,
|
label: String,
|
||||||
label: String,
|
disabled: Boolean,
|
||||||
disabled: Boolean,
|
clickable: Boolean,
|
||||||
clickable: Boolean,
|
border: {
|
||||||
border: {
|
type: Boolean,
|
||||||
type: Boolean,
|
value: true,
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
isLink: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: {
|
isLink: {
|
||||||
expanded: false,
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
},
|
},
|
||||||
mounted() {
|
},
|
||||||
this.updateExpanded();
|
data: {
|
||||||
this.mounted = true;
|
expanded: false,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.updateExpanded();
|
||||||
|
this.mounted = true;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateExpanded() {
|
||||||
|
if (!this.parent) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { value, accordion } = this.parent.data;
|
||||||
|
const { children = [] } = this.parent;
|
||||||
|
const { name } = this.data;
|
||||||
|
const index = children.indexOf(this);
|
||||||
|
const currentName = name == null ? index : name;
|
||||||
|
const expanded = accordion
|
||||||
|
? value === currentName
|
||||||
|
: (value || []).some((name) => name === currentName);
|
||||||
|
if (expanded !== this.data.expanded) {
|
||||||
|
setContentAnimate(this, expanded, this.mounted);
|
||||||
|
}
|
||||||
|
this.setData({ index, expanded });
|
||||||
},
|
},
|
||||||
methods: {
|
onClick() {
|
||||||
updateExpanded() {
|
if (this.data.disabled) {
|
||||||
if (!this.parent) {
|
return;
|
||||||
return;
|
}
|
||||||
}
|
const { name, expanded } = this.data;
|
||||||
const { value, accordion } = this.parent.data;
|
const index = this.parent.children.indexOf(this);
|
||||||
const { children = [] } = this.parent;
|
const currentName = name == null ? index : name;
|
||||||
const { name } = this.data;
|
this.parent.switch(currentName, !expanded);
|
||||||
const index = children.indexOf(this);
|
|
||||||
const currentName = name == null ? index : name;
|
|
||||||
const expanded = accordion
|
|
||||||
? value === currentName
|
|
||||||
: (value || []).some((name) => name === currentName);
|
|
||||||
if (expanded !== this.data.expanded) {
|
|
||||||
setContentAnimate(this, expanded, this.mounted);
|
|
||||||
}
|
|
||||||
this.setData({ index, expanded });
|
|
||||||
},
|
|
||||||
onClick() {
|
|
||||||
if (this.data.disabled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { name, expanded } = this.data;
|
|
||||||
const index = this.parent.children.indexOf(this);
|
|
||||||
const currentName = name == null ? index : name;
|
|
||||||
this.parent.switch(currentName, !expanded);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
1
dist/collapse-item/index.wxml
vendored
1
dist/collapse-item/index.wxml
vendored
@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
<view class="van-collapse-item custom-class {{ index !== 0 ? 'van-hairline--top' : '' }}">
|
<view class="van-collapse-item custom-class {{ index !== 0 ? 'van-hairline--top' : '' }}">
|
||||||
<van-cell
|
<van-cell
|
||||||
size="{{ size }}"
|
|
||||||
title="{{ title }}"
|
title="{{ title }}"
|
||||||
title-class="title-class"
|
title-class="title-class"
|
||||||
icon="{{ icon }}"
|
icon="{{ icon }}"
|
||||||
|
2
dist/collapse-item/index.wxss
vendored
2
dist/collapse-item/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{transform:rotate(90deg);transition:transform var(--collapse-item-transition-duration,.3s)}.van-collapse-item__title--expanded .van-cell__right-icon{transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__content{background-color:var(--collapse-item-content-background-color,#fff);color:var(--collapse-item-content-text-color,#969799);font-size:var(--collapse-item-content-font-size,13px);line-height:var(--collapse-item-content-line-height,1.5);padding:var(--collapse-item-content-padding,15px)}
|
@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;transition:-webkit-transform var(--collapse-item-transition-duration,.3s);transition:transform var(--collapse-item-transition-duration,.3s);transition:transform var(--collapse-item-transition-duration,.3s),-webkit-transform var(--collapse-item-transition-duration,.3s)}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c8c9cc!important;color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important;background-color:var(--white,#fff)!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__content{padding:15px;padding:var(--collapse-item-content-padding,15px);color:#969799;color:var(--collapse-item-content-text-color,#969799);font-size:13px;font-size:var(--collapse-item-content-font-size,13px);line-height:1.5;line-height:var(--collapse-item-content-line-height,1.5);background-color:#fff;background-color:var(--collapse-item-content-background-color,#fff)}
|
78
dist/collapse/index.js
vendored
78
dist/collapse/index.js
vendored
@ -1,46 +1,44 @@
|
|||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
import { useChildren } from '../common/relation';
|
import { useChildren } from '../common/relation';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
relation: useChildren('collapse-item'),
|
relation: useChildren('collapse-item'),
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: null,
|
type: null,
|
||||||
observer: 'updateExpanded',
|
observer: 'updateExpanded',
|
||||||
},
|
|
||||||
accordion: {
|
|
||||||
type: Boolean,
|
|
||||||
observer: 'updateExpanded',
|
|
||||||
},
|
|
||||||
border: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
methods: {
|
accordion: {
|
||||||
updateExpanded() {
|
type: Boolean,
|
||||||
this.children.forEach((child) => {
|
observer: 'updateExpanded',
|
||||||
child.updateExpanded();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
switch(name, expanded) {
|
|
||||||
const { accordion, value } = this.data;
|
|
||||||
const changeItem = name;
|
|
||||||
if (!accordion) {
|
|
||||||
name = expanded
|
|
||||||
? (value || []).concat(name)
|
|
||||||
: (value || []).filter((activeName) => activeName !== name);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
name = expanded ? name : '';
|
|
||||||
}
|
|
||||||
if (expanded) {
|
|
||||||
this.$emit('open', changeItem);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.$emit('close', changeItem);
|
|
||||||
}
|
|
||||||
this.$emit('change', name);
|
|
||||||
this.$emit('input', name);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateExpanded() {
|
||||||
|
this.children.forEach((child) => {
|
||||||
|
child.updateExpanded();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
switch(name, expanded) {
|
||||||
|
const { accordion, value } = this.data;
|
||||||
|
const changeItem = name;
|
||||||
|
if (!accordion) {
|
||||||
|
name = expanded
|
||||||
|
? (value || []).concat(name)
|
||||||
|
: (value || []).filter((activeName) => activeName !== name);
|
||||||
|
} else {
|
||||||
|
name = expanded ? name : '';
|
||||||
|
}
|
||||||
|
if (expanded) {
|
||||||
|
this.$emit('open', changeItem);
|
||||||
|
} else {
|
||||||
|
this.$emit('close', changeItem);
|
||||||
|
}
|
||||||
|
this.$emit('change', name);
|
||||||
|
this.$emit('input', name);
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
8
dist/common/component.d.ts
vendored
8
dist/common/component.d.ts
vendored
@ -1,4 +1,8 @@
|
|||||||
/// <reference types="miniprogram-api-typings" />
|
/// <reference types="miniprogram-api-typings" />
|
||||||
import { VantComponentOptions } from 'definitions/index';
|
import { VantComponentOptions } from '../definitions/index';
|
||||||
declare function VantComponent<Data extends WechatMiniprogram.Component.DataOption, Props extends WechatMiniprogram.Component.PropertyOption, Methods extends WechatMiniprogram.Component.MethodOption>(vantOptions: VantComponentOptions<Data, Props, Methods>): void;
|
declare function VantComponent<
|
||||||
|
Data extends WechatMiniprogram.Component.DataOption,
|
||||||
|
Props extends WechatMiniprogram.Component.PropertyOption,
|
||||||
|
Methods extends WechatMiniprogram.Component.MethodOption
|
||||||
|
>(vantOptions: VantComponentOptions<Data, Props, Methods>): void;
|
||||||
export { VantComponent };
|
export { VantComponent };
|
||||||
|
79
dist/common/component.js
vendored
79
dist/common/component.js
vendored
@ -1,46 +1,45 @@
|
|||||||
import { basic } from '../mixins/basic';
|
import { basic } from '../mixins/basic';
|
||||||
function mapKeys(source, target, map) {
|
function mapKeys(source, target, map) {
|
||||||
Object.keys(map).forEach((key) => {
|
Object.keys(map).forEach((key) => {
|
||||||
if (source[key]) {
|
if (source[key]) {
|
||||||
target[map[key]] = source[key];
|
target[map[key]] = source[key];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
function VantComponent(vantOptions) {
|
function VantComponent(vantOptions) {
|
||||||
const options = {};
|
const options = {};
|
||||||
mapKeys(vantOptions, options, {
|
mapKeys(vantOptions, options, {
|
||||||
data: 'data',
|
data: 'data',
|
||||||
props: 'properties',
|
props: 'properties',
|
||||||
watch: 'observers',
|
mixins: 'behaviors',
|
||||||
mixins: 'behaviors',
|
methods: 'methods',
|
||||||
methods: 'methods',
|
beforeCreate: 'created',
|
||||||
beforeCreate: 'created',
|
created: 'attached',
|
||||||
created: 'attached',
|
mounted: 'ready',
|
||||||
mounted: 'ready',
|
destroyed: 'detached',
|
||||||
destroyed: 'detached',
|
classes: 'externalClasses',
|
||||||
classes: 'externalClasses',
|
});
|
||||||
});
|
// add default externalClasses
|
||||||
// add default externalClasses
|
options.externalClasses = options.externalClasses || [];
|
||||||
options.externalClasses = options.externalClasses || [];
|
options.externalClasses.push('custom-class');
|
||||||
options.externalClasses.push('custom-class');
|
// add default behaviors
|
||||||
// add default behaviors
|
options.behaviors = options.behaviors || [];
|
||||||
options.behaviors = options.behaviors || [];
|
options.behaviors.push(basic);
|
||||||
options.behaviors.push(basic);
|
// add relations
|
||||||
// add relations
|
const { relation } = vantOptions;
|
||||||
const { relation } = vantOptions;
|
if (relation) {
|
||||||
if (relation) {
|
options.relations = relation.relations;
|
||||||
options.relations = relation.relations;
|
options.behaviors.push(relation.mixin);
|
||||||
options.behaviors.push(relation.mixin);
|
}
|
||||||
}
|
// map field to form-field behavior
|
||||||
// map field to form-field behavior
|
if (vantOptions.field) {
|
||||||
if (vantOptions.field) {
|
options.behaviors.push('wx://form-field');
|
||||||
options.behaviors.push('wx://form-field');
|
}
|
||||||
}
|
// add default options
|
||||||
// add default options
|
options.options = {
|
||||||
options.options = {
|
multipleSlots: true,
|
||||||
multipleSlots: true,
|
addGlobalClass: true,
|
||||||
addGlobalClass: true,
|
};
|
||||||
};
|
Component(options);
|
||||||
Component(options);
|
|
||||||
}
|
}
|
||||||
export { VantComponent };
|
export { VantComponent };
|
||||||
|
2
dist/common/index.wxss
vendored
2
dist/common/index.wxss
vendored
@ -1 +1 @@
|
|||||||
.van-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.van-multi-ellipsis--l3{-webkit-line-clamp:3}.van-clearfix:after{clear:both;content:"";display:table}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{border:0 solid #ebedf0;bottom:-50%;box-sizing:border-box;content:" ";left:-50%;pointer-events:none;position:absolute;right:-50%;top:-50%;transform:scale(.5);transform-origin:center}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
|
.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}.van-clearfix:after{display:table;clear:both;content:""}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
|
28
dist/common/relation.d.ts
vendored
28
dist/common/relation.d.ts
vendored
@ -1,15 +1,21 @@
|
|||||||
/// <reference types="miniprogram-api-typings" />
|
/// <reference types="miniprogram-api-typings" />
|
||||||
type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
|
declare type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
|
||||||
export declare function useParent(name: string, onEffect?: (this: TrivialInstance) => void): {
|
export declare function useParent(
|
||||||
relations: {
|
name: string,
|
||||||
[x: string]: WechatMiniprogram.Component.RelationOption;
|
onEffect?: (this: TrivialInstance) => void
|
||||||
};
|
): {
|
||||||
mixin: string;
|
relations: {
|
||||||
|
[x: string]: WechatMiniprogram.Component.RelationOption;
|
||||||
|
};
|
||||||
|
mixin: string;
|
||||||
};
|
};
|
||||||
export declare function useChildren(name: string, onEffect?: (this: TrivialInstance, target: TrivialInstance) => void): {
|
export declare function useChildren(
|
||||||
relations: {
|
name: string,
|
||||||
[x: string]: WechatMiniprogram.Component.RelationOption;
|
onEffect?: (this: TrivialInstance, target: TrivialInstance) => void
|
||||||
};
|
): {
|
||||||
mixin: string;
|
relations: {
|
||||||
|
[x: string]: WechatMiniprogram.Component.RelationOption;
|
||||||
|
};
|
||||||
|
mixin: string;
|
||||||
};
|
};
|
||||||
export {};
|
export {};
|
||||||
|
108
dist/common/relation.js
vendored
108
dist/common/relation.js
vendored
@ -1,56 +1,64 @@
|
|||||||
export function useParent(name, onEffect) {
|
export function useParent(name, onEffect) {
|
||||||
const path = `../${name}/index`;
|
const path = `../${name}/index`;
|
||||||
return {
|
return {
|
||||||
relations: {
|
relations: {
|
||||||
[path]: {
|
[path]: {
|
||||||
type: 'ancestor',
|
type: 'ancestor',
|
||||||
linked() {
|
linked() {
|
||||||
onEffect && onEffect.call(this);
|
onEffect && onEffect.call(this);
|
||||||
},
|
|
||||||
linkChanged() {
|
|
||||||
onEffect && onEffect.call(this);
|
|
||||||
},
|
|
||||||
unlinked() {
|
|
||||||
onEffect && onEffect.call(this);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mixin: Behavior({
|
linkChanged() {
|
||||||
created() {
|
onEffect && onEffect.call(this);
|
||||||
Object.defineProperty(this, 'parent', {
|
},
|
||||||
get: () => this.getRelationNodes(path)[0],
|
unlinked() {
|
||||||
});
|
onEffect && onEffect.call(this);
|
||||||
Object.defineProperty(this, 'index', {
|
},
|
||||||
// @ts-ignore
|
},
|
||||||
get: () => { var _a, _b; return (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.indexOf(this); },
|
},
|
||||||
});
|
mixin: Behavior({
|
||||||
},
|
created() {
|
||||||
}),
|
Object.defineProperty(this, 'parent', {
|
||||||
};
|
get: () => this.getRelationNodes(path)[0],
|
||||||
|
});
|
||||||
|
Object.defineProperty(this, 'index', {
|
||||||
|
// @ts-ignore
|
||||||
|
get: () => {
|
||||||
|
var _a, _b;
|
||||||
|
return (_b =
|
||||||
|
(_a = this.parent) === null || _a === void 0
|
||||||
|
? void 0
|
||||||
|
: _a.children) === null || _b === void 0
|
||||||
|
? void 0
|
||||||
|
: _b.indexOf(this);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
};
|
||||||
}
|
}
|
||||||
export function useChildren(name, onEffect) {
|
export function useChildren(name, onEffect) {
|
||||||
const path = `../${name}/index`;
|
const path = `../${name}/index`;
|
||||||
return {
|
return {
|
||||||
relations: {
|
relations: {
|
||||||
[path]: {
|
[path]: {
|
||||||
type: 'descendant',
|
type: 'descendant',
|
||||||
linked(target) {
|
linked(target) {
|
||||||
onEffect && onEffect.call(this, target);
|
onEffect && onEffect.call(this, target);
|
||||||
},
|
|
||||||
linkChanged(target) {
|
|
||||||
onEffect && onEffect.call(this, target);
|
|
||||||
},
|
|
||||||
unlinked(target) {
|
|
||||||
onEffect && onEffect.call(this, target);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mixin: Behavior({
|
linkChanged(target) {
|
||||||
created() {
|
onEffect && onEffect.call(this, target);
|
||||||
Object.defineProperty(this, 'children', {
|
},
|
||||||
get: () => this.getRelationNodes(path) || [],
|
unlinked(target) {
|
||||||
});
|
onEffect && onEffect.call(this, target);
|
||||||
},
|
},
|
||||||
}),
|
},
|
||||||
};
|
},
|
||||||
|
mixin: Behavior({
|
||||||
|
created() {
|
||||||
|
Object.defineProperty(this, 'children', {
|
||||||
|
get: () => this.getRelationNodes(path) || [],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
2
dist/common/style/clearfix.wxss
vendored
2
dist/common/style/clearfix.wxss
vendored
@ -1 +1 @@
|
|||||||
.van-clearfix:after{clear:both;content:"";display:table}
|
.van-clearfix:after{display:table;clear:both;content:""}
|
2
dist/common/style/ellipsis.wxss
vendored
2
dist/common/style/ellipsis.wxss
vendored
@ -1 +1 @@
|
|||||||
.van-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.van-multi-ellipsis--l3{-webkit-line-clamp:3}
|
.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}
|
2
dist/common/style/hairline.wxss
vendored
2
dist/common/style/hairline.wxss
vendored
@ -1 +1 @@
|
|||||||
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{border:0 solid #ebedf0;bottom:-50%;box-sizing:border-box;content:" ";left:-50%;pointer-events:none;position:absolute;right:-50%;top:-50%;transform:scale(.5);transform-origin:center}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
|
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
|
0
dist/common/style/theme.wxss
vendored
Normal file
0
dist/common/style/theme.wxss
vendored
Normal file
41
dist/common/utils.d.ts
vendored
41
dist/common/utils.d.ts
vendored
@ -1,21 +1,30 @@
|
|||||||
/// <reference types="node" />
|
|
||||||
/// <reference types="miniprogram-api-typings" />
|
/// <reference types="miniprogram-api-typings" />
|
||||||
/// <reference types="miniprogram-api-typings" />
|
|
||||||
/// <reference types="miniprogram-api-typings" />
|
|
||||||
/// <reference types="miniprogram-api-typings" />
|
|
||||||
export { isDef } from './validator';
|
|
||||||
export { getSystemInfoSync } from './version';
|
|
||||||
export declare function range(num: number, min: number, max: number): number;
|
export declare function range(num: number, min: number, max: number): number;
|
||||||
export declare function nextTick(cb: (...args: any[]) => void): void;
|
export declare function nextTick(cb: (...args: any[]) => void): void;
|
||||||
|
export declare function getSystemInfoSync(): WechatMiniprogram.SystemInfo;
|
||||||
export declare function addUnit(value?: string | number): string | undefined;
|
export declare function addUnit(value?: string | number): string | undefined;
|
||||||
export declare function requestAnimationFrame(cb: () => void): NodeJS.Timeout;
|
export declare function requestAnimationFrame(
|
||||||
|
cb: () => void
|
||||||
|
): number | WechatMiniprogram.NodesRef;
|
||||||
export declare function pickExclude(obj: unknown, keys: string[]): {};
|
export declare function pickExclude(obj: unknown, keys: string[]): {};
|
||||||
export declare function getRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
|
export declare function getRect(
|
||||||
export declare function getAllRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult[]>;
|
context: WechatMiniprogram.Component.TrivialInstance,
|
||||||
export declare function groupSetData(context: WechatMiniprogram.Component.TrivialInstance, cb: () => void): void;
|
selector: string
|
||||||
export declare function toPromise(promiseLike: Promise<unknown> | unknown): Promise<unknown>;
|
): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
|
||||||
export declare function addNumber(num1: any, num2: any): number;
|
export declare function getAllRect(
|
||||||
export declare const clamp: (num: any, min: any, max: any) => number;
|
context: WechatMiniprogram.Component.TrivialInstance,
|
||||||
export declare function getCurrentPage<T>(): T & WechatMiniprogram.OptionalInterface<WechatMiniprogram.Page.ILifetime> & WechatMiniprogram.Page.InstanceProperties & WechatMiniprogram.Page.InstanceMethods<WechatMiniprogram.IAnyObject> & WechatMiniprogram.Page.Data<WechatMiniprogram.IAnyObject> & WechatMiniprogram.IAnyObject;
|
selector: string
|
||||||
export declare const isPC: boolean;
|
): Promise<WechatMiniprogram.BoundingClientRectCallbackResult[]>;
|
||||||
export declare const isWxWork: boolean;
|
export declare function groupSetData(
|
||||||
|
context: WechatMiniprogram.Component.TrivialInstance,
|
||||||
|
cb: () => void
|
||||||
|
): void;
|
||||||
|
export declare function toPromise(
|
||||||
|
promiseLike: Promise<unknown> | unknown
|
||||||
|
): Promise<unknown>;
|
||||||
|
export declare function getCurrentPage<T>(): T &
|
||||||
|
WechatMiniprogram.OptionalInterface<WechatMiniprogram.Page.ILifetime> &
|
||||||
|
WechatMiniprogram.Page.InstanceProperties &
|
||||||
|
WechatMiniprogram.Page.InstanceMethods<WechatMiniprogram.IAnyObject> &
|
||||||
|
WechatMiniprogram.Page.Data<WechatMiniprogram.IAnyObject> &
|
||||||
|
WechatMiniprogram.IAnyObject;
|
||||||
|
127
dist/common/utils.js
vendored
127
dist/common/utils.js
vendored
@ -1,86 +1,89 @@
|
|||||||
import { isDef, isNumber, isPlainObject, isPromise } from './validator';
|
import { isDef, isNumber, isPlainObject, isPromise } from './validator';
|
||||||
import { canIUseGroupSetData, canIUseNextTick, getSystemInfoSync, } from './version';
|
import { canIUseGroupSetData, canIUseNextTick } from './version';
|
||||||
export { isDef } from './validator';
|
|
||||||
export { getSystemInfoSync } from './version';
|
|
||||||
export function range(num, min, max) {
|
export function range(num, min, max) {
|
||||||
return Math.min(Math.max(num, min), max);
|
return Math.min(Math.max(num, min), max);
|
||||||
}
|
}
|
||||||
export function nextTick(cb) {
|
export function nextTick(cb) {
|
||||||
if (canIUseNextTick()) {
|
if (canIUseNextTick()) {
|
||||||
wx.nextTick(cb);
|
wx.nextTick(cb);
|
||||||
}
|
} else {
|
||||||
else {
|
setTimeout(() => {
|
||||||
setTimeout(() => {
|
cb();
|
||||||
cb();
|
}, 1000 / 30);
|
||||||
}, 1000 / 30);
|
}
|
||||||
}
|
}
|
||||||
|
let systemInfo;
|
||||||
|
export function getSystemInfoSync() {
|
||||||
|
if (systemInfo == null) {
|
||||||
|
systemInfo = wx.getSystemInfoSync();
|
||||||
|
}
|
||||||
|
return systemInfo;
|
||||||
}
|
}
|
||||||
export function addUnit(value) {
|
export function addUnit(value) {
|
||||||
if (!isDef(value)) {
|
if (!isDef(value)) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
value = String(value);
|
value = String(value);
|
||||||
return isNumber(value) ? `${value}px` : value;
|
return isNumber(value) ? `${value}px` : value;
|
||||||
}
|
}
|
||||||
export function requestAnimationFrame(cb) {
|
export function requestAnimationFrame(cb) {
|
||||||
|
const systemInfo = getSystemInfoSync();
|
||||||
|
if (systemInfo.platform === 'devtools') {
|
||||||
return setTimeout(() => {
|
return setTimeout(() => {
|
||||||
cb();
|
cb();
|
||||||
}, 1000 / 30);
|
}, 1000 / 30);
|
||||||
|
}
|
||||||
|
return wx
|
||||||
|
.createSelectorQuery()
|
||||||
|
.selectViewport()
|
||||||
|
.boundingClientRect()
|
||||||
|
.exec(() => {
|
||||||
|
cb();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
export function pickExclude(obj, keys) {
|
export function pickExclude(obj, keys) {
|
||||||
if (!isPlainObject(obj)) {
|
if (!isPlainObject(obj)) {
|
||||||
return {};
|
return {};
|
||||||
|
}
|
||||||
|
return Object.keys(obj).reduce((prev, key) => {
|
||||||
|
if (!keys.includes(key)) {
|
||||||
|
prev[key] = obj[key];
|
||||||
}
|
}
|
||||||
return Object.keys(obj).reduce((prev, key) => {
|
return prev;
|
||||||
if (!keys.includes(key)) {
|
}, {});
|
||||||
prev[key] = obj[key];
|
|
||||||
}
|
|
||||||
return prev;
|
|
||||||
}, {});
|
|
||||||
}
|
}
|
||||||
export function getRect(context, selector) {
|
export function getRect(context, selector) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
wx.createSelectorQuery()
|
wx.createSelectorQuery()
|
||||||
.in(context)
|
.in(context)
|
||||||
.select(selector)
|
.select(selector)
|
||||||
.boundingClientRect()
|
.boundingClientRect()
|
||||||
.exec((rect = []) => resolve(rect[0]));
|
.exec((rect = []) => resolve(rect[0]));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
export function getAllRect(context, selector) {
|
export function getAllRect(context, selector) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
wx.createSelectorQuery()
|
wx.createSelectorQuery()
|
||||||
.in(context)
|
.in(context)
|
||||||
.selectAll(selector)
|
.selectAll(selector)
|
||||||
.boundingClientRect()
|
.boundingClientRect()
|
||||||
.exec((rect = []) => resolve(rect[0]));
|
.exec((rect = []) => resolve(rect[0]));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
export function groupSetData(context, cb) {
|
export function groupSetData(context, cb) {
|
||||||
if (canIUseGroupSetData()) {
|
if (canIUseGroupSetData()) {
|
||||||
context.groupSetData(cb);
|
context.groupSetData(cb);
|
||||||
}
|
} else {
|
||||||
else {
|
cb();
|
||||||
cb();
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
export function toPromise(promiseLike) {
|
export function toPromise(promiseLike) {
|
||||||
if (isPromise(promiseLike)) {
|
if (isPromise(promiseLike)) {
|
||||||
return promiseLike;
|
return promiseLike;
|
||||||
}
|
}
|
||||||
return Promise.resolve(promiseLike);
|
return Promise.resolve(promiseLike);
|
||||||
}
|
}
|
||||||
// 浮点数精度处理
|
|
||||||
export function addNumber(num1, num2) {
|
|
||||||
const cardinal = Math.pow(10, 10);
|
|
||||||
return Math.round((num1 + num2) * cardinal) / cardinal;
|
|
||||||
}
|
|
||||||
// 限制value在[min, max]之间
|
|
||||||
export const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
|
|
||||||
export function getCurrentPage() {
|
export function getCurrentPage() {
|
||||||
const pages = getCurrentPages();
|
const pages = getCurrentPages();
|
||||||
return pages[pages.length - 1];
|
return pages[pages.length - 1];
|
||||||
}
|
}
|
||||||
export const isPC = ['mac', 'windows'].includes(getSystemInfoSync().platform);
|
|
||||||
// 是否企业微信
|
|
||||||
export const isWxWork = getSystemInfoSync().environment === 'wxwork';
|
|
||||||
|
4
dist/common/validator.d.ts
vendored
4
dist/common/validator.d.ts
vendored
@ -1,5 +1,7 @@
|
|||||||
export declare function isFunction(val: unknown): val is Function;
|
export declare function isFunction(val: unknown): val is Function;
|
||||||
export declare function isPlainObject(val: unknown): val is Record<string, unknown>;
|
export declare function isPlainObject(
|
||||||
|
val: unknown
|
||||||
|
): val is Record<string, unknown>;
|
||||||
export declare function isPromise<T = unknown>(val: unknown): val is Promise<T>;
|
export declare function isPromise<T = unknown>(val: unknown): val is Promise<T>;
|
||||||
export declare function isDef(value: unknown): boolean;
|
export declare function isDef(value: unknown): boolean;
|
||||||
export declare function isObj(x: unknown): x is Record<string, unknown>;
|
export declare function isObj(x: unknown): x is Record<string, unknown>;
|
||||||
|
20
dist/common/validator.js
vendored
20
dist/common/validator.js
vendored
@ -1,31 +1,31 @@
|
|||||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||||
export function isFunction(val) {
|
export function isFunction(val) {
|
||||||
return typeof val === 'function';
|
return typeof val === 'function';
|
||||||
}
|
}
|
||||||
export function isPlainObject(val) {
|
export function isPlainObject(val) {
|
||||||
return val !== null && typeof val === 'object' && !Array.isArray(val);
|
return val !== null && typeof val === 'object' && !Array.isArray(val);
|
||||||
}
|
}
|
||||||
export function isPromise(val) {
|
export function isPromise(val) {
|
||||||
return isPlainObject(val) && isFunction(val.then) && isFunction(val.catch);
|
return isPlainObject(val) && isFunction(val.then) && isFunction(val.catch);
|
||||||
}
|
}
|
||||||
export function isDef(value) {
|
export function isDef(value) {
|
||||||
return value !== undefined && value !== null;
|
return value !== undefined && value !== null;
|
||||||
}
|
}
|
||||||
export function isObj(x) {
|
export function isObj(x) {
|
||||||
const type = typeof x;
|
const type = typeof x;
|
||||||
return x !== null && (type === 'object' || type === 'function');
|
return x !== null && (type === 'object' || type === 'function');
|
||||||
}
|
}
|
||||||
export function isNumber(value) {
|
export function isNumber(value) {
|
||||||
return /^\d+(\.\d+)?$/.test(value);
|
return /^\d+(\.\d+)?$/.test(value);
|
||||||
}
|
}
|
||||||
export function isBoolean(value) {
|
export function isBoolean(value) {
|
||||||
return typeof value === 'boolean';
|
return typeof value === 'boolean';
|
||||||
}
|
}
|
||||||
const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
|
const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
|
||||||
const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv)/i;
|
const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv)/i;
|
||||||
export function isImageUrl(url) {
|
export function isImageUrl(url) {
|
||||||
return IMAGE_REGEXP.test(url);
|
return IMAGE_REGEXP.test(url);
|
||||||
}
|
}
|
||||||
export function isVideoUrl(url) {
|
export function isVideoUrl(url) {
|
||||||
return VIDEO_REGEXP.test(url);
|
return VIDEO_REGEXP.test(url);
|
||||||
}
|
}
|
||||||
|
8
dist/common/version.d.ts
vendored
8
dist/common/version.d.ts
vendored
@ -1,10 +1,3 @@
|
|||||||
/// <reference types="miniprogram-api-typings" />
|
|
||||||
interface WxWorkSystemInfo extends WechatMiniprogram.SystemInfo {
|
|
||||||
environment?: 'wxwork';
|
|
||||||
}
|
|
||||||
interface SystemInfo extends WxWorkSystemInfo, WechatMiniprogram.SystemInfo {
|
|
||||||
}
|
|
||||||
export declare function getSystemInfoSync(): SystemInfo;
|
|
||||||
export declare function canIUseModel(): boolean;
|
export declare function canIUseModel(): boolean;
|
||||||
export declare function canIUseFormFieldButton(): boolean;
|
export declare function canIUseFormFieldButton(): boolean;
|
||||||
export declare function canIUseAnimate(): boolean;
|
export declare function canIUseAnimate(): boolean;
|
||||||
@ -12,4 +5,3 @@ export declare function canIUseGroupSetData(): boolean;
|
|||||||
export declare function canIUseNextTick(): boolean;
|
export declare function canIUseNextTick(): boolean;
|
||||||
export declare function canIUseCanvas2d(): boolean;
|
export declare function canIUseCanvas2d(): boolean;
|
||||||
export declare function canIUseGetUserProfile(): boolean;
|
export declare function canIUseGetUserProfile(): boolean;
|
||||||
export {};
|
|
||||||
|
67
dist/common/version.js
vendored
67
dist/common/version.js
vendored
@ -1,59 +1,48 @@
|
|||||||
let systemInfo;
|
import { getSystemInfoSync } from './utils';
|
||||||
export function getSystemInfoSync() {
|
|
||||||
if (systemInfo == null) {
|
|
||||||
systemInfo = wx.getSystemInfoSync();
|
|
||||||
}
|
|
||||||
return systemInfo;
|
|
||||||
}
|
|
||||||
function compareVersion(v1, v2) {
|
function compareVersion(v1, v2) {
|
||||||
v1 = v1.split('.');
|
v1 = v1.split('.');
|
||||||
v2 = v2.split('.');
|
v2 = v2.split('.');
|
||||||
const len = Math.max(v1.length, v2.length);
|
const len = Math.max(v1.length, v2.length);
|
||||||
while (v1.length < len) {
|
while (v1.length < len) {
|
||||||
v1.push('0');
|
v1.push('0');
|
||||||
|
}
|
||||||
|
while (v2.length < len) {
|
||||||
|
v2.push('0');
|
||||||
|
}
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
const num1 = parseInt(v1[i], 10);
|
||||||
|
const num2 = parseInt(v2[i], 10);
|
||||||
|
if (num1 > num2) {
|
||||||
|
return 1;
|
||||||
}
|
}
|
||||||
while (v2.length < len) {
|
if (num1 < num2) {
|
||||||
v2.push('0');
|
return -1;
|
||||||
}
|
}
|
||||||
for (let i = 0; i < len; i++) {
|
}
|
||||||
const num1 = parseInt(v1[i], 10);
|
return 0;
|
||||||
const num2 = parseInt(v2[i], 10);
|
|
||||||
if (num1 > num2) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
if (num1 < num2) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
}
|
}
|
||||||
function gte(version) {
|
function gte(version) {
|
||||||
const system = getSystemInfoSync();
|
const system = getSystemInfoSync();
|
||||||
return compareVersion(system.SDKVersion, version) >= 0;
|
return compareVersion(system.SDKVersion, version) >= 0;
|
||||||
}
|
}
|
||||||
export function canIUseModel() {
|
export function canIUseModel() {
|
||||||
return gte('2.9.3');
|
return gte('2.9.3');
|
||||||
}
|
}
|
||||||
export function canIUseFormFieldButton() {
|
export function canIUseFormFieldButton() {
|
||||||
return gte('2.10.3');
|
return gte('2.10.3');
|
||||||
}
|
}
|
||||||
export function canIUseAnimate() {
|
export function canIUseAnimate() {
|
||||||
return gte('2.9.0');
|
return gte('2.9.0');
|
||||||
}
|
}
|
||||||
export function canIUseGroupSetData() {
|
export function canIUseGroupSetData() {
|
||||||
return gte('2.4.0');
|
return gte('2.4.0');
|
||||||
}
|
}
|
||||||
export function canIUseNextTick() {
|
export function canIUseNextTick() {
|
||||||
try {
|
return wx.canIUse('nextTick');
|
||||||
return wx.canIUse('nextTick');
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
return gte('2.7.1');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
export function canIUseCanvas2d() {
|
export function canIUseCanvas2d() {
|
||||||
return gte('2.9.0');
|
return gte('2.9.0');
|
||||||
}
|
}
|
||||||
export function canIUseGetUserProfile() {
|
export function canIUseGetUserProfile() {
|
||||||
return !!wx.getUserProfile;
|
return !!wx.getUserProfile;
|
||||||
}
|
}
|
||||||
|
10
dist/config-provider/index.js
vendored
10
dist/config-provider/index.js
vendored
@ -1,9 +1,9 @@
|
|||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
props: {
|
props: {
|
||||||
themeVars: {
|
themeVars: {
|
||||||
type: Object,
|
type: Object,
|
||||||
value: {},
|
value: {},
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
179
dist/count-down/index.js
vendored
179
dist/count-down/index.js
vendored
@ -1,100 +1,99 @@
|
|||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
import { isSameSecond, parseFormat, parseTimeData } from './utils';
|
import { isSameSecond, parseFormat, parseTimeData } from './utils';
|
||||||
function simpleTick(fn) {
|
function simpleTick(fn) {
|
||||||
return setTimeout(fn, 30);
|
return setTimeout(fn, 30);
|
||||||
}
|
}
|
||||||
VantComponent({
|
VantComponent({
|
||||||
props: {
|
props: {
|
||||||
useSlot: Boolean,
|
useSlot: Boolean,
|
||||||
millisecond: Boolean,
|
millisecond: Boolean,
|
||||||
time: {
|
time: {
|
||||||
type: Number,
|
type: Number,
|
||||||
observer: 'reset',
|
observer: 'reset',
|
||||||
},
|
|
||||||
format: {
|
|
||||||
type: String,
|
|
||||||
value: 'HH:mm:ss',
|
|
||||||
},
|
|
||||||
autoStart: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: {
|
format: {
|
||||||
timeData: parseTimeData(0),
|
type: String,
|
||||||
formattedTime: '0',
|
value: 'HH:mm:ss',
|
||||||
},
|
},
|
||||||
destroyed() {
|
autoStart: {
|
||||||
clearTimeout(this.tid);
|
type: Boolean,
|
||||||
this.tid = null;
|
value: true,
|
||||||
},
|
},
|
||||||
methods: {
|
},
|
||||||
// 开始
|
data: {
|
||||||
start() {
|
timeData: parseTimeData(0),
|
||||||
if (this.counting) {
|
formattedTime: '0',
|
||||||
return;
|
},
|
||||||
}
|
destroyed() {
|
||||||
this.counting = true;
|
clearTimeout(this.tid);
|
||||||
this.endTime = Date.now() + this.remain;
|
this.tid = null;
|
||||||
this.tick();
|
},
|
||||||
},
|
methods: {
|
||||||
// 暂停
|
// 开始
|
||||||
pause() {
|
start() {
|
||||||
this.counting = false;
|
if (this.counting) {
|
||||||
clearTimeout(this.tid);
|
return;
|
||||||
},
|
}
|
||||||
// 重置
|
this.counting = true;
|
||||||
reset() {
|
this.endTime = Date.now() + this.remain;
|
||||||
this.pause();
|
this.tick();
|
||||||
this.remain = this.data.time;
|
|
||||||
this.setRemain(this.remain);
|
|
||||||
if (this.data.autoStart) {
|
|
||||||
this.start();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tick() {
|
|
||||||
if (this.data.millisecond) {
|
|
||||||
this.microTick();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.macroTick();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
microTick() {
|
|
||||||
this.tid = simpleTick(() => {
|
|
||||||
this.setRemain(this.getRemain());
|
|
||||||
if (this.remain !== 0) {
|
|
||||||
this.microTick();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
macroTick() {
|
|
||||||
this.tid = simpleTick(() => {
|
|
||||||
const remain = this.getRemain();
|
|
||||||
if (!isSameSecond(remain, this.remain) || remain === 0) {
|
|
||||||
this.setRemain(remain);
|
|
||||||
}
|
|
||||||
if (this.remain !== 0) {
|
|
||||||
this.macroTick();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getRemain() {
|
|
||||||
return Math.max(this.endTime - Date.now(), 0);
|
|
||||||
},
|
|
||||||
setRemain(remain) {
|
|
||||||
this.remain = remain;
|
|
||||||
const timeData = parseTimeData(remain);
|
|
||||||
if (this.data.useSlot) {
|
|
||||||
this.$emit('change', timeData);
|
|
||||||
}
|
|
||||||
this.setData({
|
|
||||||
formattedTime: parseFormat(this.data.format, timeData),
|
|
||||||
});
|
|
||||||
if (remain === 0) {
|
|
||||||
this.pause();
|
|
||||||
this.$emit('finish');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
// 暂停
|
||||||
|
pause() {
|
||||||
|
this.counting = false;
|
||||||
|
clearTimeout(this.tid);
|
||||||
|
},
|
||||||
|
// 重置
|
||||||
|
reset() {
|
||||||
|
this.pause();
|
||||||
|
this.remain = this.data.time;
|
||||||
|
this.setRemain(this.remain);
|
||||||
|
if (this.data.autoStart) {
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tick() {
|
||||||
|
if (this.data.millisecond) {
|
||||||
|
this.microTick();
|
||||||
|
} else {
|
||||||
|
this.macroTick();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
microTick() {
|
||||||
|
this.tid = simpleTick(() => {
|
||||||
|
this.setRemain(this.getRemain());
|
||||||
|
if (this.remain !== 0) {
|
||||||
|
this.microTick();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
macroTick() {
|
||||||
|
this.tid = simpleTick(() => {
|
||||||
|
const remain = this.getRemain();
|
||||||
|
if (!isSameSecond(remain, this.remain) || remain === 0) {
|
||||||
|
this.setRemain(remain);
|
||||||
|
}
|
||||||
|
if (this.remain !== 0) {
|
||||||
|
this.macroTick();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getRemain() {
|
||||||
|
return Math.max(this.endTime - Date.now(), 0);
|
||||||
|
},
|
||||||
|
setRemain(remain) {
|
||||||
|
this.remain = remain;
|
||||||
|
const timeData = parseTimeData(remain);
|
||||||
|
if (this.data.useSlot) {
|
||||||
|
this.$emit('change', timeData);
|
||||||
|
}
|
||||||
|
this.setData({
|
||||||
|
formattedTime: parseFormat(this.data.format, timeData),
|
||||||
|
});
|
||||||
|
if (remain === 0) {
|
||||||
|
this.pause();
|
||||||
|
this.$emit('finish');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
2
dist/count-down/index.wxss
vendored
2
dist/count-down/index.wxss
vendored
@ -1 +1 @@
|
|||||||
@import '../common/index.wxss';.van-count-down{color:var(--count-down-text-color,#323233);font-size:var(--count-down-font-size,14px);line-height:var(--count-down-line-height,20px)}
|
@import '../common/index.wxss';.van-count-down{color:#323233;color:var(--count-down-text-color,#323233);font-size:14px;font-size:var(--count-down-font-size,14px);line-height:20px;line-height:var(--count-down-line-height,20px)}
|
2
dist/count-down/utils.d.ts
vendored
2
dist/count-down/utils.d.ts
vendored
@ -1,4 +1,4 @@
|
|||||||
export type TimeData = {
|
export declare type TimeData = {
|
||||||
days: number;
|
days: number;
|
||||||
hours: number;
|
hours: number;
|
||||||
minutes: number;
|
minutes: number;
|
||||||
|
86
dist/count-down/utils.js
vendored
86
dist/count-down/utils.js
vendored
@ -1,57 +1,53 @@
|
|||||||
function padZero(num, targetLength = 2) {
|
function padZero(num, targetLength = 2) {
|
||||||
let str = num + '';
|
let str = num + '';
|
||||||
while (str.length < targetLength) {
|
while (str.length < targetLength) {
|
||||||
str = '0' + str;
|
str = '0' + str;
|
||||||
}
|
}
|
||||||
return str;
|
return str;
|
||||||
}
|
}
|
||||||
const SECOND = 1000;
|
const SECOND = 1000;
|
||||||
const MINUTE = 60 * SECOND;
|
const MINUTE = 60 * SECOND;
|
||||||
const HOUR = 60 * MINUTE;
|
const HOUR = 60 * MINUTE;
|
||||||
const DAY = 24 * HOUR;
|
const DAY = 24 * HOUR;
|
||||||
export function parseTimeData(time) {
|
export function parseTimeData(time) {
|
||||||
const days = Math.floor(time / DAY);
|
const days = Math.floor(time / DAY);
|
||||||
const hours = Math.floor((time % DAY) / HOUR);
|
const hours = Math.floor((time % DAY) / HOUR);
|
||||||
const minutes = Math.floor((time % HOUR) / MINUTE);
|
const minutes = Math.floor((time % HOUR) / MINUTE);
|
||||||
const seconds = Math.floor((time % MINUTE) / SECOND);
|
const seconds = Math.floor((time % MINUTE) / SECOND);
|
||||||
const milliseconds = Math.floor(time % SECOND);
|
const milliseconds = Math.floor(time % SECOND);
|
||||||
return {
|
return {
|
||||||
days,
|
days,
|
||||||
hours,
|
hours,
|
||||||
minutes,
|
minutes,
|
||||||
seconds,
|
seconds,
|
||||||
milliseconds,
|
milliseconds,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
export function parseFormat(format, timeData) {
|
export function parseFormat(format, timeData) {
|
||||||
const { days } = timeData;
|
const { days } = timeData;
|
||||||
let { hours, minutes, seconds, milliseconds } = timeData;
|
let { hours, minutes, seconds, milliseconds } = timeData;
|
||||||
if (format.indexOf('DD') === -1) {
|
if (format.indexOf('DD') === -1) {
|
||||||
hours += days * 24;
|
hours += days * 24;
|
||||||
}
|
} else {
|
||||||
else {
|
format = format.replace('DD', padZero(days));
|
||||||
format = format.replace('DD', padZero(days));
|
}
|
||||||
}
|
if (format.indexOf('HH') === -1) {
|
||||||
if (format.indexOf('HH') === -1) {
|
minutes += hours * 60;
|
||||||
minutes += hours * 60;
|
} else {
|
||||||
}
|
format = format.replace('HH', padZero(hours));
|
||||||
else {
|
}
|
||||||
format = format.replace('HH', padZero(hours));
|
if (format.indexOf('mm') === -1) {
|
||||||
}
|
seconds += minutes * 60;
|
||||||
if (format.indexOf('mm') === -1) {
|
} else {
|
||||||
seconds += minutes * 60;
|
format = format.replace('mm', padZero(minutes));
|
||||||
}
|
}
|
||||||
else {
|
if (format.indexOf('ss') === -1) {
|
||||||
format = format.replace('mm', padZero(minutes));
|
milliseconds += seconds * 1000;
|
||||||
}
|
} else {
|
||||||
if (format.indexOf('ss') === -1) {
|
format = format.replace('ss', padZero(seconds));
|
||||||
milliseconds += seconds * 1000;
|
}
|
||||||
}
|
return format.replace('SSS', padZero(milliseconds, 3));
|
||||||
else {
|
|
||||||
format = format.replace('ss', padZero(seconds));
|
|
||||||
}
|
|
||||||
return format.replace('SSS', padZero(milliseconds, 3));
|
|
||||||
}
|
}
|
||||||
export function isSameSecond(time1, time2) {
|
export function isSameSecond(time1, time2) {
|
||||||
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
|
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
|
||||||
}
|
}
|
||||||
|
570
dist/datetime-picker/index.js
vendored
570
dist/datetime-picker/index.js
vendored
@ -3,293 +3,319 @@ import { isDef } from '../common/validator';
|
|||||||
import { pickerProps } from '../picker/shared';
|
import { pickerProps } from '../picker/shared';
|
||||||
const currentYear = new Date().getFullYear();
|
const currentYear = new Date().getFullYear();
|
||||||
function isValidDate(date) {
|
function isValidDate(date) {
|
||||||
return isDef(date) && !isNaN(new Date(date).getTime());
|
return isDef(date) && !isNaN(new Date(date).getTime());
|
||||||
}
|
}
|
||||||
function range(num, min, max) {
|
function range(num, min, max) {
|
||||||
return Math.min(Math.max(num, min), max);
|
return Math.min(Math.max(num, min), max);
|
||||||
}
|
}
|
||||||
function padZero(val) {
|
function padZero(val) {
|
||||||
return `00${val}`.slice(-2);
|
return `00${val}`.slice(-2);
|
||||||
}
|
}
|
||||||
function times(n, iteratee) {
|
function times(n, iteratee) {
|
||||||
let index = -1;
|
let index = -1;
|
||||||
const result = Array(n < 0 ? 0 : n);
|
const result = Array(n < 0 ? 0 : n);
|
||||||
while (++index < n) {
|
while (++index < n) {
|
||||||
result[index] = iteratee(index);
|
result[index] = iteratee(index);
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
function getTrueValue(formattedValue) {
|
function getTrueValue(formattedValue) {
|
||||||
if (formattedValue === undefined) {
|
if (formattedValue === undefined) {
|
||||||
formattedValue = '1';
|
formattedValue = '1';
|
||||||
}
|
}
|
||||||
while (isNaN(parseInt(formattedValue, 10))) {
|
while (isNaN(parseInt(formattedValue, 10))) {
|
||||||
formattedValue = formattedValue.slice(1);
|
formattedValue = formattedValue.slice(1);
|
||||||
}
|
}
|
||||||
return parseInt(formattedValue, 10);
|
return parseInt(formattedValue, 10);
|
||||||
}
|
}
|
||||||
function getMonthEndDay(year, month) {
|
function getMonthEndDay(year, month) {
|
||||||
return 32 - new Date(year, month - 1, 32).getDate();
|
return 32 - new Date(year, month - 1, 32).getDate();
|
||||||
}
|
}
|
||||||
const defaultFormatter = (type, value) => value;
|
const defaultFormatter = (type, value) => value;
|
||||||
VantComponent({
|
VantComponent({
|
||||||
classes: ['active-class', 'toolbar-class', 'column-class'],
|
classes: ['active-class', 'toolbar-class', 'column-class'],
|
||||||
props: Object.assign(Object.assign({}, pickerProps), { value: {
|
props: Object.assign(Object.assign({}, pickerProps), {
|
||||||
type: null,
|
value: {
|
||||||
observer: 'updateValue',
|
type: null,
|
||||||
}, filter: null, type: {
|
observer: 'updateValue',
|
||||||
type: String,
|
|
||||||
value: 'datetime',
|
|
||||||
observer: 'updateValue',
|
|
||||||
}, showToolbar: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
}, formatter: {
|
|
||||||
type: null,
|
|
||||||
value: defaultFormatter,
|
|
||||||
}, minDate: {
|
|
||||||
type: Number,
|
|
||||||
value: new Date(currentYear - 10, 0, 1).getTime(),
|
|
||||||
observer: 'updateValue',
|
|
||||||
}, maxDate: {
|
|
||||||
type: Number,
|
|
||||||
value: new Date(currentYear + 10, 11, 31).getTime(),
|
|
||||||
observer: 'updateValue',
|
|
||||||
}, minHour: {
|
|
||||||
type: Number,
|
|
||||||
value: 0,
|
|
||||||
observer: 'updateValue',
|
|
||||||
}, maxHour: {
|
|
||||||
type: Number,
|
|
||||||
value: 23,
|
|
||||||
observer: 'updateValue',
|
|
||||||
}, minMinute: {
|
|
||||||
type: Number,
|
|
||||||
value: 0,
|
|
||||||
observer: 'updateValue',
|
|
||||||
}, maxMinute: {
|
|
||||||
type: Number,
|
|
||||||
value: 59,
|
|
||||||
observer: 'updateValue',
|
|
||||||
} }),
|
|
||||||
data: {
|
|
||||||
innerValue: Date.now(),
|
|
||||||
columns: [],
|
|
||||||
},
|
},
|
||||||
methods: {
|
filter: null,
|
||||||
updateValue() {
|
type: {
|
||||||
const { data } = this;
|
type: String,
|
||||||
const val = this.correctValue(data.value);
|
value: 'datetime',
|
||||||
const isEqual = val === data.innerValue;
|
observer: 'updateValue',
|
||||||
this.updateColumnValue(val).then(() => {
|
|
||||||
if (!isEqual) {
|
|
||||||
this.$emit('input', val);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getPicker() {
|
|
||||||
if (this.picker == null) {
|
|
||||||
this.picker = this.selectComponent('.van-datetime-picker');
|
|
||||||
const { picker } = this;
|
|
||||||
const { setColumnValues } = picker;
|
|
||||||
picker.setColumnValues = (...args) => setColumnValues.apply(picker, [...args, false]);
|
|
||||||
}
|
|
||||||
return this.picker;
|
|
||||||
},
|
|
||||||
updateColumns() {
|
|
||||||
const { formatter = defaultFormatter } = this.data;
|
|
||||||
const results = this.getOriginColumns().map((column) => ({
|
|
||||||
values: column.values.map((value) => formatter(column.type, value)),
|
|
||||||
}));
|
|
||||||
return this.set({ columns: results });
|
|
||||||
},
|
|
||||||
getOriginColumns() {
|
|
||||||
const { filter } = this.data;
|
|
||||||
const results = this.getRanges().map(({ type, range }) => {
|
|
||||||
let values = times(range[1] - range[0] + 1, (index) => {
|
|
||||||
const value = range[0] + index;
|
|
||||||
return type === 'year' ? `${value}` : padZero(value);
|
|
||||||
});
|
|
||||||
if (filter) {
|
|
||||||
values = filter(type, values);
|
|
||||||
}
|
|
||||||
return { type, values };
|
|
||||||
});
|
|
||||||
return results;
|
|
||||||
},
|
|
||||||
getRanges() {
|
|
||||||
const { data } = this;
|
|
||||||
if (data.type === 'time') {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
type: 'hour',
|
|
||||||
range: [data.minHour, data.maxHour],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'minute',
|
|
||||||
range: [data.minMinute, data.maxMinute],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', data.innerValue);
|
|
||||||
const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', data.innerValue);
|
|
||||||
const result = [
|
|
||||||
{
|
|
||||||
type: 'year',
|
|
||||||
range: [minYear, maxYear],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'month',
|
|
||||||
range: [minMonth, maxMonth],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'day',
|
|
||||||
range: [minDate, maxDate],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'hour',
|
|
||||||
range: [minHour, maxHour],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'minute',
|
|
||||||
range: [minMinute, maxMinute],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
if (data.type === 'date')
|
|
||||||
result.splice(3, 2);
|
|
||||||
if (data.type === 'year-month')
|
|
||||||
result.splice(2, 3);
|
|
||||||
return result;
|
|
||||||
},
|
|
||||||
correctValue(value) {
|
|
||||||
const { data } = this;
|
|
||||||
// validate value
|
|
||||||
const isDateType = data.type !== 'time';
|
|
||||||
if (isDateType && !isValidDate(value)) {
|
|
||||||
value = data.minDate;
|
|
||||||
}
|
|
||||||
else if (!isDateType && !value) {
|
|
||||||
const { minHour } = data;
|
|
||||||
value = `${padZero(minHour)}:00`;
|
|
||||||
}
|
|
||||||
// time type
|
|
||||||
if (!isDateType) {
|
|
||||||
let [hour, minute] = value.split(':');
|
|
||||||
hour = padZero(range(hour, data.minHour, data.maxHour));
|
|
||||||
minute = padZero(range(minute, data.minMinute, data.maxMinute));
|
|
||||||
return `${hour}:${minute}`;
|
|
||||||
}
|
|
||||||
// date type
|
|
||||||
value = Math.max(value, data.minDate);
|
|
||||||
value = Math.min(value, data.maxDate);
|
|
||||||
return value;
|
|
||||||
},
|
|
||||||
getBoundary(type, innerValue) {
|
|
||||||
const value = new Date(innerValue);
|
|
||||||
const boundary = new Date(this.data[`${type}Date`]);
|
|
||||||
const year = boundary.getFullYear();
|
|
||||||
let month = 1;
|
|
||||||
let date = 1;
|
|
||||||
let hour = 0;
|
|
||||||
let minute = 0;
|
|
||||||
if (type === 'max') {
|
|
||||||
month = 12;
|
|
||||||
date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
|
|
||||||
hour = 23;
|
|
||||||
minute = 59;
|
|
||||||
}
|
|
||||||
if (value.getFullYear() === year) {
|
|
||||||
month = boundary.getMonth() + 1;
|
|
||||||
if (value.getMonth() + 1 === month) {
|
|
||||||
date = boundary.getDate();
|
|
||||||
if (value.getDate() === date) {
|
|
||||||
hour = boundary.getHours();
|
|
||||||
if (value.getHours() === hour) {
|
|
||||||
minute = boundary.getMinutes();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
[`${type}Year`]: year,
|
|
||||||
[`${type}Month`]: month,
|
|
||||||
[`${type}Date`]: date,
|
|
||||||
[`${type}Hour`]: hour,
|
|
||||||
[`${type}Minute`]: minute,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onCancel() {
|
|
||||||
this.$emit('cancel');
|
|
||||||
},
|
|
||||||
onConfirm() {
|
|
||||||
this.$emit('confirm', this.data.innerValue);
|
|
||||||
},
|
|
||||||
onChange() {
|
|
||||||
const { data } = this;
|
|
||||||
let value;
|
|
||||||
const picker = this.getPicker();
|
|
||||||
const originColumns = this.getOriginColumns();
|
|
||||||
if (data.type === 'time') {
|
|
||||||
const indexes = picker.getIndexes();
|
|
||||||
value = `${+originColumns[0].values[indexes[0]]}:${+originColumns[1]
|
|
||||||
.values[indexes[1]]}`;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const indexes = picker.getIndexes();
|
|
||||||
const values = indexes.map((value, index) => originColumns[index].values[value]);
|
|
||||||
const year = getTrueValue(values[0]);
|
|
||||||
const month = getTrueValue(values[1]);
|
|
||||||
const maxDate = getMonthEndDay(year, month);
|
|
||||||
let date = getTrueValue(values[2]);
|
|
||||||
if (data.type === 'year-month') {
|
|
||||||
date = 1;
|
|
||||||
}
|
|
||||||
date = date > maxDate ? maxDate : date;
|
|
||||||
let hour = 0;
|
|
||||||
let minute = 0;
|
|
||||||
if (data.type === 'datetime') {
|
|
||||||
hour = getTrueValue(values[3]);
|
|
||||||
minute = getTrueValue(values[4]);
|
|
||||||
}
|
|
||||||
value = new Date(year, month - 1, date, hour, minute);
|
|
||||||
}
|
|
||||||
value = this.correctValue(value);
|
|
||||||
this.updateColumnValue(value).then(() => {
|
|
||||||
this.$emit('input', value);
|
|
||||||
this.$emit('change', picker);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateColumnValue(value) {
|
|
||||||
let values = [];
|
|
||||||
const { type } = this.data;
|
|
||||||
const formatter = this.data.formatter || defaultFormatter;
|
|
||||||
const picker = this.getPicker();
|
|
||||||
if (type === 'time') {
|
|
||||||
const pair = value.split(':');
|
|
||||||
values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
const date = new Date(value);
|
|
||||||
values = [
|
|
||||||
formatter('year', `${date.getFullYear()}`),
|
|
||||||
formatter('month', padZero(date.getMonth() + 1)),
|
|
||||||
];
|
|
||||||
if (type === 'date') {
|
|
||||||
values.push(formatter('day', padZero(date.getDate())));
|
|
||||||
}
|
|
||||||
if (type === 'datetime') {
|
|
||||||
values.push(formatter('day', padZero(date.getDate())), formatter('hour', padZero(date.getHours())), formatter('minute', padZero(date.getMinutes())));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return this.set({ innerValue: value })
|
|
||||||
.then(() => this.updateColumns())
|
|
||||||
.then(() => picker.setValues(values));
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
created() {
|
showToolbar: {
|
||||||
const innerValue = this.correctValue(this.data.value);
|
type: Boolean,
|
||||||
this.updateColumnValue(innerValue).then(() => {
|
value: true,
|
||||||
this.$emit('input', innerValue);
|
},
|
||||||
|
formatter: {
|
||||||
|
type: null,
|
||||||
|
value: defaultFormatter,
|
||||||
|
},
|
||||||
|
minDate: {
|
||||||
|
type: Number,
|
||||||
|
value: new Date(currentYear - 10, 0, 1).getTime(),
|
||||||
|
observer: 'updateValue',
|
||||||
|
},
|
||||||
|
maxDate: {
|
||||||
|
type: Number,
|
||||||
|
value: new Date(currentYear + 10, 11, 31).getTime(),
|
||||||
|
observer: 'updateValue',
|
||||||
|
},
|
||||||
|
minHour: {
|
||||||
|
type: Number,
|
||||||
|
value: 0,
|
||||||
|
observer: 'updateValue',
|
||||||
|
},
|
||||||
|
maxHour: {
|
||||||
|
type: Number,
|
||||||
|
value: 23,
|
||||||
|
observer: 'updateValue',
|
||||||
|
},
|
||||||
|
minMinute: {
|
||||||
|
type: Number,
|
||||||
|
value: 0,
|
||||||
|
observer: 'updateValue',
|
||||||
|
},
|
||||||
|
maxMinute: {
|
||||||
|
type: Number,
|
||||||
|
value: 59,
|
||||||
|
observer: 'updateValue',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
data: {
|
||||||
|
innerValue: Date.now(),
|
||||||
|
columns: [],
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateValue() {
|
||||||
|
const { data } = this;
|
||||||
|
const val = this.correctValue(data.value);
|
||||||
|
const isEqual = val === data.innerValue;
|
||||||
|
this.updateColumnValue(val).then(() => {
|
||||||
|
if (!isEqual) {
|
||||||
|
this.$emit('input', val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getPicker() {
|
||||||
|
if (this.picker == null) {
|
||||||
|
this.picker = this.selectComponent('.van-datetime-picker');
|
||||||
|
const { picker } = this;
|
||||||
|
const { setColumnValues } = picker;
|
||||||
|
picker.setColumnValues = (...args) =>
|
||||||
|
setColumnValues.apply(picker, [...args, false]);
|
||||||
|
}
|
||||||
|
return this.picker;
|
||||||
|
},
|
||||||
|
updateColumns() {
|
||||||
|
const { formatter = defaultFormatter } = this.data;
|
||||||
|
const results = this.getOriginColumns().map((column) => ({
|
||||||
|
values: column.values.map((value) => formatter(column.type, value)),
|
||||||
|
}));
|
||||||
|
return this.set({ columns: results });
|
||||||
|
},
|
||||||
|
getOriginColumns() {
|
||||||
|
const { filter } = this.data;
|
||||||
|
const results = this.getRanges().map(({ type, range }) => {
|
||||||
|
let values = times(range[1] - range[0] + 1, (index) => {
|
||||||
|
const value = range[0] + index;
|
||||||
|
return type === 'year' ? `${value}` : padZero(value);
|
||||||
});
|
});
|
||||||
|
if (filter) {
|
||||||
|
values = filter(type, values);
|
||||||
|
}
|
||||||
|
return { type, values };
|
||||||
|
});
|
||||||
|
return results;
|
||||||
},
|
},
|
||||||
|
getRanges() {
|
||||||
|
const { data } = this;
|
||||||
|
if (data.type === 'time') {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: 'hour',
|
||||||
|
range: [data.minHour, data.maxHour],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'minute',
|
||||||
|
range: [data.minMinute, data.maxMinute],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
const {
|
||||||
|
maxYear,
|
||||||
|
maxDate,
|
||||||
|
maxMonth,
|
||||||
|
maxHour,
|
||||||
|
maxMinute,
|
||||||
|
} = this.getBoundary('max', data.innerValue);
|
||||||
|
const {
|
||||||
|
minYear,
|
||||||
|
minDate,
|
||||||
|
minMonth,
|
||||||
|
minHour,
|
||||||
|
minMinute,
|
||||||
|
} = this.getBoundary('min', data.innerValue);
|
||||||
|
const result = [
|
||||||
|
{
|
||||||
|
type: 'year',
|
||||||
|
range: [minYear, maxYear],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'month',
|
||||||
|
range: [minMonth, maxMonth],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'day',
|
||||||
|
range: [minDate, maxDate],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'hour',
|
||||||
|
range: [minHour, maxHour],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'minute',
|
||||||
|
range: [minMinute, maxMinute],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
if (data.type === 'date') result.splice(3, 2);
|
||||||
|
if (data.type === 'year-month') result.splice(2, 3);
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
correctValue(value) {
|
||||||
|
const { data } = this;
|
||||||
|
// validate value
|
||||||
|
const isDateType = data.type !== 'time';
|
||||||
|
if (isDateType && !isValidDate(value)) {
|
||||||
|
value = data.minDate;
|
||||||
|
} else if (!isDateType && !value) {
|
||||||
|
const { minHour } = data;
|
||||||
|
value = `${padZero(minHour)}:00`;
|
||||||
|
}
|
||||||
|
// time type
|
||||||
|
if (!isDateType) {
|
||||||
|
let [hour, minute] = value.split(':');
|
||||||
|
hour = padZero(range(hour, data.minHour, data.maxHour));
|
||||||
|
minute = padZero(range(minute, data.minMinute, data.maxMinute));
|
||||||
|
return `${hour}:${minute}`;
|
||||||
|
}
|
||||||
|
// date type
|
||||||
|
value = Math.max(value, data.minDate);
|
||||||
|
value = Math.min(value, data.maxDate);
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
getBoundary(type, innerValue) {
|
||||||
|
const value = new Date(innerValue);
|
||||||
|
const boundary = new Date(this.data[`${type}Date`]);
|
||||||
|
const year = boundary.getFullYear();
|
||||||
|
let month = 1;
|
||||||
|
let date = 1;
|
||||||
|
let hour = 0;
|
||||||
|
let minute = 0;
|
||||||
|
if (type === 'max') {
|
||||||
|
month = 12;
|
||||||
|
date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
|
||||||
|
hour = 23;
|
||||||
|
minute = 59;
|
||||||
|
}
|
||||||
|
if (value.getFullYear() === year) {
|
||||||
|
month = boundary.getMonth() + 1;
|
||||||
|
if (value.getMonth() + 1 === month) {
|
||||||
|
date = boundary.getDate();
|
||||||
|
if (value.getDate() === date) {
|
||||||
|
hour = boundary.getHours();
|
||||||
|
if (value.getHours() === hour) {
|
||||||
|
minute = boundary.getMinutes();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
[`${type}Year`]: year,
|
||||||
|
[`${type}Month`]: month,
|
||||||
|
[`${type}Date`]: date,
|
||||||
|
[`${type}Hour`]: hour,
|
||||||
|
[`${type}Minute`]: minute,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
this.$emit('cancel');
|
||||||
|
},
|
||||||
|
onConfirm() {
|
||||||
|
this.$emit('confirm', this.data.innerValue);
|
||||||
|
},
|
||||||
|
onChange() {
|
||||||
|
const { data } = this;
|
||||||
|
let value;
|
||||||
|
const picker = this.getPicker();
|
||||||
|
const originColumns = this.getOriginColumns();
|
||||||
|
if (data.type === 'time') {
|
||||||
|
const indexes = picker.getIndexes();
|
||||||
|
value = `${+originColumns[0].values[indexes[0]]}:${+originColumns[1]
|
||||||
|
.values[indexes[1]]}`;
|
||||||
|
} else {
|
||||||
|
const indexes = picker.getIndexes();
|
||||||
|
const values = indexes.map(
|
||||||
|
(value, index) => originColumns[index].values[value]
|
||||||
|
);
|
||||||
|
const year = getTrueValue(values[0]);
|
||||||
|
const month = getTrueValue(values[1]);
|
||||||
|
const maxDate = getMonthEndDay(year, month);
|
||||||
|
let date = getTrueValue(values[2]);
|
||||||
|
if (data.type === 'year-month') {
|
||||||
|
date = 1;
|
||||||
|
}
|
||||||
|
date = date > maxDate ? maxDate : date;
|
||||||
|
let hour = 0;
|
||||||
|
let minute = 0;
|
||||||
|
if (data.type === 'datetime') {
|
||||||
|
hour = getTrueValue(values[3]);
|
||||||
|
minute = getTrueValue(values[4]);
|
||||||
|
}
|
||||||
|
value = new Date(year, month - 1, date, hour, minute);
|
||||||
|
}
|
||||||
|
value = this.correctValue(value);
|
||||||
|
this.updateColumnValue(value).then(() => {
|
||||||
|
this.$emit('input', value);
|
||||||
|
this.$emit('change', picker);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updateColumnValue(value) {
|
||||||
|
let values = [];
|
||||||
|
const { type } = this.data;
|
||||||
|
const formatter = this.data.formatter || defaultFormatter;
|
||||||
|
const picker = this.getPicker();
|
||||||
|
if (type === 'time') {
|
||||||
|
const pair = value.split(':');
|
||||||
|
values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
|
||||||
|
} else {
|
||||||
|
const date = new Date(value);
|
||||||
|
values = [
|
||||||
|
formatter('year', `${date.getFullYear()}`),
|
||||||
|
formatter('month', padZero(date.getMonth() + 1)),
|
||||||
|
];
|
||||||
|
if (type === 'date') {
|
||||||
|
values.push(formatter('day', padZero(date.getDate())));
|
||||||
|
}
|
||||||
|
if (type === 'datetime') {
|
||||||
|
values.push(
|
||||||
|
formatter('day', padZero(date.getDate())),
|
||||||
|
formatter('hour', padZero(date.getHours())),
|
||||||
|
formatter('minute', padZero(date.getMinutes()))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.set({ innerValue: value })
|
||||||
|
.then(() => this.updateColumns())
|
||||||
|
.then(() => picker.setValues(values));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const innerValue = this.correctValue(this.data.value);
|
||||||
|
this.updateColumnValue(innerValue).then(() => {
|
||||||
|
this.$emit('input', innerValue);
|
||||||
|
});
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
64
dist/definitions/index.d.ts
vendored
64
dist/definitions/index.d.ts
vendored
@ -1,29 +1,43 @@
|
|||||||
/// <reference types="miniprogram-api-typings" />
|
/// <reference types="miniprogram-api-typings" />
|
||||||
interface VantComponentInstance {
|
interface VantComponentInstance {
|
||||||
parent: WechatMiniprogram.Component.TrivialInstance;
|
parent: WechatMiniprogram.Component.TrivialInstance;
|
||||||
children: WechatMiniprogram.Component.TrivialInstance[];
|
children: WechatMiniprogram.Component.TrivialInstance[];
|
||||||
index: number;
|
index: number;
|
||||||
$emit: (name: string, detail?: unknown, options?: WechatMiniprogram.Component.TriggerEventOption) => void;
|
$emit: (
|
||||||
setView: (value: Record<string, any>, callback?: () => void) => void;
|
name: string,
|
||||||
|
detail?: unknown,
|
||||||
|
options?: WechatMiniprogram.Component.TriggerEventOption
|
||||||
|
) => void;
|
||||||
}
|
}
|
||||||
export type VantComponentOptions<Data extends WechatMiniprogram.Component.DataOption, Props extends WechatMiniprogram.Component.PropertyOption, Methods extends WechatMiniprogram.Component.MethodOption> = {
|
export declare type VantComponentOptions<
|
||||||
data?: Data;
|
Data extends WechatMiniprogram.Component.DataOption,
|
||||||
field?: boolean;
|
Props extends WechatMiniprogram.Component.PropertyOption,
|
||||||
classes?: string[];
|
Methods extends WechatMiniprogram.Component.MethodOption
|
||||||
mixins?: string[];
|
> = {
|
||||||
props?: Props;
|
data?: Data;
|
||||||
relation?: {
|
field?: boolean;
|
||||||
relations: Record<string, WechatMiniprogram.Component.RelationOption>;
|
classes?: string[];
|
||||||
mixin: string;
|
mixins?: string[];
|
||||||
};
|
props?: Props;
|
||||||
watch?: Record<string, (...args: any[]) => any>;
|
relation?: {
|
||||||
methods?: Methods;
|
relations: Record<string, WechatMiniprogram.Component.RelationOption>;
|
||||||
beforeCreate?: () => void;
|
mixin: string;
|
||||||
created?: () => void;
|
};
|
||||||
mounted?: () => void;
|
methods?: Methods;
|
||||||
destroyed?: () => void;
|
beforeCreate?: () => void;
|
||||||
} & ThisType<VantComponentInstance & WechatMiniprogram.Component.Instance<Data & {
|
created?: () => void;
|
||||||
name: string;
|
mounted?: () => void;
|
||||||
value: any;
|
destroyed?: () => void;
|
||||||
} & Record<string, any>, Props, Methods> & Record<string, any>>;
|
} & ThisType<
|
||||||
|
VantComponentInstance &
|
||||||
|
WechatMiniprogram.Component.Instance<
|
||||||
|
Data & {
|
||||||
|
name: string;
|
||||||
|
value: any;
|
||||||
|
} & Record<string, any>,
|
||||||
|
Props,
|
||||||
|
Methods
|
||||||
|
> &
|
||||||
|
Record<string, any>
|
||||||
|
>;
|
||||||
export {};
|
export {};
|
||||||
|
101
dist/dialog/dialog.d.ts
vendored
101
dist/dialog/dialog.d.ts
vendored
@ -1,55 +1,58 @@
|
|||||||
/// <reference types="miniprogram-api-typings" />
|
/// <reference types="miniprogram-api-typings" />
|
||||||
/// <reference types="miniprogram-api-typings" />
|
export declare type Action = 'confirm' | 'cancel' | 'overlay';
|
||||||
export type Action = 'confirm' | 'cancel' | 'overlay';
|
|
||||||
type DialogContext = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
|
|
||||||
interface DialogOptions {
|
interface DialogOptions {
|
||||||
lang?: string;
|
lang?: string;
|
||||||
show?: boolean;
|
show?: boolean;
|
||||||
title?: string;
|
title?: string;
|
||||||
width?: string | number | null;
|
width?: string | number | null;
|
||||||
zIndex?: number;
|
zIndex?: number;
|
||||||
theme?: string;
|
theme?: string;
|
||||||
context?: (() => DialogContext) | DialogContext;
|
context?:
|
||||||
message?: string;
|
| WechatMiniprogram.Page.TrivialInstance
|
||||||
overlay?: boolean;
|
| WechatMiniprogram.Component.TrivialInstance;
|
||||||
selector?: string;
|
message?: string;
|
||||||
ariaLabel?: string;
|
overlay?: boolean;
|
||||||
/**
|
selector?: string;
|
||||||
* @deprecated use custom-class instead
|
ariaLabel?: string;
|
||||||
*/
|
className?: string;
|
||||||
className?: string;
|
customStyle?: string;
|
||||||
customStyle?: string;
|
transition?: string;
|
||||||
transition?: string;
|
/**
|
||||||
/**
|
* @deprecated use beforeClose instead
|
||||||
* @deprecated use beforeClose instead
|
*/
|
||||||
*/
|
asyncClose?: boolean;
|
||||||
asyncClose?: boolean;
|
beforeClose?: null | ((action: Action) => Promise<void> | void);
|
||||||
beforeClose?: null | ((action: Action) => Promise<void | boolean> | void);
|
businessId?: number;
|
||||||
businessId?: number;
|
sessionFrom?: string;
|
||||||
sessionFrom?: string;
|
overlayStyle?: string;
|
||||||
overlayStyle?: string;
|
appParameter?: string;
|
||||||
appParameter?: string;
|
messageAlign?: string;
|
||||||
messageAlign?: string;
|
sendMessageImg?: string;
|
||||||
sendMessageImg?: string;
|
showMessageCard?: boolean;
|
||||||
showMessageCard?: boolean;
|
sendMessagePath?: string;
|
||||||
sendMessagePath?: string;
|
sendMessageTitle?: string;
|
||||||
sendMessageTitle?: string;
|
confirmButtonText?: string;
|
||||||
confirmButtonText?: string;
|
cancelButtonText?: string;
|
||||||
cancelButtonText?: string;
|
showConfirmButton?: boolean;
|
||||||
showConfirmButton?: boolean;
|
showCancelButton?: boolean;
|
||||||
showCancelButton?: boolean;
|
closeOnClickOverlay?: boolean;
|
||||||
closeOnClickOverlay?: boolean;
|
confirmButtonOpenType?: string;
|
||||||
confirmButtonOpenType?: string;
|
|
||||||
}
|
}
|
||||||
declare const Dialog: {
|
declare const Dialog: {
|
||||||
(options: DialogOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
|
(options: DialogOptions): Promise<
|
||||||
alert(options: DialogOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
|
WechatMiniprogram.Component.TrivialInstance
|
||||||
confirm(options: DialogOptions): Promise<WechatMiniprogram.Component.TrivialInstance>;
|
>;
|
||||||
close(): void;
|
alert(
|
||||||
stopLoading(): void;
|
options: DialogOptions
|
||||||
currentOptions: DialogOptions;
|
): Promise<WechatMiniprogram.Component.TrivialInstance>;
|
||||||
defaultOptions: DialogOptions;
|
confirm(
|
||||||
setDefaultOptions(options: DialogOptions): void;
|
options: DialogOptions
|
||||||
resetDefaultOptions(): void;
|
): Promise<WechatMiniprogram.Component.TrivialInstance>;
|
||||||
|
close(): void;
|
||||||
|
stopLoading(): void;
|
||||||
|
currentOptions: DialogOptions;
|
||||||
|
defaultOptions: DialogOptions;
|
||||||
|
setDefaultOptions(options: DialogOptions): void;
|
||||||
|
resetDefaultOptions(): void;
|
||||||
};
|
};
|
||||||
export default Dialog;
|
export default Dialog;
|
||||||
|
119
dist/dialog/dialog.js
vendored
119
dist/dialog/dialog.js
vendored
@ -1,77 +1,84 @@
|
|||||||
let queue = [];
|
let queue = [];
|
||||||
const defaultOptions = {
|
const defaultOptions = {
|
||||||
show: false,
|
show: false,
|
||||||
title: '',
|
title: '',
|
||||||
width: null,
|
width: null,
|
||||||
theme: 'default',
|
theme: 'default',
|
||||||
message: '',
|
message: '',
|
||||||
zIndex: 100,
|
zIndex: 100,
|
||||||
overlay: true,
|
overlay: true,
|
||||||
selector: '#van-dialog',
|
selector: '#van-dialog',
|
||||||
className: '',
|
className: '',
|
||||||
asyncClose: false,
|
asyncClose: false,
|
||||||
beforeClose: null,
|
beforeClose: null,
|
||||||
transition: 'scale',
|
transition: 'scale',
|
||||||
customStyle: '',
|
customStyle: '',
|
||||||
messageAlign: '',
|
messageAlign: '',
|
||||||
overlayStyle: '',
|
overlayStyle: '',
|
||||||
confirmButtonText: '确认',
|
confirmButtonText: '确认',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
showConfirmButton: true,
|
showConfirmButton: true,
|
||||||
showCancelButton: false,
|
showCancelButton: false,
|
||||||
closeOnClickOverlay: false,
|
closeOnClickOverlay: false,
|
||||||
confirmButtonOpenType: '',
|
confirmButtonOpenType: '',
|
||||||
};
|
};
|
||||||
let currentOptions = Object.assign({}, defaultOptions);
|
let currentOptions = Object.assign({}, defaultOptions);
|
||||||
function getContext() {
|
function getContext() {
|
||||||
const pages = getCurrentPages();
|
const pages = getCurrentPages();
|
||||||
return pages[pages.length - 1];
|
return pages[pages.length - 1];
|
||||||
}
|
}
|
||||||
const Dialog = (options) => {
|
const Dialog = (options) => {
|
||||||
options = Object.assign(Object.assign({}, currentOptions), options);
|
options = Object.assign(Object.assign({}, currentOptions), options);
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const context = (typeof options.context === 'function'
|
const context = options.context || getContext();
|
||||||
? options.context()
|
const dialog = context.selectComponent(options.selector);
|
||||||
: options.context) || getContext();
|
delete options.context;
|
||||||
const dialog = context.selectComponent(options.selector);
|
delete options.selector;
|
||||||
delete options.context;
|
if (dialog) {
|
||||||
delete options.selector;
|
dialog.setData(
|
||||||
if (dialog) {
|
Object.assign(
|
||||||
dialog.setData(Object.assign({ callback: (action, instance) => {
|
{
|
||||||
action === 'confirm' ? resolve(instance) : reject(instance);
|
callback: (action, instance) => {
|
||||||
} }, options));
|
action === 'confirm' ? resolve(instance) : reject(instance);
|
||||||
wx.nextTick(() => {
|
},
|
||||||
dialog.setData({ show: true });
|
},
|
||||||
});
|
options
|
||||||
queue.push(dialog);
|
)
|
||||||
}
|
);
|
||||||
else {
|
wx.nextTick(() => {
|
||||||
console.warn('未找到 van-dialog 节点,请确认 selector 及 context 是否正确');
|
dialog.setData({ show: true });
|
||||||
}
|
});
|
||||||
});
|
queue.push(dialog);
|
||||||
|
} else {
|
||||||
|
console.warn(
|
||||||
|
'未找到 van-dialog 节点,请确认 selector 及 context 是否正确'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
Dialog.alert = (options) => Dialog(options);
|
Dialog.alert = (options) => Dialog(options);
|
||||||
Dialog.confirm = (options) => Dialog(Object.assign({ showCancelButton: true }, options));
|
Dialog.confirm = (options) =>
|
||||||
|
Dialog(Object.assign({ showCancelButton: true }, options));
|
||||||
Dialog.close = () => {
|
Dialog.close = () => {
|
||||||
queue.forEach((dialog) => {
|
queue.forEach((dialog) => {
|
||||||
dialog.close();
|
dialog.close();
|
||||||
});
|
});
|
||||||
queue = [];
|
queue = [];
|
||||||
};
|
};
|
||||||
Dialog.stopLoading = () => {
|
Dialog.stopLoading = () => {
|
||||||
queue.forEach((dialog) => {
|
queue.forEach((dialog) => {
|
||||||
dialog.stopLoading();
|
dialog.stopLoading();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
Dialog.currentOptions = currentOptions;
|
Dialog.currentOptions = currentOptions;
|
||||||
Dialog.defaultOptions = defaultOptions;
|
Dialog.defaultOptions = defaultOptions;
|
||||||
Dialog.setDefaultOptions = (options) => {
|
Dialog.setDefaultOptions = (options) => {
|
||||||
currentOptions = Object.assign(Object.assign({}, currentOptions), options);
|
currentOptions = Object.assign(Object.assign({}, currentOptions), options);
|
||||||
Dialog.currentOptions = currentOptions;
|
Dialog.currentOptions = currentOptions;
|
||||||
};
|
};
|
||||||
Dialog.resetDefaultOptions = () => {
|
Dialog.resetDefaultOptions = () => {
|
||||||
currentOptions = Object.assign({}, defaultOptions);
|
currentOptions = Object.assign({}, defaultOptions);
|
||||||
Dialog.currentOptions = currentOptions;
|
Dialog.currentOptions = currentOptions;
|
||||||
};
|
};
|
||||||
Dialog.resetDefaultOptions();
|
Dialog.resetDefaultOptions();
|
||||||
export default Dialog;
|
export default Dialog;
|
||||||
|
229
dist/dialog/index.js
vendored
229
dist/dialog/index.js
vendored
@ -3,128 +3,119 @@ import { button } from '../mixins/button';
|
|||||||
import { GRAY, RED } from '../common/color';
|
import { GRAY, RED } from '../common/color';
|
||||||
import { toPromise } from '../common/utils';
|
import { toPromise } from '../common/utils';
|
||||||
VantComponent({
|
VantComponent({
|
||||||
mixins: [button],
|
mixins: [button],
|
||||||
classes: ['cancle-button-class', 'confirm-button-class'],
|
props: {
|
||||||
props: {
|
show: {
|
||||||
show: {
|
type: Boolean,
|
||||||
type: Boolean,
|
observer(show) {
|
||||||
observer(show) {
|
!show && this.stopLoading();
|
||||||
!show && this.stopLoading();
|
},
|
||||||
},
|
|
||||||
},
|
|
||||||
title: String,
|
|
||||||
message: String,
|
|
||||||
theme: {
|
|
||||||
type: String,
|
|
||||||
value: 'default',
|
|
||||||
},
|
|
||||||
confirmButtonId: String,
|
|
||||||
className: String,
|
|
||||||
customStyle: String,
|
|
||||||
asyncClose: Boolean,
|
|
||||||
messageAlign: String,
|
|
||||||
beforeClose: null,
|
|
||||||
overlayStyle: String,
|
|
||||||
useSlot: Boolean,
|
|
||||||
useTitleSlot: Boolean,
|
|
||||||
useConfirmButtonSlot: Boolean,
|
|
||||||
useCancelButtonSlot: Boolean,
|
|
||||||
showCancelButton: Boolean,
|
|
||||||
closeOnClickOverlay: Boolean,
|
|
||||||
confirmButtonOpenType: String,
|
|
||||||
width: null,
|
|
||||||
zIndex: {
|
|
||||||
type: Number,
|
|
||||||
value: 2000,
|
|
||||||
},
|
|
||||||
confirmButtonText: {
|
|
||||||
type: String,
|
|
||||||
value: '确认',
|
|
||||||
},
|
|
||||||
cancelButtonText: {
|
|
||||||
type: String,
|
|
||||||
value: '取消',
|
|
||||||
},
|
|
||||||
confirmButtonColor: {
|
|
||||||
type: String,
|
|
||||||
value: RED,
|
|
||||||
},
|
|
||||||
cancelButtonColor: {
|
|
||||||
type: String,
|
|
||||||
value: GRAY,
|
|
||||||
},
|
|
||||||
showConfirmButton: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
overlay: {
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
type: String,
|
|
||||||
value: 'scale',
|
|
||||||
},
|
|
||||||
rootPortal: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data: {
|
title: String,
|
||||||
|
message: String,
|
||||||
|
theme: {
|
||||||
|
type: String,
|
||||||
|
value: 'default',
|
||||||
|
},
|
||||||
|
useSlot: Boolean,
|
||||||
|
className: String,
|
||||||
|
customStyle: String,
|
||||||
|
asyncClose: Boolean,
|
||||||
|
messageAlign: String,
|
||||||
|
beforeClose: null,
|
||||||
|
overlayStyle: String,
|
||||||
|
useTitleSlot: Boolean,
|
||||||
|
showCancelButton: Boolean,
|
||||||
|
closeOnClickOverlay: Boolean,
|
||||||
|
confirmButtonOpenType: String,
|
||||||
|
width: null,
|
||||||
|
zIndex: {
|
||||||
|
type: Number,
|
||||||
|
value: 2000,
|
||||||
|
},
|
||||||
|
confirmButtonText: {
|
||||||
|
type: String,
|
||||||
|
value: '确认',
|
||||||
|
},
|
||||||
|
cancelButtonText: {
|
||||||
|
type: String,
|
||||||
|
value: '取消',
|
||||||
|
},
|
||||||
|
confirmButtonColor: {
|
||||||
|
type: String,
|
||||||
|
value: RED,
|
||||||
|
},
|
||||||
|
cancelButtonColor: {
|
||||||
|
type: String,
|
||||||
|
value: GRAY,
|
||||||
|
},
|
||||||
|
showConfirmButton: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
overlay: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
transition: {
|
||||||
|
type: String,
|
||||||
|
value: 'scale',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
loading: {
|
||||||
|
confirm: false,
|
||||||
|
cancel: false,
|
||||||
|
},
|
||||||
|
callback: () => {},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onConfirm() {
|
||||||
|
this.handleAction('confirm');
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
this.handleAction('cancel');
|
||||||
|
},
|
||||||
|
onClickOverlay() {
|
||||||
|
this.close('overlay');
|
||||||
|
},
|
||||||
|
close(action) {
|
||||||
|
this.setData({ show: false });
|
||||||
|
wx.nextTick(() => {
|
||||||
|
this.$emit('close', action);
|
||||||
|
const { callback } = this.data;
|
||||||
|
if (callback) {
|
||||||
|
callback(action, this);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
stopLoading() {
|
||||||
|
this.setData({
|
||||||
loading: {
|
loading: {
|
||||||
confirm: false,
|
confirm: false,
|
||||||
cancel: false,
|
cancel: false,
|
||||||
},
|
},
|
||||||
callback: (() => { }),
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
handleAction(action) {
|
||||||
onConfirm() {
|
this.$emit(action, { dialog: this });
|
||||||
this.handleAction('confirm');
|
const { asyncClose, beforeClose } = this.data;
|
||||||
},
|
if (!asyncClose && !beforeClose) {
|
||||||
onCancel() {
|
this.close(action);
|
||||||
this.handleAction('cancel');
|
return;
|
||||||
},
|
}
|
||||||
onClickOverlay() {
|
this.setData({
|
||||||
this.close('overlay');
|
[`loading.${action}`]: true,
|
||||||
},
|
});
|
||||||
close(action) {
|
if (beforeClose) {
|
||||||
this.setData({ show: false });
|
toPromise(beforeClose(action)).then((value) => {
|
||||||
wx.nextTick(() => {
|
if (value) {
|
||||||
this.$emit('close', action);
|
this.close(action);
|
||||||
const { callback } = this.data;
|
} else {
|
||||||
if (callback) {
|
this.stopLoading();
|
||||||
callback(action, this);
|
}
|
||||||
}
|
});
|
||||||
});
|
}
|
||||||
},
|
|
||||||
stopLoading() {
|
|
||||||
this.setData({
|
|
||||||
loading: {
|
|
||||||
confirm: false,
|
|
||||||
cancel: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleAction(action) {
|
|
||||||
this.$emit(action, { dialog: this });
|
|
||||||
const { asyncClose, beforeClose } = this.data;
|
|
||||||
if (!asyncClose && !beforeClose) {
|
|
||||||
this.close(action);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.setData({
|
|
||||||
[`loading.${action}`]: true,
|
|
||||||
});
|
|
||||||
if (beforeClose) {
|
|
||||||
toPromise(beforeClose(action)).then((value) => {
|
|
||||||
if (value) {
|
|
||||||
this.close(action);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.stopLoading();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
98
dist/dialog/index.wxml
vendored
98
dist/dialog/index.wxml
vendored
@ -5,11 +5,10 @@
|
|||||||
z-index="{{ zIndex }}"
|
z-index="{{ zIndex }}"
|
||||||
overlay="{{ overlay }}"
|
overlay="{{ overlay }}"
|
||||||
transition="{{ transition }}"
|
transition="{{ transition }}"
|
||||||
custom-class="van-dialog van-dialog--{{ theme }}{{ className }} custom-class"
|
custom-class="van-dialog van-dialog--{{ theme }} {{ className }}"
|
||||||
custom-style="width: {{ utils.addUnit(width) }};{{ customStyle }}"
|
custom-style="width: {{ utils.addUnit(width) }};{{ customStyle }}"
|
||||||
overlay-style="{{ overlayStyle }}"
|
overlay-style="{{ overlayStyle }}"
|
||||||
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
close-on-click-overlay="{{ closeOnClickOverlay }}"
|
||||||
root-portal="{{ rootPortal }}"
|
|
||||||
bind:close="onClickOverlay"
|
bind:close="onClickOverlay"
|
||||||
>
|
>
|
||||||
<view
|
<view
|
||||||
@ -34,7 +33,7 @@
|
|||||||
size="large"
|
size="large"
|
||||||
loading="{{ loading.cancel }}"
|
loading="{{ loading.cancel }}"
|
||||||
class="van-dialog__button van-hairline--right"
|
class="van-dialog__button van-hairline--right"
|
||||||
custom-class="van-dialog__cancel cancle-button-class"
|
custom-class="van-dialog__cancel"
|
||||||
custom-style="color: {{ cancelButtonColor }}"
|
custom-style="color: {{ cancelButtonColor }}"
|
||||||
bind:click="onCancel"
|
bind:click="onCancel"
|
||||||
>
|
>
|
||||||
@ -45,9 +44,9 @@
|
|||||||
size="large"
|
size="large"
|
||||||
class="van-dialog__button"
|
class="van-dialog__button"
|
||||||
loading="{{ loading.confirm }}"
|
loading="{{ loading.confirm }}"
|
||||||
custom-class="van-dialog__confirm confirm-button-class"
|
custom-class="van-dialog__confirm"
|
||||||
custom-style="color: {{ confirmButtonColor }}"
|
custom-style="color: {{ confirmButtonColor }}"
|
||||||
button-id="{{ confirmButtonId }}"
|
|
||||||
open-type="{{ confirmButtonOpenType }}"
|
open-type="{{ confirmButtonOpenType }}"
|
||||||
lang="{{ lang }}"
|
lang="{{ lang }}"
|
||||||
business-id="{{ businessId }}"
|
business-id="{{ businessId }}"
|
||||||
@ -57,8 +56,7 @@
|
|||||||
send-message-img="{{ sendMessageImg }}"
|
send-message-img="{{ sendMessageImg }}"
|
||||||
show-message-card="{{ showMessageCard }}"
|
show-message-card="{{ showMessageCard }}"
|
||||||
app-parameter="{{ appParameter }}"
|
app-parameter="{{ appParameter }}"
|
||||||
bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
|
|
||||||
bindgetRealTimePhoneNumber="onGetRealTimePhoneNumber"
|
|
||||||
bind:click="onConfirm"
|
bind:click="onConfirm"
|
||||||
bindgetuserinfo="onGetUserInfo"
|
bindgetuserinfo="onGetUserInfo"
|
||||||
bindcontact="onContact"
|
bindcontact="onContact"
|
||||||
@ -71,55 +69,45 @@
|
|||||||
</van-goods-action-button>
|
</van-goods-action-button>
|
||||||
</van-goods-action>
|
</van-goods-action>
|
||||||
|
|
||||||
<view wx:elif="{{ showCancelButton || showConfirmButton }}" class="van-hairline--top van-dialog__footer">
|
<view wx:else class="van-hairline--top van-dialog__footer">
|
||||||
<block wx:if="{{ showCancelButton }}">
|
<van-button
|
||||||
<slot wx:if="{{ useCancelButtonSlot }}" name="cancel-button" />
|
wx:if="{{ showCancelButton }}"
|
||||||
|
size="large"
|
||||||
|
loading="{{ loading.cancel }}"
|
||||||
|
class="van-dialog__button van-hairline--right"
|
||||||
|
custom-class="van-dialog__cancel"
|
||||||
|
custom-style="color: {{ cancelButtonColor }}"
|
||||||
|
bind:click="onCancel"
|
||||||
|
>
|
||||||
|
{{ cancelButtonText }}
|
||||||
|
</van-button>
|
||||||
|
<van-button
|
||||||
|
wx:if="{{ showConfirmButton }}"
|
||||||
|
size="large"
|
||||||
|
class="van-dialog__button"
|
||||||
|
loading="{{ loading.confirm }}"
|
||||||
|
custom-class="van-dialog__confirm"
|
||||||
|
custom-style="color: {{ confirmButtonColor }}"
|
||||||
|
|
||||||
<van-button
|
open-type="{{ confirmButtonOpenType }}"
|
||||||
wx:else
|
lang="{{ lang }}"
|
||||||
size="large"
|
business-id="{{ businessId }}"
|
||||||
loading="{{ loading.cancel }}"
|
session-from="{{ sessionFrom }}"
|
||||||
class="van-dialog__button van-hairline--right"
|
send-message-title="{{ sendMessageTitle }}"
|
||||||
custom-class="van-dialog__cancel cancle-button-class"
|
send-message-path="{{ sendMessagePath }}"
|
||||||
custom-style="color: {{ cancelButtonColor }}"
|
send-message-img="{{ sendMessageImg }}"
|
||||||
bind:click="onCancel"
|
show-message-card="{{ showMessageCard }}"
|
||||||
>
|
app-parameter="{{ appParameter }}"
|
||||||
{{ cancelButtonText }}
|
|
||||||
</van-button>
|
|
||||||
</block>
|
|
||||||
|
|
||||||
<block wx:if="{{ showConfirmButton }}">
|
bind:click="onConfirm"
|
||||||
<slot wx:if="{{ useConfirmButtonSlot }}" name="confirm-button" />
|
bindgetuserinfo="onGetUserInfo"
|
||||||
|
bindcontact="onContact"
|
||||||
<van-button
|
bindgetphonenumber="onGetPhoneNumber"
|
||||||
wx:else
|
binderror="onError"
|
||||||
size="large"
|
bindlaunchapp="onLaunchApp"
|
||||||
class="van-dialog__button"
|
bindopensetting="onOpenSetting"
|
||||||
loading="{{ loading.confirm }}"
|
>
|
||||||
custom-class="van-dialog__confirm confirm-button-class"
|
{{ confirmButtonText }}
|
||||||
custom-style="color: {{ confirmButtonColor }}"
|
</van-button>
|
||||||
button-id="{{ confirmButtonId }}"
|
|
||||||
open-type="{{ confirmButtonOpenType }}"
|
|
||||||
lang="{{ lang }}"
|
|
||||||
business-id="{{ businessId }}"
|
|
||||||
session-from="{{ sessionFrom }}"
|
|
||||||
send-message-title="{{ sendMessageTitle }}"
|
|
||||||
send-message-path="{{ sendMessagePath }}"
|
|
||||||
send-message-img="{{ sendMessageImg }}"
|
|
||||||
show-message-card="{{ showMessageCard }}"
|
|
||||||
app-parameter="{{ appParameter }}"
|
|
||||||
bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
|
|
||||||
bindgetRealTimePhoneNumber="onGetRealTimePhoneNumber"
|
|
||||||
bind:click="onConfirm"
|
|
||||||
bindgetuserinfo="onGetUserInfo"
|
|
||||||
bindcontact="onContact"
|
|
||||||
bindgetphonenumber="onGetPhoneNumber"
|
|
||||||
binderror="onError"
|
|
||||||
bindlaunchapp="onLaunchApp"
|
|
||||||
bindopensetting="onOpenSetting"
|
|
||||||
>
|
|
||||||
{{ confirmButtonText }}
|
|
||||||
</van-button>
|
|
||||||
</block>
|
|
||||||
</view>
|
</view>
|
||||||
</van-popup>
|
</van-popup>
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user