Compare commits

...

31 Commits

Author SHA1 Message Date
dependabot-preview[bot]
f57e1313e9
build(deps): bump @vant/use from 1.1.1 to 1.1.2 (#8609)
Bumps [@vant/use](https://github.com/youzan/vant) from 1.1.1 to 1.1.2.
- [Release notes](https://github.com/youzan/vant/releases)
- [Commits](https://github.com/youzan/vant/compare/v1.1.1...v1.1.2)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
2021-04-23 17:33:10 +08:00
dependabot-preview[bot]
57aed686d2
build(deps-dev): bump @vant/area-data from 1.1.0 to 1.1.1 (#8604)
Bumps [@vant/area-data](https://github.com/youzan/vant) from 1.1.0 to 1.1.1.
- [Release notes](https://github.com/youzan/vant/releases)
- [Commits](https://github.com/youzan/vant/compare/v1.1.0...v1.1.1)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
2021-04-23 09:35:11 +08:00
chenjiahan
27cddf054e docs(@vant/use): changelog v1.1.2 2021-04-22 20:18:17 +08:00
chenjiahan
9c4d60f626 chore: release @vant/use@1.1.2 2021-04-22 20:11:08 +08:00
neverland
1203b29720
fix(@vant/use): useScrollParent ssr (#8603) 2021-04-22 19:43:30 +08:00
neverland
f0eb0d18f0
fix(Tag): incorrect border color when using plain (#8601)
* fix(Tag): incorrect border color when using plain

* fix: snapshot
2021-04-22 19:26:19 +08:00
nemo-shen
ed83922042
feat(Cli): windows系统禁用左右方向键快捷导航 (#8588)
Co-authored-by: nemo <nemo@nemodeMacBook-Pro.local>
2021-04-21 09:45:24 +08:00
nemo-shen
c16b7a7dac
fix(Cli): change prettier package url in yarn.lock (#8590) 2021-04-21 09:44:41 +08:00
neverland
7e9d4a98e5
build: depoly v2 site (#8587) 2021-04-20 20:51:11 +08:00
neverland
02d446e6dd
build: remove surge pr preview action (#8586) 2021-04-20 20:20:59 +08:00
neverland
73308ee54f
build: fix failed to deploy site (#8584)
* build: fix failed to deploy site

* chore: upd
2021-04-20 20:16:00 +08:00
neverland
99bd26ac8d
Update deploy-site.yml 2021-04-20 19:59:41 +08:00
neverland
27cf349599
Update and rename gh-pages.yml to deploy-site.yml 2021-04-20 19:57:48 +08:00
neverland
38f02606ad
build: add github pages deploy action (#8582) 2021-04-20 19:56:32 +08:00
neverland
e50f6f1c19
docs(Rate): add more description (#8581) 2021-04-20 19:32:58 +08:00
neverland
032a512b22
fix(Rate): select half star correctly when clicked (#8580)
* fix(Rate): select half star correctly when clicked

* fix: failed to click

* chore: upd
2021-04-20 19:31:04 +08:00
chenjiahan
d86a2dc568 chore: release @vant/area-data@1.1.1 2021-04-20 13:29:28 +08:00
wangyuan0108
9d5a59fd06
feat(area-data): update counties of HangZhou (#8579)
修改杭州市新划分区删除下城区和江干区,添加钱塘区和临平区
2021-04-20 13:28:25 +08:00
neverland
1ba0e0c2a0 docs(List): add direction up faq (#8576) 2021-04-19 20:49:23 +08:00
neverland
3b72d8970b docs: add rem custom rootValue demo (#8575) 2021-04-19 20:11:07 +08:00
chenjiahan
d096a2d5f5 docs(@vant/cli): changelog 3.10.2 2021-04-19 19:25:32 +08:00
chenjiahan
2754f3040f chore: release @vant/cli@3.10.2 2021-04-19 19:21:51 +08:00
neverland
33bdcbc029
fix(cli): ignore import types when analyzing deps (#8574) 2021-04-19 19:13:09 +08:00
neverland
84b45c4840
fix(Calendar): incorrect weekdays locale (#8570) 2021-04-19 17:45:03 +08:00
neverland
b3e08777fa
docs(DropdownMenu): add transform faq (#8567) 2021-04-19 17:27:45 +08:00
neverland
84e62dbbdf
chore: add jsdelivr entry config (#8561) 2021-04-19 11:01:28 +08:00
chenjiahan
055a4d3c94 docs(changelog): 3.0.14 2021-04-18 20:54:31 +08:00
chenjiahan
99563d2a4b chore: release 3.0.14 2021-04-18 20:52:37 +08:00
nemo-shen
8fb3560f39
feat(Rate): 当使用 readonly 和 allow-half 时支持 modelValue 设置小数 (#8528)
* feat(Rate): 当使用readonly和allow-half时支持modelValue设置小数

* docs(Rate): 完善文档

* docs(Rate): update snapshot

* docs(Rate): add description of decimal value

Co-authored-by: neverland <chenjiahan@buaa.edu.cn>
2021-04-18 20:36:48 +08:00
neverland
8e4e6d54a6
perf: bump jsx-pugin to reduce bundle size (#8557)
* perf: bump jsx-pugin to reduce bundle size

* chore: bump
2021-04-18 17:52:04 +08:00
neverland
70b852ca7e
docs(Calendar): fix typo (#8555) 2021-04-17 22:07:43 +08:00
40 changed files with 505 additions and 326 deletions

28
.github/workflows/deploy-v2-site.yml vendored Normal file
View File

@ -0,0 +1,28 @@
name: Deploy V2 Site
on:
push:
tags:
- 'v2*' # Push events to matching v*, i.e. v1.0, v20.15.10
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2
with:
ref: '2.x'
- name: Install dependencies
uses: bahmutov/npm-install@v1
- name: Build Site
run: npx --no-install vant-cli build-site
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.1
with:
branch: gh-pages
folder: site
clean: false

28
.github/workflows/deploy-v3-site.yml vendored Normal file
View File

@ -0,0 +1,28 @@
name: Deploy V3 Site
on:
push:
tags:
- 'v3*' # Push events to matching v*, i.e. v1.0, v20.15.10
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2
with:
ref: 'dev'
- name: Install dependencies
uses: bahmutov/npm-install@v1
- name: Build Site
run: npx --no-install vant-cli build-site
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.1
with:
branch: gh-pages
folder: site
target-folder: v3

View File

@ -1,19 +0,0 @@
name: 🔂 Surge PR Preview
on: pull_request
jobs:
preview:
runs-on: ubuntu-latest
env:
PUBLIC_PATH: '/'
steps:
- uses: actions/checkout@v2
- uses: afc163/surge-preview@v1
with:
surge_token: ${{ secrets.SURGE_TOKEN }}
github_token: ${{ secrets.GITHUB_TOKEN }}
build: |
yarn
./node_modules/.bin/vant-cli build-site
dist: site

View File

@ -1,10 +1,10 @@
name: Create Release Tag
on:
push:
tags:
- 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
name: Create Release
jobs:
build:
name: Create Release

View File

@ -11,10 +11,10 @@ jobs:
- name: Sync to Gitee
uses: wearerequired/git-mirror-action@master
env:
# 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
# 在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
with:
# 注意替换为你的 GitHub 源仓库地址
# GitHub 源仓库地址
source-repo: git@github.com:youzan/vant.git
# 注意替换为你的 Gitee 目标仓库地址
# Gitee 目标仓库地址
destination-repo: git@gitee.com:vant-contrib/vant.git

View File

@ -50,11 +50,9 @@ Vant uses `px` unit by defaultyou can use tools such as [postcss--px-to-viewp
PostCSS config example:
```js
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.4', 'iOS >= 8'],
},
'postcss-px-to-viewport': {
viewportWidth: 375,
},
@ -74,11 +72,9 @@ You can use tools such as `postcss-pxtorem` to transform `px` unit to `rem` unit
PostCSS config example:
```js
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'],
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
@ -87,6 +83,25 @@ module.exports = {
};
```
### Custom rootValue
If the size of the design draft is 750 or other sizes, you can adjust the `rootValue` to:
```js
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem version >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};
```
### Adapt to PC Browsers
Vant is a mobile-first component library, if you want to use Vant in PC browsers, you can use the [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) module. This module will automatically convert the mouse events of the PC browser into the touch events of the mobile browser.

View File

@ -107,11 +107,9 @@ Vant 默认使用 `px` 作为样式单位,如果需要使用 `viewport` 单位
下面提供了一份基本的 PostCSS 示例配置,可以在此配置的基础上根据项目需求进行修改。
```js
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.4', 'iOS >= 8'],
},
'postcss-px-to-viewport': {
viewportWidth: 375,
},
@ -133,11 +131,9 @@ module.exports = {
下面提供了一份基本的 PostCSS 示例配置,可以在此配置的基础上根据项目需求进行修改。
```js
// postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'],
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
@ -146,6 +142,25 @@ module.exports = {
};
```
#### 其他设计稿尺寸
如果设计稿的尺寸不是 375而是 750 或其他大小,可以将 `rootValue` 配置调整为:
```js
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};
```
### 桌面端适配
Vant 是一个面向移动端的组件库,因此默认只适配了移动端设备,这意味着组件只监听了移动端的 `touch` 事件,没有监听桌面端的 `mouse` 事件。

View File

@ -16,13 +16,26 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
## Details
### [v3.0.14](https://github.com/youzan/vant/compare/v3.0.13...v3.0.14)
`2021-04-18`
**Feature**
- Badge: offset prop support custom unit [35edb7](https://github.com/youzan/vant/commit/35edb72b5cd519d4e75443acaa0a63db16695d2d)
- Rate: support decimal modelValue when readonly [#8528](https://github.com/youzan/vant/issues/8528)
**Bug Fixes**
- ContactList: fix nodes type [0b764b](https://github.com/youzan/vant/commit/0b764b63470b09f5654d267c8d07a20bc2d31536)
### [v3.0.13](https://github.com/youzan/vant/compare/v3.0.12...v3.0.13)
`2021-04-11`
**Feature**
- AcitonBar: add @action-bar-icon-background-color less var [#8474](https://github.com/youzan/vant/issues/8474)
- ActionBar: add @action-bar-icon-background-color less var [#8474](https://github.com/youzan/vant/issues/8474)
- Popover: bump @popperjs/core@2.9.2 [0d1323](https://github.com/youzan/vant/commit/0d132337d5d263957a7993d60e47a18efec7313e)
- perf: reduce bundle size [ba3e6d](https://github.com/youzan/vant/commit/ba3e6d56a0bc7ae3acc25b1380f054da3b9b020f)

View File

@ -16,13 +16,26 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
## 更新内容
### [v3.0.14](https://github.com/youzan/vant/compare/v3.0.13...v3.0.14)
`2021-04-18`
**Feature**
- Badge: offset 属性支持传入任意单位 [35edb7](https://github.com/youzan/vant/commit/35edb72b5cd519d4e75443acaa0a63db16695d2d)
- Rate: 支持在 readonly 时渲染任意小数结果 [#8528](https://github.com/youzan/vant/issues/8528)
**Bug Fixes**
- ContactList: 修复 nodes 类型错误 [0b764b](https://github.com/youzan/vant/commit/0b764b63470b09f5654d267c8d07a20bc2d31536)
### [v3.0.13](https://github.com/youzan/vant/compare/v3.0.12...v3.0.13)
`2021-04-11`
**Feature**
- AcitonBar: 新增 @action-bar-icon-background-color 样式变量 [#8474](https://github.com/youzan/vant/issues/8474)
- ActionBar: 新增 @action-bar-icon-background-color 样式变量 [#8474](https://github.com/youzan/vant/issues/8474)
- Popover: 升级依赖的 @popperjs/core 到 2.9.2 版本 [0d1323](https://github.com/youzan/vant/commit/0d132337d5d263957a7993d60e47a18efec7313e)
- perf: 优化包体积 [ba3e6d](https://github.com/youzan/vant/commit/ba3e6d56a0bc7ae3acc25b1380f054da3b9b020f)

View File

@ -1,6 +1,6 @@
{
"name": "vant",
"version": "3.0.13",
"version": "3.0.14",
"description": "Mobile UI Components built on Vue",
"main": "lib/index.js",
"module": "es/index.js",
@ -59,7 +59,7 @@
"vue": "^3.0.0"
},
"devDependencies": {
"@vant/cli": "^3.10.1",
"@vant/cli": "^3.10.2",
"@vant/area-data": "^1.1.0",
"@vue/compiler-sfc": "^3.0.6",
"vue": "^3.0.6"
@ -74,5 +74,7 @@
"tags": "vetur/tags.json",
"attributes": "vetur/attributes.json"
},
"web-types": "vetur/web-types.json"
"web-types": "vetur/web-types.json",
"unpkg": "lib/vant.min.js",
"jsdelivr": "lib/vant.min.js"
}

View File

@ -1,6 +1,6 @@
{
"name": "@vant/area-data",
"version": "1.1.0",
"version": "1.1.1",
"description": "Vant 省市区数据",
"main": "lib/index.js",
"publishConfig": {

View File

@ -1283,8 +1283,6 @@ export const areaList = {
321324: '泗洪县',
321371: '宿迁经济技术开发区',
330102: '上城区',
330103: '下城区',
330104: '江干区',
330105: '拱墅区',
330106: '西湖区',
330108: '滨江区',
@ -1292,6 +1290,8 @@ export const areaList = {
330110: '余杭区',
330111: '富阳区',
330112: '临安区',
330113: '钱塘区',
330114: '临平区',
330122: '桐庐县',
330127: '淳安县',
330182: '建德市',

View File

@ -1,5 +1,12 @@
# 更新日志
## v3.10.2
`2021-04-19`
- 修复搜索框图标不展示的问题
- 修复 import type 可能导致分析组件样式依赖关系错误的问题
## v3.10.1
`2021-04-16`

View File

@ -1,6 +1,6 @@
{
"name": "@vant/cli",
"version": "3.10.1",
"version": "3.10.2",
"main": "lib/index.js",
"typings": "lib/index.d.ts",
"bin": {
@ -48,7 +48,7 @@
"@vant/markdown-vetur": "^2.2.0",
"@vant/stylelint-config": "^1.4.2",
"@vant/touch-emulator": "^1.2.0",
"@vue/babel-plugin-jsx": "^1.0.1",
"@vue/babel-plugin-jsx": "^1.0.5",
"@vue/test-utils": "2.0.0-rc.1",
"address": "^1.1.2",
"autoprefixer": "^9.0.0",

View File

@ -25,7 +25,7 @@ import DocContainer from './Container';
import DocSimulator from './Simulator';
export default {
name: 'van-doc',
name: 'VanDoc',
components: {
DocNav,
@ -83,6 +83,10 @@ export default {
},
keyboardNav(direction) {
if (/win(32|64)/.test(navigator.userAgent.toLocaleLowerCase())) {
return;
}
const nav = direction === 'prev' ? this.leftNav : this.rightNav;
if (nav.path) {
this.$router.push(this.base + nav.path);

View File

@ -9,7 +9,8 @@ let existsCache: Record<string, boolean> = {};
const IMPORT_RE = /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
function matchImports(code: string): string[] {
return code.match(IMPORT_RE) || [];
const imports = code.match(IMPORT_RE) || [];
return imports.filter((line) => !line.includes('import type'));
}
function exists(filePath: string) {

View File

@ -1874,22 +1874,22 @@
resolved "https://registry.yarnpkg.com/@vant/touch-emulator/-/touch-emulator-1.2.0.tgz#486300b23e57db9ce9231a04e0a0c621c68692d8"
integrity sha512-sJ97zU85zOq51qoi7+CpBEcOyH3CitjP1KC7/GQwqaurUJni+EP7/F9n0HMnAh8GXMjgtgDBNJ5z48x+coNKYQ==
"@vue/babel-helper-vue-transform-on@^1.0.0":
version "1.0.0"
resolved "https://registry.npm.taobao.org/@vue/babel-helper-vue-transform-on/download/@vue/babel-helper-vue-transform-on-1.0.0.tgz?cache=0&sync_timestamp=1608914007884&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fbabel-helper-vue-transform-on%2Fdownload%2F%40vue%2Fbabel-helper-vue-transform-on-1.0.0.tgz#8cbec6bbcae53626ad70139061be5e73403c9a62"
integrity sha1-jL7Gu8rlNiatcBOQYb5ec0A8mmI=
"@vue/babel-helper-vue-transform-on@^1.0.2":
version "1.0.2"
resolved "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
"@vue/babel-plugin-jsx@^1.0.1":
version "1.0.1"
resolved "https://registry.npm.taobao.org/@vue/babel-plugin-jsx/download/@vue/babel-plugin-jsx-1.0.1.tgz?cache=0&sync_timestamp=1610197760021&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fbabel-plugin-jsx%2Fdownload%2F%40vue%2Fbabel-plugin-jsx-1.0.1.tgz#8ece4e521888fabe2c96adca428606e5cea55f54"
integrity sha1-js5OUhiI+r4slq3KQoYG5c6lX1Q=
"@vue/babel-plugin-jsx@^1.0.5":
version "1.0.5"
resolved "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.5.tgz#72820d5fb371c41d2113b31b16787995e8bdf69a"
integrity sha512-Jtipy7oI0am5e1q5Ahunm/cCcCh5ssf5VkMQsLR383S3un5Qh7NBfxgSK9kmWf4IXJEhDeYp9kHv8G/EnMai9A==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@babel/plugin-syntax-jsx" "^7.0.0"
"@babel/template" "^7.0.0"
"@babel/traverse" "^7.0.0"
"@babel/types" "^7.0.0"
"@vue/babel-helper-vue-transform-on" "^1.0.0"
"@vue/babel-helper-vue-transform-on" "^1.0.2"
camelcase "^6.0.0"
html-tags "^3.1.0"
svg-tags "^1.0.0"
@ -8121,7 +8121,7 @@ prepend-http@^2.0.0:
prettier@2.1.0:
version "2.1.0"
resolved "http://registry.npm.qima-inc.com/prettier/download/prettier-2.1.0.tgz#5a9789f767a243118c60f3e56d95cb6544914fbb"
resolved "https://registry.npm.taobao.org/prettier/download/prettier-2.1.0.tgz#5a9789f767a243118c60f3e56d95cb6544914fbb"
integrity sha1-WpeJ92eiQxGMYPPlbZXLZUSRT7s=
pretty-error@^2.1.1:

View File

@ -1,5 +1,11 @@
# 更新日志
### v1.1.2
`2021-04-22`
- 修复 `useScrollParent` 在 SSR 下报错的问题
### v1.1.1
`2021-04-16`

View File

@ -1,6 +1,6 @@
{
"name": "@vant/use",
"version": "1.1.1",
"version": "1.1.2",
"description": "Vant Composition API",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",

View File

@ -1,8 +1,10 @@
import { ref, Ref, onMounted } from 'vue';
import { inBrowser } from '../utils';
type ScrollElement = HTMLElement | Window;
const overflowScrollReg = /scroll|auto/i;
const defaultRoot = inBrowser ? window : undefined;
function isElement(node: Element) {
const ELEMENT_NODE_TYPE = 1;
@ -14,7 +16,10 @@ function isElement(node: Element) {
}
// https://github.com/youzan/vant/issues/3823
export function getScrollParent(el: Element, root: ScrollElement = window) {
export function getScrollParent(
el: Element,
root: ScrollElement | undefined = defaultRoot
) {
let node = el;
while (node && node !== root && isElement(node)) {
@ -30,7 +35,7 @@ export function getScrollParent(el: Element, root: ScrollElement = window) {
export function useScrollParent(
el: Ref<Element | undefined>,
root: ScrollElement = window
root: ScrollElement | undefined = defaultRoot
) {
const scrollParent = ref<Element | Window>();

View File

@ -274,7 +274,7 @@ export default {
### Calendar Poppable Props
当 Canlendar 的 `poppable``true` 时,支持以下 props:
当 Calendar 的 `poppable``true` 时,支持以下 props:
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
@ -288,7 +288,7 @@ export default {
### Calendar Range Props
当 Canlendar 的 `type``range` 时,支持以下 props:
当 Calendar 的 `type``range` 时,支持以下 props:
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
@ -298,7 +298,7 @@ export default {
### Calendar Multiple Props
当 Canlendar 的 `type``multiple` 时,支持以下 props:
当 Calendar 的 `type``multiple` 时,支持以下 props:
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |

View File

@ -222,3 +222,18 @@ export default {
| @dropdown-menu-option-active-color | `@red` | - |
| @dropdown-menu-content-max-height | `80%` | - |
| @dropdown-item-z-index | `10` | - |
## 常见问题
### 父元素设置 transform 后,下拉菜单的位置错误?
`DropdownMenu` 嵌套在 `Tabs` 等组件内部使用时,可能会遇到下拉菜单位置错误的问题。这是因为在 Chrome 浏览器中transform 元素内部的 fixed 布局会降级成 absolute 布局,导致下拉菜单的布局异常。
`DropdownItem``teleport` 属性设置为 `body` 即可避免此问题:
```html
<van-dropdown-menu>
<van-dropdown-item teleport="body" />
<van-dropdown-item teleport="body" />
</van-dropdown-menu>
```

View File

@ -308,9 +308,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -320,9 +318,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -332,9 +328,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -344,9 +338,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -356,9 +348,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>

View File

@ -277,3 +277,9 @@ body {
```
这个问题的原因是当元素设置了 `overflow-x: hidden` 样式时,该元素的 `overflow-y` 会被浏览器设置为 `auto`,而不是默认值 `visible`,导致 List 无法正确地判断滚动容器。解决方法是去除该样式,或者在 html 和 body 标签上添加 `height: 100%` 样式。
### direction 属性设置为 up 后一直触发加载?
设置 `direction` 属性为 up 后,当滚动条处于页面顶部时,就会触发 List 组件的加载。
因此在使用该属性时,建议在每次数据加载完成后,将滚动条滚动至页面底部或非顶部的位置。

View File

@ -18,7 +18,7 @@ export default {
title: '日期選擇',
confirm: '確定',
startEnd: '開始/結束',
weekdays: ['日', '', '二', '三', '四', '五', '六'],
weekdays: ['日', '', '二', '三', '四', '五', '六'],
monthTitle: (year: number, month: number) => `${year}${month}`,
rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange}`,
},

View File

@ -18,7 +18,7 @@ export default {
title: '日期選擇',
confirm: '確定',
startEnd: '開始/結束',
weekdays: ['日', '', '二', '三', '四', '五', '六'],
weekdays: ['日', '', '二', '三', '四', '五', '六'],
monthTitle: (year: number, month: number) => `${year}${month}`,
rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange}`,
},

View File

@ -56,7 +56,7 @@ export default {
### Half Star
```html
<van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
<van-rate v-model="value" allow-half />
```
```js
@ -88,6 +88,23 @@ export default {
<van-rate v-model="value" readonly />
```
### Readonly Half Star
```html
<van-rate v-model="value" readonly />
```
```js
import { ref } from 'vue';
export default {
setup() {
const value = ref(3.3);
return { value };
},
};
```
### Change Event
```html

View File

@ -20,6 +20,8 @@ app.use(Rate);
### 基础用法
通过 `v-model` 来绑定当前评分值。
```html
<van-rate v-model="value" />
```
@ -37,12 +39,16 @@ export default {
### 自定义图标
通过 `icon` 属性设置选中时的图标,`void-icon` 属性设置未选中时的图标。
```html
<van-rate v-model="value" icon="like" void-icon="like-o" />
```
### 自定义样式
通过 `size` 属性设置图标大小,`color` 属性设置选中时的颜色,`void-color` 设置未选中时的颜色。
```html
<van-rate
v-model="value"
@ -55,8 +61,10 @@ export default {
### 半星
设置 `allow-half` 属性后可以选中半星。
```html
<van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
<van-rate v-model="value" allow-half />
```
```js
@ -72,24 +80,51 @@ export default {
### 自定义数量
通过 `count` 属性设置评分总数。
```html
<van-rate v-model="value" :count="6" />
```
### 禁用状态
通过 `disabled` 属性来禁用评分。
```html
<van-rate v-model="value" disabled />
```
### 只读状态
通过 `readonly` 属性将评分设置为只读状态。
```html
<van-rate v-model="value" readonly />
```
### 只读状态显示小数
设置 `readonly``allow-half` 属性后Rate 组件可以展示任意小数结果。
```html
<van-rate v-model="value" readonly allow-half />
```
```js
import { ref } from 'vue';
export default {
setup() {
const value = ref(3.3);
return { value };
},
};
```
### 监听 change 事件
评分变化时,会触发 `change` 事件。
```html
<van-rate v-model="value" @change="onChange" />
```

View File

@ -15,18 +15,34 @@ const [name, bem] = createNamespace('rate');
type RateStatus = 'full' | 'half' | 'void';
type RateListItem = {
value: number;
status: RateStatus;
};
function getRateStatus(
value: number,
index: number,
allowHalf: boolean
): RateStatus {
allowHalf: boolean,
readonly: boolean
): RateListItem {
if (value >= index) {
return 'full';
return { status: 'full', value: 1 };
}
if (value + 0.5 >= index && allowHalf) {
return 'half';
if (value + 0.5 >= index && allowHalf && !readonly) {
return { status: 'half', value: 0.5 };
}
return 'void';
if (value + 1 >= index && allowHalf && readonly) {
const cardinal = 10 ** 10;
return {
status: 'half',
value: Math.round((value - index + 1) * cardinal) / cardinal,
};
}
return { status: 'void', value: 0 };
}
export default defineComponent({
@ -64,43 +80,28 @@ export default defineComponent({
emits: ['change', 'update:modelValue'],
setup(props, { emit }) {
let ranges: Array<{ left: number; score: number }>;
const touch = useTouch();
const [itemRefs, setItemRefs] = useRefs();
const untouchable = () =>
props.readonly || props.disabled || !props.touchable;
const list = computed<RateStatus[]>(() =>
const list = computed<RateListItem[]>(() =>
Array(props.count)
.fill('')
.map((_, i) => getRateStatus(props.modelValue, i + 1, props.allowHalf))
.map((_, i) =>
getRateStatus(
props.modelValue,
i + 1,
props.allowHalf,
props.readonly
)
)
);
const select = (index: number) => {
if (!props.disabled && !props.readonly && index !== props.modelValue) {
emit('update:modelValue', index);
emit('change', index);
}
};
const getScoreByPosition = (x: number) => {
for (let i = ranges.length - 1; i > 0; i--) {
if (x > ranges[i].left) {
return ranges[i].score;
}
}
return props.allowHalf ? 0.5 : 1;
};
const onTouchStart = (event: TouchEvent) => {
if (untouchable()) {
return;
}
touch.start(event);
let ranges: Array<{ left: number; score: number }>;
const updateRanges = () => {
const rects = itemRefs.value.map((item) => item.getBoundingClientRect());
ranges = [];
@ -116,6 +117,31 @@ export default defineComponent({
});
};
const getScoreByPosition = (x: number) => {
for (let i = ranges.length - 1; i > 0; i--) {
if (x > ranges[i].left) {
return ranges[i].score;
}
}
return props.allowHalf ? 0.5 : 1;
};
const select = (index: number) => {
if (!props.disabled && !props.readonly && index !== props.modelValue) {
emit('update:modelValue', index);
emit('change', index);
}
};
const onTouchStart = (event: TouchEvent) => {
if (untouchable()) {
return;
}
touch.start(event);
updateRanges();
};
const onTouchMove = (event: TouchEvent) => {
if (untouchable()) {
return;
@ -130,7 +156,7 @@ export default defineComponent({
}
};
const renderStar = (status: RateStatus, index: number) => {
const renderStar = (item: RateListItem, index: number) => {
const {
icon,
size,
@ -145,8 +171,9 @@ export default defineComponent({
disabledColor,
} = props;
const score = index + 1;
const isFull = status === 'full';
const isVoid = status === 'void';
const isFull = item.status === 'full';
const isVoid = item.status === 'void';
const renderHalf = allowHalf && item.value > 0 && item.value < 1;
let style;
if (gutter && score !== +count) {
@ -155,6 +182,11 @@ export default defineComponent({
};
}
const onClickItem = (event: MouseEvent) => {
updateRanges();
select(allowHalf ? getScoreByPosition(event.clientX) : score);
};
return (
<div
key={index}
@ -166,6 +198,7 @@ export default defineComponent({
aria-setsize={+count}
aria-posinset={score}
aria-checked={!isVoid}
onClick={onClickItem}
>
<Icon
size={size}
@ -173,22 +206,15 @@ export default defineComponent({
class={bem('icon', { disabled, full: isFull })}
color={disabled ? disabledColor : isFull ? color : voidColor}
classPrefix={iconPrefix}
data-score={score}
onClick={() => {
select(score);
}}
/>
{allowHalf && (
{renderHalf && (
<Icon
size={size}
style={{ width: item.value + 'em' }}
name={isVoid ? voidIcon : icon}
class={bem('icon', ['half', { disabled, full: !isVoid }])}
color={disabled ? disabledColor : isVoid ? voidColor : color}
classPrefix={iconPrefix}
data-score={score - 0.5}
onClick={() => {
select(score - 0.5);
}}
/>
)}
</div>

View File

@ -18,13 +18,7 @@
</demo-block>
<demo-block :title="t('halfStar')">
<van-rate
v-model="value4"
:size="25"
allow-half
void-icon="star"
void-color="#eee"
/>
<van-rate v-model="value4" allow-half />
</demo-block>
<demo-block :title="t('customCount')">
@ -39,8 +33,12 @@
<van-rate v-model="value6" readonly />
</demo-block>
<demo-block :title="t('readonlyHalfStar')">
<van-rate v-model="value7" readonly allow-half />
</demo-block>
<demo-block v-if="!isWeapp" :title="t('changeEvent')">
<van-rate v-model="value7" @change="onChange" />
<van-rate v-model="value8" @change="onChange" />
</demo-block>
</template>
@ -57,6 +55,7 @@ const i18n = {
customStyle: '自定义样式',
customCount: '自定义数量',
readonly: '只读状态',
readonlyHalfStar: '只读状态小数显示',
changeEvent: '监听 change 事件',
toastContent: (value: number) => `当前值:${value}`,
},
@ -67,6 +66,7 @@ const i18n = {
customStyle: 'Custom Style',
customCount: 'Custom Count',
readonly: 'Readonly',
readonlyHalfStar: 'Readonly Half Star',
changeEvent: 'Change Event',
toastContent: (value: number) => `current value${value}`,
},
@ -82,7 +82,8 @@ export default {
value4: 2.5,
value5: 4,
value6: 3,
value7: 2,
value7: 3.3,
value8: 2,
});
const onChange = (value: number) => Toast(t('toastContent', value));

View File

@ -23,7 +23,6 @@
position: absolute;
top: 0;
left: 0;
width: 0.5em;
overflow: hidden;
}

View File

@ -13,9 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -25,9 +23,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -37,9 +33,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -49,9 +43,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -61,9 +53,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@ -80,9 +70,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -92,9 +80,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -104,9 +90,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -116,9 +100,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -128,9 +110,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon">
</i>
</div>
</div>
@ -149,7 +129,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="color: rgb(255, 210, 30); font-size: 25px;"
data-score="1"
>
</i>
</div>
@ -162,7 +141,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="color: rgb(255, 210, 30); font-size: 25px;"
data-score="2"
>
</i>
</div>
@ -175,7 +153,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="color: rgb(255, 210, 30); font-size: 25px;"
data-score="3"
>
</i>
</div>
@ -188,7 +165,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="4"
>
</i>
</div>
@ -201,7 +177,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="5"
>
</i>
</div>
@ -219,15 +194,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="font-size: 25px;"
data-score="1"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="font-size: 25px;"
data-score="0.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -237,15 +204,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="font-size: 25px;"
data-score="2"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="font-size: 25px;"
data-score="1.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -255,14 +214,10 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="font-size: 25px;"
data-score="2.5"
style="width: 0.5em;"
>
</i>
</div>
@ -273,15 +228,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="4"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="3.5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -291,15 +238,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="5"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="4.5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@ -316,9 +255,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -328,9 +265,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -340,9 +275,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -352,9 +285,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -364,9 +295,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -376,9 +305,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="6"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="6"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@ -395,9 +322,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -407,9 +332,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -419,9 +342,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -431,9 +352,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
</i>
</div>
<div role="radio"
@ -443,9 +362,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
</i>
</div>
</div>
@ -462,9 +379,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -474,9 +389,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -486,9 +399,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -498,8 +409,67 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
</div>
<div>
<div role="radiogroup"
class="van-rate van-rate--readonly"
tabindex="0"
>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
class="van-rate__item"
tabindex="0"
aria-setsize="5"
aria-posinset="4"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="width: 0.3em;"
>
</i>
</div>
@ -510,9 +480,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@ -529,9 +497,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -541,9 +507,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -553,9 +517,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -565,9 +527,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -577,9 +537,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>

View File

@ -13,9 +13,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="1"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -26,9 +24,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="2"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -39,9 +35,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="3"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -52,9 +46,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -64,9 +56,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>

View File

@ -42,19 +42,6 @@ test('should not emit change and update:modelValue event when rate is not change
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
});
test('should allow half rate when using allow-half prop', () => {
const wrapper = mount(Rate, {
props: {
allowHalf: true,
},
});
const item4 = wrapper.findAll('.van-rate__icon--half')[3];
item4.trigger('click');
expect(wrapper.emitted('change')![0]).toEqual([3.5]);
expect(wrapper.emitted('update:modelValue')![0]).toEqual([3.5]);
});
test('should not emit change or update:modelValue event when rate is disabled', () => {
const wrapper = mount(Rate, {
props: {
@ -127,3 +114,16 @@ test('should not emit change event when untouchable rate is touchmoved', () => {
triggerDrag(wrapper, 100, 0);
expect(wrapper.emitted('change')).toBeFalsy();
});
test('should get decimal when using allow-half and readonly prop', () => {
const wrapper = mount(Rate, {
props: {
allowHalf: true,
readonly: true,
modelValue: 3.3,
},
});
const halfIcon = wrapper.find('.van-rate__icon--half');
expect(halfIcon.style.width).toEqual('0.3em');
});

View File

@ -36,6 +36,7 @@ export default defineComponent({
if (props.plain) {
return {
color: props.textColor || props.color,
borderColor: props.color,
};
}
return {

View File

@ -52,6 +52,7 @@
&--plain {
background-color: @tag-plain-background-color;
border-color: currentColor;
&::before {
position: absolute;
@ -59,7 +60,8 @@
right: 0;
bottom: 0;
left: 0;
border: 1px solid currentColor;
border: 1px solid;
border-color: inherit;
border-radius: inherit;
content: '';
pointer-events: none;

View File

@ -204,7 +204,7 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-cell__value">
<transition-stub>
<span style="color: rgb(114, 50, 221);"
<span style="color: rgb(114, 50, 221); border-color: #7232dd;"
class="van-tag van-tag--plain van-tag--default"
>
Tag

View File

@ -4,3 +4,12 @@ exports[`should hide tag when the show prop is false 1`] = `
<transition-stub>
</transition-stub>
`;
exports[`should render border-color correctly 1`] = `
<transition-stub>
<span style="color: blue; border-color: red;"
class="van-tag van-tag--plain van-tag--default"
>
</span>
</transition-stub>
`;

View File

@ -36,3 +36,15 @@ test('should not trigger click event when clicking the close icon', () => {
wrapper.trigger('click');
expect(onClick).toHaveBeenCalledTimes(1);
});
test('should render border-color correctly', () => {
const wrapper = mount(Tag, {
props: {
plain: true,
color: 'red',
textColor: 'blue',
},
});
expect(wrapper.html()).toMatchSnapshot();
});

View File

@ -1837,14 +1837,14 @@
eslint-visitor-keys "^2.0.0"
"@vant/area-data@^1.1.0":
version "1.1.0"
resolved "https://registry.npmjs.org/@vant/area-data/-/area-data-1.1.0.tgz#be48d1c4f8bfe19429625fbf9ed40ab638f4c7f1"
integrity sha512-+TNxiOiNxcEmGnDLCcz5TrjzRd125eEsr1PCOZ9uqN3Y9fMXOsl6/oIvLJoLJRSCb/4GIjbIOAavJ+sVrlRslg==
version "1.1.1"
resolved "https://registry.yarnpkg.com/@vant/area-data/-/area-data-1.1.1.tgz#b9acf8a804c0d60f721b6900680299422b006b1a"
integrity sha512-MmXTuSh6YYWSvC112iK2/rZhEfe+3vfh6G9TD1sOTOrtw+H9bAnw8ZOiHdkL6hTUCXV+AJEDbFyFsNLpJxqkoA==
"@vant/cli@^3.10.1":
version "3.10.1"
resolved "https://registry.npmjs.org/@vant/cli/-/cli-3.10.1.tgz#6dc3e0f39c52b19450445101249b77ea822416df"
integrity sha512-/IFrlxqtVMruXYdqroe0jECgw4CDCQs7rRfxmm43rLN9SYwxsDw8Y2NADxwR2Hcw65jqeoU/gg06C4pMmety+w==
"@vant/cli@^3.10.2":
version "3.10.2"
resolved "https://registry.nlark.com/@vant/cli/download/@vant/cli-3.10.2.tgz?cache=0&sync_timestamp=1618831336137&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vant%2Fcli%2Fdownload%2F%40vant%2Fcli-3.10.2.tgz#b5766a2ab136694543d86d102168ab981acfadff"
integrity sha1-tXZqKrE2aUVD2G0QIWirmBrPrf8=
dependencies:
"@babel/core" "^7.12.10"
"@babel/preset-env" "^7.12.11"
@ -1857,7 +1857,7 @@
"@vant/markdown-vetur" "^2.2.0"
"@vant/stylelint-config" "^1.4.2"
"@vant/touch-emulator" "^1.2.0"
"@vue/babel-plugin-jsx" "^1.0.1"
"@vue/babel-plugin-jsx" "^1.0.5"
"@vue/test-utils" "2.0.0-rc.1"
address "^1.1.2"
autoprefixer "^9.0.0"
@ -1969,26 +1969,26 @@
integrity sha512-sJ97zU85zOq51qoi7+CpBEcOyH3CitjP1KC7/GQwqaurUJni+EP7/F9n0HMnAh8GXMjgtgDBNJ5z48x+coNKYQ==
"@vant/use@^1.1.1":
version "1.1.1"
resolved "https://registry.npmjs.org/@vant/use/-/use-1.1.1.tgz#fc39c1e918d6027cae52d0cb0c210a1134a7ac6c"
integrity sha512-aW7L6d1npRR18IhZ90gw92tYNQZSJecCLxzjnB8+fhUvrjQC97LHdDq0XJLEGB76ZmW0yaSzttfZRnTcj4xUFw==
version "1.1.2"
resolved "https://registry.yarnpkg.com/@vant/use/-/use-1.1.2.tgz#d35265e05df88a47b04196a308efb5e89e44ca10"
integrity sha512-s4YO6zqJ3NlGeAZ104exb0c/KvlXB908pOhWhCyhfedVBn1eBnKH401ildK0sttazmq0CH8jme6mnw2ZzZvutw==
"@vue/babel-helper-vue-transform-on@^1.0.0":
version "1.0.0"
resolved "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.0.tgz#8cbec6bbcae53626ad70139061be5e73403c9a62"
integrity sha512-svFuKPoXP92TJ76ztENOglOsLjcMGUXkdeQhYDxl6KBnZCpqFjqx6RodUPWFg1bj4zsUVsfoIh1RibLO86fUUQ==
"@vue/babel-helper-vue-transform-on@^1.0.2":
version "1.0.2"
resolved "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
"@vue/babel-plugin-jsx@^1.0.1":
version "1.0.1"
resolved "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.1.tgz#8ece4e521888fabe2c96adca428606e5cea55f54"
integrity sha512-pE1YlINZBzqaLeSNfrvo0nNvYjtWTBU+sXUrx65sLW7DL+nDCZcAVeVkMFDcpT1jIahx4hI3EzOcGZE6oLPLoA==
"@vue/babel-plugin-jsx@^1.0.5":
version "1.0.5"
resolved "https://registry.npm.taobao.org/@vue/babel-plugin-jsx/download/@vue/babel-plugin-jsx-1.0.5.tgz?cache=0&sync_timestamp=1618715318432&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fbabel-plugin-jsx%2Fdownload%2F%40vue%2Fbabel-plugin-jsx-1.0.5.tgz#72820d5fb371c41d2113b31b16787995e8bdf69a"
integrity sha1-coINX7NxxB0hE7MbFnh5lei99po=
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@babel/plugin-syntax-jsx" "^7.0.0"
"@babel/template" "^7.0.0"
"@babel/traverse" "^7.0.0"
"@babel/types" "^7.0.0"
"@vue/babel-helper-vue-transform-on" "^1.0.0"
"@vue/babel-helper-vue-transform-on" "^1.0.2"
camelcase "^6.0.0"
html-tags "^3.1.0"
svg-tags "^1.0.0"