mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(NumberKeyboard): use delete icon instead of delete text (#6151)
This commit is contained in:
neverland
GitHub
parent
3360ca7eb0
commit
9e7d72eff2
12
src/number-keyboard/DeleteIcon.tsx
Normal file
12
src/number-keyboard/DeleteIcon.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,5 +1,6 @@
|
|||||||
import { createNamespace } from '../utils';
|
import { createNamespace } from '../utils';
|
||||||
import { TouchMixin } from '../mixins/touch';
|
import { TouchMixin } from '../mixins/touch';
|
||||||
|
import DeleteIcon from './DeleteIcon';
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('key');
|
const [createComponent, bem] = createNamespace('key');
|
||||||
|
|
||||||
@ -47,6 +48,17 @@ export default createComponent({
|
|||||||
this.$emit('press', this.text, this.type);
|
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() {
|
render() {
|
||||||
@ -64,7 +76,7 @@ export default createComponent({
|
|||||||
},
|
},
|
||||||
])}
|
])}
|
||||||
>
|
>
|
||||||
{this.slots('default') || this.text}
|
{this.genContent()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -11,16 +11,14 @@ Vue.use(NumberKeyboard);
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
### Default Style
|
### Default Keyboard
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-button @touchstart.stop="show = true">
|
<van-cell @touchstart.native.stop="show = true">
|
||||||
Show Keyboard
|
Show Keyboard
|
||||||
</van-button>
|
</van-cell>
|
||||||
<van-number-keyboard
|
<van-number-keyboard
|
||||||
:show="show"
|
:show="show"
|
||||||
extra-key="."
|
|
||||||
close-button-text="Close"
|
|
||||||
@blur="show = false"
|
@blur="show = false"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@delete="onDelete"
|
@delete="onDelete"
|
||||||
@ -47,7 +45,7 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### Custom Style
|
### Keyboard With Sidebar
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-number-keyboard
|
<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
|
### Bind Value
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -70,7 +106,6 @@ export default {
|
|||||||
:value="value"
|
:value="value"
|
||||||
@touchstart.native.stop="show = true"
|
@touchstart.native.stop="show = true"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<van-number-keyboard
|
<van-number-keyboard
|
||||||
v-model="value"
|
v-model="value"
|
||||||
:show="show"
|
: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
|
## API
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
| 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_ | - |
|
| 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_ | - |
|
| title | Keyboard title | _string_ | - |
|
||||||
| maxlength `v2.0.2` | Value maxlength | _number \| string_ | - |
|
| maxlength `v2.0.2` | Value maxlength | _number \| string_ | - |
|
||||||
| transition | Whether to show transition animation | _boolean_ | `true` |
|
| transition | Whether to show transition animation | _boolean_ | `true` |
|
||||||
| z-index | Keyboard z-index | _number \| string_ | `100` |
|
| z-index | Keyboard z-index | _number \| string_ | `100` |
|
||||||
| extra-key | Content of bottom left key | _string_ | `''` |
|
| extra-key | Content of bottom left key | _string_ | `''` |
|
||||||
| close-button-text | Close button text | _string_ | `-` |
|
| close-button-text | Close button text | _string_ | - |
|
||||||
| delete-button-text | Delete button text | _string_ | `delete` |
|
| delete-button-text | Delete button text | _string_ | Delete Icon |
|
||||||
| show-delete-key `v2.5.9` | Whether to show delete button | _boolean_ | `true` |
|
| 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` |
|
| 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` |
|
| 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 | - |
|
| delete | Triggered when press delete key | - |
|
||||||
| close | Triggered when click close button | - |
|
| close | Triggered when click close button | - |
|
||||||
| blur | Triggered when click close button or blur keyboard | - |
|
| blur | Triggered when click close button or blur keyboard | - |
|
||||||
| show | Triggered when keyboard is fully displayed. | - |
|
| show | Triggered when keyboard is fully displayed | - |
|
||||||
| hide | Triggered when keyboard is fully hidden. | - |
|
| hide | Triggered when keyboard is fully hidden | - |
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
### 介绍
|
### 介绍
|
||||||
|
|
||||||
数字键盘，提供两种样式风格，可以与[密码输入框](#/zh-CN/password-input)或自定义的输入框组件配合使用
|
数字虚拟键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用
|
||||||
|
|
||||||
### 引入
|
### 引入
|
||||||
|
|
||||||
@ -17,14 +17,14 @@ Vue.use(NumberKeyboard);
|
|||||||
|
|
||||||
### 默认样式
|
### 默认样式
|
||||||
|
|
||||||
|
数字键盘提供了 `input`、`delete`、`blur` 事件，分别对应输入内容、删除内容和失去焦点的动作
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-button @touchstart.stop="show = true">
|
<van-cell @touchstart.native.stop="show = true">
|
||||||
弹出默认键盘
|
弹出默认键盘
|
||||||
</van-button>
|
</van-cell>
|
||||||
<van-number-keyboard
|
<van-number-keyboard
|
||||||
:show="show"
|
:show="show"
|
||||||
extra-key="."
|
|
||||||
close-button-text="完成"
|
|
||||||
@blur="show = false"
|
@blur="show = false"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@delete="onDelete"
|
@delete="onDelete"
|
||||||
@ -51,7 +51,11 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### 自定义样式
|
> 点击键盘以外的区域时，键盘会自动收起，通过阻止元素上的 touchstart 事件冒泡可以避免键盘收起。
|
||||||
|
|
||||||
|
### 带右侧栏的键盘
|
||||||
|
|
||||||
|
将 theme 属性设置为 `custom` 来展示键盘的右侧栏，常用于输入金额的场景
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-number-keyboard
|
<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
|
```html
|
||||||
<van-field
|
<van-field
|
||||||
@ -76,7 +117,6 @@ export default {
|
|||||||
:value="value"
|
:value="value"
|
||||||
@touchstart.native.stop="show = true"
|
@touchstart.native.stop="show = true"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<van-number-keyboard
|
<van-number-keyboard
|
||||||
v-model="value"
|
v-model="value"
|
||||||
:show="show"
|
: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
|
## API
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| v-model `v2.0.2` | 当前输入值 | _string_ | - |
|
| v-model (value) `v2.0.2` | 当前输入值 | _string_ | - |
|
||||||
| show | 是否显示键盘 | _boolean_ | - |
|
| show | 是否显示键盘 | _boolean_ | - |
|
||||||
| theme | 样式风格，可选值为 `default` `custom` | _string_ | `default` |
|
| theme | 样式风格，可选值为 `custom` | _string_ | `default` |
|
||||||
| title | 键盘标题 | _string_ | - |
|
| title | 键盘标题 | _string_ | - |
|
||||||
| maxlength `v2.0.2` | 输入值最大长度 | _number \| string_ | - |
|
| maxlength `v2.0.2` | 输入值最大长度 | _number \| string_ | - |
|
||||||
| transition | 是否开启过场动画 | _boolean_ | `true` |
|
| transition | 是否开启过场动画 | _boolean_ | `true` |
|
||||||
| z-index | 键盘 z-index | _number \| string_ | `100` |
|
| z-index | 键盘 z-index | _number \| string_ | `100` |
|
||||||
| extra-key | 左下角按键内容 | _string_ | `''` |
|
| extra-key | 左下角按键内容 | _string_ | `''` |
|
||||||
| close-button-text | 关闭按钮文字，空则不展示 | _string_ | `-` |
|
| close-button-text | 关闭按钮文字，空则不展示 | _string_ | - |
|
||||||
| delete-button-text | 删除按钮文字 | _string_ | `删除` |
|
| delete-button-text | 删除按钮文字，空则展示删除图标 | _string_ | - |
|
||||||
| show-delete-key `v2.5.9` | 是否展示删除按钮 | _boolean_ | `true` |
|
| show-delete-key `v2.5.9` | 是否展示删除图标 | _boolean_ | `true` |
|
||||||
| hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` |
|
| hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` |
|
||||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
|
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
|
||||||
|
|
||||||
|
|||||||
@ -1,85 +1,68 @@
|
|||||||
<template>
|
<template>
|
||||||
<demo-section>
|
<demo-section>
|
||||||
<demo-block :title="t('default')">
|
<van-cell is-link @touchstart.native.stop="keyboard = 'default'">
|
||||||
<van-button type="primary" @touchstart.stop="keyboard = 'default'">
|
{{ t('button1') }}
|
||||||
{{ t('button1') }}
|
</van-cell>
|
||||||
</van-button>
|
<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
|
<van-number-keyboard
|
||||||
:show="keyboard === 'default'"
|
:show="keyboard === 'default'"
|
||||||
:close-button-text="t('close')"
|
@blur="keyboard = ''"
|
||||||
extra-key="."
|
@input="onInput"
|
||||||
@blur="keyboard = ''"
|
@delete="onDelete"
|
||||||
@input="onInput"
|
/>
|
||||||
@delete="onDelete"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('custom')">
|
<van-number-keyboard
|
||||||
<van-button type="info" @touchstart.stop="keyboard = 'custom'">
|
:show="keyboard === 'custom'"
|
||||||
{{ t('button2') }}
|
:close-button-text="t('close')"
|
||||||
</van-button>
|
theme="custom"
|
||||||
|
extra-key="."
|
||||||
|
@blur="keyboard = ''"
|
||||||
|
@input="onInput"
|
||||||
|
@delete="onDelete"
|
||||||
|
/>
|
||||||
|
|
||||||
<van-number-keyboard
|
<van-number-keyboard
|
||||||
:show="keyboard === 'custom'"
|
:show="keyboard === 'extraKey'"
|
||||||
:close-button-text="t('close')"
|
:close-button-text="t('close')"
|
||||||
theme="custom"
|
extra-key="X"
|
||||||
extra-key="."
|
@blur="keyboard = ''"
|
||||||
@blur="keyboard = ''"
|
@input="onInput"
|
||||||
@input="onInput"
|
@delete="onDelete"
|
||||||
@delete="onDelete"
|
/>
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('bindValue')">
|
<van-number-keyboard
|
||||||
<van-cell-group>
|
:show="keyboard === 'title'"
|
||||||
<van-field
|
:close-button-text="t('close')"
|
||||||
readonly
|
:title="t('title')"
|
||||||
clickable
|
extra-key="."
|
||||||
:value="value"
|
@blur="keyboard = ''"
|
||||||
:placeholder="t('clickToInput')"
|
@input="onInput"
|
||||||
@touchstart.native.stop="keyboard = 'bindValue'"
|
@delete="onDelete"
|
||||||
/>
|
/>
|
||||||
</van-cell-group>
|
|
||||||
|
|
||||||
<van-number-keyboard
|
<van-number-keyboard
|
||||||
v-model="value"
|
v-model="value"
|
||||||
:show="keyboard === 'bindValue'"
|
:show="keyboard === 'bindValue'"
|
||||||
maxlength="6"
|
maxlength="6"
|
||||||
@blur="keyboard = ''"
|
@blur="keyboard = ''"
|
||||||
/>
|
/>
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('extraKey')">
|
|
||||||
<van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">
|
|
||||||
{{ t('button3') }}
|
|
||||||
</van-button>
|
|
||||||
|
|
||||||
<van-number-keyboard
|
|
||||||
:show="keyboard === 'extraKey'"
|
|
||||||
:close-button-text="t('close')"
|
|
||||||
extra-key="X"
|
|
||||||
@blur="keyboard = ''"
|
|
||||||
@input="onInput"
|
|
||||||
@delete="onDelete"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('title')">
|
|
||||||
<van-button plain type="info" @touchstart.stop="keyboard = 'title'">
|
|
||||||
{{ t('button4') }}
|
|
||||||
</van-button>
|
|
||||||
|
|
||||||
<van-number-keyboard
|
|
||||||
:show="keyboard === 'title'"
|
|
||||||
:close-button-text="t('close')"
|
|
||||||
:title="t('title')"
|
|
||||||
extra-key="."
|
|
||||||
@blur="keyboard = ''"
|
|
||||||
@input="onInput"
|
|
||||||
@delete="onDelete"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
</demo-section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -87,32 +70,28 @@
|
|||||||
export default {
|
export default {
|
||||||
i18n: {
|
i18n: {
|
||||||
'zh-CN': {
|
'zh-CN': {
|
||||||
default: '默认样式',
|
|
||||||
custom: '自定义样式',
|
|
||||||
button1: '弹出默认键盘',
|
|
||||||
button2: '弹出自定义键盘',
|
|
||||||
button3: '弹出身份证号码键盘',
|
|
||||||
button4: '弹出自定义标题键盘',
|
|
||||||
close: '完成',
|
close: '完成',
|
||||||
input: '输入',
|
input: '输入',
|
||||||
|
title: '键盘标题',
|
||||||
|
button1: '弹出默认键盘',
|
||||||
|
button2: '弹出带右侧栏的键盘',
|
||||||
|
button3: '弹出身份证号键盘',
|
||||||
|
button4: '弹出带标题的键盘',
|
||||||
bindValue: '双向绑定',
|
bindValue: '双向绑定',
|
||||||
clickToInput: '点此输入',
|
clickToInput: '点此输入',
|
||||||
extraKey: '左下角按键内容',
|
extraKey: '左下角按键内容',
|
||||||
title: '键盘标题',
|
|
||||||
},
|
},
|
||||||
'en-US': {
|
'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',
|
close: 'Close',
|
||||||
input: 'Input',
|
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',
|
bindValue: 'Bind Value',
|
||||||
clickToInput: 'Click To Input',
|
clickToInput: 'Click To Input',
|
||||||
extraKey: 'Bottom Left Button Content',
|
extraKey: 'IdNumber Keyboard',
|
||||||
title: 'Keyboard Title',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -140,7 +119,6 @@ export default {
|
|||||||
|
|
||||||
.demo-number-keyboard {
|
.demo-number-keyboard {
|
||||||
padding-bottom: 300px;
|
padding-bottom: 300px;
|
||||||
background: @white;
|
|
||||||
|
|
||||||
.van-button {
|
.van-button {
|
||||||
margin-left: @padding-md;
|
margin-left: @padding-md;
|
||||||
|
|||||||
@ -79,7 +79,7 @@ export default createComponent({
|
|||||||
{ text: this.extraKey, type: 'extra', color: 'gray' },
|
{ text: this.extraKey, type: 'extra', color: 'gray' },
|
||||||
{ text: 0 },
|
{ text: 0 },
|
||||||
{
|
{
|
||||||
text: this.showDeleteKey ? this.deleteText : '',
|
text: this.showDeleteKey ? this.deleteButtonText : '',
|
||||||
type: this.showDeleteKey ? 'delete' : '',
|
type: this.showDeleteKey ? 'delete' : '',
|
||||||
color: 'gray',
|
color: 'gray',
|
||||||
}
|
}
|
||||||
@ -95,10 +95,6 @@ export default createComponent({
|
|||||||
|
|
||||||
return keys;
|
return keys;
|
||||||
},
|
},
|
||||||
|
|
||||||
deleteText() {
|
|
||||||
return this.deleteButtonText || t('delete');
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
@ -184,8 +180,9 @@ export default createComponent({
|
|||||||
{this.showDeleteKey && (
|
{this.showDeleteKey && (
|
||||||
<Key
|
<Key
|
||||||
large
|
large
|
||||||
text={this.deleteText}
|
text={this.deleteButtonText}
|
||||||
type="delete"
|
type="delete"
|
||||||
|
color="gray"
|
||||||
onPress={this.onPress}
|
onPress={this.onPress}
|
||||||
>
|
>
|
||||||
{this.slots('delete')}
|
{this.slots('delete')}
|
||||||
|
|||||||
@ -117,4 +117,9 @@
|
|||||||
flex-basis: 66%;
|
flex-basis: 66%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__delete-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,245 +2,259 @@
|
|||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
exports[`renders demo correctly 1`] = `
|
||||||
<div>
|
<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><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
<div class="van-number-keyboard van-number-keyboard--with-title" name="van-slide-up">
|
<!----></i>
|
||||||
<div class="van-number-keyboard__title"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
</div>
|
||||||
<div class="van-number-keyboard__body">
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||||
<div class="van-number-keyboard__keys">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-key__wrapper">
|
弹出带右侧栏的键盘
|
||||||
<div role="button" tabindex="0" class="van-key">1</div>
|
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
</div>
|
<!----></i>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">2</div>
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||||
</div>
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-key__wrapper">
|
弹出身份证号键盘
|
||||||
<div role="button" tabindex="0" class="van-key">3</div>
|
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
</div>
|
<!----></i>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">4</div>
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||||
</div>
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
<div class="van-key__wrapper">
|
弹出带标题的键盘
|
||||||
<div role="button" tabindex="0" class="van-key">5</div>
|
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||||
</div>
|
<!----></i>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">6</div>
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||||
</div>
|
<div class="van-cell__title van-field__label"><span>双向绑定</span></div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-cell__value van-field__value">
|
||||||
<div role="button" tabindex="0" class="van-key">7</div>
|
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">8</div>
|
<div class="van-number-keyboard" name="van-slide-up">
|
||||||
</div>
|
<div class="van-number-keyboard__body">
|
||||||
<div class="van-key__wrapper">
|
<div class="van-number-keyboard__keys">
|
||||||
<div role="button" tabindex="0" class="van-key">9</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">1</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key van-key--gray">.</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">2</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">3</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
|
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||||
弹出自定义键盘
|
<div class="van-number-keyboard__body">
|
||||||
</span></button>
|
<div class="van-number-keyboard__keys">
|
||||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
<div class="van-key__wrapper">
|
||||||
<div class="van-number-keyboard__body">
|
<div role="button" tabindex="0" class="van-key">1</div>
|
||||||
<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 van-key__wrapper--wider">
|
|
||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-key__wrapper">
|
|
||||||
<div role="button" tabindex="0" class="van-key">.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="van-number-keyboard__sidebar">
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">2</div>
|
||||||
<div role="button" tabindex="0" class="van-key van-key--large van-key--delete">删除</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">3</div>
|
||||||
<div role="button" tabindex="0" class="van-key van-key--blue van-key--large">完成</div>
|
</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 van-key__wrapper--wider">
|
||||||
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-key__wrapper">
|
||||||
|
<div role="button" tabindex="0" class="van-key">.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-number-keyboard__sidebar">
|
||||||
|
<div class="van-key__wrapper">
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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-cell-group van-hairline--top-bottom">
|
<div class="van-number-keyboard__title"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
<div class="van-number-keyboard__body">
|
||||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
<div class="van-number-keyboard__keys">
|
||||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
|
<div class="van-key__wrapper">
|
||||||
|
<div role="button" tabindex="0" class="van-key">1</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">2</div>
|
||||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
</div>
|
||||||
<div class="van-number-keyboard__body">
|
<div class="van-key__wrapper">
|
||||||
<div class="van-number-keyboard__keys">
|
<div role="button" tabindex="0" class="van-key">3</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">1</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">4</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">2</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">5</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">3</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">6</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">4</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">7</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">5</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">8</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">6</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">9</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">7</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key van-key--gray">X</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">8</div>
|
<div class="van-key__wrapper">
|
||||||
</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
<div class="van-key__wrapper">
|
</div>
|
||||||
<div role="button" tabindex="0" class="van-key">9</div>
|
<div class="van-key__wrapper">
|
||||||
</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">
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
|
</svg></div>
|
||||||
</div>
|
|
||||||
<div class="van-key__wrapper">
|
|
||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-key__wrapper">
|
|
||||||
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<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>
|
||||||
</span></button>
|
<div class="van-number-keyboard__body">
|
||||||
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
|
<div class="van-number-keyboard__keys">
|
||||||
<div class="van-number-keyboard__title"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-number-keyboard__body">
|
<div role="button" tabindex="0" class="van-key">1</div>
|
||||||
<div class="van-number-keyboard__keys">
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">1</div>
|
<div role="button" tabindex="0" class="van-key">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">2</div>
|
<div role="button" tabindex="0" class="van-key">3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">3</div>
|
<div role="button" tabindex="0" class="van-key">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">4</div>
|
<div role="button" tabindex="0" class="van-key">5</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">5</div>
|
<div role="button" tabindex="0" class="van-key">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">6</div>
|
<div role="button" tabindex="0" class="van-key">7</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">7</div>
|
<div role="button" tabindex="0" class="van-key">8</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">8</div>
|
<div role="button" tabindex="0" class="van-key">9</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">9</div>
|
<div role="button" tabindex="0" class="van-key van-key--gray">.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key van-key--gray">X</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<div class="van-key__wrapper">
|
||||||
<div role="button" tabindex="0" class="van-key">0</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">
|
||||||
</div>
|
<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>
|
||||||
<div class="van-key__wrapper">
|
</svg></div>
|
||||||
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||||
弹出自定义标题键盘
|
<div class="van-number-keyboard__body">
|
||||||
</span></button>
|
<div class="van-number-keyboard__keys">
|
||||||
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
|
<div class="van-key__wrapper">
|
||||||
<div class="van-number-keyboard__title"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
|
<div role="button" tabindex="0" class="van-key">1</div>
|
||||||
<div class="van-number-keyboard__body">
|
</div>
|
||||||
<div class="van-number-keyboard__keys">
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">2</div>
|
||||||
<div role="button" tabindex="0" class="van-key">1</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">3</div>
|
||||||
<div role="button" tabindex="0" class="van-key">2</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">4</div>
|
||||||
<div role="button" tabindex="0" class="van-key">3</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">5</div>
|
||||||
<div role="button" tabindex="0" class="van-key">4</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">6</div>
|
||||||
<div role="button" tabindex="0" class="van-key">5</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">7</div>
|
||||||
<div role="button" tabindex="0" class="van-key">6</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">8</div>
|
||||||
<div role="button" tabindex="0" class="van-key">7</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">9</div>
|
||||||
<div role="button" tabindex="0" class="van-key">8</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<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">9</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<div class="van-key__wrapper">
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
<div role="button" tabindex="0" class="van-key van-key--gray">.</div>
|
</div>
|
||||||
</div>
|
<div class="van-key__wrapper">
|
||||||
<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">
|
||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<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>
|
||||||
</div>
|
</svg></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>
|
</div>
|
||||||
|
|||||||
@ -38,7 +38,9 @@ exports[`extra-key slot 1`] = `
|
|||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
@ -83,7 +85,9 @@ exports[`focus on key 1`] = `
|
|||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
@ -128,7 +132,9 @@ exports[`focus on key 2`] = `
|
|||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
@ -173,7 +179,9 @@ exports[`move and blur key 1`] = `
|
|||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
@ -218,7 +226,9 @@ exports[`move and blur key 2`] = `
|
|||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
@ -263,7 +273,9 @@ exports[`move and blur key 3`] = `
|
|||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
@ -309,7 +321,9 @@ exports[`render title 1`] = `
|
|||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
@ -355,7 +369,9 @@ exports[`title-left slot 1`] = `
|
|||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
|
|||||||
@ -53,7 +53,9 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div role="button" tabindex="0" class="van-key">0</div>
|
<div role="button" tabindex="0" class="van-key">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-key__wrapper">
|
<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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user