使用Vue自定义数字键盘组件(体验度极好)_vue自定义键盘,vue自定义数字键盘 - CSDN文库

Vue自定义数字键盘

数字键盘组件

86 浏览量更新于2023-03-16 评论 1 收藏 85KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

使用使用Vue自定义数字键盘组件自定义数字键盘组件(体验度极好体验度极好)

最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话体验很不

好，于是自己动手写了一个使用Vue自定义数字键盘组件，具体实现代码大家参考下本

为了满足用户体验，小编用vue写了一个自定义数字键盘组件，用户体验度还不错。

废话不多说，先上效果图吧~

效果图效果图

具体实现具体实现

布局排版布局排版

<div class='key-container'>

<div class='key-title'>请输入金额</div>

<div class='input-box'>{{ money }}</div>

<div class='keyboard' @click.stop='_handleKeyPress'>

<div class='key-row'>

<div class='key-cell' data-num='7'>7</div>

<div class='key-cell' data-num='8'>8</div>

<div class='key-cell' data-num='9'>9</div>

<div class='key-cell' data-num='D'>C</div>

</div>

<div class='key-row'>

<div class='key-cell' data-num='4'>4</div>

<div class='key-cell' data-num='5'>5</div>

<div class='key-cell' data-num='6'>6</div>

<div class='key-cell' data-num='C'>清空</div>

</div>

<div class='key-row'>

<div class='key-cell' data-num='1'>1</div>

<div class='key-cell' data-num='2'>2</div>

<div class='key-cell' data-num='3'>3</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38653155

粉丝: 6
资源: 988

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈