Vue自定义数字键盘--移动端买单支付页面

最新推荐文章于 2024-06-14 11:09:28 发布
最新推荐文章于 2024-06-14 11:09:28 发布
阅读量2.3k 收藏 3
点赞数 2
分类专栏： 前端开发心路历程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41577234/article/details/89392798
版权

起因是因为公司需要一个移动端的支付页面，之前没写过，猛然间接到这样一个任务，有点儿手足无措，经过多方面的研究，最终还是顺利完成了，写篇博客，记录此次的收获，以后再接再厉。

 

 

html部分：

<!-- 登录frm -->

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

<title>支付</title>

<link rel="stylesheet" type="text/css" href="css/api.css" />

<link rel="stylesheet" type="text/css" href="css/aui.css" />

<link rel="stylesheet" type="text/css" href="css/aui.2.0-override.css" />

<link rel="stylesheet" type="text/css" href="css/pay.css">

</head>

 

<body>

<div id="wrap" class="flex-wrap flex-vertical" v-cloak>

<div id="main" class="flex-con">

<div class="aui-content aui-margin-b-15 box-3">

<ul class="aui-list aui-media-list aui-margin-t-20 aui-margin-b-15">

<li class="aui-list-item aui-list-item-middle"

style="padding-right:0.75rem;width:100%;margin:0 auto;">

<div class="aui-media-list-item-inner"

style="width:auto;display: flex;margin:0 auto;text-align: center;">

<div class="aui-list-item-media" style="width: 3rem;">

<img src="image/bank.png" class="aui-img-round aui-list-img-sm">

</div>

<div class="aui-list-item-inner">

<div class="aui-list-item-text">

<div class="aui-list-item-title" style="font-size:17px;">西安唐车商贸有限公司</div>

</div>

<div class="aui-list-item-text">

<div class="text">门店</div>

<div style="margin-left:10px;font-size:13px;">西安唐车商贸有限公司</div>

</div>

</div>

</div>

</li>

</ul>

</div>

<div class="aui-content-padded aui-margin-t-20 box-1">

<div>金额</div>

<ul class="aui-list aui-form-list">

<li class="aui-list-item">

<div class="aui-list-item-inner">

<div class="aui-list-item-label">

￥

</div>

<div class="aui-list-item-input">

<input placeholder="请输入付款金额" style="font-size:26px;" style="font-size:50rpx;"

decimal="2" type="text" pattern="[0-9]*" v-model="paymentAmount" id="thisInput"

@click="thisFocus()">

</div>

</div>

</li>

</ul>

</div>

 

<!-- 备注 -->

<div class="aui-content-padded aui-margin-t-20" @click="remarksFun()">

<div class="remarks">{ {remarks=

最低0.47元/天 解锁文章
搬砖组组长
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue实现一款支付虚拟键盘组件
北京大雨
03-28 1302
实现效果: 组件部分: <template> <div class="pay-tool"> <div class="pay-tool-title border-bottom"> <span class="pay-close" @click="backHandle"></span> <sp...
vue实现一款支付虚拟键盘组件
03-28
使用vue.js实现的一款虚拟键盘组件, 支持实时回调密码, 可根据需要更改样式
uview 自定义数字支付键盘功能
yehaocheng520的博客
05-10 3096
作为一个电商的项目，支付功能是必备的，自定义数字支付键盘也是对应的。 如果是用微信或者支付宝支付，则在支付时，会自动弹出数字键盘。 现在来看看微信和支付宝的支付数字键盘的样式吧…… 好久没有用支付宝给人转账或者发红包了，支付宝的页面竟然有了这么多选项，真好…… 如果要自己做支付页面，则就需要自定义支付数字键盘了，此处用uview中的键盘组件来实现。 效果如下： uview keyboard官网链接：https://www.uviewui.com/components/keyboard.html keyb
uniapp+vue3实现数字键盘
最新发布
weixin_57986195的博客
06-14 431
本文章是uniapp+vue3实现的数字键盘，希望可以帮助到漂泊在外的程序员们！
使用Flex布局，实现移动端商品支付页面
分享前端技术心得
03-05 1053
Flex布局关键知识点 1.display：flex要加在父元素上。 2.justify-content设置主轴内容的对齐方式。 3.flex-direction可更改主轴的方向。 4.align-items设置侧轴内容的对齐方式。 5.主轴的方向默认是水平方向，可以通过设置flex-direction:column为垂直方向。需要注意，如果主轴方向变了，那么justify-content属性的值就是相对于更改后的主轴方向而言的。 使用Flex布局，实现移动端商品支付页面 效果图如下： 具体代码： 先引入在
推荐开源项目：Vue-Pay-Keyboard - 虚拟数字支付键盘
gitblog_00060的博客
06-06 416
推荐开源项目：Vue-Pay-Keyboard - 虚拟数字支付键盘 项目地址:https://gitcode.com/yucccc/vue-pay-keyboard 项目介绍 在移动应用开发中，安全输入支付密码是至关重要的一步。Vue-Pay-Keyboard 是一款专为 Vue.js 开发的应用于支付场景的虚拟数字键盘组件。它提供了一个简洁且易于集成的解决方案，帮助开发者实现一键部署，让用户在...
使用Vue自定义数字键盘组件(体验度极好)
08-28
"使用Vue自定义数字键盘组件，提高用户体验" 在 Vue 开发中，输入金额是一种常见的交互场景。然而，用原生的 input 进行金额输入体验很不好。为了提高用户体验，小编使用 Vue 自定义了数字键盘组件。本文将详细介绍...
vue-video:vue移动端简单自定义控件播放器
05-13
"vue-video" 提供了一个针对移动端优化的简单自定义控件播放器解决方案，使得在Vue项目中集成视频播放功能变得简单。 在创建一个基于Vue的移动端视频播放器时，主要涉及以下几个关键知识点： 1. **Vue组件**：Vue...
详解基于vue-cli配置移动端自适应
08-28
详解基于vue-cli配置移动端自适应 本文主要介绍了基于vue-cli配置移动端自适应的方法，主要涉及到三个方面：lib-flexible库的安装和使用、px到rem的转换、vue-cli配置的修改。 首先，在项目中安装lib-flexible库，...
vue项目中使用lib-flexible解决移动端适配的问题解决
10-18
主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一个vue手机虚拟支付数字键盘插件
08-10
⌨️ 一个vue手机虚拟支付数字键盘插件
vuecalculation基于vue的自定义数字键盘的实现
08-09
vue-calculation：基于vue的自定义数字键盘的实现
vue实现键盘输入支付密码功能
10-18
主要为大家详细介绍了vue实现键盘输入支付密码功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue数字虚拟键盘组件
08-10
A Vue component to num-keyboard 一个虚拟数字键盘插件
vue-pos:一个简单的练习作品，仿快餐店收银界面
05-17
构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。 技术栈 Vue-Cli Vue Vue路由器 ES6 Axios 元素—UI 感谢胖哥提供的后台接口
H5仿微信支付数字键盘.zip
04-25
html5+css3界面设计，仿微信支付设计数字键盘，源码下载对应文章【H5仿微信支付数字键盘】欢迎下载
vue 匹配键盘输入_vue实现键盘输入支付密码功能
weixin_42552410的博客
01-13 263
摘要：这篇Vue栏目下的“vue实现键盘输入支付密码功能”，介绍的技术点是“键盘输入、Vue、功能、支付、输入、实现”，希望对大家开发技术学习和问题解决有帮助。本文实例为大家分享了vue实现键盘输入支付密码功能的具体代码，供大家参考，具体内容如下支付密码功能界面如下图：主要代码如下：请输入交易密码忘记密码？{{ val }}<const keys = () => [1, 2, 3, 4...
H5自定义数字支付键盘
荤素菜鸟的博客
01-06 1121
模板文件 <template> <div class="keybraodNum"> <!-- 支付金额 --> <div class="monenyBox"> <div class="logoBox"> <div class="image"> <span class="iconfont icon-icon_A"></span> </div> <.
vue pc端web页面微信支付和支付宝支付
热门推荐
web小袋鼠
05-23 1万+
业务场景介绍： pc端支持微信支付 [ Native支付官方API] && 支付宝支付 [电脑网站支付官方API ] 订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接） 一、vue中pc端微信支付怎么去玩？ 这里大部分工作量是后端的事情，订单的生成由后端去和腾讯对接的，前端只需要负责将后端返回来的支付二维码（由后端生成的，有...
vue 自定义组件v-model
07-28
回答: 在Vue中，可以通过自定义组件上使用v-model来实现父子组件之间的双向数据绑定。\[1\]当使用v-model时，默认同时进行两项绑定操作，利用这个特性可以实现自定义组件上的v-model。通过这个特性，可以自定义表单...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值