mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
1aa1b3d3a5
@ -10,6 +10,24 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
|
||||
- Minor version：released every one to two months, including backwards compatible features.
|
||||
- Major version：including breaking changes and new features.
|
||||
|
||||
### [v2.10.9](https://github.com/youzan/vant/compare/v2.10.8...v2.10.9)
|
||||
|
||||
`2020-10-01`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Locale: Add German translations [#7245](https://github.com/youzan/vant/issues/7245)
|
||||
- CollapseItem: add toggle method [#7281](https://github.com/youzan/vant/issues/7281)
|
||||
- Pagination: add page、prev-text、next-text slot [#7222](https://github.com/youzan/vant/issues/7222)
|
||||
- Tab: skip rendering empty pane [#7238](https://github.com/youzan/vant/issues/7238)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Swipe: fix prev、next method types [#7270](https://github.com/youzan/vant/issues/7270)
|
||||
- Button: incorrect ref in for [#7237](https://github.com/youzan/vant/issues/7237)
|
||||
- Field: incorrect maxlength slicing [#7284](https://github.com/youzan/vant/issues/7284)
|
||||
- @vant/markdown-vetur: fix Windows system build vetur problem [#7277](https://github.com/youzan/vant/issues/7277) [#7287](https://github.com/youzan/vant/issues/7287)
|
||||
|
||||
### [v2.10.8](https://github.com/youzan/vant/compare/v2.10.7...v2.10.8)
|
||||
|
||||
`2020-09-21`
|
||||
|
||||
@ -10,6 +10,24 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
|
||||
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
|
||||
|
||||
### [v2.10.9](https://github.com/youzan/vant/compare/v2.10.8...v2.10.9)
|
||||
|
||||
`2020-10-01`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Locale: 新增德语语言包 [#7245](https://github.com/youzan/vant/issues/7245)
|
||||
- CollapseItem: 新增 toggle 方法，用于主动控制面板展开或收起 [#7281](https://github.com/youzan/vant/issues/7281)
|
||||
- Pagination: 新增 page、prev-text、next-text 插槽 [#7222](https://github.com/youzan/vant/issues/7222)
|
||||
- Tab: 当标签页内容为空时，不再渲染空的 `van-tab-pane` 节点 [#7238](https://github.com/youzan/vant/issues/7238)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Swipe: 修复 prev、next 方法缺少类型定义的问题 [#7270](https://github.com/youzan/vant/issues/7270)
|
||||
- Button: 修复在 v-for 中渲染时 ref 不正确的问题 [#7237](https://github.com/youzan/vant/issues/7237)
|
||||
- Field: 修复设置 maxlength 后在中间输入时截断结果不正确的问题 [#7284](https://github.com/youzan/vant/issues/7284)
|
||||
- @vant/markdown-vetur: 修复 Windows 系统下的兼容问题 [#7277](https://github.com/youzan/vant/issues/7277) [#7287](https://github.com/youzan/vant/issues/7287)
|
||||
|
||||
### [v2.10.8](https://github.com/youzan/vant/compare/v2.10.7...v2.10.8)
|
||||
|
||||
`2020-09-21`
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
这里提供了 Vant 现有的设计资源，更多资源还在整理中。
|
||||
Vant 是基于有赞 [Zan Design System](https://design.youzan.com/) 视觉规范实现的组件库，在这里可以下载 Vant 的设计资源。
|
||||
|
||||
## 设计稿
|
||||
|
||||
### 组件设计稿（Sketch）
|
||||
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
{
|
||||
"name": "@vant/markdown-vetur",
|
||||
"version": "2.0.1",
|
||||
"version": "2.0.2",
|
||||
"description": "simple parse markdown to vue component description for vetur auto-completion",
|
||||
"main": "lib/index.js",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/youzan/vant/tree/dev/packages/vant-markdown-vetur",
|
||||
"author": "zhangshuai",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
"access": "public",
|
||||
"registry": "https://registry.npmjs.org/"
|
||||
},
|
||||
"files": [
|
||||
"lib"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable no-cond-assign */
|
||||
const TITLE_REG = /^(#+)\s+([^\n]*)/;
|
||||
const TABLE_REG = /^\|.+\n\|\s*-+/;
|
||||
const TABLE_REG = /^\|.+\r?\n\|\s*-+/;
|
||||
const TD_REG = /\s*`[^`]+`\s*|([^|`]+)/g;
|
||||
const TABLE_SPLIT_LINE_REG = /^\|\s*-/;
|
||||
|
||||
@ -27,7 +27,7 @@ function readLine(input: string) {
|
||||
function splitTableLine(line: string) {
|
||||
line = line.replace('\\|', 'JOIN');
|
||||
|
||||
const items = line.split('|').map(item => item.trim().replace('JOIN', '|'));
|
||||
const items = line.split('|').map((item) => item.trim().replace('JOIN', '|'));
|
||||
|
||||
// remove pipe character on both sides
|
||||
items.pop();
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
"@nodelib/fs.scandir@2.1.3":
|
||||
version "2.1.3"
|
||||
resolved "http://registry.npm.qima-inc.com/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
|
||||
resolved "https://registry.npm.taobao.org/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
|
||||
integrity sha1-Olgr21OATGum0UZXnEblITDPSjs=
|
||||
dependencies:
|
||||
"@nodelib/fs.stat" "2.0.3"
|
||||
@ -12,45 +12,45 @@
|
||||
|
||||
"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
|
||||
version "2.0.3"
|
||||
resolved "http://registry.npm.qima-inc.com/@nodelib/fs.stat/download/@nodelib/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
|
||||
resolved "https://registry.npm.taobao.org/@nodelib/fs.stat/download/@nodelib/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
|
||||
integrity sha1-NNxfTKu8cg9OYPdadH5+zWwXW9M=
|
||||
|
||||
"@nodelib/fs.walk@^1.2.3":
|
||||
version "1.2.4"
|
||||
resolved "http://registry.npm.qima-inc.com/@nodelib/fs.walk/download/@nodelib/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
|
||||
resolved "https://registry.npm.taobao.org/@nodelib/fs.walk/download/@nodelib/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
|
||||
integrity sha1-ARuSAqcKY2bkNspcBlhEUoqwSXY=
|
||||
dependencies:
|
||||
"@nodelib/fs.scandir" "2.1.3"
|
||||
fastq "^1.6.0"
|
||||
|
||||
"@types/fs-extra@^8.1.0":
|
||||
version "8.1.0"
|
||||
resolved "http://registry.npm.qima-inc.com/@types/fs-extra/download/@types/fs-extra-8.1.0.tgz#1114834b53c3914806cd03b3304b37b3bd221a4d"
|
||||
integrity sha1-ERSDS1PDkUgGzQOzMEs3s70iGk0=
|
||||
version "8.1.1"
|
||||
resolved "https://registry.npm.taobao.org/@types/fs-extra/download/@types/fs-extra-8.1.1.tgz#1e49f22d09aa46e19b51c0b013cb63d0d923a068"
|
||||
integrity sha1-HknyLQmqRuGbUcCwE8tj0NkjoGg=
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/node@*":
|
||||
version "13.9.3"
|
||||
resolved "http://registry.npm.qima-inc.com/@types/node/download/@types/node-13.9.3.tgz#6356df2647de9eac569f9a52eda3480fa9e70b4d"
|
||||
integrity sha1-Y1bfJkfenqxWn5pS7aNID6nnC00=
|
||||
version "14.11.2"
|
||||
resolved "https://registry.npm.taobao.org/@types/node/download/@types/node-14.11.2.tgz?cache=0&sync_timestamp=1600732726474&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.11.2.tgz#2de1ed6670439387da1c9f549a2ade2b0a799256"
|
||||
integrity sha1-LeHtZnBDk4faHJ9UmireKwp5klY=
|
||||
|
||||
at-least-node@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "http://registry.npm.qima-inc.com/at-least-node/download/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
|
||||
resolved "https://registry.npm.taobao.org/at-least-node/download/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
|
||||
integrity sha1-YCzUtG6EStTv/JKoARo8RuAjjcI=
|
||||
|
||||
braces@^3.0.1:
|
||||
version "3.0.2"
|
||||
resolved "http://registry.npm.qima-inc.com/braces/download/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
|
||||
resolved "https://registry.npm.taobao.org/braces/download/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
|
||||
integrity sha1-NFThpGLujVmeI23zNs2epPiv4Qc=
|
||||
dependencies:
|
||||
fill-range "^7.0.1"
|
||||
|
||||
fast-glob@^3.2.2:
|
||||
version "3.2.2"
|
||||
resolved "http://registry.npm.qima-inc.com/fast-glob/download/fast-glob-3.2.2.tgz#ade1a9d91148965d4bf7c51f72e1ca662d32e63d"
|
||||
integrity sha1-reGp2RFIll1L98UfcuHKZi0y5j0=
|
||||
version "3.2.4"
|
||||
resolved "https://registry.npm.taobao.org/fast-glob/download/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
|
||||
integrity sha1-0grvv5lXk4Pn88xmUpFYybmFVNM=
|
||||
dependencies:
|
||||
"@nodelib/fs.stat" "^2.0.2"
|
||||
"@nodelib/fs.walk" "^1.2.3"
|
||||
@ -60,23 +60,23 @@ fast-glob@^3.2.2:
|
||||
picomatch "^2.2.1"
|
||||
|
||||
fastq@^1.6.0:
|
||||
version "1.6.1"
|
||||
resolved "http://registry.npm.qima-inc.com/fastq/download/fastq-1.6.1.tgz#4570c74f2ded173e71cf0beb08ac70bb85826791"
|
||||
integrity sha1-RXDHTy3tFz5xzwvrCKxwu4WCZ5E=
|
||||
version "1.8.0"
|
||||
resolved "https://registry.npm.taobao.org/fastq/download/fastq-1.8.0.tgz#550e1f9f59bbc65fe185cb6a9b4d95357107f481"
|
||||
integrity sha1-VQ4fn1m7xl/hhctqm02VNXEH9IE=
|
||||
dependencies:
|
||||
reusify "^1.0.4"
|
||||
|
||||
fill-range@^7.0.1:
|
||||
version "7.0.1"
|
||||
resolved "http://registry.npm.qima-inc.com/fill-range/download/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
|
||||
resolved "https://registry.npm.taobao.org/fill-range/download/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
|
||||
integrity sha1-GRmmp8df44ssfHflGYU12prN2kA=
|
||||
dependencies:
|
||||
to-regex-range "^5.0.1"
|
||||
|
||||
fs-extra@^9.0.0:
|
||||
version "9.0.0"
|
||||
resolved "http://registry.npm.qima-inc.com/fs-extra/download/fs-extra-9.0.0.tgz#b6afc31036e247b2466dc99c29ae797d5d4580a3"
|
||||
integrity sha1-tq/DEDbiR7JGbcmcKa55fV1FgKM=
|
||||
version "9.0.1"
|
||||
resolved "https://registry.npm.taobao.org/fs-extra/download/fs-extra-9.0.1.tgz?cache=0&sync_timestamp=1592843137563&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffs-extra%2Fdownload%2Ffs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
|
||||
integrity sha1-kQ2gBiQ3ukw5/t2GPxZ1zP78ufw=
|
||||
dependencies:
|
||||
at-least-node "^1.0.0"
|
||||
graceful-fs "^4.2.0"
|
||||
@ -85,36 +85,36 @@ fs-extra@^9.0.0:
|
||||
|
||||
glob-parent@^5.1.0:
|
||||
version "5.1.1"
|
||||
resolved "http://registry.npm.qima-inc.com/glob-parent/download/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
|
||||
resolved "https://registry.npm.taobao.org/glob-parent/download/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
|
||||
integrity sha1-tsHvQXxOVmPqSY8cRa+saRa7wik=
|
||||
dependencies:
|
||||
is-glob "^4.0.1"
|
||||
|
||||
graceful-fs@^4.1.6, graceful-fs@^4.2.0:
|
||||
version "4.2.3"
|
||||
resolved "http://registry.npm.qima-inc.com/graceful-fs/download/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
|
||||
integrity sha1-ShL/G2A3bvCYYsIJPt2Qgyi+hCM=
|
||||
version "4.2.4"
|
||||
resolved "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
|
||||
integrity sha1-Ila94U02MpWMRl68ltxGfKB6Kfs=
|
||||
|
||||
is-extglob@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "http://registry.npm.qima-inc.com/is-extglob/download/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
|
||||
resolved "https://registry.npm.taobao.org/is-extglob/download/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
|
||||
integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
|
||||
|
||||
is-glob@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "http://registry.npm.qima-inc.com/is-glob/download/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
|
||||
resolved "https://registry.npm.taobao.org/is-glob/download/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
|
||||
integrity sha1-dWfb6fL14kZ7x3q4PEopSCQHpdw=
|
||||
dependencies:
|
||||
is-extglob "^2.1.1"
|
||||
|
||||
is-number@^7.0.0:
|
||||
version "7.0.0"
|
||||
resolved "http://registry.npm.qima-inc.com/is-number/download/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
|
||||
resolved "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
|
||||
integrity sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=
|
||||
|
||||
jsonfile@^6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "http://registry.npm.qima-inc.com/jsonfile/download/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179"
|
||||
resolved "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179"
|
||||
integrity sha1-mJZsuiFDeMjIS4LghZB7QL9hQXk=
|
||||
dependencies:
|
||||
universalify "^1.0.0"
|
||||
@ -122,13 +122,13 @@ jsonfile@^6.0.1:
|
||||
graceful-fs "^4.1.6"
|
||||
|
||||
merge2@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "http://registry.npm.qima-inc.com/merge2/download/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
|
||||
integrity sha1-WzZu6DsvFYLEj4fkfPGpNSEDyoE=
|
||||
version "1.4.1"
|
||||
resolved "https://registry.npm.taobao.org/merge2/download/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
|
||||
integrity sha1-Q2iJL4hekHRVpv19xVwMnUBJkK4=
|
||||
|
||||
micromatch@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "http://registry.npm.qima-inc.com/micromatch/download/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
|
||||
resolved "https://registry.npm.taobao.org/micromatch/download/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
|
||||
integrity sha1-T8sJmb+fvC/L3SEvbWKbmlbDklk=
|
||||
dependencies:
|
||||
braces "^3.0.1"
|
||||
@ -136,27 +136,27 @@ micromatch@^4.0.2:
|
||||
|
||||
picomatch@^2.0.5, picomatch@^2.2.1:
|
||||
version "2.2.2"
|
||||
resolved "http://registry.npm.qima-inc.com/picomatch/download/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
|
||||
resolved "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
|
||||
integrity sha1-IfMz6ba46v8CRo9RRupAbTRfTa0=
|
||||
|
||||
reusify@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "http://registry.npm.qima-inc.com/reusify/download/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
|
||||
resolved "https://registry.npm.taobao.org/reusify/download/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
|
||||
integrity sha1-kNo4Kx4SbvwCFG6QhFqI2xKSXXY=
|
||||
|
||||
run-parallel@^1.1.9:
|
||||
version "1.1.9"
|
||||
resolved "http://registry.npm.qima-inc.com/run-parallel/download/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
|
||||
resolved "https://registry.npm.taobao.org/run-parallel/download/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
|
||||
integrity sha1-yd06fPn0ssS2JE4XOm7YZuYd1nk=
|
||||
|
||||
to-regex-range@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "http://registry.npm.qima-inc.com/to-regex-range/download/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
|
||||
resolved "https://registry.npm.taobao.org/to-regex-range/download/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
|
||||
integrity sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=
|
||||
dependencies:
|
||||
is-number "^7.0.0"
|
||||
|
||||
universalify@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "http://registry.npm.qima-inc.com/universalify/download/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
|
||||
resolved "https://registry.npm.taobao.org/universalify/download/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
|
||||
integrity sha1-thodoXPoQ1sv48Z9Kbmt+FlL0W0=
|
||||
|
||||
@ -113,7 +113,7 @@ export default {
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ---------------- | ------------------ | --------------------- | ------------ |
|
||||
|
||||
@ -113,7 +113,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ---------------- | ------------ | --------------------- | ------ |
|
||||
|
||||
@ -90,7 +90,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ----- | ------------------------- | ------------- | ------------ |
|
||||
|
||||
@ -90,7 +90,7 @@ app.use(Area);
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -313,7 +313,7 @@ Following props are supported when the type is multiple
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ----- | ----------------------------------- | --------- | ------------ |
|
||||
|
||||
@ -317,7 +317,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | ---------------------- | ---- | ------ |
|
||||
|
||||
@ -265,7 +265,7 @@ export default {
|
||||
|
||||
### CheckboxGroup Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
@ -273,7 +273,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call
|
||||
|
||||
### Checkbox Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ------ | ------------------- | ------------------- | ------------ |
|
||||
|
||||
@ -285,7 +285,7 @@ export default {
|
||||
|
||||
### CheckboxGroup 方法
|
||||
|
||||
通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
@ -293,7 +293,7 @@ export default {
|
||||
|
||||
### Checkbox 方法
|
||||
|
||||
通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -5,6 +5,7 @@ import { raf, doubleRaf, createNamespace } from '../utils';
|
||||
|
||||
// Composition
|
||||
import { useParent } from '@vant/use';
|
||||
import { useExpose } from '../composition/use-expose';
|
||||
import { useLazyRender } from '../composition/use-lazy-render';
|
||||
|
||||
// Components
|
||||
@ -82,9 +83,13 @@ export default createComponent({
|
||||
});
|
||||
});
|
||||
|
||||
const toggle = (value = !expanded.value) => {
|
||||
parent.toggle(currentName.value, value);
|
||||
};
|
||||
|
||||
const onClickTitle = () => {
|
||||
if (!props.disabled) {
|
||||
parent.toggle(currentName.value, !expanded.value);
|
||||
toggle();
|
||||
}
|
||||
};
|
||||
|
||||
@ -126,6 +131,8 @@ export default createComponent({
|
||||
</div>
|
||||
));
|
||||
|
||||
useExpose({ toggle });
|
||||
|
||||
return () => (
|
||||
<div class={[bem({ border: index.value && props.border })]}>
|
||||
{renderTitle()}
|
||||
|
||||
@ -127,3 +127,11 @@ export default {
|
||||
| icon | Custom icon |
|
||||
| title | Custom title |
|
||||
| right-icon | Custom right icon |
|
||||
|
||||
### CollapseItem Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get CollapseItem instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
| toggle `v2.10.9` | Toggle expanded status | _expanded: boolean_ | - |
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
# Collapse 折叠面板
|
||||
|
||||
### 介绍
|
||||
|
||||
将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
@ -118,10 +122,18 @@ export default {
|
||||
|
||||
### CollapseItem Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ---------- | ----------------------------- |
|
||||
| default | 面板内容 |
|
||||
| value | 自定义显示内容 |
|
||||
| icon | 自定义`icon` |
|
||||
| title | 自定义`title` |
|
||||
| right-icon | 自定义右侧按钮，默认是`arrow` |
|
||||
| 名称 | 说明 |
|
||||
| ---------- | ------------------------------ |
|
||||
| default | 面板内容 |
|
||||
| value | 自定义显示内容 |
|
||||
| icon | 自定义 `icon` |
|
||||
| title | 自定义 `title` |
|
||||
| right-icon | 自定义右侧按钮，默认是 `arrow` |
|
||||
|
||||
### CollapseItem 方法
|
||||
|
||||
通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| toggle `v2.10.9` | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - |
|
||||
|
||||
@ -144,3 +144,61 @@ test('warn when value type is incorrect', () => {
|
||||
expect(error).toHaveBeenCalledTimes(1);
|
||||
console.error = originConsoleError;
|
||||
});
|
||||
|
||||
test('toggle method', (done) => {
|
||||
mount({
|
||||
template: `
|
||||
<van-collapse v-model="active" >
|
||||
<van-collapse-item name="a" ref="a" />
|
||||
<van-collapse-item name="b" ref="b" />
|
||||
</van-collapse>
|
||||
`,
|
||||
data() {
|
||||
return { active: [] };
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.a.toggle();
|
||||
expect(this.active).toEqual(['a']);
|
||||
|
||||
this.$refs.b.toggle();
|
||||
expect(this.active).toEqual(['a', 'b']);
|
||||
|
||||
this.$refs.b.toggle(false);
|
||||
expect(this.active).toEqual(['a']);
|
||||
|
||||
this.$refs.a.toggle();
|
||||
expect(this.active).toEqual([]);
|
||||
|
||||
done();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('toggle method in accordion mode', (done) => {
|
||||
mount({
|
||||
template: `
|
||||
<van-collapse v-model="active" accordion>
|
||||
<van-collapse-item name="a" ref="a" />
|
||||
<van-collapse-item name="b" ref="b" />
|
||||
</van-collapse>
|
||||
`,
|
||||
data() {
|
||||
return { active: '' };
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.a.toggle();
|
||||
expect(this.active).toEqual('a');
|
||||
|
||||
this.$refs.b.toggle();
|
||||
expect(this.active).toEqual('b');
|
||||
|
||||
this.$refs.b.toggle(false);
|
||||
expect(this.active).toEqual('');
|
||||
|
||||
this.$refs.a.toggle();
|
||||
expect(this.active).toEqual('a');
|
||||
|
||||
done();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
@ -157,7 +157,7 @@ export default {
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ----- | ---------------- | --------- | ------------ |
|
||||
|
||||
@ -167,7 +167,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -295,7 +295,7 @@ Following props are supported when the type is time
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ------------------ | ------------------- | --------- | ------------ |
|
||||
|
||||
@ -304,7 +304,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -164,11 +164,11 @@ Use `active-color` prop to custom active color of the title and options.
|
||||
|
||||
### DropdownItem Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ------ | -------------- | ------------- | ------------ |
|
||||
| toggle | Toggle display | show: boolean | - |
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ------ | -------------- | --------------- | ------------ |
|
||||
| toggle | Toggle display | _show: boolean_ | - |
|
||||
|
||||
### Data Structure of Option
|
||||
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
# DropdownMenu 下拉菜单
|
||||
|
||||
### 介绍
|
||||
|
||||
向下弹出的菜单列表。
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
@ -168,11 +172,11 @@ export default {
|
||||
|
||||
### DropdownItem 方法
|
||||
|
||||
通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - |
|
||||
| toggle | 切换菜单展示状态，传 `true` 为显示，`false` 为隐藏，不传参为取反 | _show?: boolean_ | - |
|
||||
|
||||
### Option 数据结构
|
||||
|
||||
|
||||
@ -271,7 +271,7 @@ Field support all native events of input tag
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ----- | ------------------- | --------- | ------------ |
|
||||
|
||||
@ -294,7 +294,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | -------------- | ---- | ------ |
|
||||
|
||||
@ -240,10 +240,15 @@ export default createComponent({
|
||||
const updateValue = (value, trigger = 'onChange') => {
|
||||
value = isDef(value) ? String(value) : '';
|
||||
|
||||
// native maxlength not work when type is number
|
||||
const { maxlength } = props;
|
||||
// native maxlength have incorrect line-break counting
|
||||
// see: https://github.com/youzan/vant/issues/5033
|
||||
const { maxlength, modelValue } = props;
|
||||
if (isDef(maxlength) && value.length > maxlength) {
|
||||
value = value.slice(0, maxlength);
|
||||
if (modelValue && modelValue.length === +maxlength) {
|
||||
value = modelValue;
|
||||
} else {
|
||||
value = value.slice(0, maxlength);
|
||||
}
|
||||
}
|
||||
|
||||
if (props.type === 'number' || props.type === 'digit') {
|
||||
|
||||
@ -171,17 +171,25 @@ test('maxlength', async () => {
|
||||
value: 1234,
|
||||
type: 'number',
|
||||
},
|
||||
listeners: {
|
||||
input(value) {
|
||||
wrapper && wrapper.setProps({ value });
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
expect(input.element.value).toEqual('123');
|
||||
|
||||
input.element.value = 1234;
|
||||
await later();
|
||||
input.trigger('input');
|
||||
|
||||
expect(input.element.value).toEqual('123');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('123');
|
||||
|
||||
// see: https://github.com/youzan/vant/issues/7265
|
||||
input.element.value = 1423;
|
||||
input.trigger('input');
|
||||
expect(input.element.value).toEqual('123');
|
||||
});
|
||||
|
||||
test('clearable prop', () => {
|
||||
|
||||
@ -467,7 +467,7 @@ export default {
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -508,7 +508,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -20,7 +20,8 @@
|
||||
color: @grid-item-text-color;
|
||||
font-size: @grid-item-text-font-size;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
// https://github.com/youzan/vant/issues/3894
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&__icon + &__text {
|
||||
|
||||
@ -163,7 +163,7 @@ export default {
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ----- | --------------------- | --------- | ------------ |
|
||||
|
||||
@ -178,7 +178,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -4,18 +4,20 @@
|
||||
|
||||
The default language of Vant is Chinese. If you want to use other languages, you can follow the instructions below.
|
||||
|
||||
## Usage
|
||||
|
||||
### Switch languages
|
||||
|
||||
Vant supports multiple languages with the Locale component, and the `Locale.use` method allows you to switch to different languages.
|
||||
|
||||
```js
|
||||
import { Locale } from 'vant';
|
||||
import enUS from 'vant/lib/locale/lang/en-US';
|
||||
import enUS from 'vant/es/locale/lang/en-US';
|
||||
|
||||
Locale.use('en-US', enUS);
|
||||
```
|
||||
|
||||
### Modify default configs
|
||||
### Override default configs
|
||||
|
||||
Use `Locale.add` method to modify the default configs.
|
||||
|
||||
@ -52,3 +54,7 @@ Current supported languages:
|
||||
| Turkish | tr-TR |
|
||||
|
||||
> View all language configs [Here](https://github.com/youzan/vant/tree/dev/src/locale/lang).
|
||||
|
||||
### Add new language
|
||||
|
||||
If you can’t find the language you need, please send us a Pull Request to add the new language pack, you can refer to [Add German language pack](https://github.com/youzan/vant/pull/7245) PR.
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案。
|
||||
Vant 采用中文作为默认语言，同时支持多语言切换，请按照下方教程进行国际化设置。
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 多语言切换
|
||||
|
||||
@ -10,12 +12,13 @@ Vant 通过 Locale 组件实现多语言支持，使用 `Locale.use` 方法可
|
||||
|
||||
```js
|
||||
import { Locale } from 'vant';
|
||||
import enUS from 'vant/lib/locale/lang/en-US';
|
||||
// 引入英文语言包
|
||||
import enUS from 'vant/es/locale/lang/en-US';
|
||||
|
||||
Locale.use('en-US', enUS);
|
||||
```
|
||||
|
||||
### 修改默认文案
|
||||
### 覆盖语言包
|
||||
|
||||
通过 `Locale.add` 方法可以实现文案的修改和扩展，示例如下：
|
||||
|
||||
@ -33,7 +36,7 @@ const messages = {
|
||||
Locale.add(messages);
|
||||
```
|
||||
|
||||
### 配置文件
|
||||
### 语言包
|
||||
|
||||
目前支持的语言:
|
||||
|
||||
@ -51,8 +54,22 @@ Locale.add(messages);
|
||||
| 罗马尼亚语 | ro-RO |
|
||||
| 挪威语 | nb-NO |
|
||||
|
||||
> 在 [这里](https://github.com/youzan/vant/tree/dev/src/locale/lang) 查看所有的 i18n 配置文件。
|
||||
> 在 [这里](https://github.com/youzan/vant/tree/dev/src/locale/lang) 查看所有的语言包源文件。
|
||||
|
||||
### Sku 组件
|
||||
## 常见问题
|
||||
|
||||
### 找不到所需的语言包？
|
||||
|
||||
如果上方列表中没有你需要的语言，欢迎给我们提 Pull Request 来增加新的语言包，改动内容可以参考[增加德语语言包](https://github.com/youzan/vant/pull/7245) 的 PR。
|
||||
|
||||
### 业务代码如何实现国际化？
|
||||
|
||||
可以使用 [vue-i18n](https://github.com/kazupon/vue-i18n) 来实现。
|
||||
|
||||
### 以 CDN 形式引入时，如何使用语言包？
|
||||
|
||||
目前没有提供 CDN 形式的语言包，可以手动拷贝语言包的内容来使用。
|
||||
|
||||
### 语言包中不包含 Sku 组件？
|
||||
|
||||
语言包中默认不包含 Sku 业务组件的语言配置，因此如果有 Sku 组件的国际化需求，请自行配置国际化文案。
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
数字虚拟键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用。
|
||||
虚拟数字键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用。
|
||||
|
||||
### 引入
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### Custom Render
|
||||
### Custom Button
|
||||
|
||||
```html
|
||||
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
|
||||
@ -83,8 +83,8 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description | Default |
|
||||
| Name | Description | SlotProps |
|
||||
| --- | --- | --- |
|
||||
| prev-text | custom prev slot | `-` |
|
||||
| next-text | custom next slot | `-` |
|
||||
| page | pagination item slot | `{ number: number, text: string, active: boolean }` |
|
||||
| page `v2.10.9` | Custom pagination item | _{ number: number, text: string, active: boolean }_ |
|
||||
| prev-text `v2.10.9` | Custom prev text | `-` |
|
||||
| next-text `v2.10.9` | Custom next text | `-` |
|
||||
|
||||
@ -14,6 +14,8 @@ app.use(Pagination);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过 `v-model` 来绑定当前页码。
|
||||
|
||||
```html
|
||||
<van-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
|
||||
```
|
||||
@ -30,12 +32,16 @@ export default {
|
||||
|
||||
### 简单模式
|
||||
|
||||
将 `mode` 设置为 `simple` 来切换到简单模式，此时分页器不会展示具体的页码按钮。
|
||||
|
||||
```html
|
||||
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
|
||||
```
|
||||
|
||||
### 显示省略号
|
||||
|
||||
设置 `force-ellipses` 后会展示省略号按钮，点击后可以快速跳转。
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
@ -45,7 +51,9 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### 自定义渲染
|
||||
### 自定义按钮
|
||||
|
||||
通过 `prev-text`、`next-text` 等插槽来自定义分页按钮的内容。
|
||||
|
||||
```html
|
||||
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
|
||||
@ -83,8 +91,8 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 描述 | 默认值 |
|
||||
| 名称 | 描述 | SlotProps |
|
||||
| --- | --- | --- |
|
||||
| prev-text | 自定义上一页插槽 | `-` |
|
||||
| next-text | 自定义下一页插槽 | `-` |
|
||||
| page | 自定义页码插槽 | `{ number: number, text: string, active: boolean }` |
|
||||
| page `v2.10.9` | 自定义页码 | _{ number: number, text: string, active: boolean }_ |
|
||||
| prev-text `v2.10.9` | 自定义上一页按钮文字 | `-` |
|
||||
| next-text `v2.10.9` | 自定义下一页按钮文字 | `-` |
|
||||
|
||||
@ -56,14 +56,14 @@ export default {
|
||||
'zh-CN': {
|
||||
title2: '简单模式',
|
||||
title3: '显示省略号',
|
||||
title4: '自定义渲染',
|
||||
title4: '自定义按钮',
|
||||
prevText: '上一页',
|
||||
nextText: '下一页',
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Simple Mode',
|
||||
title3: 'Show ellipses',
|
||||
title4: 'Custom Render',
|
||||
title4: 'Custom Button',
|
||||
prevText: 'Prev',
|
||||
nextText: 'Next',
|
||||
},
|
||||
|
||||
@ -20,18 +20,14 @@ app.use(NumberKeyboard);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="Some tips"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -44,30 +40,32 @@ export default {
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Custom length
|
||||
### Custom Length
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:length="4"
|
||||
:gutter="15"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
```
|
||||
|
||||
### Without mask
|
||||
### Add Gutter
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:gutter="10"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
```
|
||||
|
||||
### Without Mask
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
@ -80,22 +78,19 @@ export default {
|
||||
|
||||
### Hint Error
|
||||
|
||||
Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits.
|
||||
Use `info` to set info message, use `error-info` prop to set error message.
|
||||
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="Some tips"
|
||||
:error-info="errorInfo"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -105,22 +100,18 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
value: '123',
|
||||
showKeyboard: true,
|
||||
errorInfo: '',
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
if (this.value.length === 6) {
|
||||
watch: {
|
||||
value(value) {
|
||||
if (value.length === 6 && value !== '123456') {
|
||||
this.errorInfo = 'Password Mistake';
|
||||
} else {
|
||||
this.errorInfo = '';
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。
|
||||
带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -19,19 +19,19 @@ app.use(NumberKeyboard);
|
||||
|
||||
### 基础用法
|
||||
|
||||
搭配数字键盘组件来实现密码输入功能。
|
||||
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="密码为 6 位数字"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -44,24 +44,30 @@ export default {
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义长度
|
||||
|
||||
通过 `length` 属性来设置密码长度。
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:length="4"
|
||||
:gutter="15"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
```
|
||||
|
||||
### 格子间距
|
||||
|
||||
通过 `gutter` 属性来设置格子之间的间距。
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:gutter="10"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
@ -69,6 +75,8 @@ export default {
|
||||
|
||||
### 明文展示
|
||||
|
||||
将 `mask` 设置为 `false` 可以明文展示输入的内容，适用于短信验证码等场景。
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
@ -78,23 +86,21 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### 错误提示
|
||||
### 提示信息
|
||||
|
||||
通过 `error-info` 属性可以设置错误提示信息，例如当输入六位时提示密码错误。
|
||||
通过 `info` 属性设置提示信息，通过 `error-info` 属性设置错误提示，例如当输入六位时提示密码错误。
|
||||
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="密码为 6 位数字"
|
||||
:error-info="errorInfo"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -104,22 +110,18 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
value: '123',
|
||||
showKeyboard: true,
|
||||
errorInfo: '',
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
if (this.value.length === 6) {
|
||||
watch: {
|
||||
value(value) {
|
||||
if (value.length === 6 && value !== '123456') {
|
||||
this.errorInfo = '密码错误';
|
||||
} else {
|
||||
this.errorInfo = '';
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,48 +1,56 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block ref="basicUsage" :title="t('basicUsage')">
|
||||
<van-password-input
|
||||
:value="value1"
|
||||
:info="t('info')"
|
||||
:focused="keyboard === 'value1'"
|
||||
@focus="keyboard = 'value1'"
|
||||
/>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="!!keyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="keyboard = ''"
|
||||
:value="value.basicUsage"
|
||||
:focused="current === 'basicUsage'"
|
||||
@focus="current = 'basicUsage'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customLength')">
|
||||
<demo-block ref="customLength" :title="t('customLength')">
|
||||
<van-password-input
|
||||
:value="value2"
|
||||
:value="value.customLength"
|
||||
:length="4"
|
||||
gutter="15"
|
||||
:focused="keyboard === 'value2'"
|
||||
@focus="keyboard = 'value2'"
|
||||
:focused="current === 'customLength'"
|
||||
@focus="current = 'customLength'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('removeMask')">
|
||||
<demo-block ref="addGutter" :title="t('addGutter')">
|
||||
<van-password-input
|
||||
:value="value.addGutter"
|
||||
:gutter="10"
|
||||
:focused="current === 'addGutter'"
|
||||
@focus="current = 'addGutter'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block ref="removeMask" :title="t('removeMask')">
|
||||
<van-password-input
|
||||
:value="value3"
|
||||
:mask="false"
|
||||
:focused="keyboard === 'value3'"
|
||||
@focus="keyboard = 'value3'"
|
||||
:value="value.removeMask"
|
||||
:focused="current === 'removeMask'"
|
||||
@focus="current = 'removeMask'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('hintError')">
|
||||
<demo-block ref="showInfo" :title="t('showInfo')">
|
||||
<van-password-input
|
||||
:value="value4"
|
||||
:info="t('info')"
|
||||
:value="value.showInfo"
|
||||
:error-info="errorInfo"
|
||||
:focused="keyboard === 'value4'"
|
||||
@focus="keyboard = 'value4'"
|
||||
:focused="current === 'showInfo'"
|
||||
@focus="current = 'showInfo'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="!!current"
|
||||
@blur="current = ''"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -51,46 +59,76 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
info: '密码为 6 位数字',
|
||||
customLength: '自定义长度',
|
||||
removeMask: '明文展示',
|
||||
hintError: '错误提示',
|
||||
showInfo: '提示信息',
|
||||
addGutter: '格子间距',
|
||||
errorInfo: '密码错误',
|
||||
removeMask: '明文展示',
|
||||
customLength: '自定义长度',
|
||||
},
|
||||
'en-US': {
|
||||
info: 'Some tips',
|
||||
customLength: 'Custom Length',
|
||||
removeMask: 'Remove Mask',
|
||||
hintError: 'Hint Error',
|
||||
showInfo: 'Show Info',
|
||||
addGutter: 'Add Gutter',
|
||||
errorInfo: 'Password Mistake',
|
||||
removeMask: 'Remove Mask',
|
||||
customLength: 'Custom Length',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: '123',
|
||||
value2: '123',
|
||||
value3: '123',
|
||||
value4: '123',
|
||||
keyboard: 'value1',
|
||||
value: {
|
||||
showInfo: '123',
|
||||
addGutter: '123',
|
||||
basicUsage: '123',
|
||||
removeMask: '123',
|
||||
customLength: '123',
|
||||
},
|
||||
current: 'basicUsage',
|
||||
errorInfo: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
const { keyboard } = this;
|
||||
this[keyboard] = (this[keyboard] + key).slice(0, 6);
|
||||
if (this[keyboard].length === 6) {
|
||||
this.errorInfo = this.t('errorInfo');
|
||||
} else {
|
||||
this.errorInfo = '';
|
||||
watch: {
|
||||
current(value) {
|
||||
if (value) {
|
||||
const el = this.$refs[value].$el;
|
||||
const { top } = el.getBoundingClientRect();
|
||||
window.scrollTo(0, window.pageYOffset + top);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
const { value, current } = this;
|
||||
const maxlegnth = current === 'customLength' ? 4 : 6;
|
||||
const newValue = (value[current] + key).slice(0, maxlegnth);
|
||||
|
||||
value[current] = newValue;
|
||||
|
||||
if (
|
||||
current === 'showInfo' &&
|
||||
newValue.length === 6 &&
|
||||
newValue !== '123456'
|
||||
) {
|
||||
this.errorInfo = this.t('errorInfo');
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
const { keyboard } = this;
|
||||
this[keyboard] = this[keyboard].slice(0, this[keyboard].length - 1);
|
||||
const { value, current } = this;
|
||||
value[current] = value[current].slice(0, value[current].length - 1);
|
||||
|
||||
if (current === 'showInfo') {
|
||||
this.errorInfo = '';
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-password-input {
|
||||
min-height: 140vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,62 +14,27 @@ exports[`renders demo correctly 1`] = `
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
<div class="van-password-input__info">密码为 6 位数字</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security van-hairline--surround">
|
||||
<li class="van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security">
|
||||
<li class="van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,6 +60,53 @@ exports[`renders demo correctly 1`] = `
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
<div class="van-password-input__info">密码为 6 位数字</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -285,7 +285,7 @@ Picker events will pass different parameters according to the columns are single
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -310,7 +310,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -67,7 +67,7 @@
|
||||
top: 50%;
|
||||
right: @padding-md;
|
||||
left: @padding-md;
|
||||
z-index: 3;
|
||||
z-index: 2;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -76,7 +76,7 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(
|
||||
|
||||
@ -132,7 +132,7 @@ export default {
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get SwipeCell instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get SwipeCell instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ----- | --------------- | ------------------------ | ------------ |
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
# SwipeCell 滑动单元格
|
||||
|
||||
### 介绍
|
||||
|
||||
可以左右滑动来展示操作按钮的单元格组件。
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
@ -140,7 +144,7 @@ beforeClose 的第一个参数为对象，对象中包含以下属性：
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | ---------------- | ------------------------ | ------ |
|
||||
|
||||
@ -189,7 +189,7 @@ export default {
|
||||
|
||||
### Swipe Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods.
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods..
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -195,7 +195,7 @@ export default {
|
||||
|
||||
### Swipe 方法
|
||||
|
||||
通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -266,7 +266,7 @@ export default {
|
||||
|
||||
### Tabs Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Tabs instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Tabs instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -273,7 +273,7 @@ export default {
|
||||
|
||||
### Tabs 方法
|
||||
|
||||
通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -254,7 +254,7 @@ Use `disabled` prop to disable uploader.
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Uploader instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Uploader instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@ -282,7 +282,7 @@ before-read、after-read、before-delete 执行时会传递以下回调参数：
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Uploader 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Uploader 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
5
types/collapse-item.d.ts
vendored
Normal file
5
types/collapse-item.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
import { VanComponent } from './component';
|
||||
|
||||
export class CollapseItem extends VanComponent {
|
||||
toggle(expanded?: boolean): void;
|
||||
}
|
||||
3
types/index.d.ts
vendored
3
types/index.d.ts
vendored
@ -6,6 +6,7 @@ import { Area } from './area';
|
||||
import { Calendar } from './calendar';
|
||||
import { Checkbox } from './checkbox';
|
||||
import { CheckboxGroup } from './checkbox-group';
|
||||
import { CollapseItem } from './collapse-item';
|
||||
import { CountDown } from './count-down';
|
||||
import { DatetimePicker } from './datetime-picker';
|
||||
import { Dialog } from './dialog';
|
||||
@ -38,7 +39,6 @@ export class CellGroup extends VanComponent {}
|
||||
export class Circle extends VanComponent {}
|
||||
export class Col extends VanComponent {}
|
||||
export class Collapse extends VanComponent {}
|
||||
export class CollapseItem extends VanComponent {}
|
||||
export class ContactCard extends VanComponent {}
|
||||
export class ContactEdit extends VanComponent {}
|
||||
export class ContactList extends VanComponent {}
|
||||
@ -98,6 +98,7 @@ export {
|
||||
Calendar,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
CollapseItem,
|
||||
CountDown,
|
||||
DatetimePicker,
|
||||
Dialog,
|
||||
|
||||
4
types/swipe.d.ts
vendored
4
types/swipe.d.ts
vendored
@ -5,6 +5,10 @@ export type SwipeToOptions = {
|
||||
};
|
||||
|
||||
export class Swipe extends VanComponent {
|
||||
prev(): void;
|
||||
|
||||
next(): void;
|
||||
|
||||
swipeTo(index: number, options?: SwipeToOptions): void;
|
||||
|
||||
resize(): void;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user