Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui-react
提交
f3323394
N
nutui-react
项目概览
京东前端
/
nutui-react
通知
0
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui-react
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
f3323394
编写于
8月 08, 2022
作者:
D
Drjingfubo
提交者:
GitHub
8月 08, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(numberkeyboard): new components (#192)
上级
f32858c0
变更
11
隐藏空白更改
内联
并排
Showing
11 changed file
with
1670 addition
and
0 deletion
+1670
-0
src/config.json
src/config.json
+10
-0
src/packages/numberkeyboard/_test_/__snapshots__/index.spec.tsx.snap
...s/numberkeyboard/_test_/__snapshots__/index.spec.tsx.snap
+350
-0
src/packages/numberkeyboard/_test_/index.spec.tsx
src/packages/numberkeyboard/_test_/index.spec.tsx
+84
-0
src/packages/numberkeyboard/demo.tsx
src/packages/numberkeyboard/demo.tsx
+130
-0
src/packages/numberkeyboard/doc.en-US.md
src/packages/numberkeyboard/doc.en-US.md
+227
-0
src/packages/numberkeyboard/doc.md
src/packages/numberkeyboard/doc.md
+227
-0
src/packages/numberkeyboard/doc.zh-TW.md
src/packages/numberkeyboard/doc.zh-TW.md
+227
-0
src/packages/numberkeyboard/index.ts
src/packages/numberkeyboard/index.ts
+3
-0
src/packages/numberkeyboard/numberkeyboard.scss
src/packages/numberkeyboard/numberkeyboard.scss
+106
-0
src/packages/numberkeyboard/numberkeyboard.tsx
src/packages/numberkeyboard/numberkeyboard.tsx
+283
-0
src/styles/variables.scss
src/styles/variables.scss
+23
-0
未找到文件。
src/config.json
浏览文件 @
f3323394
...
...
@@ -413,6 +413,16 @@
"sort"
:
1
,
"show"
:
true
,
"author"
:
"swag~jun"
},
{
"version"
:
"1.0.0"
,
"name"
:
"NumberKeyboard"
,
"type"
:
"component"
,
"cName"
:
"数字键盘"
,
"desc"
:
""
,
"sort"
:
16
,
"show"
:
true
,
"author"
:
"Drjingfubo"
}
]
},
...
...
src/packages/numberkeyboard/_test_/__snapshots__/index.spec.tsx.snap
0 → 100644
浏览文件 @
f3323394
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should match customKey snapshot 1`] = `
<div>
<div>
<div
class="overlay-fade-enter-active nut-overlay"
style="background-color: rgba(0, 0, 0, 0); z-index: 2000; animation-duration: 0.3s;"
/>
<div
class="popup-bottom undefined nut-popup"
style="z-index: 2000; animation-duration: 0.3s;"
>
<div
class="nut-numberkeyboard "
>
<div
class="nut-numberkeyboard__body"
>
<div
class="nut-numberkeyboard__body__keys"
>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
1
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
2
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
3
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
4
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
5
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
6
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
7
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
8
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
9
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
.
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
0
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
x
</div>
</div>
</div>
</div>
<div
class="nut-numberkeyboard__sidebar"
>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<img
alt=""
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
/>
</div>
</div>
<div
class="key-board-wrapper key-board-finish"
>
<div
class="key finish"
>
完成
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`should match snapshot 1`] = `
<div>
<div>
<div
class="overlay-fade-enter-active nut-overlay"
style="background-color: rgba(0, 0, 0, 0); z-index: 2000; animation-duration: 0.3s;"
/>
<div
class="popup-bottom undefined nut-popup"
style="z-index: 2000; animation-duration: 0.3s;"
>
<div
class="nut-numberkeyboard "
>
<div
class="nut-numberkeyboard__body"
>
<div
class="nut-numberkeyboard__body__keys"
>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
1
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
2
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
3
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
4
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
5
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
6
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
7
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
8
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
9
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key lock"
>
<img
alt=""
src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png"
/>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key"
>
<div>
0
</div>
</div>
</div>
<div
class="key-board-wrapper"
>
<div
class="key delete"
>
<img
alt=""
src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
src/packages/numberkeyboard/_test_/index.spec.tsx
0 → 100644
浏览文件 @
f3323394
import
*
as
React
from
'
react
'
import
{
render
}
from
'
@testing-library/react
'
import
{
trigger
}
from
'
@/utils/test/event
'
import
'
@testing-library/jest-dom
'
import
{
NumberKeyboard
}
from
'
../numberkeyboard
'
function
clickKey
(
key
:
Parameters
<
typeof
trigger
>
[
0
])
{
trigger
(
key
,
'
touchstart
'
)
trigger
(
key
,
'
touchend
'
)
}
test
(
'
should match snapshot
'
,
async
()
=>
{
const
{
container
}
=
render
(<
NumberKeyboard
visible
/>)
expect
(
container
).
toMatchSnapshot
()
})
test
(
'
should match customKey snapshot
'
,
async
()
=>
{
const
{
container
}
=
render
(
<
NumberKeyboard
visible
type
=
"rightColumn"
customKey
=
{
[
'
.
'
,
'
x
'
,
'
r
'
]
}
/>
)
expect
(
container
.
querySelector
(
'
.finish
'
)).
toHaveTextContent
(
'
完成
'
)
expect
(
container
).
toMatchSnapshot
()
})
test
(
'
default keyboard custom keyboard
'
,
async
()
=>
{
const
{
container
}
=
render
(
<
NumberKeyboard
visible
customKey
=
{
[
'
.
'
,
'
x
'
,
'
r
'
]
}
/>
)
expect
(
container
.
querySelectorAll
(
'
.key
'
)[
10
]).
toHaveTextContent
(
'
0
'
)
})
test
(
'
Has title and custom keyboard length greater than 1
'
,
async
()
=>
{
const
{
container
}
=
render
(
<
NumberKeyboard
visible
title
=
"标题"
customKey
=
{
[
'
.
'
,
'
x
'
,
'
r
'
]
}
/>
)
expect
(
container
.
querySelectorAll
(
'
.key
'
)[
10
]).
toHaveTextContent
(
'
0
'
)
})
test
(
'
Has title and custom keyboard length equal 1
'
,
async
()
=>
{
const
{
container
}
=
render
(
<
NumberKeyboard
visible
title
=
"标题"
customKey
=
{
[
'
.
'
]
}
/>
)
expect
(
container
.
querySelectorAll
(
'
.key
'
)[
9
]).
toHaveTextContent
(
'
.
'
)
})
test
(
'
should shuffle key order when using random-key prop
'
,
async
()
=>
{
let
value
=
0
const
onChange
=
(
v
:
string
)
=>
{
value
=
Number
(
v
)
}
const
{
container
}
=
render
(
<
NumberKeyboard
visible
randomKeys
onChange
=
{
onChange
}
/>
)
const
keys
:
number
[]
=
[]
const
clickKeys
:
number
[]
=
[]
for
(
let
i
=
0
;
i
<
9
;
i
++
)
{
keys
.
push
(
i
+
1
)
clickKey
(
container
.
querySelectorAll
(
'
.key
'
)[
i
])
clickKeys
.
push
(
value
)
}
expect
(
keys
.
every
((
v
,
k
)
=>
keys
[
k
]
===
clickKeys
[
k
])).
toEqual
(
false
)
})
test
(
'
should emit delete event after clicking delete key
'
,
()
=>
{
const
onDelete
=
jest
.
fn
()
const
{
container
}
=
render
(<
NumberKeyboard
visible
onDelete
=
{
onDelete
}
/>)
clickKey
(
container
.
querySelectorAll
(
'
.key
'
)[
11
])
expect
(
onDelete
).
toBeTruthy
()
})
test
(
'
should emit close event after clicking collapse key
'
,
()
=>
{
const
onClose
=
jest
.
fn
()
const
{
container
}
=
render
(<
NumberKeyboard
visible
onClose
=
{
onClose
}
/>)
clickKey
(
container
.
querySelectorAll
(
'
.key
'
)[
9
])
expect
(
onClose
).
toBeTruthy
()
})
test
(
'
should render title and close button correctly
'
,
()
=>
{
const
{
container
}
=
render
(<
NumberKeyboard
visible
title
=
"默认键盘"
/>)
const
title
=
container
.
querySelector
(
'
.nut-numberkeyboard__header__tit
'
)
expect
(
title
).
toHaveTextContent
(
'
默认键盘
'
)
})
test
(
'
should render finish button correctly
'
,
()
=>
{
const
{
container
}
=
render
(
<
NumberKeyboard
visible
type
=
"rightColumn"
confirmText
=
"支付"
/>
)
const
title
=
container
.
querySelector
(
'
.finish
'
)
expect
(
title
).
toHaveTextContent
(
'
支付
'
)
})
src/packages/numberkeyboard/demo.tsx
0 → 100644
浏览文件 @
f3323394
import
React
,
{
useState
}
from
'
react
'
import
{
useTranslate
}
from
'
@/sites/assets/locale
'
import
Cell
from
'
../cell
'
import
Toast
from
'
../toast
'
import
{
NumberKeyboard
}
from
'
./numberkeyboard
'
const
NumberKeyboardDemo
=
()
=>
{
const
[
translated
]
=
useTranslate
({
'
zh-CN
'
:
{
basic
:
'
默认键盘
'
,
sidebar
:
'
带右侧栏键盘
'
,
confirmText
:
'
支付
'
,
randomKeyOrder
:
'
随机数键盘
'
,
title
:
'
标题
'
,
withTitle
:
'
带标题栏键盘
'
,
idNumberKeyboard
:
'
身份证键盘
'
,
},
'
zh-TW
'
:
{
basic
:
'
默認鍵盤
'
,
sidebar
:
'
帶右側欄鍵盤
'
,
confirmText
:
'
支付
'
,
randomKeyOrder
:
'
隨機數鍵盤
'
,
title
:
'
標題
'
,
withTitle
:
'
帶標題欄鍵盤
'
,
idNumberKeyboard
:
'
身份證鍵盤
'
,
},
'
en-US
'
:
{
basic
:
'
Default Keyboard
'
,
sidebar
:
'
Keyboard With Sidebar
'
,
confirmText
:
'
pay
'
,
randomKeyOrder
:
'
Random Key Order
'
,
title
:
'
title
'
,
withTitle
:
'
Show Keyboard With Title
'
,
idNumberKeyboard
:
'
Show IdNumber Keyboard
'
,
},
})
const
[
visible1
,
setVisible1
]
=
useState
(
false
)
const
[
visible2
,
setVisible2
]
=
useState
(
false
)
const
[
visible3
,
setVisible3
]
=
useState
(
false
)
const
[
visible4
,
setVisible4
]
=
useState
(
false
)
const
[
visible5
,
setVisible5
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`输入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
删除
'
)
}
return
(
<
div
className
=
"demo"
>
<
h2
>
{
translated
.
basic
}
</
h2
>
<
Cell
title
=
{
translated
.
basic
}
isLink
onClick
=
{
()
=>
{
setVisible1
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible1
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible1
(
false
)
}
/>
<
h2
>
{
translated
.
sidebar
}
</
h2
>
<
Cell
title
=
{
translated
.
sidebar
}
isLink
onClick
=
{
()
=>
{
setVisible2
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible2
}
type
=
"rightColumn"
customKey
=
{
[
'
.
'
,
'
x
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible2
(
false
)
}
/>
<
h2
>
{
translated
.
randomKeyOrder
}
</
h2
>
<
Cell
title
=
{
translated
.
randomKeyOrder
}
isLink
onClick
=
{
()
=>
{
setVisible3
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible3
}
randomKeys
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible3
(
false
)
}
/>
<
h2
>
{
translated
.
withTitle
}
</
h2
>
<
Cell
title
=
{
translated
.
withTitle
}
isLink
onClick
=
{
()
=>
{
setVisible4
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible4
}
title
=
{
translated
.
title
}
customKey
=
{
[
'
.
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible4
(
false
)
}
/>
<
h2
>
{
translated
.
idNumberKeyboard
}
</
h2
>
<
Cell
title
=
{
translated
.
idNumberKeyboard
}
isLink
onClick
=
{
()
=>
{
setVisible5
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible5
}
customKey
=
{
[
'
X
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible5
(
false
)
}
/>
</
div
>
)
}
export
default
NumberKeyboardDemo
src/packages/numberkeyboard/doc.en-US.md
0 → 100644
浏览文件 @
f3323394
# NumberKeyboard
### Introduce
Virtual numeric keypad, used for scenarios where payment passwords are entered.
### Install
```
js
import
{
NumberKeyboard
}
from
'
@nutui/nutui-react
'
;
```
## Demo
### Default Keyboard
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`enter:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
delete
'
)
}
return
(
<>
<
Cell
title
=
"Default Keyboard"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### Keyboard With Sidebar
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`enter:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
delete
'
)
}
return
(
<>
<
Cell
title
=
"Keyboard With Sidebar"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
type
=
"rightColumn"
customKey
=
{
[
'
.
'
,
'
x
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### Random Key Order
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`enter:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
delete
'
)
}
return
(
<>
<
Cell
title
=
" Random Key Order"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
randomKeys
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### Show Keyboard With Title
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`enter:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
delete
'
)
}
return
(
<>
<
Cell
title
=
"Show Keyboard With Title"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
title
=
"title"
customKey
=
{
[
'
.
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### Show IdNumber Keyboard
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`enter:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
delete
'
)
}
return
(
<>
<
Cell
title
=
"Show IdNumber Keyboard"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
customKey
=
{
[
'
X
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
## API
### Props
| Attribute | Description | Type | Default |
|----- | ----- | ----- | ----- |
| visible | Whether to show keyboard | Boolean | false |
| title | Keyboard title | String | - |
| type | Keyboard type | String |
`default`
,
`rightColumn`
|
| randomKeys | Whether to shuffle the order of keys | Boolean | false |
| customKey | Content of bottom left key | String [] | Array form supports adding up to two |
| confirmText | Custom done button text,Such as "pay", "next", "submit" | String | done |
| pop-class | Custom bullet box classname | String | - |
### Event
| Event | Description | Arguments
|----- | ----- | -----
| onChange | Emitted when a key is pressed | value: string |
| onDelete | Emitted when the delete key is pressed | - |
| onClose | Emitted when the close button or non-keyboard area is clicked is clicked | - |
src/packages/numberkeyboard/doc.md
0 → 100644
浏览文件 @
f3323394
# NumberKeyboard 数字键盘
### 介绍
虚拟数字键盘,用于输入支付密码的场景。
### 安装
```
js
import
{
NumberKeyboard
}
from
'
@nutui/nutui-react
'
;
```
## 代码演示
### 基础用法
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`输入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
删除
'
)
}
return
(
<>
<
Cell
title
=
"基础用法"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### 带右侧栏键盘
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`输入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
删除
'
)
}
return
(
<>
<
Cell
title
=
"带右侧栏键盘"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
type
=
"rightColumn"
customKey
=
{
[
'
.
'
,
'
x
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### 随机数键盘
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`输入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
删除
'
)
}
return
(
<>
<
Cell
title
=
"随机数键盘"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
randomKeys
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### 带标题栏键盘
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`输入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
删除
'
)
}
return
(
<>
<
Cell
title
=
"带标题栏键盘"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
title
=
"标题"
customKey
=
{
[
'
.
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### 身份证键盘
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`输入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
删除
'
)
}
return
(
<>
<
Cell
title
=
"身份证键盘"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
customKey
=
{
[
'
X
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
## API
### Props
| 字段 | 说明 | 类型 | 默认值 |
|----- | ----- | ----- | ----- |
| visible | 是否显示键盘 | Boolean | false |
| title | 键盘标题 | String | - |
| type | 键盘模式 | String |
`default`
:默认样式
`rightColumn`
:带右侧栏 |
| randomKeys | 随机数 | Boolean | false |
| customKey | 自定义键盘额外的键 | String [] | 数组形式最多支持添加2个,超出默认取前2项 |
| confirmText | 自定义完成按钮文字,如"支付","下一步","提交"等 | String | 完成 |
| pop-class | 自定义弹框类名 | String | - |
### Event
| 字段 | 说明 | 回调参数
|----- | ----- | -----
| onChange | 点击按键时触发 | value: string |
| onDelete | 点击删除键时触发 | - |
| onClose | 点击关闭按钮或非键盘区域时触发 | - |
src/packages/numberkeyboard/doc.zh-TW.md
0 → 100644
浏览文件 @
f3323394
# NumberKeyboard
### 介紹
虛擬數字鍵盤,用於輸入支付密碼的場景。
### 安裝
```
js
import
{
NumberKeyboard
}
from
'
@nutui/nutui-react
'
;
```
## 代碼演示
### 基礎用法
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`輸入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
刪除
'
)
}
return
(
<>
<
Cell
title
=
"基礎用法"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### 帶右側欄鍵盤
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`輸入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
刪除
'
)
}
return
(
<>
<
Cell
title
=
"帶右側欄鍵盤"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
type
=
"rightColumn"
customKey
=
{
[
'
.
'
,
'
x
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### 隨機數鍵盤
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`輸入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
刪除
'
)
}
return
(
<>
<
Cell
title
=
"隨機數鍵盤"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
randomKeys
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### 帶標題欄鍵盤
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`輸入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
刪除
'
)
}
return
(
<>
<
Cell
title
=
"帶標題欄鍵盤"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
title
=
"標題"
customKey
=
{
[
'
.
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
### 身份證鍵盤
:::demo
```
tsx
import
React
,
{
useState
}
from
"
react
"
;
import
{
Cell
,
NumberKeyboard
,
Toast
}
from
'
@nutui/nutui-react
'
;
const
App
=
()
=>
{
const
[
visible
,
setVisible
]
=
useState
(
false
)
const
onChange
=
(
number
:
string
)
=>
{
Toast
.
text
(
`輸入:
${
number
}
`
)
}
const
onDelete
=
()
=>
{
Toast
.
text
(
'
刪除
'
)
}
return
(
<>
<
Cell
title
=
"身份證鍵盤"
isLink
onClick
=
{
()
=>
{
setVisible
(
true
)
}
}
/>
<
NumberKeyboard
visible
=
{
visible
}
customKey
=
{
[
'
X
'
]
}
onChange
=
{
onChange
}
onDelete
=
{
onDelete
}
onClose
=
{
()
=>
setVisible
(
false
)
}
/>
</>
)
}
export
default
App
;
```
:::
## API
### Props
| 字段 | 說明 | 類型 | 預設值 |
|----- | ----- | ----- | ----- |
| visible | 是否顯示鍵盤 | Boolean | false |
| title | 鍵盤標題 | String | - |
| type | 鍵盤模式 | String |
`default`
:默認樣式
`rightColumn`
:帶右側欄 |
| randomKeys | 隨機數 | Boolean | false |
| customKey | 自定義鍵盤額外的鍵 | String [] | 數組形式最多支持添加2個,超出默認取前2項 |
| confirmText | 自定義完成按鈕文字,如"支付","下一步","提交"等 | String | 完成 |
| pop-class | 自定義彈框類名 | String | - |
### Event
| 字段 | 說明 | 回調參數
|----- | ----- | -----
| onChange | 點擊按鍵時觸發 | value: string |
| onDelete | 點擊刪除鍵時觸發 | - |
| onClose | 點擊關閉按鈕或非鍵盤區域時觸發 | - |
src/packages/numberkeyboard/index.ts
0 → 100644
浏览文件 @
f3323394
import
{
NumberKeyboard
}
from
'
./numberkeyboard
'
export
default
NumberKeyboard
src/packages/numberkeyboard/numberkeyboard.scss
0 → 100644
浏览文件 @
f3323394
.nut-numberkeyboard
{
width
:
$numberkeyboard-width
;
padding
:
$numberkeyboard-padding
;
background-color
:
$numberkeyboard-background-color
;
user-select
:
none
;
.nut-numberkeyboard__header
{
position
:
relative
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
box-sizing
:
content-box
;
height
:
$numberkeyboard-header-height
;
padding
:
$numberkeyboard-header-padding
;
color
:
$numberkeyboard-header-color
;
font-size
:
$numberkeyboard-header-font-size
;
.nut-numberkeyboard__header__tit
{
display
:
inline-block
;
}
.nut-numberkeyboard__header__close
{
position
:
absolute
;
display
:
block
;
right
:
0
;
padding
:
$numberkeyboard-header-close-padding
;
color
:
$numberkeyboard-header-close-color
;
font-size
:
$numberkeyboard-header-close-font-size
;
background-color
:
$numberkeyboard-header-close-background-color
;
border
:
none
;
cursor
:
pointer
;
}
}
.nut-numberkeyboard__body
{
display
:
flex
;
padding
:
6px
0
0
6px
;
.nut-numberkeyboard__body__keys
{
display
:
flex
;
flex
:
3
;
flex-wrap
:
wrap
;
}
.key-board-wrapper
{
position
:
relative
;
flex
:
1
;
flex-basis
:
33%
;
box-sizing
:
border-box
;
padding
:
0
6px
6px
0
;
.key
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
height
:
$numberkeyboard-key-height
;
font-size
:
$numberkeyboard-key-font-size
;
line-height
:
$numberkeyboard-key-line-height
;
background-color
:
$numberkeyboard-key-background-color
;
color
:
$numberkeyboard-key-font-size-color
;
border-radius
:
$numberkeyboard-key-border-radius
;
cursor
:
pointer
;
}
.active
{
background-color
:
$numberkeyboard-key-active-background-color
;
}
img
{
width
:
30px
;
height
:
24px
;
}
}
.key-board-wrapper-large
{
flex-basis
:
66%
;
}
.nut-numberkeyboard__sidebar
{
display
:
flex
;
flex
:
1
;
flex-direction
:
column
;
.key-board-wrapper
{
.key
{
position
:
absolute
;
top
:
0
;
right
:
6px
;
bottom
:
6px
;
left
:
0
;
height
:
auto
;
}
.finish
{
font-size
:
$numberkeyboard-key-finish-font-size
;
color
:
$numberkeyboard-key-finish-font-size-color
;
background-color
:
$numberkeyboard-key-finish-background-color
;
}
.activeFinsh
{
background-color
:
$numberkeyboard-key-activeFinsh-background-color
;
}
}
}
}
}
src/packages/numberkeyboard/numberkeyboard.tsx
0 → 100644
浏览文件 @
f3323394
import
React
,
{
CSSProperties
,
FunctionComponent
,
useEffect
,
useState
,
}
from
'
react
'
import
classNames
from
'
classnames
'
import
bem
from
'
@/utils/bem
'
import
Popup
from
'
@/packages/popup
'
import
{
useConfig
}
from
'
@/packages/configprovider
'
export
interface
NextListObj
{
type
:
string
id
:
string
}
export
interface
NumberKeyboardProps
{
confirmText
:
string
title
:
string
visible
:
boolean
type
:
string
customKey
:
Array
<
string
>
randomKeys
:
boolean
popClass
:
string
className
:
string
style
?:
CSSProperties
onChange
?:
(
value
:
string
)
=>
void
onDelete
?:
()
=>
void
onClose
:
()
=>
void
}
const
defaultProps
=
{
confirmText
:
''
,
title
:
''
,
visible
:
false
,
type
:
'
default
'
,
customKey
:
[],
className
:
''
,
randomKeys
:
false
,
popClass
:
''
,
onClose
:
()
=>
{},
}
as
NumberKeyboardProps
export
const
NumberKeyboard
:
FunctionComponent
<
Partial
<
NumberKeyboardProps
>
&
Omit
<
React
.
HTMLAttributes
<
HTMLDivElement
>
,
'
onChange
'
>
>
=
(
props
)
=>
{
const
{
locale
}
=
useConfig
()
const
{
title
,
confirmText
,
visible
,
type
,
customKey
,
randomKeys
,
popClass
,
style
,
className
,
onChange
,
onDelete
,
onClose
,
}
=
props
const
b
=
bem
(
'
numberkeyboard
'
)
const
[
show
,
setShow
]
=
useState
<
boolean
|
undefined
>
(
visible
)
const
[
clickKeyIndex
,
setClickKeyIndex
]
=
useState
<
string
|
undefined
>
(
undefined
)
const
[
keysList
,
setKeysList
]
=
useState
<
Array
<
any
>
|
undefined
>
([])
useEffect
(()
=>
{
setShow
(
visible
)
},
[
visible
])
const
defaultKey
=
()
=>
{
let
leftBottomKey
=
{
id
:
'
lock
'
,
type
:
'
lock
'
,
}
if
(
customKey
)
{
const
customKeys
:
Array
<
string
>
=
Array
.
isArray
(
customKey
)
?
customKey
:
[
customKey
]
if
(
customKeys
.
length
>
0
)
{
const
newCustomKey
=
customKeys
[
0
]
leftBottomKey
=
{
id
:
newCustomKey
,
type
:
'
custom
'
,
}
}
}
return
[
...
getBasicKeys
(),
leftBottomKey
,
{
id
:
0
,
type
:
'
number
'
},
{
id
:
'
delete
'
,
type
:
'
delete
'
},
]
}
const
getBasicKeys
=
()
=>
{
const
keys
:
Array
<
unknown
>
=
[]
for
(
let
i
=
1
;
i
<=
9
;
i
++
)
{
keys
.
push
({
id
:
i
,
type
:
'
number
'
})
}
if
(
randomKeys
)
{
return
keys
.
sort
(()
=>
(
Math
.
random
()
>
0.5
?
1
:
-
1
))
}
return
keys
}
const
genCustomKeys
=
()
=>
{
const
keys
=
getBasicKeys
()
if
(
!
customKey
)
return
[]
let
customKeys
=
Array
.
isArray
(
customKey
)
?
customKey
:
[
customKey
]
if
(
customKeys
.
length
>
2
)
{
customKeys
=
[
customKeys
[
0
],
customKeys
[
1
]]
}
if
(
customKeys
.
length
===
2
&&
props
.
title
&&
props
.
type
!==
'
rightColumn
'
)
{
customKeys
=
[
customKeys
[
0
]]
}
if
(
customKeys
.
length
===
1
)
{
if
(
props
.
title
&&
props
.
type
!==
'
rightColumn
'
)
{
keys
.
push
(
{
id
:
customKeys
[
0
],
type
:
'
custom
'
},
{
id
:
0
,
type
:
'
number
'
},
{
id
:
'
delete
'
,
type
:
'
delete
'
}
)
}
else
{
keys
.
push
(
{
id
:
0
,
type
:
'
number
'
},
{
id
:
customKeys
[
0
],
type
:
'
custom
'
}
)
}
}
else
if
(
customKeys
.
length
===
2
)
{
keys
.
push
(
{
id
:
customKeys
[
0
],
type
:
'
custom
'
},
{
id
:
0
,
type
:
'
number
'
},
{
id
:
customKeys
[
1
],
type
:
'
custom
'
}
)
}
return
keys
}
useEffect
(()
=>
{
if
(
props
.
type
===
'
rightColumn
'
||
props
.
title
!==
''
)
{
setKeysList
(
genCustomKeys
())
}
else
{
setKeysList
(
defaultKey
())
}
},
[])
const
onTouchstart
=
(
item
:
{
id
:
string
;
type
:
string
},
event
:
React
.
TouchEvent
<
HTMLElement
>
)
=>
{
event
.
stopPropagation
()
setClickKeyIndex
(
item
.
id
)
if
(
item
.
type
===
'
number
'
||
item
.
type
===
'
custom
'
)
{
onChange
&&
onChange
(
item
.
id
)
}
if
(
item
.
type
===
'
lock
'
)
{
onClose
&&
onClose
()
}
if
(
item
.
type
===
'
delete
'
)
{
onDelete
&&
onDelete
()
}
}
const
onTouchMove
=
(
event
:
React
.
TouchEvent
<
HTMLElement
>
)
=>
{
event
.
stopPropagation
()
}
const
onTouchEnd
=
(
event
:
React
.
TouchEvent
<
HTMLElement
>
)
=>
{
event
.
preventDefault
()
setClickKeyIndex
(
undefined
)
}
return
(
<
div
>
<
Popup
visible
=
{
show
}
position
=
"bottom"
popClass
=
{
popClass
}
onClickOverlay
=
{
onClose
}
onClickCloseIcon
=
{
onClose
}
overlayStyle
=
{
{
backgroundColor
:
'
rgba(0, 0, 0, 0)
'
}
}
>
<
div
className
=
{
`
${
b
()}
${
className
}
`
}
style
=
{
{
...
style
}
}
>
{
title
?
(
<
div
className
=
{
b
(
'
header
'
)
}
>
<
h3
className
=
{
b
(
'
header__tit
'
)
}
>
{
title
}
</
h3
>
{
type
===
'
default
'
?
(
<
span
className
=
{
b
(
'
header__close
'
)
}
onClick
=
{
onClose
}
>
{
locale
.
done
}
</
span
>
)
:
null
}
</
div
>
)
:
null
}
<
div
className
=
{
b
(
'
body
'
)
}
>
<
div
className
=
{
b
(
'
body__keys
'
)
}
>
{
keysList
?.
map
((
item
:
any
,
index
:
number
)
=>
{
return
(
<
div
key
=
{
index
}
className
=
{
classNames
({
'
key-board-wrapper
'
:
true
,
'
key-board-wrapper-large
'
:
item
.
id
===
0
&&
type
===
'
rightColumn
'
&&
Array
.
isArray
(
customKey
)
&&
customKey
.
length
===
1
,
})
}
>
<
div
className
=
{
classNames
({
key
:
true
,
active
:
item
.
id
===
clickKeyIndex
,
lock
:
item
.
type
===
'
lock
'
,
delete
:
item
.
type
===
'
delete
'
,
})
}
onTouchStart
=
{
(
event
)
=>
onTouchstart
(
item
,
event
)
}
onTouchMove
=
{
onTouchMove
}
onTouchEnd
=
{
onTouchEnd
}
>
{
item
.
type
===
'
number
'
||
item
.
type
===
'
custom
'
?
(
<
div
>
{
item
.
id
}
</
div
>
)
:
null
}
{
item
.
type
===
'
lock
'
?
(
<
img
src
=
"https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png"
alt
=
""
/>
)
:
null
}
{
item
.
type
===
'
delete
'
?
(
<
img
src
=
"https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
alt
=
""
/>
)
:
null
}
</
div
>
</
div
>
)
})
}
</
div
>
{
type
===
'
rightColumn
'
?
(
<
div
className
=
{
b
(
'
sidebar
'
)
}
>
<
div
className
=
"key-board-wrapper"
>
<
div
className
=
{
classNames
({
key
:
true
,
active
:
clickKeyIndex
===
'
delete
'
,
})
}
onTouchStart
=
{
(
event
)
=>
onTouchstart
({
id
:
'
delete
'
,
type
:
'
delete
'
},
event
)
}
onTouchMove
=
{
onTouchMove
}
onTouchEnd
=
{
onTouchEnd
}
>
<
img
src
=
"https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
alt
=
""
/>
</
div
>
</
div
>
<
div
className
=
"key-board-wrapper key-board-finish"
onClick
=
{
onClose
}
>
<
div
className
=
{
classNames
({
key
:
true
,
finish
:
true
,
activeFinsh
:
clickKeyIndex
===
'
finish
'
,
})
}
>
{
confirmText
||
locale
.
done
}
</
div
>
</
div
>
</
div
>
)
:
null
}
</
div
>
</
div
>
</
Popup
>
</
div
>
)
}
NumberKeyboard
.
defaultProps
=
defaultProps
NumberKeyboard
.
displayName
=
'
NutNumberKeyboard
'
src/styles/variables.scss
浏览文件 @
f3323394
...
...
@@ -486,6 +486,29 @@ $divider-vertical-top: 2px !default;
$divider-vertical-border-left
:
rgba
(
0
,
0
,
0
,
0
.06
)
!
default
;
$divider-vertical-margin
:
0
8px
!
default
;
//numberkeyboard
$numberkeyboard-width
:
100%
!
default
;
$numberkeyboard-padding
:
0
0
22px
0
!
default
;
$numberkeyboard-background-color
:
#f2f3f5
!
default
;
$numberkeyboard-header-height
:
34px
!
default
;
$numberkeyboard-header-padding
:
6px
0
0
0
!
default
;
$numberkeyboard-header-color
:
#646566
!
default
;
$numberkeyboard-header-font-size
:
16px
!
default
;
$numberkeyboard-header-close-padding
:
0
16px
!
default
;
$numberkeyboard-header-close-color
:
#576b95
!
default
;
$numberkeyboard-header-close-font-size
:
14px
!
default
;
$numberkeyboard-header-close-background-color
:
transparent
!
default
;
$numberkeyboard-key-background-color
:
#fff
!
default
;
$numberkeyboard-key-active-background-color
:
#ebedf0
!
default
;
$numberkeyboard-key-height
:
48px
!
default
;
$numberkeyboard-key-line-height
:
1
.5
!
default
;
$numberkeyboard-key-border-radius
:
8px
!
default
;
$numberkeyboard-key-font-size
:
28px
!
default
;
$numberkeyboard-key-font-size-color
:
#333
!
default
;
$numberkeyboard-key-finish-font-size
:
16px
!
default
;
$numberkeyboard-key-finish-font-size-color
:
#fff
!
default
;
$numberkeyboard-key-finish-background-color
:
#1989fa
!
default
;
$numberkeyboard-key-activeFinsh-background-color
:
#0570db
!
default
;
// elevator
$elevator-list-item-highcolor
:
$primary-color
!
default
;
$elevator-list-item-font-size
:
12px
!
default
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录