mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(PasswordInput): adjust demo
This commit is contained in:
chenjiahan
parent
14cd2863cc
commit
af43521fa2
@ -19,18 +19,14 @@ Vue.use(NumberKeyboard);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="Some tips"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -43,30 +39,32 @@ export default {
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Custom length
|
||||
### Custom Length
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:length="4"
|
||||
:gutter="15"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
```
|
||||
|
||||
### Without mask
|
||||
### Add Gutter
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:gutter="10"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
```
|
||||
|
||||
### Without Mask
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
@ -79,22 +77,19 @@ export default {
|
||||
|
||||
### Hint Error
|
||||
|
||||
Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits.
|
||||
Use `info` to set info message, use `error-info` prop to set error message.
|
||||
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="Some tips"
|
||||
:error-info="errorInfo"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -104,22 +99,18 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
value: '123',
|
||||
showKeyboard: true,
|
||||
errorInfo: '',
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
if (this.value.length === 6) {
|
||||
watch: {
|
||||
value(value) {
|
||||
if (value.length === 6 && value !== '123456') {
|
||||
this.errorInfo = 'Password Mistake';
|
||||
} else {
|
||||
this.errorInfo = '';
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。
|
||||
带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与[数字键盘](#/zh-CN/number-keyboard)组件配合使用。
|
||||
|
||||
### 引入
|
||||
|
||||
@ -18,19 +18,19 @@ Vue.use(NumberKeyboard);
|
||||
|
||||
### 基础用法
|
||||
|
||||
搭配数字键盘组件来实现密码输入功能。
|
||||
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="密码为 6 位数字"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -43,24 +43,30 @@ export default {
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义长度
|
||||
|
||||
通过 `length` 属性来设置密码长度。
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:length="4"
|
||||
:gutter="15"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
```
|
||||
|
||||
### 格子间距
|
||||
|
||||
通过 `gutter` 属性来设置格子之间的间距。
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:gutter="10"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
@ -68,6 +74,8 @@ export default {
|
||||
|
||||
### 明文展示
|
||||
|
||||
将 `mask` 设置为 `false` 可以明文展示输入的内容，适用于短信验证码等场景。
|
||||
|
||||
```html
|
||||
<van-password-input
|
||||
:value="value"
|
||||
@ -77,23 +85,21 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### 错误提示
|
||||
### 提示信息
|
||||
|
||||
通过 `error-info` 属性可以设置错误提示信息，例如当输入六位时提示密码错误。
|
||||
通过 `info` 属性设置提示信息，通过 `error-info` 属性设置错误提示，例如当输入六位时提示密码错误。
|
||||
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="密码为 6 位数字"
|
||||
:error-info="errorInfo"
|
||||
:focused="showKeyboard"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
v-model="value"
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
@ -103,22 +109,18 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
value: '123',
|
||||
showKeyboard: true,
|
||||
errorInfo: '',
|
||||
showKeyboard: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
if (this.value.length === 6) {
|
||||
watch: {
|
||||
value(value) {
|
||||
if (value.length === 6 && value !== '123456') {
|
||||
this.errorInfo = '密码错误';
|
||||
} else {
|
||||
this.errorInfo = '';
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -1,48 +1,56 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block ref="basicUsage" :title="t('basicUsage')">
|
||||
<van-password-input
|
||||
:value="value1"
|
||||
:info="t('info')"
|
||||
:focused="keyboard === 'value1'"
|
||||
@focus="keyboard = 'value1'"
|
||||
/>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="!!keyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="keyboard = ''"
|
||||
:value="value.basicUsage"
|
||||
:focused="current === 'basicUsage'"
|
||||
@focus="current = 'basicUsage'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customLength')">
|
||||
<demo-block ref="customLength" :title="t('customLength')">
|
||||
<van-password-input
|
||||
:value="value2"
|
||||
:value="value.customLength"
|
||||
:length="4"
|
||||
gutter="15"
|
||||
:focused="keyboard === 'value2'"
|
||||
@focus="keyboard = 'value2'"
|
||||
:focused="current === 'customLength'"
|
||||
@focus="current = 'customLength'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('removeMask')">
|
||||
<demo-block ref="addGutter" :title="t('addGutter')">
|
||||
<van-password-input
|
||||
:value="value.addGutter"
|
||||
:gutter="10"
|
||||
:focused="current === 'addGutter'"
|
||||
@focus="current = 'addGutter'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block ref="removeMask" :title="t('removeMask')">
|
||||
<van-password-input
|
||||
:value="value3"
|
||||
:mask="false"
|
||||
:focused="keyboard === 'value3'"
|
||||
@focus="keyboard = 'value3'"
|
||||
:value="value.removeMask"
|
||||
:focused="current === 'removeMask'"
|
||||
@focus="current = 'removeMask'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('hintError')">
|
||||
<demo-block ref="showInfo" :title="t('showInfo')">
|
||||
<van-password-input
|
||||
:value="value4"
|
||||
:info="t('info')"
|
||||
:value="value.showInfo"
|
||||
:error-info="errorInfo"
|
||||
:focused="keyboard === 'value4'"
|
||||
@focus="keyboard = 'value4'"
|
||||
:focused="current === 'showInfo'"
|
||||
@focus="current = 'showInfo'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="!!current"
|
||||
@blur="current = ''"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -51,46 +59,76 @@ export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
info: '密码为 6 位数字',
|
||||
customLength: '自定义长度',
|
||||
removeMask: '明文展示',
|
||||
hintError: '错误提示',
|
||||
showInfo: '提示信息',
|
||||
addGutter: '格子间距',
|
||||
errorInfo: '密码错误',
|
||||
removeMask: '明文展示',
|
||||
customLength: '自定义长度',
|
||||
},
|
||||
'en-US': {
|
||||
info: 'Some tips',
|
||||
customLength: 'Custom Length',
|
||||
removeMask: 'Remove Mask',
|
||||
hintError: 'Hint Error',
|
||||
showInfo: 'Show Info',
|
||||
addGutter: 'Add Gutter',
|
||||
errorInfo: 'Password Mistake',
|
||||
removeMask: 'Remove Mask',
|
||||
customLength: 'Custom Length',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: '123',
|
||||
value2: '123',
|
||||
value3: '123',
|
||||
value4: '123',
|
||||
keyboard: 'value1',
|
||||
value: {
|
||||
showInfo: '123',
|
||||
addGutter: '123',
|
||||
basicUsage: '123',
|
||||
removeMask: '123',
|
||||
customLength: '123',
|
||||
},
|
||||
current: 'basicUsage',
|
||||
errorInfo: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
const { keyboard } = this;
|
||||
this[keyboard] = (this[keyboard] + key).slice(0, 6);
|
||||
if (this[keyboard].length === 6) {
|
||||
this.errorInfo = this.t('errorInfo');
|
||||
} else {
|
||||
this.errorInfo = '';
|
||||
watch: {
|
||||
current(value) {
|
||||
if (value) {
|
||||
const el = this.$refs[value].$el;
|
||||
const { top } = el.getBoundingClientRect();
|
||||
window.scrollTo(0, window.pageYOffset + top);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
const { value, current } = this;
|
||||
const maxlegnth = current === 'customLength' ? 4 : 6;
|
||||
const newValue = (value[current] + key).slice(0, maxlegnth);
|
||||
|
||||
value[current] = newValue;
|
||||
|
||||
if (
|
||||
current === 'showInfo' &&
|
||||
newValue.length === 6 &&
|
||||
newValue !== '123456'
|
||||
) {
|
||||
this.errorInfo = this.t('errorInfo');
|
||||
}
|
||||
},
|
||||
onDelete() {
|
||||
const { keyboard } = this;
|
||||
this[keyboard] = this[keyboard].slice(0, this[keyboard].length - 1);
|
||||
const { value, current } = this;
|
||||
value[current] = value[current].slice(0, value[current].length - 1);
|
||||
|
||||
if (current === 'showInfo') {
|
||||
this.errorInfo = '';
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-password-input {
|
||||
min-height: 140vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,62 +14,27 @@ exports[`renders demo correctly 1`] = `
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
<div class="van-password-input__info">密码为 6 位数字</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security van-hairline--surround">
|
||||
<li class="van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-password-input">
|
||||
<ul class="van-password-input__security">
|
||||
<li class="van-password-input__item"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: visible;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-password-input__item" style="margin-left: 10px;"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,6 +60,53 @@ exports[`renders demo correctly 1`] = `
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
<li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
|
||||
</ul>
|
||||
<div class="van-password-input__info">密码为 6 位数字</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user