mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-01-10 16:39:09 +08:00
Compare commits
31 Commits
fb969d6b20
...
f57e1313e9
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f57e1313e9 | ||
|
|
57aed686d2 | ||
|
|
27cddf054e | ||
|
|
9c4d60f626 | ||
|
|
1203b29720 | ||
|
|
f0eb0d18f0 | ||
|
|
ed83922042 | ||
|
|
c16b7a7dac | ||
|
|
7e9d4a98e5 | ||
|
|
02d446e6dd | ||
|
|
73308ee54f | ||
|
|
99bd26ac8d | ||
|
|
27cf349599 | ||
|
|
38f02606ad | ||
|
|
e50f6f1c19 | ||
|
|
032a512b22 | ||
|
|
d86a2dc568 | ||
|
|
9d5a59fd06 | ||
|
|
1ba0e0c2a0 | ||
|
|
3b72d8970b | ||
|
|
d096a2d5f5 | ||
|
|
2754f3040f | ||
|
|
33bdcbc029 | ||
|
|
84b45c4840 | ||
|
|
b3e08777fa | ||
|
|
84e62dbbdf | ||
|
|
055a4d3c94 | ||
|
|
99563d2a4b | ||
|
|
8fb3560f39 | ||
|
|
8e4e6d54a6 | ||
|
|
70b852ca7e |
28
.github/workflows/deploy-v2-site.yml
vendored
Normal file
28
.github/workflows/deploy-v2-site.yml
vendored
Normal 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
28
.github/workflows/deploy-v3-site.yml
vendored
Normal 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
|
||||
19
.github/workflows/preview.yml
vendored
19
.github/workflows/preview.yml
vendored
@ -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
|
||||
4
.github/workflows/release-tag.yml
vendored
4
.github/workflows/release-tag.yml
vendored
@ -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
|
||||
|
||||
@ -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
|
||||
@ -50,11 +50,9 @@ Vant uses `px` unit by default,you 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.
|
||||
|
||||
@ -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` 事件。
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/area-data",
|
||||
"version": "1.1.0",
|
||||
"version": "1.1.1",
|
||||
"description": "Vant 省市区数据",
|
||||
"main": "lib/index.js",
|
||||
"publishConfig": {
|
||||
|
||||
@ -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: '建德市',
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
# 更新日志
|
||||
|
||||
## v3.10.2
|
||||
|
||||
`2021-04-19`
|
||||
|
||||
- 修复搜索框图标不展示的问题
|
||||
- 修复 import type 可能导致分析组件样式依赖关系错误的问题
|
||||
|
||||
## v3.10.1
|
||||
|
||||
`2021-04-16`
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# 更新日志
|
||||
|
||||
### v1.1.2
|
||||
|
||||
`2021-04-22`
|
||||
|
||||
- 修复 `useScrollParent` 在 SSR 下报错的问题
|
||||
|
||||
### v1.1.1
|
||||
|
||||
`2021-04-16`
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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>();
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -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>
|
||||
```
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -277,3 +277,9 @@ body {
|
||||
```
|
||||
|
||||
这个问题的原因是当元素设置了 `overflow-x: hidden` 样式时,该元素的 `overflow-y` 会被浏览器设置为 `auto`,而不是默认值 `visible`,导致 List 无法正确地判断滚动容器。解决方法是去除该样式,或者在 html 和 body 标签上添加 `height: 100%` 样式。
|
||||
|
||||
### direction 属性设置为 up 后一直触发加载?
|
||||
|
||||
设置 `direction` 属性为 up 后,当滚动条处于页面顶部时,就会触发 List 组件的加载。
|
||||
|
||||
因此在使用该属性时,建议在每次数据加载完成后,将滚动条滚动至页面底部或非顶部的位置。
|
||||
|
||||
@ -18,7 +18,7 @@ export default {
|
||||
title: '日期選擇',
|
||||
confirm: '確定',
|
||||
startEnd: '開始/結束',
|
||||
weekdays: ['日', '壹', '二', '三', '四', '五', '六'],
|
||||
weekdays: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
monthTitle: (year: number, month: number) => `${year}年${month}月`,
|
||||
rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`,
|
||||
},
|
||||
|
||||
@ -18,7 +18,7 @@ export default {
|
||||
title: '日期選擇',
|
||||
confirm: '確定',
|
||||
startEnd: '開始/結束',
|
||||
weekdays: ['日', '壹', '二', '三', '四', '五', '六'],
|
||||
weekdays: ['日', '一', '二', '三', '四', '五', '六'],
|
||||
monthTitle: (year: number, month: number) => `${year}年${month}月`,
|
||||
rangePrompt: (maxRange: number) => `選擇天數不能超過 ${maxRange} 天`,
|
||||
},
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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" />
|
||||
```
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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');
|
||||
});
|
||||
|
||||
@ -36,6 +36,7 @@ export default defineComponent({
|
||||
if (props.plain) {
|
||||
return {
|
||||
color: props.textColor || props.color,
|
||||
borderColor: props.color,
|
||||
};
|
||||
}
|
||||
return {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -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();
|
||||
});
|
||||
|
||||
40
yarn.lock
40
yarn.lock
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user