Merge branch 'dev'

CHANGELOG.en-US.md

@@ -2,6 +2,24 @@
 title: Change Log
 toc: hidden
 ---
+
+### 2.6.2
+
+`2024-03-11`
+
+- Design
+  - 🍭 Financial design specification update
+    - Update numbers using `DIDIFD-Medium` font first
+- Feature
+    - `NumberKeyboard`
+      - `professional` type keyboard `text-render` replacement key increased `0, 00`
+    - `LicensePlate`
+      - New license plate keyboard component
+
+- Fix
+  - `Icon`
+    - Fixed the default size error in SVG format
+
 ### 2.6.1
 
 `2023-02-02`

CHANGELOG.md

@@ -3,6 +3,22 @@ title: 更新日志
 toc: hidden
 ---
 
+### 2.6.2
+
+`2024-03-11`
+
+- Design
+  - 🍭金融设计规范更新
+    - 更新数字优先使用 `DIDIFD-Medium` 字体
+- Feature
+    - `NumberKeyboard`
+      - `professional` 类型键盘 `text-render`替换键增加 `0, 00`
+    - `LicensePlate`
+      - 新增车牌号键盘组件
+- Fix
+  - `Icon`
+    - 修复 SVG 格式下，默认尺寸错误的问题
+
 ### 2.6.1
 
 `2023-02-02`

components/_locale/lang/zh-CN.js

@@ -5,7 +5,7 @@ export default {
     },
     captcha: {
       sendCaptcha: '发送验证码',
-      countdown: '{$1}秒后重发',
+      countdown: '{$1}s 后重发',
     },
     cashier: {
       payCash: '\u652f\u4ed8\u91d1\u989d\u0028\u5143\u0029',

components/_style/mixin/theme.basic.styl

@@ -68,7 +68,7 @@ opacity-disabled = .3 // opacity of disabled button, switch, agree
 
 /// Font Family
 font-family-normal = "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
-font-family-number = DINPro-Medium, DIN Alternate, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
+font-family-number = "DIDIFD-Medium", "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
 
 /// Configration
 support-for-ie = false

components/activity-indicator/component.js

@@ -1,7 +1,7 @@
 export default {
-  "name": "activity-indicator",
-  "text": "活动指示器",
-  "category": "basic",
-  "description": "",
-  "author": "xuxiaoyan"
+  'name': 'activity-indicator',
+  'text': '活动指示器',
+  'category': 'basic',
+  'description': '',
+  'author': 'xuxiaoyan'
 }

components/amount/README.en-US.md

@@ -15,7 +15,7 @@ Vue.component(Amount.name, Amount)
 
 ### Tips
 
-The font `DINPro-Medium` is used in the component for the case show only, if necessary, reset `font-family` of `.md-amount`.
+The font `DIDIFD-Medium` is used in the component for the case show only, if necessary, reset `font-family` of `.md-amount`.
 
 ### Code Examples
 <!-- DEMO -->
@@ -32,4 +32,4 @@ The font `DINPro-Medium` is used in the component for the case show only, if nec
 |separator|thousand separator|String|`,`|-|
 |is-capital|convert to chinese capital|Boolean|`false`|-|
 |transition|use transition when value changes|Boolean|`false`|-|
-|duration|transition duration|Number|`1000`|unit `ms`|
+|duration|transition duration|Number|`1000`|unit `ms`|

components/amount/README.md

@@ -15,7 +15,7 @@ Vue.component(Amount.name, Amount)
 
 ### 提示
 
-组件中使用字体`DINPro-Medium`仅用于案例展示，如有必要可重置`.md-amount`的`font-family`
+组件中使用字体`DIDIFD-Medium`仅用于案例展示，如有必要可重置`.md-amount`的`font-family`
 
 ### 代码演示
 <!-- DEMO -->

components/bill/component.js

@@ -1,7 +1,7 @@
 export default {
-  "name": "bill",
-  "text": "票据",
-  "category": "business",
-  "description": "",
-  "author": "xuxiaoyan"
+  'name': 'bill',
+  'text': '票据',
+  'category': 'business',
+  'description': '',
+  'author': 'xuxiaoyan'
 }

components/captcha/README.en-US.md

@@ -33,7 +33,9 @@ Vue.component(Captcha.name, Captcha)
 | count | counter duration, set as `0` to hide resend button | Number | `60` |
 | count-normal-text |text of send verification code button |String| `发送验证码` |
 | count-active-text |text of send verification code button in countdown state|String| `{$1}秒后重发` |
-
+| type | Type of the captcha component mode |String| dialog |
+| disable-send | Whether the send verification button is disabled | Boolean | false |
+| subtitle | subtitle | String | '' |
 
 
 #### Captcha Methods

components/captcha/README.md

@@ -34,6 +34,11 @@ Vue.component(Captcha.name, Captcha)
 |count|倒计时时长, 设置为0的时候不显示倒计时按钮|Number|`60`|
 |count-normal-text|发送验证码正常状态文字|String| `发送验证码` |
 |count-active-text|发送验证码及倒计时按钮文案配置项|String| `{$1}秒后重发` |
+|type|验证码组件模式类型|String| dialog |
+|disable-send|发送验证码按钮是否禁用|Boolean|false|
+|subtitle|副标题|String|''|
+
+
 
 #### Captcha Methods
 

components/captcha/demo/cases/demo2.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="md-example-child md-example-child-captcha">
+    <md-field title="文案">
+      <md-input-item title="标题" v-model="title"></md-input-item>
+      <md-input-item title="插槽内容" v-model="content"></md-input-item>
+      <md-input-item title="短信验证码" value="1234" readonly></md-input-item>
+    </md-field>
+
+    <md-field title="配置">
+      <md-field-item title="发送N次后禁用发送按钮" customized align="right">
+        <md-input-item v-model="useSendTimes"></md-input-item>
+      </md-field-item>
+
+      <md-field-item title="限制验证码长度" customized align="right">
+        <md-switch v-model="limit"></md-switch>
+      </md-field-item>
+
+      <md-input-item
+        title="验证码长度"
+        type="tel"
+        v-model="maxlength"
+      ></md-input-item>
+
+      <md-field-item title="采用掩码" customized align="right">
+        <md-switch v-model="mask"></md-switch>
+      </md-field-item>
+
+      <md-field-item title="使用系统键盘" customized align="right">
+        <md-switch v-model="system"></md-switch>
+      </md-field-item>
+    </md-field>
+    <md-button @click="next">确定</md-button>
+
+    <md-captcha
+      ref="captcha"
+      v-model="show"
+      :title="title"
+      :subtitle="subtitle"
+      :maxlength="limit ? parseFloat(maxlength) : -1"
+      :system="system"
+      :mask="mask"
+      :appendTo="appendTo"
+      :type="'halfScreen'"
+      :countNormalText="countNormalText"
+      :disableSend="disableSend"
+      @submit="submit"
+      @show="onShow"
+      @hide="onHide"
+      @send="onSend"
+    >
+      <div class="soltDiv">
+        验证码已发送至 <span class="phone">186****5407</span><span class="hint" @click="hintHandle">收不到验证码？</span>
+      </div>
+    </md-captcha>
+    <md-dialog
+      title="收不到短信验证码？"
+      :closable="true"
+      v-model="dialogConfig.open"
+      :btns="dialogConfig.btns"
+    >
+      人生的刺，就在这里，留恋着不肯快走的，偏是你所不留恋的东西。
+    </md-dialog>
+  </div>
+</template>
+
+<script>
import {Button, Toast, Captcha, InputItem, Field, FieldItem, Switch, Dialog} from 'mand-mobile'
+export default {
+  name: 'captcha-demo',
+  /* DELETE */
+  title: '半屏自定义',
+  titleEnUS: 'Customize',
+  height: 650,
+  /* DELETE */
+  components: {
+    [Button.name]: Button,
+    [Captcha.name]: Captcha,
+    [InputItem.name]: InputItem,
+    [Field.name]: Field,
+    [FieldItem.name]: FieldItem,
+    [Switch.name]: Switch,
+    [Dialog.name]: Dialog,
+  },
+  data() {
+    return {
+      show: false,
+      appendTo: document.querySelector('.doc-demo-box-priview') || document.body,
+      title: '输入短信验证码 完成验证',
+      subtitle: '用于核验信息有效性及确定本人操作',
+      content: '验证码已发送至 186****5407',
+      countNormalText: '发送验证码',
+      limit: true,
+      maxlength: '4',
+      mask: false,
+      system: true,
+      useSendTimes: 3,
+      sendTimes: 0,
+      disableSend: false,
+      dialogConfig: {
+        open: false,
+        btns: [
+          {
+            text: '我知道了',
+            handler: this.onConfirm,
+          },
+        ],
+      },
+    }
+  },
+  methods: {
+    next() {
+      this.show = true
+    },
+    submit(val) {
+      const max = parseFloat(this.maxlength)
+      setTimeout(() => {
+        if (!this.limit || max < 0 || val.length === max) {
+          if (val !== '1234') {
+            this.$refs.captcha.setError('验证码错误，请重新输入')
+          } else {
+            this.show = false
+            Toast({
+              content: `你输入了${val}`,
+            })
+          }
+        }
+      }, 300)
+    },
+    onSend(cb) {
+      // -------- 发送验证码成功 -------
+      // 修改按钮文字
+      if (this.sendTimes === 0) {
+        this.countNormalText = '重新发送'
+      }
+      this.sendTimes += 1
+      if (this.sendTimes > this.useSendTimes) {
+        this.disableSend = true
+        this.$refs.captcha.setError('发送次数已用完，请一小时后再试')
+        return
+      }
+      const difference = this.useSendTimes - this.sendTimes
+      if (this.sendTimes > 1 && difference !== 0) {
+        Toast({
+          content: `您还可以重发${difference}次`,
+        })
+      }
+      // 倒计时开始
+      cb()
+      console.log('click resend button.')
+    },
+    onShow() {},
+    onHide() {
+      // this.show = false;
+    },
+    hintHandle() {
+      this.dialogConfig.open = true
+    },
+    onConfirm() {
+      this.dialogConfig.open = false
+    },
+  },
+}
+
</script>
+
+<style lang="stylus">
+.md-example-child-captcha
+  padding 20px
+  .md-field
+    margin-bottom 40px
+.soltDiv
+  font-size captcha-font-size
+  color captcha-color
+  text-align left
+  line-height 44px
+  span.phone
+    color #31383F
+    font-weight bold
+    margin-right 1em
+  span.hint
+    color: #198CFF
+</style>

components/captcha/demo/index.vue

@@ -12,7 +12,8 @@
 <script>
import createDemoModule from '../../../examples/create-demo-module'
 import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
-export default {...createDemoModule('captcha', [Demo0, Demo1])}
+import Demo2 from './cases/demo2'
+export default {...createDemoModule('captcha', [Demo0, Demo1, Demo2])}
 
</script>
 
 <style lang="stylus">

components/captcha/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="md-captcha" v-show="isView || value || visible">
-    <template v-if="isView">
+  <div class="md-captcha" v-show="isInline || value || visible">
+    <template v-if="isInline">
       <div class="md-captcha-content">
         <h2 class="md-captcha-title" v-if="title" v-text="title"></h2>
         <div class="md-captcha-message">
@@ -33,7 +33,67 @@
         </footer>
       </md-codebox>
     </template>
-    <template v-else>
+    <template v-if="type === 'halfScreen'">
+      <md-popup
+        :value="value"
+        :hasMask="true"
+        position="bottom"
+        :maskClosable="false"
+        @input="$_onInput"
+        @show="$_onShow"
+        @hide="$_onHide"
+      >
+        <div class="md-captcha-half-container">
+          <md-popup-title-bar
+            only-close
+            large-radius
+            :title="title"
+            :describe="subtitle"
+            title-align="left"
+            @cancel="close"
+          ></md-popup-title-bar>
+          <div class="md-captcha-half-content">
+            <slot></slot>
+          </div>
+          <md-codebox
+            ref="codebox"
+            v-model="code"
+            :maxlength="maxlength"
+            :system="system"
+            :mask="mask"
+            @submit="$_onSubmit"
+            :disabled="disableSend"
+            :closable="false"
+            :isView="true"
+            :justify="true"
+            :autofocus="false"
+            :input-type="inputType"
+            :isErrorStyle="isShowErrorStyle"
+          >
+            <footer
+              class="md-captcha-footer"
+              :class="{ halfStyle: isKeyboard }"
+            >
+              <div
+                class="md-captcha-error"
+                v-if="errorMsg"
+                v-text="errorMsg"
+              ></div>
+              <div class="md-captcha-brief" v-else v-text="brief"></div>
+              <button
+                class="md-captcha-btn"
+                :class="[disableSend && 'is-disabled-send']"
+                v-if="count"
+                v-text="countBtnText"
+                :disabled="this.isCounting"
+                @click="$_onResend"
+              ></button>
+            </footer>
+          </md-codebox>
+        </div>
+      </md-popup>
+    </template>
+    <template v-if="type === 'dialog'">
       <md-dialog
         :value="value"
         :closable="true"
@@ -79,6 +139,8 @@
 </template>
 
 <script>
import Dialog from '../dialog'
+import Popup from '../popup'
+import PopupTitlebar from '../popup/title-bar'
 import Codebox from '../codebox'
 import Button from '../button'
 import {mdDocument} from '../_util'
@@ -89,6 +151,8 @@ export default {
 
   components: {
     [Dialog.name]: Dialog,
+    [Popup.name]: Popup,
+    [PopupTitlebar.name]: PopupTitlebar,
     [Codebox.name]: Codebox,
     [Button.name]: Button,
   },
@@ -97,6 +161,9 @@ export default {
     title: {
       type: String,
     },
+    subtitle: {
+      type: String,
+    },
     brief: {
       type: String,
       default: '',
@@ -144,10 +211,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    type: {
+      type: String,
+      default: 'dialog',
+    },
     inputType: {
       type: String,
       default: 'tel',
     },
+    disableSend: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -158,6 +233,8 @@ export default {
       isCounting: false,
       firstShown: false,
       countBtnText: this.countNormalText,
+      isKeyboard: false,
+      originHeight: 0,
     }
   },
 
@@ -177,19 +254,35 @@ export default {
       }
     },
   },
-
+  computed: {
+    isInline() {
+      return this.isView || this.type === 'inline'
+    },
+    isShowErrorStyle() {
+      return this.errorMsg !== '' && !this.disableSend
+    },
+  },
   mounted() {
-    if (this.appendTo && !this.isView) {
+    // Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
+    if (this.judgeDeviceType().isAndroid && this.type === 'halfScreen') {
+      // 记录初始高度
+      this.originHeight = document.documentElement.clientHeight || document.body.clientHeight
+      window.addEventListener('resize', this.listenResize, false)
+    }
+    if (this.appendTo && !this.isInline) {
       this.appendTo.appendChild(this.$el)
     }
-    if (this.value || this.isView) {
+    if (this.value || this.isInline) {
       this.firstShown = true
       this.$_emitSend()
     }
   },
 
   beforeDestroy() {
-    if (this.appendTo && !this.isView) {
+    if (this.judgeDeviceType().isAndroid && this.type === 'halfScreen') {
+      window.removeEventListener('resize', this.listenResize)
+    }
+    if (this.appendTo && !this.isInline) {
       this.appendTo.removeChild(this.$el)
     }
   },
@@ -222,6 +315,25 @@ export default {
       this.autoSend && this.$_onResend()
     },
     // MARK: public methods
+    listenResize() {
+      let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
+      if (this.originHeight < resizeHeight) {
+        this.isKeyboard = false
+      } else {
+        this.isKeyboard = true
+      }
+      this.originHeight = resizeHeight
+    },
+    // 判断设备类型
+    judgeDeviceType() {
+      let ua = window.navigator.userAgent.toLocaleLowerCase()
+      let isIOS = /iphone|ipad|ipod/.test(ua)
+      let isAndroid = /android/.test(ua)
+      return {
+        isIOS: isIOS,
+        isAndroid: isAndroid,
+      }
+    },
     countdown() {
       if (!this.count) {
         return
@@ -252,6 +364,9 @@ export default {
         // this.code = ''
       })
     },
+    close() {
+      this.$emit('input', false)
+    },
   },
 }
 
</script>
@@ -308,4 +423,44 @@ export default {
   background none
   &:disabled
     color color-text-disabled
+// 半屏样式
+.md-captcha-half-container
+  background-color #fff
+  border-radius 40px 40px 0 0
+  .md-popup-title-bar
+    height auto !important
+    margin-bottom 24px
+    .title-bar-title
+      .title
+        font-weight bold
+        line-height 56px
+      p.describe
+        font-size 24px !important
+        color #91989F !important
+        line-height 33px !important
+        margin-top: 4px !important
+  .md-captcha-half-content
+    padding 0px 40px
+  .md-codebox-wrapper
+    .md-codebox
+      padding 75px 40px 0px
+      margin 0px
+    .md-captcha-footer
+      padding 32px 40px 745px
+      margin 0px
+      &.halfStyle
+        padding-bottom 40px
+      .md-captcha-btn
+        padding 5px 16px
+        background-color color-primary
+        border-radius radius-medium
+        color color-text-base-inverse
+        &:disabled
+          color #61686F
+          background none
+          border-radius inherit
+          padding 10px 0px
+        &.is-disabled-send
+          background rgba(145,152,159,0.1)
+          color #61686F
 </style>

components/captcha/test/__snapshots__/demo.spec.js.snap

@@ -63,6 +63,65 @@ exports[`Captcha - Demo Customize 1`] = `
 </div>
 `;
 
+exports[`Captcha - Demo HalfScreen 1`] = `
+<div class="md-example-child md-example-child-captcha-2">
+  <div class="md-captcha">
+    <!---->
+    <div class="md-popup with-mask bottom" style="display:none;">
+      <div name="md-mask-fade" class="md-popup-mask" style="display:none;"></div>
+      <div name="md-slide-up" class="md-popup-box md-slide-up" style="display:none;">
+        <div class="md-captcha-half-container">
+          <div class="md-popup-title-bar title-align-left large large-radius">
+            <!---->
+            <div class="title-bar-title">
+              <p class="title">输入短信验证码，完成验证</p>
+              <p class="describe">用于核验信息有效性</p>
+            </div>
+            <!---->
+            <div class="title-bar-right md-popup-close"><svg class="md-icon icon-svg md-icon-close lg" style="fill:;">
+                <use xlink:href="#close"></use>
+              </svg></div>
+          </div>
+          <div class="md-captcha-half-content">
+            <div class="soltDiv">验证码已发送至 186****5407</div>
+          </div>
+          <div class="md-codebox-wrapper">
+            <div class="md-codebox is-justify"><span class="md-codebox-box"><!----> <!----></span><span class="md-codebox-box"><!----> <!----></span><span class="md-codebox-box"><!----> <!----></span><span class="md-codebox-box"><!----> <!----></span></div>
+            <footer class="md-captcha-footer">
+              <div class="md-captcha-brief"></div> <button class="md-captcha-btn">发送验证码</button>
+            </footer>
+            <form action="" style="display:none;"><input type="tel" maxlength="4" value="" class="md-codebox-input"></form>
+            <div class="md-number-keyboard md-codebox-keyboard in-view">
+              <!---->
+              <div class="md-number-keyboard-container simple">
+                <div class="keyboard-number">
+                  <ul class="keyboard-number-list">
+                    <li class="keyboard-number-item"><span>1</span></li>
+                    <li class="keyboard-number-item"><span>2</span></li>
+                    <li class="keyboard-number-item"><span>3</span></li>
+                    <li class="keyboard-number-item"><span>4</span></li>
+                    <li class="keyboard-number-item"><span>5</span></li>
+                    <li class="keyboard-number-item"><span>6</span></li>
+                    <li class="keyboard-number-item"><span>7</span></li>
+                    <li class="keyboard-number-item"><span>8</span></li>
+                    <li class="keyboard-number-item"><span>9</span></li>
+                    <li class="keyboard-number-item no-bg"></li>
+                    <li class="keyboard-number-item"><span>0</span></li>
+                    <li class="keyboard-number-item no-bg delete"><span></span></li>
+                  </ul>
+                </div>
+                <!---->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+`;
+
 exports[`Captcha - Demo Inline display 1`] = `
 <div class="md-example-child md-example-child-captcha-1">
   <div class="md-captcha">

components/captcha/test/cases/demo2.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="md-example-child md-example-child-captcha-2">
+    <md-captcha
+      ref="captcha"
+      v-model="show"
+      :title="title"
+      :subtitle="subtitle"
+      :maxlength="limit ? parseFloat(maxlength) : -1"
+      :system="system"
+      :mask="mask"
+      :appendTo="appendTo"
+      :type="'halfScreen'"
+      :disableSend="disableSend"
+      @submit="submit"
+      @show="onShow"
+      @hide="onHide"
+      @send="onSend"
+    >
+      <div class="soltDiv">{{ content }}</div>
+    </md-captcha>
+  </div>
+</template>
+
+<script>
import {Captcha} from 'mand-mobile'
+export default {
+  name: 'captcha-demo',
+  components: {
+    [Captcha.name]: Captcha,
+  },
+  data() {
+    return {
+      show: true,
+      appendTo: document.querySelector('.doc-demo-box-priview') || document.body,
+      title: '输入短信验证码，完成验证',
+      subtitle: '用于核验信息有效性',
+      content: '验证码已发送至 186****5407',
+      limit: true,
+      maxlength: '4',
+      mask: false,
+      system: false,
+      useSendTimes: 3,
+      sendTimes: 0,
+      disableSend: false,
+    }
+  },
+  methods: {
+    submit(val) {
+      const max = parseFloat(this.maxlength)
+      setTimeout(() => {
+        if (!this.limit || max < 0 || val.length === max) {
+          if (val !== '1234') {
+            this.$refs.captcha.setError('验证码错误，请重新输入')
+          } else {
+            this.show = false
+          }
+        }
+      }, 300)
+    },
+    onSend(cb) {
+      this.sendTimes += 1
+      if (this.sendTimes > this.useSendTimes) {
+        this.disableSend = true
+        this.$refs.captcha.setError('发送次数已用完，请一小时后再试')
+        return
+      }
+      cb()
+      console.log('click resend button.')
+    },
+    onShow() {},
+    onHide() {
+      // this.show = false;
+    },
+  },
+}
+
</script>
+
+<style lang="stylus">
+.md-example-child-captcha
+  padding 20px
+  .md-field
+    margin-bottom 40px
+.soltDiv
+  font-size captcha-font-size
+  color captcha-color
+  text-align left
+  line-height 44px
+</style>

components/captcha/test/demo.spec.js

@@ -1,5 +1,6 @@
 import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
+import Demo2 from './cases/demo2'
 import {renderToString} from '@vue/server-test-utils'
 
 describe('Captcha - Demo', () => {
@@ -9,4 +10,7 @@ describe('Captcha - Demo', () => {
   test(`Inline display`, () => {
     expect(renderToString(Demo1)).toMatchSnapshot()
   })
+  test(`HalfScreen`, () => {
+    expect(renderToString(Demo2)).toMatchSnapshot()
+  })
 })

components/cashier/component.js

@@ -1,7 +1,7 @@
 export default {
-  "name": "cashier",
-  "text": "收银台",
-  "category": "business",
-  "description": "",
-  "author": "xuxiaoyan"
+  'name': 'cashier',
+  'text': '收银台',
+  'category': 'business',
+  'description': '',
+  'author': 'xuxiaoyan'
 }

components/codebox/README.en-US.md

@@ -30,6 +30,7 @@ Vue.component(Codebox.name, Codebox)
 | disorder| whether to use random keyboard layout or not | Boolean | `false` |
 | system | whether to use system keyboard or simulated keyboard | Boolean | `false` |
 | is-view | whether to show as inline element or append to the body | Boolean |`false`|
+| is-error-style | Whether to display an error style | Boolean | `false` |
 
 #### Codebox Methods
 

components/codebox/README.md

@@ -32,6 +32,7 @@ Vue.component(Codebox.name, Codebox)
 |disorder|数字键盘是否乱序|Boolean|`false`|
 |system|是否使用系统默认键盘|Boolean|`false`|
 |is-view|是否内嵌在页面内展示，否则以弹层形式|Boolean|`false`|
+|is-error-style|是否展示错误样式|Boolean|`false`|
 
 #### Codebox Methods
 

components/codebox/index.vue

@@ -15,7 +15,8 @@
           :class="[
             'md-codebox-box',
             (i === code.length + 1) && focused && 'is-active',
-            code.charAt(i-1) !== '' && 'is-filled'
+            code.charAt(i-1) !== '' && 'is-filled',
+            isErrorStyle && 'is-error'
           ]"
         >
           <template v-if="code.charAt(i-1)">
@@ -136,6 +137,10 @@ export default {
       type: String,
       default: 'tel',
     },
+    isErrorStyle: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -289,9 +294,12 @@ export default {
     margin-left 0
   &:last-child
     margin-right 0
-  &.is-active, &.is-filled
+  &.is-filled
     border-color codebox-border-active-color
-
+  &.is-active
+    hairline(bottom, color-text-base)
+  &.is-error
+    hairline(bottom, color-text-error)
 .md-codebox-blink
   display block
   if tab-height is a 'unit'

components/date-picker/component.js

@@ -1,7 +1,7 @@
 export default {
-  "name": "date-picker",
-  "text": "日期选择器",
-  "category": "feedback",
-  "description": "",
-  "author": "xuxiaoyan"
+  'name': 'date-picker',
+  'text': '日期选择器',
+  'category': 'feedback',
+  'description': '',
+  'author': 'xuxiaoyan'
 }

components/dialog/index.js

@@ -17,7 +17,7 @@ const instances = []
 const generate = function({
   title = '',
   icon = '',
-  iconSvg = false,
+  iconSvg = true,
   content = '',
   closable = false,
   transition = 'md-bounce',
@@ -75,7 +75,7 @@ const generate = function({
 Dialog.confirm = ({
   title = '',
   icon = '',
-  iconSvg = false,
+  iconSvg = true,
   content = '',
   cancelText = t('md.dialog.cancel'),
   cancelWarning = false,
@@ -131,7 +131,7 @@ Dialog.confirm = ({
 Dialog.alert = ({
   title = '',
   icon = '',
-  iconSvg = false,
+  iconSvg = true,
   content = '',
   confirmText = t('md.dialog.confirm'),
   closable = false,

components/index.js

@@ -64,6 +64,7 @@ import Progress from './progress'
 import Ruler from './ruler'
 import TextareaItem from './textarea-item'
 import Skeleton from './skeleton'
+import LicensePlate from './license-plate'
 /* @init<%import ${componentNameUpper} from './${componentName}'%> */
 
 // Totally importing reminder
@@ -136,6 +137,7 @@ export const components = {
   Ruler,
   TextareaItem,
   Skeleton,
+  LicensePlate,
   /* @init<%${componentNameUpper},%> */
 }
 
@@ -231,6 +233,7 @@ export {
   Skeleton,
   setLocale,
   t,
+  LicensePlate,
   /* @init<%${componentNameUpper},%> */
 }
 

components/license-plate-input/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="md-license-plate-input">
+    <div
+      v-for="(item, index) in keyArray"
+      :key="index"
+      class="md-license-plate-input-item"
+      :class="{
+        'active': selectedIndex === index,
+        'animation': selectedIndex === index && !item
+      }"
+      @click="keyMapping(index)"
+    >
+      <!-- 非新能源键位 -->
+      <div
+        v-if="index !== keyArray.length-1"
+        class="md-license-plate-input-item_content"
+      >
+        {{ item }}
+      </div>
+      <!-- 新能源键位 -->
+      <div
+        v-else
+        class="md-license-plate-input-item_content"
+      >
+        <div v-if="item && item !== ' '">{{ item }}</div>
+        <div v-else class="emptyValue"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
export default {
+  name: 'md-license-plate-input',
+
+  components: {},
+
+  props: {
+    keyArray: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    selectedIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  data() {
+    return {}
+  },
+
+  methods: {
+    keyMapping(index) {
+      this.$emit('keyMapping', index)
+    },
+  },
+}
+
</script>
+
+<style lang="stylus">
+.md-license-plate-input{
+  display: flex;
+  .md-license-plate-input-item{
+    width: 64px;
+    height: 94px;
+    background: #F4F8FF;
+    border: 1px solid rgba(222,237,255,1);
+    border-radius: 8px;
+    margin-right: 11px;
+    &_content {
+      width: 100%;
+      height: 100%;
+      font-family: font-family-number;
+      font-size: 40px;
+      color: #111A34;
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 94px;
+      font-weight: 500;
+      .emptyValue{
+        width: 100%;
+        height: 100%;
+        background: url(../_style/images/new-energy.png) center no-repeat;
+        background-size: 49px 51px;
+      }
+    }
+  }
+  >.md-license-plate-input-item:nth-child(2){
+    margin-right: 28px;
+    position: relative;
+    &::after{
+      top: 0.47rem;
+      right: -0.22rem;
+      content: "";
+      position: absolute;
+      width: .06rem;
+      height: .06rem;
+      background: #000;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  >.md-license-plate-input-item:last-child{
+    margin-right: 0px;
+    background: #E8FBE7;
+    border: 1px solid rgba(203,242,201,1);
+    border-radius: 8px;
+    font-size: 16px;
+    color: #61686F;
+  }
+  .md-license-plate-input-item.active{
+    border-color: rgba(25,140,255,1);
+  }
+  .md-license-plate-input-item.active.animation{
+    animation keyboard-cursor 1s step-start 2s
+  }
+
+}
+
+@keyframes keyboard-cursor{
+  0%{
+    border-color: rgba(25,140,255,1);
+  }
+  25%{
+    border-color: rgba(222,237,255,1);
+  }
+  50%{
+    border-color: rgba(25,140,255,1);
+  }
+  75%{
+    border-color: rgba(222,237,255,1);
+  }
+  100%{
+    border-color: rgba(25,140,255,1);
+  }
+}
+</style>

components/license-plate-keyboard/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="md-license-plate-keyboard">
+    <div v-if="keyboardType === 1">
+      <md-shortcut-row
+        :shortcuts="shortcuts"
+        @enter="$_onEnter"
+      />
+    </div>
+    <div v-else>
+      <md-mixed-key-board
+        :mixedKeyboard="mixedKeyboard"
+        @enter="$_onEnter"
+        @delete="$_onDelete"
+        @confirm="$_onConfirm"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
import MixedKeyBoard from './mixed-key-board'
+import ShortcutRow from './short-cut-row'
+
+export default {
+  name: 'md-license-plate-keyboard',
+
+  components: {
+    [MixedKeyBoard.name]: MixedKeyBoard,
+    [ShortcutRow.name]: ShortcutRow,
+  },
+
+  props: {
+    // 对象是键盘组件的数据对象，用于传递键盘每行的数据
+    keyboard: {
+      type: Object,
+      default: {},
+    },
+  },
+
+  data() {
+    return {}
+  },
+
+  computed: {
+    shortcuts() {
+      return this.keyboard.shortcuts || []
+    },
+    // 键盘类型
+    keyboardType() {
+      return this.keyboard.keyboardType || 1
+    },
+    // 混合键盘数据
+    mixedKeyboard() {
+      return this.keyboard.mixedKeyboard || []
+    },
+  },
+
+  methods: {
+    $_onEnter(value) {
+      this.$emit('enter', value)
+    },
+    $_onDelete() {
+      this.$emit('delete')
+    },
+    $_onConfirm() {
+      this.$emit('confirm')
+    },
+  },
+}
+
</script>

components/license-plate-keyboard/mixed-key-board.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="md-mixed-key-board">
+    <div
+      v-for="(item, index) in mixedKeyboard"
+      :key="index"
+      class="md-mixed-key-board-item"
+      :class="{disabled: item.disabled}"
+    >
+      <template v-if="item.type">
+        <div
+          :class="item.type"
+          v-tap="{
+            methods:
+              item.type === 'delete' ? $_onDelete : $_onConfirm,
+            disabled: item.disabled
+          }"
+        >
+          <div v-if="item.type === 'confirm' && item.text">{{ item.text }}</div>
+        </div>
+      </template>
+      <template v-else>
+        <div
+          v-tap="{
+            methods: $_onEnter,
+            disabled: item.disabled
+          }"
+        >{{ item.value }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
export default {
+  name: 'md-mixed-key-board',
+
+  components: {},
+
+  props: {
+    // 混合键盘数据
+    mixedKeyboard: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  },
+
+  data() {
+    return {}
+  },
+
+  methods: {
+    $_onEnter(value) {
+      this.$emit('enter', value)
+    },
+    $_onDelete() {
+      this.$emit('delete')
+    },
+    $_onConfirm() {
+      this.$emit('confirm')
+    },
+  },
+}
+
</script>
+
+<style lang="stylus">
+.md-mixed-key-board {
+  padding: 32px 0px;
+  display: flex;
+  flex-wrap: wrap;
+  .md-mixed-key-board-item {
+    >div{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 64px;
+      height: 104px;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 0px 0px rgba(159,159,159,0.5);
+      border-radius: 10px;
+      font-family: font-family-normal;
+      font-size: 40px;
+      color: #111A34;
+      font-weight: 400;
+      margin: 0px 0px 10px 10px;
+      &.delete{
+        background: url(../_style/images/license-keyboard-del.png) center no-repeat;
+        background-color: #FFFFFF;
+        background-size: 40px 40px;
+      }
+      &.confirm{
+        width: 212px;
+        background: #198CFF;
+        box-shadow: none;
+        font-size: 36px;
+        color: #FFFFFF;
+      }
+    }
+    &.disabled{
+      >div{
+        background: #F5F5F5;
+        color: #C1C8CF;
+      }
+    }
+  }
+}
+</style>

components/license-plate-keyboard/short-cut-row.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="md-shortcut-row">
+    <div
+      v-for="(item, index) in shortcuts"
+      :key="index"
+      class="md-shortcut-row-item"
+      v-tap="{ methods: $_onEnter }"
+    >{{ item }}</div>
+  </div>
+</template>
+
+<script>
export default {
+  name: 'md-shortcut-row',
+
+  components: {},
+
+  props: {
+    // 省份数据
+    shortcuts: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  },
+
+  data() {
+    return {}
+  },
+
+  methods: {
+    $_onEnter(value) {
+      this.$emit('enter', value)
+    },
+  },
+}
+
</script>
+
+<style lang="stylus">
+.md-shortcut-row {
+  padding: 32px 10px;
+  display: flex;
+  flex-wrap: wrap;
+  .md-shortcut-row-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 104px;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 0px 0px rgba(159,159,159,0.5);
+    border-radius: 12px;
+    font-family: font-family-normal;
+    font-size: 40px;
+    color: #01080F;
+    letter-spacing: 0;
+    font-weight: 400;
+    margin: 0px 0px 10px 10px;
+  }
+}
+</style>

components/license-plate/README.en-US.md

@@ -0,0 +1,38 @@
+---
+title: license-plate
+preview:
+---
+
+To display ads or descriptions in a floating layer
+
+### Import
+
+```javascript
+import { Landscape } from 'mand-mobile'
+
+Vue.component(Landscape.name, Landscape)
+```
+
+### Code Examples
+<!-- DEMO -->
+
+### API
+
+#### LicensePlate Props
+|Props | Description | Type | Default | Note |
+|----|-----|------|------|-----|
+|shortcuts|Province key position data|Array|`['京','津','渝','沪','冀','晋','辽','吉','黑','苏','浙','皖','闽','赣','鲁','豫','鄂','湘','粤','琼','川','贵','云','陕','甘','青','蒙','桂','宁','新','藏']`| - |
+|letterData|Alphabetic keyboard data|Array|`[{value: 'Q',disabled: false,},{value: 'W',disabled: false,},{value: 'E',disabled: false,},{value: 'R',disabled: false,},{value: 'T',disabled: false,},{value: 'Y',disabled: false,},{value: 'U',disabled: false,},{value: 'I',disabled: true,},{value: 'O',disabled: true,},{value: 'P',disabled: false,},{value: 'A',disabled: false,},{value: 'S',disabled: false,},{value: 'D',disabled: false,},{value: 'F',disabled: false,},{value: 'G',disabled: false,},{value: 'H',disabled: false,},{value: 'J',disabled: false,},{value: 'K',disabled: false,},{value: 'L',disabled: false,},{value: 'Z',disabled: false,},{value: 'X',disabled: false,},{value: 'C',disabled: false,},{value: 'V',disabled: false,},{value: 'B',disabled: false,},{value: 'N',disabled: false,},{value: 'M',disabled: false,}]`| - |
+|modeShow|Display mode|String|`division`| division/popUp |
+|showPopUp|Control display in popup mode|Boolean|`false`| - |
+|title|The title is displayed in pop-up mode|String|`请输入车牌号码`| - |
+|subtitle|The subtitle is displayed in pop-up mode|String|``| - |
+|defaultValue|Default key value|String|``| - |
+
+#### LicensePlate Events
+
+##### @hide()
+hide Pop
+
+##### @confirm()
+confirm

components/license-plate/README.md

@@ -0,0 +1,38 @@
+---
+title: LicensePlate 车牌键盘
+preview:
+---
+
+专用于车牌输入键盘
+
+### 引入
+
+```javascript
+import { LicensePlate } from 'mand-mobile'
+
+Vue.component(LicensePlate.name, LicensePlate)
+```
+
+### 代码演示
+<!-- DEMO -->
+
+### API
+
+#### LicensePlate Props
+|属性 | 说明 | 类型 | 默认值| 备注 |
+|----|-----|------|------|-----|
+|shortcuts|省份键位数据|Array|`['京','津','渝','沪','冀','晋','辽','吉','黑','苏','浙','皖','闽','赣','鲁','豫','鄂','湘','粤','琼','川','贵','云','陕','甘','青','蒙','桂','宁','新','藏']`| - |
+|letterData|字母键盘数据|Array|`[{value: 'Q',disabled: false,},{value: 'W',disabled: false,},{value: 'E',disabled: false,},{value: 'R',disabled: false,},{value: 'T',disabled: false,},{value: 'Y',disabled: false,},{value: 'U',disabled: false,},{value: 'I',disabled: true,},{value: 'O',disabled: true,},{value: 'P',disabled: false,},{value: 'A',disabled: false,},{value: 'S',disabled: false,},{value: 'D',disabled: false,},{value: 'F',disabled: false,},{value: 'G',disabled: false,},{value: 'H',disabled: false,},{value: 'J',disabled: false,},{value: 'K',disabled: false,},{value: 'L',disabled: false,},{value: 'Z',disabled: false,},{value: 'X',disabled: false,},{value: 'C',disabled: false,},{value: 'V',disabled: false,},{value: 'B',disabled: false,},{value: 'N',disabled: false,},{value: 'M',disabled: false,}]`| - |
+|modeShow|展示模式|String|`division`| division/popUp |
+|showPopUp|弹窗模式下控制展示|Boolean|`false`| - |
+|title|弹窗模式下展示标题|String|`请输入车牌号码`| - |
+|subtitle|弹窗模式下展示副标题|String|``| - |
+|defaultValue|默认键位值|String|``| - |
+
+#### LicensePlate Events
+
+##### @hide()
+半弹层关闭事件
+
+##### @confirm()
+键盘确认事件

components/license-plate/component.js

@@ -0,0 +1,7 @@
+export default {
+  'name': 'license-plate',
+  'text': '车牌号键入',
+  'category': 'business',
+  'description': '车牌号输入键盘',
+  'author': 'weishuodan'
+}

components/license-plate/demo/cases/demo0.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <md-license-plate :defaultValue="defaultValue"></md-license-plate>
+  </div>
+</template>
+
+<script>
import {LicensePlate} from 'mand-mobile'
+
+export default {
+  name: 'license-plate-demo',
+  components: {
+    [LicensePlate.name]: LicensePlate,
+  },
+  data() {
+    return {
+      defaultValue: '',
+    }
+  },
+  mounted() {
+    // setTimeout(()=>{
+    //   this.defaultValue = '2333888 '
+    // },10000)
+  },
+  methods: {},
+}
+
</script>
+
+<style lang="stylus" scoped>
+</style>

components/license-plate/demo/cases/demo1.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <!-- 投保人车牌号 -->
+    <md-field title="车辆信息">
+      <div @click="changeNumber">
+        <md-detail-item title="车牌号码">
+          {{ licensePlate }}
+        </md-detail-item>
+      </div>
+    </md-field>
+    <md-license-plate
+      :modeShow="'popUp'"
+      :showPopUp="showPopUp"
+      @hide="hide"
+      @confirm="confirm"
+    ></md-license-plate>
+  </div>
+</template>
+
+<script>
import {LicensePlate, DetailItem, Field} from 'mand-mobile'
+
+export default {
+  name: 'license-plate-demo',
+  title: '半弹层版',
+  components: {
+    [LicensePlate.name]: LicensePlate,
+    [DetailItem.name]: DetailItem,
+    [Field.name]: Field,
+  },
+  data() {
+    return {
+      showPopUp: false,
+      licensePlate: '',
+    }
+  },
+  methods: {
+    hide() {
+      this.showPopUp = false
+    },
+    changeNumber() {
+      this.showPopUp = true
+    },
+    confirm(value) {
+      this.hide()
+      this.licensePlate = value
+    },
+  },
+}
+
</script>
+
+<style lang="stylus">
+</style>

components/license-plate/demo/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="md-example" id="licensePlateContainer">
+    <section class="md-example-section" v-for="(demo, index) in demos" :key="index">
+      <div class="md-example-title" v-html="demo.title || '基础'"></div>
+      <div class="md-example-describe" v-html="demo.describe"></div>
+      <div class="md-example-content">
+        <component :is="demo"></component>
+      </div>
+    </section>
+	</div>
+</template>
+
+<script>
import createDemoModule from '../../../examples/create-demo-module'
+import Demo0 from './cases/demo0'
+import Demo1 from './cases/demo1'
+
+export default {...createDemoModule('license-plate', [Demo0, Demo1])}
+
</script>
+
+<style lang="stylus" scoped>
+</style>

components/license-plate/index.vue

@@ -0,0 +1,518 @@
+<template>
+  <div class="md-license-plate">
+    <div v-if="modeShow === 'division'">
+      <div
+        class="md-license-plate-input-container division"
+        :id="inputViewId"
+      >
+        <md-license-plate-input
+          :keyArray="keyArray"
+          :selectedIndex="dyCurrentIndex"
+          @keyMapping="keyMapping"
+        />
+      </div>
+      <div
+        v-if="showDivisionKeyboard"
+        class="md-license-plate-keyboard-container division"
+        :id="keyboardViewId"
+      >
+        <md-license-plate-keyboard
+          :keyboard="dyKeyboard"
+          @enter="$_onEnter"
+          @delete="$_onDelete"
+          @confirm="$_onConfirm"
+        />
+      </div>
+    </div>
+    <div v-if="modeShow === 'popUp'">
+      <md-popup
+        :value="showPopUp"
+        :hasMask="true"
+        position="bottom"
+        :maskClosable="false"
+      >
+        <md-popup-title-bar
+          only-close
+          large-radius
+          :title="title"
+          :describe="subtitle"
+          title-align="left"
+          @cancel="$_onHide"
+        ></md-popup-title-bar>
+        <div class="md-popup-content">
+          <div class="md-license-plate-input-container popUp">
+            <md-license-plate-input
+              :keyArray="keyArray"
+              :selectedIndex="dyCurrentIndex"
+              @keyMapping="keyMapping"
+            />
+          </div>
+          <div class="md-license-plate-keyboard-container popUp">
+            <md-license-plate-keyboard
+              :keyboard="dyKeyboard"
+              @enter="$_onEnter"
+              @delete="$_onDelete"
+              @confirm="$_onConfirm"
+            />
+          </div>
+        </div>
+      </md-popup>
+    </div>
+  </div>
+</template>
+
+<script>
import LicensePlateKeyboard from '../license-plate-keyboard'
+import LicensePlateInput from '../license-plate-input'
+import Popup from '../popup'
+import PopupTitlebar from '../popup/title-bar'
+import {directiveInit, queryCurParentNode, unique} from './util'
+
+export default {
+  name: 'md-license-plate',
+
+  components: {
+    [LicensePlateKeyboard.name]: LicensePlateKeyboard,
+    [LicensePlateInput.name]: LicensePlateInput,
+    [Popup.name]: Popup,
+    [PopupTitlebar.name]: PopupTitlebar,
+  },
+
+  props: {
+    // 省份数据
+    shortcuts: {
+      type: Array,
+      default: () => {
+        return [
+          '京',
+          '津',
+          '渝',
+          '沪',
+          '冀',
+          '晋',
+          '辽',
+          '吉',
+          '黑',
+          '苏',
+          '浙',
+          '皖',
+          '闽',
+          '赣',
+          '鲁',
+          '豫',
+          '鄂',
+          '湘',
+          '粤',
+          '琼',
+          '川',
+          '贵',
+          '云',
+          '陕',
+          '甘',
+          '青',
+          '蒙',
+          '桂',
+          '宁',
+          '新',
+          '藏',
+        ]
+      },
+    },
+    // 字母键盘数据
+    letterData: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            value: 'Q',
+            disabled: false,
+          },
+          {
+            value: 'W',
+            disabled: false,
+          },
+          {
+            value: 'E',
+            disabled: false,
+          },
+          {
+            value: 'R',
+            disabled: false,
+          },
+          {
+            value: 'T',
+            disabled: false,
+          },
+          {
+            value: 'Y',
+            disabled: false,
+          },
+          {
+            value: 'U',
+            disabled: false,
+          },
+          {
+            value: 'I',
+            disabled: true,
+          },
+          {
+            value: 'O',
+            disabled: true,
+          },
+          {
+            value: 'P',
+            disabled: false,
+          },
+          {
+            value: 'A',
+            disabled: false,
+          },
+          {
+            value: 'S',
+            disabled: false,
+          },
+          {
+            value: 'D',
+            disabled: false,
+          },
+          {
+            value: 'F',
+            disabled: false,
+          },
+          {
+            value: 'G',
+            disabled: false,
+          },
+          {
+            value: 'H',
+            disabled: false,
+          },
+          {
+            value: 'J',
+            disabled: false,
+          },
+          {
+            value: 'K',
+            disabled: false,
+          },
+          {
+            value: 'L',
+            disabled: false,
+          },
+          {
+            value: 'Z',
+            disabled: false,
+          },
+          {
+            value: 'X',
+            disabled: false,
+          },
+          {
+            value: 'C',
+            disabled: false,
+          },
+          {
+            value: 'V',
+            disabled: false,
+          },
+          {
+            value: 'B',
+            disabled: false,
+          },
+          {
+            value: 'N',
+            disabled: false,
+          },
+          {
+            value: 'M',
+            disabled: false,
+          },
+        ]
+      },
+    },
+    // 展示模式
+    modeShow: {
+      type: String,
+      default: 'division',
+    },
+    // 弹窗模式下控制展示
+    showPopUp: {
+      type: Boolean,
+      default: false,
+    },
+    // 弹窗模式下展示标题
+    title: {
+      type: String,
+      default: '请输入车牌号码',
+    },
+    // 弹窗模式下展示副标题
+    subtitle: {
+      type: String,
+      default: '',
+    },
+    // 默认键位值
+    defaultValue: {
+      type: String,
+      default: '',
+    },
+    // 是否可无序点击
+    disorderClick: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      // 数字键盘
+      numbers: [
+        {
+          value: 1,
+          disabled: false,
+        },
+        {
+          value: 2,
+          disabled: false,
+        },
+        {
+          value: 3,
+          disabled: false,
+        },
+        {
+          value: 4,
+          disabled: false,
+        },
+        {
+          value: 5,
+          disabled: false,
+        },
+        {
+          value: 6,
+          disabled: false,
+        },
+        {
+          value: 7,
+          disabled: false,
+        },
+        {
+          value: 8,
+          disabled: false,
+        },
+        {
+          value: 9,
+          disabled: false,
+        },
+        {
+          value: 0,
+          disabled: false,
+        },
+      ],
+      // 用户输入的车牌数据
+      keyArray: ['', '', '', '', '', '', '', ''],
+      selectedIndex: 0, // 当前用户输入框已选中的序号
+      showDivisionKeyboard: false,
+      inputViewId: unique() + '_divisionInput',
+      keyboardViewId: unique() + '_divisionKeyboard',
+    }
+  },
+
+  computed: {
+    // 计算属性，当前选中输入框的序号
+    dyCurrentIndex: function() {
+      return this.selectedIndex
+    },
+    dyKeyboard() {
+      let numbers = [],
+        shortcuts = [],
+        letterData = [],
+        keyboardType,
+        mixedKeyboard = []
+
+      // 省市键盘数据
+      shortcuts = this.shortcuts
+
+      // 省市键盘 (第一位)
+      if (this.dyCurrentIndex === 0) {
+        keyboardType = 1
+      } else {
+        keyboardType = 2
+
+        // 拼接功能键
+        letterData = JSON.parse(JSON.stringify(this.letterData))
+        // 删除键
+        letterData.splice(19, 0, {
+          type: 'delete',
+          disabled: false,
+        })
+        // 确定键
+        letterData.push({
+          type: 'confirm',
+          text: '确定',
+          disabled: false,
+        })
+
+        // 数字键数据
+        numbers = this.numbers
+
+        // 数字字母键盘禁用数字 (第二位)
+        if (this.selectedIndex === 1) {
+          numbers = this.numbers.map(item => {
+            return {
+              value: item.value,
+              disabled: true,
+            }
+          })
+        }
+
+        mixedKeyboard = numbers.concat(letterData)
+      }
+
+      return {
+        shortcuts,
+        mixedKeyboard,
+        keyboardType,
+      }
+    },
+    // 健值为null特殊处理
+    keyArrayCopy() {
+      return this.keyArray.map(item => {
+        if (item) {
+          return item
+        } else {
+          return ' '
+        }
+      })
+    },
+  },
+
+  created() {
+    // 初始化自定义指令
+    directiveInit()
+  },
+
+  methods: {
+    keyMapping(index) {
+      // 展示键盘
+      if (!this.showDivisionKeyboard) {
+        this.showDivisionKeyboard = true
+        // 抛出展示分离键盘事件
+        this.$emit('sdKeyboard', this.keyboardViewId)
+      }
+      // 顺序填写，不可无序点击
+      if (!this.disorderClick && !this.keyArray[index + 1] && !this.keyArray[index - 1] && index > 0) {
+        return
+      }
+      this.selectedIndex = index
+    },
+    // 半弹层关闭事件
+    $_onHide() {
+      this.$emit('hide')
+    },
+    // 键入事件
+    $_onEnter(value) {
+      // 重置键位值
+      this.$set(this.keyArray, this.selectedIndex, value)
+
+      // 点击的是最后一个键位值，掩藏键盘，自动执行确认事件
+      if (this.selectedIndex === this.keyArray.length - 1) {
+        this.$_onConfirm()
+      } else {
+        this.selectedIndex = this.selectedIndex + 1
+      }
+    },
+    // 删除事件
+    $_onDelete() {
+      // 清空当前键位值
+      this.$set(this.keyArray, this.selectedIndex, '')
+
+      // 当前键位是第一个键位，隐藏分离键盘
+      if (this.selectedIndex <= 0) {
+        if (this.modeShow === 'division') {
+          this.hideDivisionKeyboard()
+        }
+      } else {
+        this.selectedIndex = this.selectedIndex - 1
+      }
+    },
+    // 键盘确认事件
+    $_onConfirm() {
+      if (this.modeShow === 'division') {
+        this.hideDivisionKeyboard()
+      }
+      this.$emit('confirm', this.keyArrayCopy.join(''))
+    },
+    // 隐藏分离键盘
+    hideDivisionKeyboard(e) {
+      let isKeyboard = false
+      if (e && e.target) {
+        isKeyboard = queryCurParentNode(e.target, [this.keyboardViewId, this.inputViewId])
+      }
+      if (this.showDivisionKeyboard && !isKeyboard) {
+        this.showDivisionKeyboard = false
+        // 抛出隐藏分离键盘事件
+        this.$emit('hdKeyboard', this.keyArrayCopy.join(''))
+      }
+    },
+  },
+
+  mounted() {
+    // 分离键位模式下，添加点击监听事件
+    this.modeShow === 'division' && document.addEventListener('click', this.hideDivisionKeyboard)
+  },
+
+  beforeDestroy() {
+    this.modeShow === 'division' && document.removeEventListener('click', this.hideDivisionKeyboard)
+  },
+
+  watch: {
+    defaultValue: {
+      handler(newVal) {
+        if (newVal !== '') {
+          const defaultValueArray = this.defaultValue.split('')
+          const keyArrayCopy = JSON.parse(JSON.stringify(this.keyArray))
+
+          keyArrayCopy.forEach((item, index) => {
+            if (defaultValueArray[index]) {
+              keyArrayCopy[index] = defaultValueArray[index]
+            } else {
+              keyArrayCopy[index] = ''
+            }
+          })
+
+          this.keyArray = keyArrayCopy
+        }
+      },
+      immediate: true,
+    },
+  },
+}
+
</script>
+
+
+<style lang="stylus">
+.md-license-plate {
+  .md-license-plate-keyboard-container {
+    width: 100%;
+    background: #D9E0E7;
+    &.division {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+      position: fixed;
+      bottom: 0px;
+      left: 0px;
+      z-index: 99999;
+    }
+  }
+  .md-license-plate-input-container{
+    &.popUp{
+      background: #fff;
+      padding: 20px 40px 40px;
+    }
+  }
+  .md-popup-box.md-slide-up{
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+    border-radius: 40px 40px 0 0;
+    background: #fff;
+  }
+}
+</style>

components/license-plate/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Landscape - Demo Basic 1`] = `
+<div>
+  <div class="license-plate-container">
+    <div>
+      <div id="ac4c8e71-e294-736d-a047-8c2b04c44585_divisionInput" class="input-container division">
+        <div class="input-widget">
+          <div class="input-item active animation">
+            <div class="input-item_content">
+
+            </div>
+          </div>
+          <div class="input-item">
+            <div class="input-item_content">
+
+            </div>
+          </div>
+          <div class="input-item">
+            <div class="input-item_content">
+
+            </div>
+          </div>
+          <div class="input-item">
+            <div class="input-item_content">
+
+            </div>
+          </div>
+          <div class="input-item">
+            <div class="input-item_content">
+
+            </div>
+          </div>
+          <div class="input-item">
+            <div class="input-item_content">
+
+            </div>
+          </div>
+          <div class="input-item">
+            <div class="input-item_content">
+
+            </div>
+          </div>
+          <div class="input-item">
+            <div class="input-item_content">
+              <div class="emptyValue">
+                <div>+</div>
+                <div class="emptyValue_text">新能源</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!---->
+    </div>
+    <!---->
+  </div>
+</div>
+`;

components/license-plate/test/cases/demo0.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <md-license-plate></md-license-plate>
+  </div>
+</template>
+
+<script>
import {LicensePlate} from 'mand-mobile'
+
+export default {
+  name: 'license-plate-demo',
+  components: {
+    [LicensePlate.name]: LicensePlate,
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+}
+
</script>
+
+<style lang="stylus">
+</style>

components/license-plate/test/demo.spec.js

@@ -0,0 +1,8 @@
+import Demo0 from './cases/demo0'
+import {renderToString} from '@vue/server-test-utils'
+
+describe('Landscape - Demo', () => {
+  test('Basic', () => {
+    expect(renderToString(Demo0)).toMatchSnapshot()
+  })
+})

components/license-plate/util.js

@@ -0,0 +1,131 @@
+// Vue插件，Tap事件处理
+import Vue from 'vue'
+
+const _IS_MOBILE = /mobile|table|ip(ad|hone|od)|android/i.test(navigator.userAgent)
+
+const plugin = {
+  bind: function(el, binding) {
+    el.binding_ref = binding
+    el.tapEventHandler = function(evt) {
+      const {disabled = false, methods} = el.binding_ref.value
+      // 阻止事件冒泡
+      evt.stopPropagation()
+      // 禁止点击，直接返回
+      if (disabled) {
+        return
+      }
+      // 执行点击方法，并回传值
+      methods(el.innerHTML)
+    }
+    el.tapEventHandler_nop = function() {}
+
+    // 绑定监听事件
+    if (_IS_MOBILE) {
+      el.addEventListener('touchstart', el.tapEventHandler, false)
+      el.addEventListener('touchend', el.tapEventHandler_nop, false)
+    } else {
+      el.addEventListener('click', el.tapEventHandler, false)
+    }
+  },
+  unbind: function(el) {
+    // 移除监听事件
+    if (_IS_MOBILE) {
+      el.removeEventListener('touchstart', el.tapEventHandler, false)
+      el.removeEventListener('touchend', el.tapEventHandler_nop, false)
+    } else {
+      el.removeEventListener('click', el.tapEventHandler, false)
+    }
+  },
+  update: function(el, binding) {
+    el.binding_ref = binding
+  },
+}
+
+export const directiveInit = () => {
+  Vue.directive('tap', plugin)
+}
+
+export const getParentTag = (startTag, parentTagList = []) => {
+  // 传入标签是否是DOM对象
+  if (!(startTag instanceof HTMLElement)) {
+    return parentTagList
+  }
+  // 没有父节点
+  if (!startTag.parentElement) {
+    return parentTagList
+  }
+  // 父级标签是否是body,是着停止返回集合,反之继续
+  if (startTag.parentElement.nodeName !== 'BODY') {
+    // 放入集合
+    parentTagList.push(startTag.parentElement)
+    // 再上一层寻找
+    return getParentTag(startTag.parentElement, parentTagList)
+  } else {
+    // 返回集合,结束
+    return parentTagList
+  }
+}
+
+export const queryCurParentNode = (startTag, idList) => {
+  // 查询所有父节点
+  const parentTagList = getParentTag(startTag)
+
+  // 查询当前父节点是否含有当前查找className
+  const tParentNode = parentTagList.findIndex(item => {
+    return (item.id && idList.includes(item.id)) || false
+  })
+  return tParentNode !== -1
+}
+
+/**
+ * 将元素滚动到顶部
+ * @param {number} position 滚动位置
+ * @param {element} elem 要滚动的元素
+ */
+function scrollToTop(elem, position) {
+  if (elem && elem.scrollTo) {
+    elem.scrollTo(0, position)
+  } else {
+    elem.scrollTop = position
+  }
+}
+
+/**
+ * 将元素平滑滚动到指定位置
+ * @param position 要滚动的位置
+ * @param elem 有滑动的元素
+ */
+export function scrollSmoothTo(position, elem) {
+  // 当前滚动高度
+  let scrollTop = elem && elem.scrollTop
+  // 滚动step方法
+  let step = function() {
+    // 距离目标滚动距离
+    let distance = position - scrollTop
+    // 目标滚动位置
+    scrollTop = scrollTop + distance / 5
+    if (Math.abs(distance) < 1) {
+      scrollToTop(elem, position)
+    } else {
+      scrollToTop(elem, scrollTop)
+      requestAnimationFrame(step)
+    }
+  }
+  step()
+}
+
+// 生成唯一值
+export function unique() {
+  let nowTime = Date.now() || new Date().getTime()
+  let str = 'xxxxxxxx-xxxx-7xxx-yxxx-xxxxxxxxxxxx'
+  // 高精度计时器
+  if (window.performance && typeof window.performance.now === 'function') {
+    nowTime += performance.now()
+  }
+
+  return str.replace(/[xy]/gi, c => {
+    let r = ((nowTime + Math.random() * 16) % 16) | 0
+    nowTime = Math.floor(nowTime / 16)
+    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
+  })
+}

components/number-keyboard/README.en-US.md

@@ -26,7 +26,7 @@ Vue.component(NumberKeyboard.name, NumberKeyboard)
 |type|keyboard type|String|`professional`|`professional` with confirmation key and decimal point is often used for price or amount input, `simple` is generally used for password or verification code input|
 |disorder|if numeric keys of keyboard are out of order|Boolean|`false`| -|
 |is-hide-confirm|automatically hide the keyboard when confirming|Boolean|`true`| -|
-|text-render|customize value of specified key|Function(value: string): string|-|replaceable key `0,1,...9,.`|
+|text-render|customize value of specified key|Function(value: string): string|-|replaceable key `0,1,...9,.`,`0,00`<sup class="version-after">2.6.2+</sup>|
 |ok-text|text of confirmation key|String|`confirm`|-|
 |disabled <sup class="version-after">2.6.0+|to disable the keyboard|Boolean|`false`|-|
 |duplicate-zero <sup class="version-after">2.6.0+</sup>|show `00` key|Boolean|`false`|This props is valid only when `type` is `professional` |

components/number-keyboard/README.md

@@ -26,7 +26,7 @@ Vue.component(NumberKeyboard.name, NumberKeyboard)
 |type|键盘类型|String|`professional`|`professional`有确认键和小数点常用于价格或金额输入，`simple`一般用于密码或验证码输入|
 |disorder|键盘数字键是否乱序|Boolean|`false`| -|
 |is-hide-confirm|确认时自动隐藏键盘|Boolean|`true`| -|
-|text-render|自定义指定按键的值|Function(value: string): string|-|可替换键`0,1,...9,.`|
+|text-render|自定义指定按键的值|Function(value: string): string|-|可替换键`1,...9,.`,`0,00`<sup class="version-after">2.6.2+</sup>|
 |ok-text|键盘确认键文案|String|`确认`|-|
 |disabled <sup class="version-after">2.6.0+</sup>|禁用键盘|Boolean|`false`|-|
 |duplicate-zero <sup class="version-after">2.6.0+</sup>|展示 `00` 按键|Boolean|`false`|仅 `type` 为 `professional`模式下生效|

components/number-keyboard/board.vue

@@ -16,13 +16,13 @@
           <md-number-key
             class="keyboard-number-item"
             v-if="!hideDot"
-            :value="duplicateZero ? '0' : dotText"
+            :value="duplicateZero ? zeroValue : dotText"
             @press="$_onNumberKeyClick"
           ></md-number-key>
           <md-number-key
             class="keyboard-number-item"
             :class="{'large-item': hideDot}"
-            :value="duplicateZero ? '00' : keyNumberList[9]"
+            :value="duplicateZero ? duplicateZeroValue : keyNumberList[9]"
             @press="$_onNumberKeyClick"
           ></md-number-key>
           <md-number-key
@@ -129,6 +129,12 @@ export default {
     dotText() {
       return this.textRender('.') || '.'
     },
+    duplicateZeroValue() {
+      return this.textRender('00') || '00'
+    },
+    zeroValue() {
+      return this.textRender('0') || '0'
+    },
   },
 
   created() {

components/number-keyboard/demo/cases/demo0.vue

@@ -27,6 +27,7 @@
     <md-number-keyboard
       v-model="isKeyBoardShow[3]"
       :duplicate-zero="true"
+      :text-render="keyFormatter1"
       @enter="onNumberEnter"
       @delete="onNumberDelete"
     ></md-number-keyboard>
@@ -61,6 +62,18 @@ export default {
         return 'x'
       }
     },
+    keyFormatter1(val) {
+      console.log(val)
+      if (val === '0') {
+        return '.'
+      }
+      if (val === '00') {
+        return '0'
+      }
+      if (val === '.') {
+        return '-'
+      }
+    },
     onNumberEnter(val) {
       this.number += val
     },

components/popup/demo/cases/demo0.vue

@@ -102,7 +102,7 @@ export default {
   .md-example-popup
     position relative
     font-size 28px
-    font-family DINPro
+    font-family DIDIFD-Medium
     font-weight 500
     box-sizing border-box
     text-align center

components/popup/test/cases/demo0.vue

@@ -71,7 +71,7 @@ export default {
   .md-example-popup
     position relative
     font-size 28px
-    font-family DINPro
+    font-family DIDIFD-Medium
     font-weight 500
     box-sizing border-box
     text-align center

components/popup/title-bar.vue

@@ -3,7 +3,10 @@
     class="md-popup-title-bar"
     :class="[
       `title-align-${titleAlign}`,
-      ...{large: !!describe, 'large-radius': largeRadius}
+      {
+        large: !!describe,
+        'large-radius': largeRadius
+      }
     ]"
     @touchmove="$_preventScroll"
   >

components/progress/component.js

@@ -1,7 +1,7 @@
 export default {
-  "name": "progress",
-  "text": "进度",
-  "category": "basic",
-  "description": "",
-  "author": "xuxiaoyan"
+  'name': 'progress',
+  'text': '进度',
+  'category': 'basic',
+  'description': '',
+  'author': 'xuxiaoyan'
 }

components/progress/demo/cases/demo0.vue

@@ -40,7 +40,7 @@ export default {
   justify-content center
   .md-progress
     margin 0 10px
-  .progress-value
+  .progress-valuDIDIFD-Medium
     font-size 24px
-    font-family DINPro-Medium
+    font-family DIDIFD-Medium
 </style>

components/progress/demo/cases/demo1.vue

@@ -56,7 +56,7 @@ export default {
   justify-content center
   .md-progress
     margin 0 10px
-  .progress-value
+  .progress-valuDIDIFD-Medium
     font-size 24px
-    font-family DINPro-Medium
+    font-family DIDIFD-Medium
 </style>

components/progress/test/cases/demo0.vue

@@ -40,7 +40,7 @@ export default {
   justify-content center
   .md-progress
     margin 0 10px
-  .progress-value
+  .progress-valuDIDIFD-Medium
     font-size 24px
-    font-family DINPro-Medium
+    font-family DIDIFD-Medium
 </style>

components/progress/test/cases/demo1.vue

@@ -52,7 +52,7 @@ export default {
   justify-content center
   .md-progress
     margin 0 10px
-  .progress-value
+  .progress-valuDIDIFD-Medium
     font-size 24px
-    font-family DINPro-Medium
+    font-family DIDIFD-Medium
 </style>

components/ruler/index.vue

@@ -235,7 +235,7 @@ export default {
 
       ctx.lineWidth = 2
       ctx.font = `${_fontSize *
-        ratio}px DIN Alternate, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif`
+        ratio}px DIDIFD-Medium, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif`
 
       for (let i = 0; i <= unitCount; i++) {
         const _x = x + i * blank

components/scroll-view/demo/cases/demo0.vue

@@ -63,6 +63,6 @@ export default {
     padding 30px 0
     text-align center
     font-size 28px
-    font-family DINAlternate-Bold
+    font-family DIDIFD-Medium
     border-bottom .5px solid #efefef
-</style>
+</style>

components/scroll-view/demo/cases/demo1.vue

@@ -50,8 +50,8 @@ export default {
       width 1000px
       .scroll-view-item
         flex 1
-        text-align center
+        text-align cDIDIFD-Medium
         font-size 28px
         font-family DINAlternate-Bold
         border-right .5px solid #efefef
-</style>
+</style>

components/scroll-view/demo/cases/demo2.vue

@@ -65,8 +65,8 @@ export default {
   background #FFF
   .scroll-view-item
     padding 30px 0
-    text-align center
+    text-align cDIDIFD-Medium
     font-size 28px
     font-family DINAlternate-Bold
     border-bottom .5px solid #efefef
-</style>
+</style>

components/scroll-view/demo/cases/demo3.vue

@@ -65,8 +65,8 @@ export default {
   background #FFF
   .scroll-view-item
     padding 30px 0
-    text-align center
+    text-align cDIDIFD-Medium
     font-size 32px
     font-family DINAlternate-Bold
     border-bottom .5px solid #efefef
-</style>
+</style>

components/scroll-view/demo/cases/demo4.vue

@@ -91,7 +91,7 @@ export default {
     z-index 2
   .scroll-view-category-title, .scroll-view-striky-title
     padding 10px 0
-    text-align center
+    text-align cDIDIFD-Medium
     font-size 32px
     font-family DINAlternate-Bold
     background-color #f0f0f0
@@ -100,4 +100,4 @@ export default {
     text-align center
     font-size 32px
     border-bottom .5px solid #efefef
-</style>
+</style>

components/scroll-view/demo/cases/demo6.vue

@@ -102,8 +102,8 @@ export default {
     box-shadow 0 2px 8px #f0f0f0
   .scroll-view-item
     padding 30px 0
-    text-align center
+    text-align cDIDIFD-Medium
     font-size 32px
     font-family DINAlternate-Bold
     border-bottom .5px solid #efefef
-</style>
+</style>

components/transition/demo/cases/demo0.vue

@@ -154,7 +154,7 @@ export default {
   .md-button
     margin-bottom 20px
   .md-example-popup
-    position relative
+    position relDIDIFD-Medium
     font-size 28px
     font-family DINAlternate-Bold
     font-weight 500

components/water-mark/component.js

@@ -1,7 +1,7 @@
 export default {
-  "name": "water-mark",
-  "text": "水印",
-  "category": "business",
-  "description": "",
-  "author": "xuxiaoyan"
+  'name': 'water-mark',
+  'text': '水印',
+  'category': 'business',
+  'description': '',
+  'author': 'xuxiaoyan'
 }

components/water-mark/index.vue

@@ -143,7 +143,7 @@ export default {
       const xCount = Math.ceil(ctxWidth * ratio / (contentLength + realSpacing))
       const yCount = Math.ceil(ctxHeight * ratio / (_fontSize + realSpacing))
 
-      ctx.font = `${_fontSize}px DIN Alternate, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif`
+      ctx.font = `${_fontSize}px DIDIFD-Medium, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif`
       ctx.fillStyle = color
 
       let ctxX = 0

examples/components.json

@@ -1 +1,261 @@
-[{"category":"basic","name":"Basic","text":"基础","list":[{"name":"ActionBar","path":"/action-bar","icon":"action-bar","text":"操作栏"},{"name":"ActivityIndicator","path":"/activity-indicator","icon":"activity-indicator","text":"活动指示器"},{"path":"/button","name":"Button","icon":"button","text":"按钮"},{"name":"CellItem","path":"/cell-item","icon":"cell-item","text":"列表单元"},{"name":"DetailItem","path":"/detail-item","icon":"detail-item","text":"清单项"},{"name":"DropMenu","path":"/drop-menu","icon":"drop-menu","text":"下拉菜单"},{"path":"/icon","name":"Icon","icon":"icon","text":"图标"},{"name":"ImageReader","path":"/image-reader","icon":"image-reader","text":"图片选择器"},{"name":"ImageViewer","path":"/image-viewer","icon":"image-viewer","text":"图片浏览器"},{"name":"NoticeBar","path":"/notice-bar","icon":"notice-bar","text":"通知栏"},{"name":"Progress","path":"/progress","icon":"progress","text":"进度"},{"name":"Skeleton","path":"/skeleton","icon":"skeleton","text":"骨架屏"},{"name":"Stepper","path":"/stepper","icon":"stepper","text":"步进器"},{"name":"Steps","path":"/steps","icon":"steps","text":"步骤条"},{"name":"Swiper","path":"/swiper","icon":"swiper","text":"轮播"},{"name":"TabBar","path":"/tab-bar","icon":"tab-bar","text":"标签栏"},{"name":"Tabs","path":"/tabs","icon":"tabs","text":"标签页"},{"name":"Tag","path":"/tag","icon":"tag","text":"标签"}]},{"category":"business","name":"Business","text":"业务相关","list":[{"name":"Amount","path":"/amount","icon":"amount","text":"金融数字"},{"name":"Bill","path":"/bill","icon":"bill","text":"票据"},{"name":"Captcha","path":"/captcha","icon":"captcha","text":"验证码窗口"},{"name":"Cashier","path":"/cashier","icon":"cashier","text":"收银台"},{"name":"Chart","path":"/chart","icon":"chart","text":"折线图表"},{"name":"Landscape","path":"/landscape","icon":"landscape","text":"压屏窗"},{"name":"ResultPage","path":"/result-page","icon":"result-page","text":"结果页"},{"name":"Ruler","path":"/ruler","icon":"ruler","text":"刻度尺"},{"name":"WaterMark","path":"/water-mark","icon":"water-mark","text":"水印"}]},{"category":"feedback","name":"Feedback","text":"操作反馈","list":[{"name":"ActionSheet","path":"/action-sheet","icon":"action-sheet","text":"动作面板"},{"name":"DatePicker","path":"/date-picker","icon":"date-picker","text":"日期选择器"},{"name":"Dialog","path":"/dialog","icon":"dialog","text":"模态窗"},{"name":"Picker","path":"/picker","icon":"picker","text":"选择器"},{"name":"Popup","path":"/popup","icon":"popup","text":"弹出层"},{"name":"Selector","path":"/selector","icon":"selector","text":"列表选择器"},{"name":"TabPicker","path":"/tab-picker","icon":"tab-picker","text":"多频道选择器"},{"name":"Tip","path":"/tip","icon":"tip","text":"气泡提示"},{"name":"Toast","path":"/toast","icon":"toast","text":"轻提示"},{"name":"Transition","path":"/transition","icon":"transition","text":"动画"}]},{"category":"form","name":"Form","text":"表单相关","list":[{"name":"Agree","path":"/agree","icon":"agree","text":"勾选按钮"},{"name":"Check","path":"/check","icon":"check","text":"选择项组"},{"name":"Codebox","path":"/codebox","icon":"codebox","text":"字符码输入框"},{"name":"Field","path":"/field","icon":"field","text":"区域列表组合"},{"name":"InputItem","path":"/input-item","icon":"input-item","text":"输入框"},{"name":"NumberKeyboard","path":"/number-keyboard","icon":"number-keyboard","text":"数字键盘"},{"name":"Radio","path":"/radio","icon":"radio","text":"单选框"},{"name":"Slider","path":"/slider","icon":"slider","text":"滑块"},{"name":"Switch","path":"/switch","icon":"switch","text":"开关"},{"name":"TextareaItem","path":"/textarea-item","icon":"textarea-item","text":"文本域"}]},{"category":"gesture","name":"Gesture","text":"手势","list":[{"name":"ScrollView","path":"/scroll-view","icon":"scroll-view","text":"滚动区域/下拉刷新"}]}]
+[
+  {
+    "category": "basic",
+    "name": "Basic",
+    "text": "基础",
+    "list": [
+      {
+        "name": "ActionBar",
+        "path": "/action-bar",
+        "icon": "action-bar",
+        "text": "操作栏"
+      },
+      {
+        "name": "ActivityIndicator",
+        "path": "/activity-indicator",
+        "icon": "activity-indicator",
+        "text": "活动指示器"
+      },
+      { "path": "/button", "name": "Button", "icon": "button", "text": "按钮" },
+      {
+        "name": "CellItem",
+        "path": "/cell-item",
+        "icon": "cell-item",
+        "text": "列表单元"
+      },
+      {
+        "name": "DetailItem",
+        "path": "/detail-item",
+        "icon": "detail-item",
+        "text": "清单项"
+      },
+      {
+        "name": "DropMenu",
+        "path": "/drop-menu",
+        "icon": "drop-menu",
+        "text": "下拉菜单"
+      },
+      { "path": "/icon", "name": "Icon", "icon": "icon", "text": "图标" },
+      {
+        "name": "ImageReader",
+        "path": "/image-reader",
+        "icon": "image-reader",
+        "text": "图片选择器"
+      },
+      {
+        "name": "ImageViewer",
+        "path": "/image-viewer",
+        "icon": "image-viewer",
+        "text": "图片浏览器"
+      },
+      {
+        "name": "NoticeBar",
+        "path": "/notice-bar",
+        "icon": "notice-bar",
+        "text": "通知栏"
+      },
+      {
+        "name": "Progress",
+        "path": "/progress",
+        "icon": "progress",
+        "text": "进度"
+      },
+      {
+        "name": "Skeleton",
+        "path": "/skeleton",
+        "icon": "skeleton",
+        "text": "骨架屏"
+      },
+      {
+        "name": "Stepper",
+        "path": "/stepper",
+        "icon": "stepper",
+        "text": "步进器"
+      },
+      { "name": "Steps", "path": "/steps", "icon": "steps", "text": "步骤条" },
+      { "name": "Swiper", "path": "/swiper", "icon": "swiper", "text": "轮播" },
+      {
+        "name": "TabBar",
+        "path": "/tab-bar",
+        "icon": "tab-bar",
+        "text": "标签栏"
+      },
+      { "name": "Tabs", "path": "/tabs", "icon": "tabs", "text": "标签页" },
+      { "name": "Tag", "path": "/tag", "icon": "tag", "text": "标签" }
+    ]
+  },
+  {
+    "category": "business",
+    "name": "Business",
+    "text": "业务相关",
+    "list": [
+      {
+        "name": "Amount",
+        "path": "/amount",
+        "icon": "amount",
+        "text": "金融数字"
+      },
+      { "name": "Bill", "path": "/bill", "icon": "bill", "text": "票据" },
+      {
+        "name": "Captcha",
+        "path": "/captcha",
+        "icon": "captcha",
+        "text": "验证码窗口"
+      },
+      {
+        "name": "Cashier",
+        "path": "/cashier",
+        "icon": "cashier",
+        "text": "收银台"
+      },
+      {
+        "name": "Chart",
+        "path": "/chart",
+        "icon": "chart",
+        "text": "折线图表"
+      },
+      {
+        "name": "Landscape",
+        "path": "/landscape",
+        "icon": "landscape",
+        "text": "压屏窗"
+      },
+      {
+        "name": "ResultPage",
+        "path": "/result-page",
+        "icon": "result-page",
+        "text": "结果页"
+      },
+      { "name": "Ruler", "path": "/ruler", "icon": "ruler", "text": "刻度尺" },
+      {
+        "name": "WaterMark",
+        "path": "/water-mark",
+        "icon": "water-mark",
+        "text": "水印"
+      },
+      {
+        "name": "LicensePlate",
+        "path": "/license-plate",
+        "icon": "license-plate",
+        "text": "车牌号"
+      }
+    ]
+  },
+  {
+    "category": "feedback",
+    "name": "Feedback",
+    "text": "操作反馈",
+    "list": [
+      {
+        "name": "ActionSheet",
+        "path": "/action-sheet",
+        "icon": "action-sheet",
+        "text": "动作面板"
+      },
+      {
+        "name": "DatePicker",
+        "path": "/date-picker",
+        "icon": "date-picker",
+        "text": "日期选择器"
+      },
+      {
+        "name": "Dialog",
+        "path": "/dialog",
+        "icon": "dialog",
+        "text": "模态窗"
+      },
+      {
+        "name": "Picker",
+        "path": "/picker",
+        "icon": "picker",
+        "text": "选择器"
+      },
+      { "name": "Popup", "path": "/popup", "icon": "popup", "text": "弹出层" },
+      {
+        "name": "Selector",
+        "path": "/selector",
+        "icon": "selector",
+        "text": "列表选择器"
+      },
+      {
+        "name": "TabPicker",
+        "path": "/tab-picker",
+        "icon": "tab-picker",
+        "text": "多频道选择器"
+      },
+      { "name": "Tip", "path": "/tip", "icon": "tip", "text": "气泡提示" },
+      { "name": "Toast", "path": "/toast", "icon": "toast", "text": "轻提示" },
+      {
+        "name": "Transition",
+        "path": "/transition",
+        "icon": "transition",
+        "text": "动画"
+      }
+    ]
+  },
+  {
+    "category": "form",
+    "name": "Form",
+    "text": "表单相关",
+    "list": [
+      {
+        "name": "Agree",
+        "path": "/agree",
+        "icon": "agree",
+        "text": "勾选按钮"
+      },
+      {
+        "name": "Check",
+        "path": "/check",
+        "icon": "check",
+        "text": "选择项组"
+      },
+      {
+        "name": "Codebox",
+        "path": "/codebox",
+        "icon": "codebox",
+        "text": "字符码输入框"
+      },
+      {
+        "name": "Field",
+        "path": "/field",
+        "icon": "field",
+        "text": "区域列表组合"
+      },
+      {
+        "name": "InputItem",
+        "path": "/input-item",
+        "icon": "input-item",
+        "text": "输入框"
+      },
+      {
+        "name": "NumberKeyboard",
+        "path": "/number-keyboard",
+        "icon": "number-keyboard",
+        "text": "数字键盘"
+      },
+      { "name": "Radio", "path": "/radio", "icon": "radio", "text": "单选框" },
+      { "name": "Slider", "path": "/slider", "icon": "slider", "text": "滑块" },
+      { "name": "Switch", "path": "/switch", "icon": "switch", "text": "开关" },
+      {
+        "name": "TextareaItem",
+        "path": "/textarea-item",
+        "icon": "textarea-item",
+        "text": "文本域"
+      }
+    ]
+  },
+  {
+    "category": "gesture",
+    "name": "Gesture",
+    "text": "手势",
+    "list": [
+      {
+        "name": "ScrollView",
+        "path": "/scroll-view",
+        "icon": "scroll-view",
+        "text": "滚动区域/下拉刷新"
+      }
+    ]
+  }
+]

examples/demo-index.js

@@ -49,4 +49,5 @@ export {default as Progress} from '../components/progress/demo'
 export {default as Ruler} from '../components/ruler/demo'
 export {default as TextareaItem} from '../components/textarea-item/demo'
 export {default as Skeleton} from '../components/skeleton/demo'
+export {default as LicensePlate} from '../components/license-plate/demo'
 /* @init<%export {default as ${componentNameUpper}} from '../components/${componentName}/demo'%> */

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mand-mobile",
-  "version": "2.6.1",
+  "version": "2.6.2-beta.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2688,9 +2688,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30000938",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000938.tgz",
-      "integrity": "sha512-ekW8NQ3/FvokviDxhdKLZZAx7PptXNwxKgXtnR5y+PR3hckwuP3yJ1Ir+4/c97dsHNqtAyfKUGdw8P4EYzBNgw==",
+      "version": "1.0.30001562",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001562.tgz",
+      "integrity": "sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng==",
       "dev": true
     },
     "capture-exit": {
@@ -4275,12 +4275,6 @@
             "lodash.uniq": "^4.5.0"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30000942",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000942.tgz",
-          "integrity": "sha512-wLf+IhZUy2rfz48tc40OH7jHjXjnvDFEYqBHluINs/6MgzoNLPf25zhE4NOVzqxLKndf+hau81sAW0RcGHIaBQ==",
-          "dev": true
-        },
         "coa": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -16305,12 +16299,6 @@
             "node-releases": "^1.1.8"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30000942",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000942.tgz",
-          "integrity": "sha512-wLf+IhZUy2rfz48tc40OH7jHjXjnvDFEYqBHluINs/6MgzoNLPf25zhE4NOVzqxLKndf+hau81sAW0RcGHIaBQ==",
-          "dev": true
-        },
         "postcss": {
           "version": "7.0.14",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
@@ -20620,12 +20608,6 @@
             "node-releases": "^1.1.8"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30000942",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000942.tgz",
-          "integrity": "sha512-wLf+IhZUy2rfz48tc40OH7jHjXjnvDFEYqBHluINs/6MgzoNLPf25zhE4NOVzqxLKndf+hau81sAW0RcGHIaBQ==",
-          "dev": true
-        },
         "postcss": {
           "version": "7.0.14",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mand-mobile",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "A Vue.js 2.0 Mobile UI Toolkit",
   "homepage": "https://didi.github.io/mand-mobile",
   "main": "lib/mand-mobile.umd.js",
@@ -228,5 +228,6 @@
   "engines": {
     "node": ">=6",
     "npm": ">=3"
-  }
+  },
+  "dependencies": {}
 }

site/package.json

@@ -13,7 +13,7 @@
     "indices": "node ./build/bin/gen-indices --log"
   },
   "dependencies": {
-    "mand-mobile": "^2.6.1",
+    "mand-mobile": "^2.6.2",
     "v-tooltip": "^2.0.0-rc.31",
     "vue-clipboard2": "^0.1.0",
     "vue-qrcode-component": "^2.1.1",

site/theme/default/components/Footer.vue

@@ -101,7 +101,7 @@ export default {
       font-family AvenirNext-Medium, "Microsoft Yahei", "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif !important
       font-weight 600
       span
-        font-family DINAlternate-Bold
+        font-family DIDIFD-Medium
     li
       float left
       width 100%

site/theme/default/components/Header.vue

@@ -200,7 +200,7 @@ export default {
         position relative
         color #333
         font-size 16px
-        font-family DINAlternate-Bold, AvenirNext-Medium,"Microsoft Yahei","Lato","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Tahoma,sans-serif  !important
+        font-family DIDIFD-Medium, AvenirNext-Medium,"Microsoft Yahei","Lato","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Verdana,Tahoma,sans-serif  !important
         transition all .3s
       span.ads-text
         margin-top 3px
@@ -213,7 +213,6 @@ export default {
         img
           margin-right 2px
           height 100%
-        // font-family DINAlternate-Bold
 
   .default-header-content
     display inline-block

site/theme/default/components/Menu.vue

@@ -15,21 +15,21 @@
     <ul class="menu-list-0">
       <li class="menu-item-0" v-for="(item0, index0) in menu" :key="index0">
         <a :href="item0.link" v-if="item0.link" v-html="item0.text" target="_blank"></a>
-        <router-link 
+        <router-link
           v-else
           :to="`/${lang}/${nav}/${item0.name}`"
           :class="{disabled: !item0.src && !item0.markdown}"
           v-html="item0.text">
-        </router-link> 
+        </router-link>
         <ul class="menu-list-1" v-if="item0.menu">
           <li class="menu-item-1" v-for="(item1, index1) in item0.menu" :key="index1">
             <a :href="item1.link" v-if="item1.link" v-html="item1.text" target="_blank"></a>
-            <router-link 
+            <router-link
               v-else
               :to="`/${lang}/${nav}/${item0.name}/${item1.name}`"
               :class="{disabled: !item1.src && !item1.markdown}"
               v-html="item1.text">
-            </router-link> 
+            </router-link>
             <ul class="menu-list-2" v-if="item1.menu">
               <li class="menu-item-2" v-for="(item2, index2) in item1.menu" :key="index2">
                 <a :href="item2.link" v-if="item2.link" v-html="item2.text" target="_blank"></a>
@@ -38,7 +38,7 @@
                   :to="`/${lang}/${nav}/${item0.name}/${item1.name}/${item2.name}`"
                   :class="{disabled: !item2.src && !item2.markdown}"
                   v-html="item2.text">
-                </router-link> 
+                </router-link>
               </li>
             </ul>
           </li>
@@ -135,7 +135,7 @@ export default {
     float left
     width 100%
     font-size 14px
-    font-family DINAlternate-Bold, AvenirNext-Medium, "Microsoft Yahei", "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif
+    font-family DIDIFD-Medium, AvenirNext-Medium, "Microsoft Yahei", "Lato", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif
     color #314659
     text-decoration none
     transition all .3s

site/theme/default/components/Search.vue

@@ -43,9 +43,9 @@ export default {
   },
   methods: {
     initDocSearch(lang) {
-      this.docsearchIns = docsearch({ 
-        apiKey: 'f6464cd4e62607a36f03b4cd59d2141b', 
-        indexName: 'mand-mobile', 
+      this.docsearchIns = docsearch({
+        apiKey: 'f6464cd4e62607a36f03b4cd59d2141b',
+        indexName: 'mand-mobile',
         inputSelector: '#search-query-nav',
         algoliaOptions: { 'facetFilters': [`lang:${lang}`] },
         debug: process.env.NODE_ENV !== 'production'
@@ -108,7 +108,7 @@ export default {
         color #FFF
         margin-top 0
         border none
-        font-family DINAlternate-Bold
+        font-family DIDIFD-Medium
       .algolia-docsearch-suggestion--wrapper
         padding 0
         background #F9FAFB

types/mand-mobile.d.ts

@@ -65,6 +65,7 @@ export class Transition extends MandComponent { }
 export class WaterMark extends MandComponent { }
 export class TextareaItem extends MandComponent { }
 export class Skeleton extends MandComponent { }
+export class LicensePlate extends MandComponent { }
 /* @init<%export class ${componentNameUpper} extends MandComponent { }%> */