blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(NumberKeyboard): use delete icon instead of delete text (#6151)

Browse Source
This commit is contained in:
neverland 2020-04-27 19:14:44 +08:00 committed by GitHub
parent 3360ca7eb0
commit 9e7d72eff2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 464 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/number-keyboard/DeleteIcon.tsx Normal file
View File

@ -0,0 +1,12 @@
export default {
render() {
return (
<svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg">
<path
d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
fill="currentColor"
/>
</svg>
);
},
};

14
src/number-keyboard/Key.js
View File

@ -1,5 +1,6 @@
import { createNamespace } from '../utils';
import { TouchMixin } from '../mixins/touch';
import DeleteIcon from './DeleteIcon';
const [createComponent, bem] = createNamespace('key');
@ -47,6 +48,17 @@ export default createComponent({
this.$emit('press', this.text, this.type);
}
},
genContent() {
const isDelete = this.type === 'delete';
const text = this.slots('default') || this.text;
if (isDelete) {
return text || <DeleteIcon class={bem('delete-icon')} />;
}
return text;
},
},
render() {
@ -64,7 +76,7 @@ export default createComponent({
},
])}
>
{this.slots('default') || this.text}
{this.genContent()}
</div>
</div>
);

100
src/number-keyboard/README.md
View File

@ -11,16 +11,14 @@ Vue.use(NumberKeyboard);
## Usage
### Default Style
### Default Keyboard
```html
<van-button @touchstart.stop="show = true">
<van-cell @touchstart.native.stop="show = true">
Show Keyboard
</van-button>
</van-cell>
<van-number-keyboard
:show="show"
extra-key="."
close-button-text="Close"
@blur="show = false"
@input="onInput"
@delete="onDelete"
@ -47,7 +45,7 @@ export default {
};
```
### Custom Style
### Keyboard With Sidebar
```html
<van-number-keyboard
@ -61,6 +59,44 @@ export default {
/>
```
### IdNumber Keyboard
Use `extra-key` prop to set the content of bottom left button
```html
<van-cell plain type="primary" @touchstart.native.stop="show = true">
Show IdNumber Keyboard
</van-cell>
<van-number-keyboard
:show="show"
extra-key="X"
close-button-text="Close"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
### Keyboard With Title
Use `title` prop to set keyboard title
```html
<van-cell plain type="info" @touchstart.native.stop="show = true">
Show Keyboard With Title
</van-cell>
<van-number-keyboard
:show="show"
title="Keyboard Title"
extra-key="."
close-button-text="Close"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
### Bind Value
```html
@ -70,7 +106,6 @@ export default {
:value="value"
@touchstart.native.stop="show = true"
/>
<van-number-keyboard
v-model="value"
:show="show"
@ -90,61 +125,22 @@ 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
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model `v2.0.2` | Current value | _string_ | - |
| v-model (value) `v2.0.2` | Current value | _string_ | - |
| show | Whether to show keyboard | _boolean_ | - |
| theme | Keyboard theme，can be set to `default` `custom` | _string_ | `default` |
| theme | Keyboard theme，can be set to `custom` | _string_ | `default` |
| title | Keyboard title | _string_ | - |
| maxlength `v2.0.2` | Value maxlength | _number \| string_ | - |
| transition | Whether to show transition animation | _boolean_ | `true` |
| z-index | Keyboard z-index | _number \| string_ | `100` |
| extra-key | Content of bottom left key | _string_ | `''` |
| close-button-text | Close button text | _string_ | `-` |
| delete-button-text | Delete button text | _string_ | `delete` |
| close-button-text | Close button text | _string_ | - |
| delete-button-text | Delete button text | _string_ | Delete Icon |
| show-delete-key `v2.5.9` | Whether to show delete button | _boolean_ | `true` |
| hide-on-click-outside | Whether to hide keyboard when click outside | _boolean_ | `true` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
@ -157,8 +153,8 @@ Use `title` prop to set keyboard title
| delete | Triggered when press delete key | - |
| close | Triggered when click close button | - |
| blur | Triggered when click close button or blur keyboard | - |
| show | Triggered when keyboard is fully displayed. | - |
| hide | Triggered when keyboard is fully hidden. | - |
| show | Triggered when keyboard is fully displayed | - |
| hide | Triggered when keyboard is fully hidden | - |
### Slots

105
src/number-keyboard/README.zh-CN.md
View File

@ -2,7 +2,7 @@
### 介绍
数字键盘，提供两种样式风格，可以与[密码输入框](#/zh-CN/password-input)或自定义的输入框组件配合使用
数字虚拟键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用
### 引入
@ -17,14 +17,14 @@ Vue.use(NumberKeyboard);
### 默认样式
数字键盘提供了 `input`、`delete`、`blur` 事件，分别对应输入内容、删除内容和失去焦点的动作
```html
<van-button @touchstart.stop="show = true">
<van-cell @touchstart.native.stop="show = true">
弹出默认键盘
</van-button>
</van-cell>
<van-number-keyboard
:show="show"
extra-key="."
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
@ -51,7 +51,11 @@ export default {
};
```
### 自定义样式
> 点击键盘以外的区域时，键盘会自动收起，通过阻止元素上的 touchstart 事件冒泡可以避免键盘收起。
### 带右侧栏的键盘
将 theme 属性设置为 `custom` 来展示键盘的右侧栏，常用于输入金额的场景
```html
<van-number-keyboard
@ -65,9 +69,46 @@ export default {
/>
```
### 身份证号键盘
通过 `extra-key` 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 `extra-key` 设置为 `X`
```html
<van-cell plain type="primary" @touchstart.native.stop="show = true">
弹出身份证号键盘
</van-cell>
<van-number-keyboard
:show="show"
extra-key="X"
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
### 键盘标题
通过 `title` 属性可以设置键盘标题
```html
<van-cell plain type="info" @touchstart.native.stop="show = true">
弹出带标题的键盘
</van-cell>
<van-number-keyboard
:show="show"
title="键盘标题"
extra-key="."
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
### 双向绑定
可以通过`v-model`绑定键盘当前输入值
可以通过 `v-model` 绑定键盘当前输入值
```html
<van-field
@ -76,7 +117,6 @@ export default {
:value="value"
@touchstart.native.stop="show = true"
/>
<van-number-keyboard
v-model="value"
:show="show"
@ -96,62 +136,23 @@ 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
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model `v2.0.2` | 当前输入值 | _string_ | - |
| v-model (value) `v2.0.2` | 当前输入值 | _string_ | - |
| show | 是否显示键盘 | _boolean_ | - |
| theme | 样式风格，可选值为 `default` `custom` | _string_ | `default` |
| theme | 样式风格，可选值为 `custom` | _string_ | `default` |
| title | 键盘标题 | _string_ | - |
| maxlength `v2.0.2` | 输入值最大长度 | _number \| string_ | - |
| transition | 是否开启过场动画 | _boolean_ | `true` |
| z-index | 键盘 z-index | _number \| string_ | `100` |
| extra-key | 左下角按键内容 | _string_ | `''` |
| close-button-text | 关闭按钮文字，空则不展示 | _string_ | `-` |
| delete-button-text | 删除按钮文字 | _string_ | `删除` |
| show-delete-key `v2.5.9` | 是否展示删除按钮 | _boolean_ | `true` |
| close-button-text | 关闭按钮文字，空则不展示 | _string_ | - |
| delete-button-text | 删除按钮文字，空则展示删除图标 | _string_ | - |
| show-delete-key `v2.5.9` | 是否展示删除图标 | _boolean_ | `true` |
| hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |

96
src/number-keyboard/demo/index.vue
View File

@ -1,24 +1,32 @@
<template>
<demo-section>
<demo-block :title="t('default')">
<van-button type="primary" @touchstart.stop="keyboard = 'default'">
<van-cell is-link @touchstart.native.stop="keyboard = 'default'">
{{ t('button1') }}
</van-button>
</van-cell>
<van-cell is-link @touchstart.native.stop="keyboard = 'custom'">
{{ t('button2') }}
</van-cell>
<van-cell is-link @touchstart.native.stop="keyboard = 'extraKey'">
{{ t('button3') }}
</van-cell>
<van-cell is-link @touchstart.native.stop="keyboard = 'title'">
{{ t('button4') }}
</van-cell>
<van-field
readonly
clickable
:value="value"
:label="t('bindValue')"
:placeholder="t('clickToInput')"
@touchstart.native.stop="keyboard = 'bindValue'"
/>
<van-number-keyboard
:show="keyboard === 'default'"
:close-button-text="t('close')"
extra-key="."
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
</demo-block>
<demo-block :title="t('custom')">
<van-button type="info" @touchstart.stop="keyboard = 'custom'">
{{ t('button2') }}
</van-button>
<van-number-keyboard
:show="keyboard === 'custom'"
@ -29,31 +37,6 @@
@input="onInput"
@delete="onDelete"
/>
</demo-block>
<demo-block :title="t('bindValue')">
<van-cell-group>
<van-field
readonly
clickable
:value="value"
:placeholder="t('clickToInput')"
@touchstart.native.stop="keyboard = 'bindValue'"
/>
</van-cell-group>
<van-number-keyboard
v-model="value"
:show="keyboard === 'bindValue'"
maxlength="6"
@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'"
@ -63,12 +46,6 @@
@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'"
@ -79,7 +56,13 @@
@input="onInput"
@delete="onDelete"
/>
</demo-block>
<van-number-keyboard
v-model="value"
:show="keyboard === 'bindValue'"
maxlength="6"
@blur="keyboard = ''"
/>
</demo-section>
</template>
@ -87,32 +70,28 @@
export default {
i18n: {
'zh-CN': {
default: '默认样式',
custom: '自定义样式',
button1: '弹出默认键盘',
button2: '弹出自定义键盘',
button3: '弹出身份证号码键盘',
button4: '弹出自定义标题键盘',
close: '完成',
input: '输入',
title: '键盘标题',
button1: '弹出默认键盘',
button2: '弹出带右侧栏的键盘',
button3: '弹出身份证号键盘',
button4: '弹出带标题的键盘',
bindValue: '双向绑定',
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',
title: 'Keyboard Title',
button1: 'Show Default Keyboard',
button2: 'Show Keyboard With Sidebar',
button3: 'Show IdNumber Keyboard',
button4: 'Show Keyboard With Title',
bindValue: 'Bind Value',
clickToInput: 'Click To Input',
extraKey: 'Bottom Left Button Content',
title: 'Keyboard Title',
extraKey: 'IdNumber Keyboard',
},
},
@ -140,7 +119,6 @@ export default {
.demo-number-keyboard {
padding-bottom: 300px;
background: @white;
.van-button {
margin-left: @padding-md;

9
src/number-keyboard/index.js
View File

@ -79,7 +79,7 @@ export default createComponent({
{ text: this.extraKey, type: 'extra', color: 'gray' },
{ text: 0 },
{
text: this.showDeleteKey ? this.deleteText : '',
text: this.showDeleteKey ? this.deleteButtonText : '',
type: this.showDeleteKey ? 'delete' : '',
color: 'gray',
}
@ -95,10 +95,6 @@ export default createComponent({
return keys;
},
deleteText() {
return this.deleteButtonText || t('delete');
},
},
methods: {
@ -184,8 +180,9 @@ export default createComponent({
{this.showDeleteKey && (
<Key
large
text={this.deleteText}
text={this.deleteButtonText}
type="delete"
color="gray"
onPress={this.onPress}
>
{this.slots('delete')}

5
src/number-keyboard/index.less
View File

@ -117,4 +117,9 @@
flex-basis: 66%;
}
}
&__delete-icon {
width: 32px;
height: 22px;
}
}

238
src/number-keyboard/test/__snapshots__/demo.spec.js.snap
View File

@ -2,11 +2,37 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__value van-cell__value--alone">
弹出默认键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--with-title" name="van-slide-up">
<div class="van-number-keyboard__title"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__value van-cell__value--alone">
弹出带右侧栏的键盘
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__value van-cell__value--alone">
弹出身份证号键盘
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__value van-cell__value--alone">
弹出带标题的键盘
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>双向绑定</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
</div>
</div>
<div class="van-number-keyboard" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
@ -37,21 +63,19 @@ exports[`renders demo correctly 1`] = `
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray">.</div>
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
</div>
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
弹出自定义键盘
</span></button>
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
@ -91,7 +115,9 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-number-keyboard__sidebar">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--large van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--blue van-key--large">完成</div>
@ -99,12 +125,93 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray">X</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray">.</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
</div>
</div>
</div>
@ -145,102 +252,9 @@ exports[`renders demo correctly 1`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</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--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray">X</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</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--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray">.</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>

32
src/number-keyboard/test/__snapshots__/index.spec.js.snap
View File

@ -38,7 +38,9 @@ exports[`extra-key slot 1`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
@ -83,7 +85,9 @@ exports[`focus on key 1`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
@ -128,7 +132,9 @@ exports[`focus on key 2`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
@ -173,7 +179,9 @@ exports[`move and blur key 1`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
@ -218,7 +226,9 @@ exports[`move and blur key 2`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
@ -263,7 +273,9 @@ exports[`move and blur key 3`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
@ -309,7 +321,9 @@ exports[`render title 1`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
@ -355,7 +369,9 @@ exports[`title-left slot 1`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>

4
src/password-input/test/__snapshots__/demo.spec.js.snap
View File

@ -53,7 +53,9 @@ exports[`renders demo correctly 1`] = `
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>