Merge branch 'dev' into next

2025-04-28 20:36:37 +08:00 · 2020-01-14 11:16:39 +08:00 · 2020-01-14 11:16:39 +08:00 · ab456a72a0
commit ab456a72a0
parent d9d63959f5 17d46a71ca
31 changed files with 587 additions and 106 deletions
--- a/package.json
+++ b/package.json
@ -60,7 +60,7 @@
    "vue": ">= 2.5.22"
  },
  "devDependencies": {
-    "@vant/cli": "^2.1.4",
+    "@vant/cli": "^2.1.6",
    "vue": "^2.6.11",
    "vue-template-compiler": "^2.6.11"
  },
--- a/packages/vant-cli/README.md
+++ b/packages/vant-cli/README.md
@ -80,7 +80,7 @@ yarn add @vant/cli --dev

 ### changelog

-基于 commit 记录生成更新日志，
+基于 commit 记录生成更新日志

 ### commit-lint

@ -88,4 +88,8 @@ yarn add @vant/cli --dev

 ## 配置

-参见[配置](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)。
+参见[配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)。
+
+## 更新日志
+
+参见[更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)。
--- a/packages/vant-cli/changelog.md
+++ b/packages/vant-cli/changelog.md
@ -1,5 +1,14 @@
 # 更新日志

+### [v2.1.6]
+`2020-01-12`
+
+- 支持自定义 Postcss 配置
+- 支持自定义 devServer 端口
+- 优化文档站点的 meta 字段
+- 新增 API 文档中的版本标签样式
+
+
 ### [v2.1.5]
 `2020-01-10`

--- a/packages/vant-cli/docs/config.md
+++ b/packages/vant-cli/docs/config.md
@ -1,4 +1,23 @@
-# 配置
+# 配置指南
+
+- [配置指南](#)
+  - [vant.config.js](#vantconfigjs)
+    - [name](#name)
+    - [build.css](#buildcss)
+    - [build.site](#buildsite)
+    - [site.title](#sitetitle)
+    - [site.logo](#sitelogo)
+    - [site.description](#sitedescription)
+    - [site.nav](#sitenav)
+    - [site.versions](#siteversions)
+    - [site.baiduAnalytics](#sitebaiduanalytics)
+  - [Webpack](#webpack)
+  - [Babel](#babel)
+    - [默认配置](#-1)
+    - [依赖](#-2)
+  - [Postcss](#postcss)
+    - [默认配置](#-3)
+  - [browserslist](#browserslist)

 ## vant.config.js

@ -179,3 +198,91 @@ module.exports = {
  }
 };
 ```
+
+## Webpack
+
+通过根目录下的`webpack.config.js`文件可以修改 Webpack 配置，配置内容会通过 [webpack-merge](https://github.com/survivejs/webpack-merge) 合并到最终的配置中。
+
+比如修改 devServer 端口：
+
+```js
+module.exports = {
+  devServer: {
+    port: 9000
+  }
+};
+```
+
+## Babel
+
+通过根目录下的`babel.config.js`文件可以对 Babel 进行配置。
+
+### 默认配置
+
+推荐使用`vant-cli`内置的 preset，配置如下：
+
+```js
+module.exports = {
+  presets: ['@vant/cli/preset']
+};
+```
+
+`@vant/cli/preset`中默认包含了以下插件：
+
+- @babel/preset-env（不含 core-js）
+- @babel/preset-typescript
+- @babel/plugin-transform-runtime
+- @babel/plugin-transform-object-assign
+- @babel/plugin-proposal-optional-chaining
+- @babel/plugin-proposal-nullish-coalescing-operator
+- @vue/babel-preset-jsx
+
+### 依赖
+
+由于使用了`@babel/plugin-transform-runtime`来优化 Babel 的 helper 函数，你需要将`@babel/runtime`添加到`package.json`的依赖项：
+
+```json
+{
+  "dependencies": {
+    "@babel/runtime": "7.x"
+  }
+}
+```
+
+如果使用了 JSX 的语法，还需要将`@vue/babel-helper-vue-jsx-merge-props`添加到依赖中：
+
+```json
+{
+  "dependencies": {
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0"
+  }
+}
+```
+
+## Postcss
+
+通过根目录下的`postcss.config.js`文件可以对 Postcss 进行配置。
+
+### 默认配置
+
+`vant-cli`中默认的 Postcss 配置如下：
+
+```js
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};
+```
+
+## browserslist
+
+推荐在`package.json`文件里添加 browserslist 字段，这个值会被`@babel/preset-env`和`autoprefixer`用来确定目标浏览器的版本，保证编译后代码的兼容性。
+
+在移动端浏览器中使用，可以添加如下配置：
+
+```json
+{
+  "browserslist": ["Android >= 4.0", "iOS >= 8"]
+}
+```
--- a/packages/vant-cli/package.json
+++ b/packages/vant-cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vant/cli",
-  "version": "2.1.5",
+  "version": "2.1.6",
  "description": "",
  "main": "lib/index.js",
  "typings": "lib/index.d.ts",
--- a/packages/vant-cli/src/common/constant.ts
+++ b/packages/vant-cli/src/common/constant.ts
@ -22,7 +22,8 @@ export const DOCS_DIR = join(ROOT, 'docs');
 export const SITE_DIST_DIR = join(ROOT, 'site');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
-export const WEBPACK_CONFIG_FILE = join(ROOT, 'webpack.config.js');
+export const ROOT_WEBPACK_CONFIG_FILE = join(ROOT, 'webpack.config.js');
+export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');

 export const DIST_DIR = join(__dirname, '../../dist');
 export const CONFIG_DIR = join(__dirname, '../config');
--- a/packages/vant-cli/src/common/index.ts
+++ b/packages/vant-cli/src/common/index.ts
@ -7,7 +7,12 @@ import {
  readFileSync,
  outputFileSync
 } from 'fs-extra';
-import { SRC_DIR, getVantConfig, WEBPACK_CONFIG_FILE } from './constant';
+import {
+  SRC_DIR,
+  getVantConfig,
+  ROOT_WEBPACK_CONFIG_FILE,
+  ROOT_POSTCSS_CONFIG_FILE
+} from './constant';

 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
@ -96,8 +101,8 @@ export function normalizePath(path: string): string {
 }

 export function getWebpackConfig(): object {
-  if (existsSync(WEBPACK_CONFIG_FILE)) {
-    const config = require(WEBPACK_CONFIG_FILE);
+  if (existsSync(ROOT_WEBPACK_CONFIG_FILE)) {
+    const config = require(ROOT_WEBPACK_CONFIG_FILE);

    if (typeof config === 'function') {
      return config();
@ -109,6 +114,14 @@ export function getWebpackConfig(): object {
  return {};
 }

+export function getPostcssConfig(): object {
+  if (existsSync(ROOT_POSTCSS_CONFIG_FILE)) {
+    return require(ROOT_POSTCSS_CONFIG_FILE);
+  }
+
+  return {};
+}
+
 export type ModuleEnv = 'esmodule' | 'commonjs';
 export type NodeEnv = 'production' | 'development' | 'test';
 export type BuildTarget = 'site' | 'package';
@ -129,8 +142,8 @@ export function isDev() {
  return process.env.NODE_ENV === 'development';
 }

-// Smarter outputFileSync
-// Skip if content unchanged
+// smarter outputFileSync
+// skip output if file content unchanged
 export function smartOutputFile(filePath: string, content: string) {
  if (existsSync(filePath)) {
    const previousContent = readFileSync(filePath, 'utf-8');
--- a/packages/vant-cli/src/compiler/compile-site.ts
+++ b/packages/vant-cli/src/compiler/compile-site.ts
@ -13,7 +13,7 @@ function watch() {

  getPort(
    {
-      port: 8080
+      port: siteDevConfig.devServer!.port
    },
    (err, port) => {
      if (err) {
--- a/packages/vant-cli/src/config/postcss.config.ts
+++ b/packages/vant-cli/src/config/postcss.config.ts
@ -1,5 +1,26 @@
-module.exports = {
+import { getPostcssConfig } from '../common';
+
+type PostcssConfig = object & {
+  plugins?: object;
+};
+
+function mergePostcssConfig(config1: PostcssConfig, config2: PostcssConfig) {
+  const plugins = {
+    ...config1.plugins,
+    ...config2.plugins
+  };
+
+  return {
+    ...config1,
+    ...config2,
+    plugins
+  };
+}
+
+const DEFAULT_CONFIG = {
  plugins: {
    autoprefixer: {}
  }
 };
+
+module.exports = mergePostcssConfig(DEFAULT_CONFIG, getPostcssConfig());
--- a/packages/vant-cli/src/config/webpack.site.dev.ts
+++ b/packages/vant-cli/src/config/webpack.site.dev.ts
@ -44,6 +44,7 @@ export const siteDevBaseConfig = merge(baseConfig as any, {
    'site-mobile': [join(__dirname, '../../site/mobile/main.js')]
  },
  devServer: {
+    port: 8080,
    quiet: true,
    host: '0.0.0.0',
    stats: 'errors-only',
--- a/packages/vant-cli/src/index.ts
+++ b/packages/vant-cli/src/index.ts
@ -11,27 +11,49 @@ import { changelog } from './commands/changelog';
 import { buildSite } from './commands/build-site';
 import { commitLint } from './commands/commit-lint';

-command('dev').action(dev);
+command('dev')
+  .description('Run webpack dev server')
+  .action(dev);

-command('lint').action(lint);
+command('lint')
+  .description('Run eslint and stylelint')
+  .action(lint);

-command('clean').action(clean);
+command('test')
+  .description('Run unit tests through jest')
+  .option(
+    '--watch',
+    'Watch files for changes and rerun tests related to changed files'
+  )
+  .option(
+    '--clearCache',
+    'Clears the configured Jest cache directory and then exits'
+  )
+  .action(test);
+
+command('clean')
+  .description('Clean all dist files')
+  .action(clean);

 command('build')
+  .description('Compile components in production mode')
  .option('--watch', 'Watch file change')
  .action(build);

-command('release').action(release);
+command('release')
+  .description('Compile components and release it')
+  .action(release);

-command('changelog').action(changelog);
+command('build-site')
+  .description('Compile site in production mode')
+  .action(buildSite);

-command('build-site').action(buildSite);
+command('changelog')
+  .description('Generate changelog')
+  .action(changelog);

-command('commit-lint').action(commitLint);
-
-command('test')
-  .option('--watch')
-  .option('--clearCache')
-  .action(test);
+command('commit-lint')
+  .description('Lint commit message')
+  .action(commitLint);

 parse(process.argv);
--- a/src/calendar/components/Month.js
+++ b/src/calendar/components/Month.js
@ -80,6 +80,10 @@ export default createComponent({
  },

  methods: {
+    scrollIntoView() {
+      this.$refs.days.scrollIntoView();
+    },
+
    getDayType(day) {
      const { type, minDate, maxDate, currentDate } = this;

@ -166,12 +170,14 @@ export default createComponent({
    genDays() {
      if (this.visible) {
        return (
-          <div class={bem('days')}>
+          <div ref="days" class={bem('days')}>
            {this.genMark()}
            {this.days.map(this.genDay)}
          </div>
        );
      }
+
+      return <div ref="days" />;
    },

    genDay(item, index) {
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@ -158,7 +158,7 @@ export default createComponent({

        this.months.some((month, index) => {
          if (compareMonth(month, targetDate) === 0) {
-            this.$refs.months[index].$el.scrollIntoView();
+            this.$refs.months[index].scrollIntoView();
            return true;
          }

--- a/src/calendar/test/index.spec.js
+++ b/src/calendar/test/index.spec.js
@ -419,7 +419,7 @@ test('should scroll to current month when show', async done => {
  });

  Element.prototype.scrollIntoView = function() {
-    expect(this).toEqual(wrapper.findAll('.van-calendar__month').at(3).element);
+    expect(this.parentNode).toEqual(wrapper.findAll('.van-calendar__month').at(3).element);
    done();
  };

--- a/src/field/README.md
+++ b/src/field/README.md
@ -195,6 +195,19 @@ Textarea Field can be auto resize when has `autosize` prop
 />
 ```

+### Input Align
+
+Use `input-align` prop to align the input value
+
+```html
+<van-field
+  v-model="value"
+  :label="Text"
+  :placeholder="Input Align Right"
+  input-align="right"
+/>
+```
+
 ## API

 ### Props
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@ -214,6 +214,19 @@ export default {
 />
 ```

+### 输入框内容对齐
+
+通过`input-align`属性可以设置输入框内容的对齐方式
+
+```html
+<van-field
+  v-model="value"
+  :label="文本"
+  :placeholder="输入框内容右对齐"
+  input-align="right"
+/>
+```
+
 ## API

 ### Props
--- a/src/field/demo/index.vue
+++ b/src/field/demo/index.vue
@ -145,6 +145,17 @@
        />
      </van-cell-group>
    </demo-block>
+
+    <demo-block :title="$t('inputAlign')">
+      <van-cell-group>
+        <van-field
+          v-model="value"
+          :label="$t('text')"
+          :placeholder="$t('alignPlaceHolder')"
+          input-align="right"
+        />
+      </van-cell-group>
+    </demo-block>
  </demo-section>
 </template>

@ -171,13 +182,15 @@ export default {
      showWordLimit: '显示字数统计',
      inputReadonly: '输入框只读',
      inputDisabled: '输入框已禁用',
+      inputAlign: '输入框内容对齐',
      smsPlaceholder: '请输入短信验证码',
      textPlaceholder: '请输入文本',
      digitPlaceholder: '请输入整数',
      phonePlaceholder: '请输入手机号',
      textareaAutosize: '高度自适应',
      numberPlaceholder: '请输入数字（支持小数）',
-      messagePlaceholder: '请输入留言'
+      messagePlaceholder: '请输入留言',
+      alignPlaceHolder: '输入框内容右对齐',
    },
    'en-US': {
      tel: 'Tel',
@ -199,13 +212,15 @@ export default {
      showWordLimit: 'Show Word Limit',
      inputReadonly: 'Input Readonly',
      inputDisabled: 'Input Disabled',
+      inputAlign: 'Input Align',
      smsPlaceholder: 'SMS',
      textPlaceholder: 'Text',
      digitPlaceholder: 'Digit',
      phonePlaceholder: 'Phone',
      textareaAutosize: 'Auto Resize',
      numberPlaceholder: 'Number',
-      messagePlaceholder: 'Message'
+      messagePlaceholder: 'Message',
+      alignPlaceHolder: 'Input Align Right',
    }
  },

--- a/src/field/test/snapshots/demo.spec.js.snap
+++ b/src/field/test/snapshots/demo.spec.js.snap
@ -146,5 +146,15 @@ exports[`renders demo correctly 1`] = `
      </div>
    </div>
  </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>文本</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" placeholder="输入框内容右对齐" class="van-field__control van-field__control--right"></div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@ -109,10 +109,4 @@ export default {
    margin-left: @padding-md;
  }
 }
-
-.van-image-preview {
-  img {
-    -webkit-user-drag: none;
-  }
-}
 </style>
--- a/src/image-preview/index.less
+++ b/src/image-preview/index.less
@ -25,8 +25,24 @@
    left: 0;
    transition-property: transform;

-    .van-image__loading {
-      background-color: transparent;
+    img {
+      // disable desktop browser image drag
+      -webkit-user-drag: none;
+    }
+
+    .van-image {
+      &__error {
+        top: 30%;
+        height: 40%;
+      }
+
+      &__error-icon {
+        font-size: 36px;
+      }
+
+      &__loading {
+        background-color: transparent;
+      }
    }
  }

--- a/src/locale/lang/zh-CN.ts
+++ b/src/locale/lang/zh-CN.ts
@ -10,7 +10,7 @@ export default {
  telEmpty: '请填写电话',
  nameEmpty: '请填写姓名',
  nameInvalid: '请输入正确的姓名',
-  confirmDelete: '确定要删除么',
+  confirmDelete: '确定要删除吗',
  telInvalid: '请输入正确的手机号',
  vanCalendar: {
    end: '结束',
--- a/src/locale/lang/zh-HK.ts
+++ b/src/locale/lang/zh-HK.ts
@ -10,7 +10,7 @@ export default {
  telEmpty: '請填寫電話',
  nameEmpty: '請填寫姓名',
  nameInvalid: '請輸入正確的姓名',
-  confirmDelete: '確定要刪除麽',
+  confirmDelete: '確定要刪除嗎',
  telInvalid: '請填寫正確的電話',
  vanCalendar: {
    end: '結束',
--- a/src/number-keyboard/README.md
+++ b/src/number-keyboard/README.md
@ -90,6 +90,45 @@ export default {
 }
 ```

+### Bottom Left Button Content
+
+Use `extra-key` prop to set the content of bottom left button
+
+```html
+<van-button plain type="primary" @touchstart.stop="show = true'">
+  Show Id Card Number Keyboard
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  close-button-text="Close"
+  extra-key="X"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+### Keyboard Title
+
+Use `title` prop to set keyboard title
+
+```html
+<van-button plain type="info" @touchstart.stop="show = true'">
+  Show Custom Title Keyboard
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  close-button-text="Close"
+  title="Keyboard Title"
+  extra-key="."
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
 ## API

 ### Props
--- a/src/number-keyboard/README.zh-CN.md
+++ b/src/number-keyboard/README.zh-CN.md
@ -96,6 +96,45 @@ export default {
 }
 ```

+### 左下角按键内容
+
+通过`extra-key`属性可以设置左下角按键内容
+
+```html
+<van-button plain type="primary" @touchstart.stop="show = true'">
+  弹出身份证号码键盘
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  close-button-text="完成"
+  extra-key="X"
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+### 键盘标题
+
+通过`title`属性可以设置键盘标题
+
+```html
+<van-button plain type="info" @touchstart.stop="show = true'">
+  弹出自定义标题键盘
+</van-button>
+
+<van-number-keyboard
+  :show="show"
+  close-button-text="完成"
+  title="键盘标题"
+  extra-key="."
+  @blur="show = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
 ## API

 ### Props
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@ -43,6 +43,33 @@
        @blur="keyboard = ''"
      />
    </demo-block>
+
+    <demo-block :title="$t('extraKey')">
+      <van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">{{ $t('button3') }}</van-button>
+
+      <van-number-keyboard
+        :show="keyboard === 'extraKey'"
+        :close-button-text="$t('close')"
+        extra-key="X"
+        @blur="keyboard = ''"
+        @input="onInput"
+        @delete="onDelete"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('title')">
+      <van-button plain type="info" @touchstart.stop="keyboard = 'title'">{{ $t('button4') }}</van-button>
+
+      <van-number-keyboard
+        :show="keyboard === 'title'"
+        :close-button-text="$t('close')"
+        :title="$t('title')"
+        extra-key="."
+        @blur="keyboard = ''"
+        @input="onInput"
+        @delete="onDelete"
+      />
+    </demo-block>
  </demo-section>
 </template>

@ -54,20 +81,28 @@ export default {
      custom: '自定义样式',
      button1: '弹出默认键盘',
      button2: '弹出自定义键盘',
+      button3: '弹出身份证号码键盘',
+      button4: '弹出自定义标题键盘',
      close: '完成',
      input: '输入',
      bindValue: '双向绑定',
-      clickToInput: '点此输入'
+      clickToInput: '点此输入',
+      extraKey: '左下角按键内容',
+      title: '键盘标题'
    },
    'en-US': {
      default: 'Default style',
      custom: 'Custom style',
      button1: 'Show Default Keyboard',
      button2: 'Show Custom Keyboard',
+      button3: 'Show Id Card Number Keyboard',
+      button4: 'Show Custom Title Keyboard',
      close: 'Close',
      input: 'Input',
      bindValue: 'Bind Value',
-      clickToInput: 'Click To Input'
+      clickToInput: 'Click To Input',
+      extraKey: 'Bottom Left Button Content',
+      title: 'Keyboard Title'
    }
  },

--- a/src/number-keyboard/test/snapshots/demo.spec.js.snap
+++ b/src/number-keyboard/test/snapshots/demo.spec.js.snap
@ -25,5 +25,17 @@ exports[`renders demo correctly 1`] = `
      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
    </div>
  </div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">弹出身份证号码键盘</span></button>
+    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
+      <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">X</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+    </div>
+  </div>
+  <div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">弹出自定义标题键盘</span></button>
+    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
+      <div class="van-number-keyboard__title van-hairline--top"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+    </div>
+  </div>
 </div>
 `;
--- a/src/password-input/README.md
+++ b/src/password-input/README.md
@ -78,6 +78,53 @@ export default {
 />
 ```

+### Hint Error
+
+Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits
+
+```html
+<!-- PasswordInput -->
+<van-password-input
+  :value="value"
+  :error-info="errorInfo"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+
+<!-- NumberKeyboard -->
+<van-number-keyboard
+  :show="showKeyboard"
+  @input="onInput"
+  @delete="onDelete"
+  @blur="showKeyboard = false"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: '123',
+      showKeyboard: true,
+      errorInfo: ''
+    };
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+      if (this.value.length === 6) {
+        this.errorInfo = 'Password Mistake';
+      } else {
+        this.errorInfo = '';
+      }
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+```
 ## API

 ### Props
--- a/src/password-input/README.zh-CN.md
+++ b/src/password-input/README.zh-CN.md
@ -78,6 +78,54 @@ export default {
 />
 ```

+### 错误提示
+
+通过`error-info`属性可以设置错误提示信息，例如当输入六位时提示密码错误
+
+```html
+<!-- 密码输入框 -->
+<van-password-input
+  :value="value"
+  :error-info="errorInfo"
+  :focused="showKeyboard"
+  @focus="showKeyboard = true"
+/>
+
+<!-- 数字键盘 -->
+<van-number-keyboard
+  :show="showKeyboard"
+  @input="onInput"
+  @delete="onDelete"
+  @blur="showKeyboard = false"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: '123',
+      showKeyboard: true,
+      errorInfo: ''
+    };
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+      if (this.value.length === 6) {
+        this.errorInfo = '密码错误';
+      } else {
+        this.errorInfo = '';
+      }
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+```
+
 ## API

 ### Props
--- a/src/password-input/demo/index.vue
+++ b/src/password-input/demo/index.vue
@ -34,6 +34,15 @@
        @focus="keyboard = 'value3'"
      />
    </demo-block>
+
+    <demo-block :title="$t('hintError')">
+      <van-password-input
+        :value="value4"
+        :error-info="errorInfo"
+        :focused="keyboard === 'value4'"
+        @focus="keyboard = 'value4'"
+      />
+    </demo-block>
  </demo-section>
 </template>

@ -43,12 +52,16 @@ export default {
    'zh-CN': {
      info: '密码为 6 位数字',
      customLength: '自定义长度',
-      removeMask: '明文展示'
+      removeMask: '明文展示',
+      hintError: '错误提示',
+      errorInfo: '密码错误'
    },
    'en-US': {
      info: 'Some tips',
      customLength: 'Custom Length',
-      removeMask: 'Remove Mask'
+      removeMask: 'Remove Mask',
+      hintError: 'Hint Error',
+      errorInfo: 'Password Mistake'
    }
  },

@ -57,7 +70,9 @@ export default {
      value1: '123',
      value2: '123',
      value3: '123',
-      keyboard: 'value1'
+      value4: '123',
+      keyboard: 'value1',
+      errorInfo: ''
    };
  },

@ -65,6 +80,11 @@ export default {
    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 = '';
+      }
    },

    onDelete() {
--- a/src/password-input/test/snapshots/demo.spec.js.snap
+++ b/src/password-input/test/snapshots/demo.spec.js.snap
@ -42,5 +42,17 @@ exports[`renders demo correctly 1`] = `
      </ul>
    </div>
  </div>
+  <div>
+    <div class="van-password-input">
+      <ul class="van-password-input__security van-hairline--surround">
+        <li class=""><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
+      </ul>
+    </div>
+  </div>
 </div>
 `;
--- a/yarn.lock
+++ b/yarn.lock
@ -1377,11 +1377,6 @@
  resolved "https://registry.npm.taobao.org/@types/node/download/@types/node-12.12.9.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-12.12.9.tgz#0b5ae05516b757cbff2e82c04500190aef986c7b"
  integrity sha1-C1rgVRa3V8v/LoLARQAZCu+YbHs=

-"@types/normalize-package-data@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
-  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
-
 "@types/parse-json@^4.0.0":
  version "4.0.0"
  resolved "https://registry.npm.taobao.org/@types/parse-json/download/@types/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@ -1469,10 +1464,10 @@
    semver "^6.3.0"
    tsutils "^3.17.1"

-"@vant/cli@^2.1.4":
-  version "2.1.4"
-  resolved "https://registry.npm.taobao.org/@vant/cli/download/@vant/cli-2.1.4.tgz?cache=0&sync_timestamp=1578283277451&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Fcli%2Fdownload%2F%40vant%2Fcli-2.1.4.tgz#b283a1d22f9846f4148787afa91763ee86d155f8"
-  integrity sha1-soOh0i+YRvQUh4evqRdj7obRVfg=
+"@vant/cli@^2.1.6":
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/@vant/cli/-/cli-2.1.6.tgz#67d4ab2d7aca2396acf0a44d388dacbe8d6ff9d2"
+  integrity sha512-45LLDdTXEFIlQvwRvkrGWVWnN8BVi+ESPLn6LBCvNjCd7sNBbGZsdC1fjFrBH6cocvDxyIzXKhX1E2OdqJ7Gpg==
  dependencies:
    "@babel/core" "^7.7.7"
    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.7.4"
@ -1490,7 +1485,7 @@
    "@vant/stylelint-config" "^1.1.0"
    "@vant/touch-emulator" "^1.2.0"
    "@vue/babel-preset-jsx" "^1.1.2"
-    "@vue/component-compiler-utils" "^3.1.0"
+    "@vue/component-compiler-utils" "^3.1.1"
    "@vue/test-utils" "1.0.0-beta.29"
    autoprefixer "^9.7.3"
    babel-jest "^24.9.0"
@ -1500,15 +1495,14 @@
    chokidar "^3.3.1"
    clean-css "^4.2.1"
    codecov "^3.6.1"
-    commander "^4.0.1"
+    commander "^4.1.0"
    conventional-changelog "^3.1.18"
    cross-env "^6.0.3"
    css-loader "^3.4.1"
    eslint "^6.8.0"
-    find-babel-config "^1.2.0"
    gh-pages "2.0.1"
    html-webpack-plugin "3.2.0"
-    husky "^3.1.0"
+    husky "^4.0.4"
    jest "^24.9.0"
    jest-canvas-mock "^2.2.0"
    jest-serializer-vue "^2.0.2"
@ -1520,7 +1514,7 @@
    postcss "^7.0.26"
    postcss-loader "^3.0.0"
    release-it "^12.4.3"
-    sass "^1.24.2"
+    sass "^1.24.4"
    sass-loader "^8.0.0"
    shelljs "^0.8.3"
    signale "^1.4.0"
@ -1676,6 +1670,21 @@
    source-map "~0.6.1"
    vue-template-es2015-compiler "^1.9.0"

+"@vue/component-compiler-utils@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.1.1.tgz#d4ef8f80292674044ad6211e336a302e4d2a6575"
+  integrity sha512-+lN3nsfJJDGMNz7fCpcoYIORrXo0K3OTsdr8jCM7FuqdI4+70TY6gxY6viJ2Xi1clqyPg7LpeOWwjF31vSMmUw==
+  dependencies:
+    consolidate "^0.15.1"
+    hash-sum "^1.0.2"
+    lru-cache "^4.1.2"
+    merge-source-map "^1.1.0"
+    postcss "^7.0.14"
+    postcss-selector-parser "^6.0.2"
+    prettier "^1.18.2"
+    source-map "~0.6.1"
+    vue-template-es2015-compiler "^1.9.0"
+
 "@vue/test-utils@1.0.0-beta.29":
  version "1.0.0-beta.29"
  resolved "https://registry.npm.taobao.org/@vue/test-utils/download/@vue/test-utils-1.0.0-beta.29.tgz#c942cf25e891cf081b6a03332b4ae1ef430726f0"
@ -3205,10 +3214,10 @@ commander@^2.18.0, commander@^2.19.0, commander@^2.20.0:
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==

-commander@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.npm.taobao.org/commander/download/commander-4.0.1.tgz#b67622721785993182e807f4883633e6401ba53c"
-  integrity sha1-tnYicheFmTGC6Af0iDYz5kAbpTw=
+commander@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
+  integrity sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw==

 commander@~2.19.0:
  version "2.19.0"
@ -4948,14 +4957,6 @@ finalhandler@~1.1.2:
    statuses "~1.5.0"
    unpipe "~1.0.0"

-find-babel-config@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npm.taobao.org/find-babel-config/download/find-babel-config-1.2.0.tgz#a9b7b317eb5b9860cda9d54740a8c8337a2283a2"
-  integrity sha1-qbezF+tbmGDNqdVHQKjIM3oig6I=
-  dependencies:
-    json5 "^0.5.1"
-    path-exists "^3.0.0"
-
 find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@ -5769,22 +5770,20 @@ humanize-url@^1.0.0:
    normalize-url "^1.0.0"
    strip-url-auth "^1.0.0"

-husky@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npm.taobao.org/husky/download/husky-3.1.0.tgz#5faad520ab860582ed94f0c1a77f0f04c90b57c0"
-  integrity sha1-X6rVIKuGBYLtlPDBp38PBMkLV8A=
+husky@^4.0.4:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-4.0.7.tgz#cee4301d1db1d731be9c2aa2ac72b46439d30c91"
+  integrity sha512-ULivTOe0k+nNjZKIojoHxXjybtEycaba0EDuk1G8iNGD8wZgo8Sr3YiN8bKitXNpI1RvVKTJwRnh2GLysLbxMQ==
  dependencies:
-    chalk "^2.4.2"
+    chalk "^3.0.0"
    ci-info "^2.0.0"
-    cosmiconfig "^5.2.1"
-    execa "^1.0.0"
+    cosmiconfig "^6.0.0"
    get-stdin "^7.0.0"
    opencollective-postinstall "^2.0.2"
    pkg-dir "^4.2.0"
    please-upgrade-node "^3.2.0"
-    read-pkg "^5.2.0"
-    run-node "^1.0.0"
    slash "^3.0.0"
+    which-pm-runs "^1.0.0"

 iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
  version "0.4.24"
@ -6980,7 +6979,7 @@ json5@2.x, json5@^2.1.0:
  dependencies:
    minimist "^1.2.0"

-json5@^0.5.0, json5@^0.5.1:
+json5@^0.5.0:
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
@ -8051,7 +8050,7 @@ nopt@^4.0.1, nopt@~4.0.1:
    abbrev "1"
    osenv "^0.1.4"

-normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.5.0:
+normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5:
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@ -9406,16 +9405,6 @@ read-pkg@^3.0.0:
    normalize-package-data "^2.3.2"
    path-type "^3.0.0"

-read-pkg@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npm.taobao.org/read-pkg/download/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
-  integrity sha1-e/KVQ4yloz5WzTDgU7NO5yUMk8w=
-  dependencies:
-    "@types/normalize-package-data" "^2.4.0"
-    normalize-package-data "^2.5.0"
-    parse-json "^5.0.0"
-    type-fest "^0.6.0"
-
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
  version "2.3.6"
  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@ -9907,11 +9896,6 @@ run-async@^2.2.0:
  dependencies:
    is-promise "^2.1.0"

-run-node@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/run-node/-/run-node-1.0.0.tgz#46b50b946a2aa2d4947ae1d886e9856fd9cabe5e"
-  integrity sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==
-
 run-parallel@^1.1.9:
  version "1.1.9"
  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
@ -9979,10 +9963,10 @@ sass-loader@^8.0.0:
    schema-utils "^2.1.0"
    semver "^6.3.0"

-sass@^1.24.2:
-  version "1.24.2"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.24.2.tgz#0a0e0f00368be6808b2e94470172266ac45498fe"
-  integrity sha512-0JxdMMRd0fOmGFQFRI91vh4n0Ed766ib9JwPUa+1C37zn3VaqlHxbknUn/6LqP/MSfvNPxRYoCrYf5g8vu4OHw==
+sass@^1.24.4:
+  version "1.24.4"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.24.4.tgz#aa50575a9ed2b9e9645b5599156fd149bdad9eaa"
+  integrity sha512-SqizkIEEcVPzmK1tYdlNRl/RSXMEwGcifL9GD+S2p9rEPdj6ycRbk4PWZs0jwlajNSyBPo/SXRB81i22SG0jmw==
  dependencies:
    chokidar ">=2.0.0 <4.0.0"

@ -11247,11 +11231,6 @@ type-fest@^0.5.2:
  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
  integrity sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==

-type-fest@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
-  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
-
 type-fest@^0.8.1:
  version "0.8.1"
  resolved "https://registry.npm.taobao.org/type-fest/download/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
@ -11908,6 +11887,11 @@ which-module@^2.0.0:
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=

+which-pm-runs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
+  integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
+
 which@^1.2.9, which@^1.3.0, which@^1.3.1:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"