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

最新推荐文章于 2024-02-28 17:18:03 发布
VIP文章 最新推荐文章于 2024-02-28 17:18:03 发布
阅读量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=&

最低0.47元/天 解锁文章
搬砖组组长
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue实现一款支付虚拟键盘组件
03-28
使用vue.js实现的一款虚拟键盘组件, 支持实时回调密码, 可根据需要更改样式
vue 移动端H5微信支付和支付宝支付
祎祎的博客
12-07 2115
一、移动端支付宝支付 其实支付宝支付也有H5支付和支付宝浏览器支付，这里只做H5支付，因为已经满足了业务需求。 1.支付宝中的H5支付和PC端的一样，主要是后端的工作量，后端完成订单的生成之后返给前端的是form表单，前端只需要负责做页面的跳转即可： //立即支付按钮 onSubmit() { if (this.payWay == 1) { //支付宝支付 this.$router.push({path: '/aliPay', quer
前端歌谣-第一百一十课-Vue3实现简单数字键盘效果
最新发布
qq_41632427的博客
02-28 473
大家好 我是歌谣 今天给大家带来vue3的功能关于键盘的实现。
黑马程序员前端 Vue3 小兔鲜电商项目——（十一）支付页
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
06-26 1235
黑马程序员前端 Vue3 小兔鲜电商项目——（十一）支付页
H5自定义数字支付键盘
荤素菜鸟的博客
01-06 1069
模板文件 <template> <div class="keybraodNum"> <!-- 支付金额 --> <div class="monenyBox"> <div class="logoBox"> <div class="image"> <span class="iconfont icon-icon_A"></span> </div> <.
uview 自定义数字支付键盘功能
yehaocheng520的博客
05-10 2976
作为一个电商的项目，支付功能是必备的，自定义数字支付键盘也是对应的。 如果是用微信或者支付宝支付，则在支付时，会自动弹出数字键盘。 现在来看看微信和支付宝的支付数字键盘的样式吧…… 好久没有用支付宝给人转账或者发红包了，支付宝的页面竟然有了这么多选项，真好…… 如果要自己做支付页面，则就需要自定义支付数字键盘了，此处用uview中的键盘组件来实现。 效果如下： uview keyboard官网链接：https://www.uviewui.com/components/keyboard.html keyb
前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input
chenchuang0128的博客
06-23 1824
### 使用方法```使用方法-- ref:唯一ref passwrdType：密码样式pay keyInfo：密码输入监测事件 -->/** * 唤起键盘 */},/*** 支付键盘回调* @param {Object} val */return;// 判断是否输入的是删除键// 删除最后一位// 判断是否输入的是.// 输入.无效} else {title: '温馨提示',
使用Vue自定义数字键盘组件(体验度极好)
08-28
最近做 Vue 开发，因为有不少页面涉及到金额输入，产品老是觉得用原生的 input 进行金额输入的话 体验很不好，于是自己动手写了一个使用Vue自定义数字键盘组件，具体实现代码大家参考下本
vue-video:vue移动端简单自定义控件播放器
05-13
vue-videovue移动端简单自定义控件播放器
vue项目中使用lib-flexible解决移动端适配的问题解决
10-18
主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解基于vue-cli配置移动端自适应
08-28
本篇文章主要介绍了详解基于vue-cli配置移动端自适应，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue自定义数字键盘
m0_53912016的博客
03-10 4211
输入框快速调出数字键盘 <input type="tel" pattern="[0-9]*">或者 <input type="num" pattern="[0-9]*"> 自定义数字键盘 封装的插件
【VUE】vue金额输入组件（包括不可填写非数字，去除前后空格，去除逗号分隔符）
weixin_44100002的博客
01-18 1748
目录 vue金额输入组件 组件：amount-input.vue 父级引用： vue金额输入组件 组件：amount-input.vue <template> <div class="input-content"> <el-input :placeholder="placeholder" v-model="amountValue" @input="handleAmountChange" :disabled
vue 匹配键盘输入_vue实现键盘输入支付密码功能
weixin_42552410的博客
01-13 254
摘要：这篇Vue栏目下的“vue实现键盘输入支付密码功能”，介绍的技术点是“键盘输入、Vue、功能、支付、输入、实现”，希望对大家开发技术学习和问题解决有帮助。本文实例为大家分享了vue实现键盘输入支付密码功能的具体代码，供大家参考，具体内容如下支付密码功能界面如下图：主要代码如下：请输入交易密码忘记密码？{{ val }}<const keys = () => [1, 2, 3, 4...
vue+vant 全选 单选 计算金额 支付
q4717529的博客
10-20 1547
sizeType: [“original”, “compressed”], // 可以指定是原图还是压缩图，默认二者都有。sizeType: [“original”, “compressed”], // 可以指定是原图还是压缩图，默认二者都有。sourceType: [“album”, “camera”], // 可以指定来源是相册还是相机，默认二者都有。sourceType: [“album”, “camera”], // 可以指定来源是相册还是相机，默认二者都有。//返回base64格式。
Vue项目实战-尚品汇--支付页面的开发（12）
cxd_dxc的博客
01-19 989
内容包括99-105 主要包括支付页面的开发、用户登录、导航守卫。
vue pc端web页面微信支付和支付宝支付
热门推荐
web小袋鼠
05-23 1万+
业务场景介绍： pc端支持微信支付 [ Native支付官方API] && 支付宝支付 [电脑网站支付官方API ] 订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接） 一、vue中pc端微信支付怎么去玩？ 这里大部分工作量是后端的事情，订单的生成由后端去和腾讯对接的，前端只需要负责将后端返回来的支付二维码（由后端生成的，有...
vue H5支付（支付宝篇）
我灰灰凭啥输
07-27 2378
IOS无法打开支付页面问题h5支付一般是后台写好接口，提交订单，后台返回一个支付宝form表单，表单格式如下：解决IOS不能跳转支付页面问题 h5支付一般是后台写好接口，提交订单，后台返回一个支付宝form表单，表单格式如下： 提交订单页面（home.vue） this.payUrl = res.data.data.payUrl //form表单 console.log(this.payUrl) // <form id='alipaysubmit' name='al
vue-手机支付页面
hjy170314的博客
05-19 1109
手机自定义支付页面,不调用手机自带键盘,自定义键盘 html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <
vue自定义组件v-model
07-29
回答: 在Vue中，我们可以通过自定义组件的v-model来实现双向数据绑定。默认情况下，v-model在组件上使用modelValue作为prop，并以update:modelValue作为对应的事件。可以通过给v-model指定一个参数来更改这些名字。例如，可以这样使用自定义组件v-model：`<MyComponent v-model:title="bookTitle" />`\[1\]。 另一种实现v-model的方式是使用一个可写的计算属性，同时具有getter和setter。getter方法返回modelValue prop的值，而setter方法触发相应的事件。下面是一个示例组件的代码： ```javascript // CustomInput.vue <script> export default { props: \['modelValue'\], emits: \['update:modelValue'\], computed: { value: { get() { return this.modelValue }, set(value) { this.$emit('update:modelValue', value) } } } } </script> <template> <input v-model="value" /> </template> ``` 通过这种方式，我们可以在自定义组件中使用v-model来实现双向数据绑定\[2\]。 此外，组件的v-model上添加的修饰符可以通过modelModifiers prop在组件内访问到。在组件中声明modelModifiers prop，并将其默认值设置为一个空对象。通过这种方式，我们可以在组件中访问到v-model的修饰符。例如，在下面的组件中，我们声明了modelModifiers这个prop，并在created钩子函数中打印出了modelModifiers的值： ```javascript <script> export default { props: { modelValue: String, modelModifiers: { default: () => ({}) } }, emits: \['update:modelValue'\], created() { console.log(this.modelModifiers) // { capitalize: true } } } </script> <template> <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> ``` 通过这种方式，我们可以在自定义组件中使用v-model的修饰符\[3\]。 #### 引用[.reference_title] - *1* *2* *3* [Vue 自定义组件中 v-model 的使用](https://blog.csdn.net/qq_40179479/article/details/126564499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值