当前位置:网站首页>The input of uniapp is invalid except for numbers
The input of uniapp is invalid except for numbers
2022-07-04 23:22:00 【Your beauty fascinates me】
<template>
<view>
<input type="number"class="tl-price-input" placeholder=" Please enter a number 1" v-model="number" >
<input type="number" class="tl-price-input" placeholder=" Please enter a number 2" v-model="data.number" >
</view>
</template>
<script>
export default {
data() {
return {
number:'',
data:{
number:'',
}
};
},
computed:{
newFun(){
console.log(this.data.number,this.number," data ");
if(!Number(this.number)){
this.number=parseFloat(this.number);
}
if(!Number(this.data.number)){
this.data.number=parseFloat(this.data.number);
}
}
},
onLoad() {
}
}
</script>
<style lang="scss">
/* Price search input box */
input, button {
border: none;
outline: none;
}
.tl-price-input{
margin:10px auto;
width: 80%;
border: 1px solid #ccc;
padding: 7px 0;
background: #F4F4F7;
border-radius: 3px;
padding-left:5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
.tl-price-input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.ant-btn {
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid transparent;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
box-shadow: 0 2px 0 rgba(0,0,0,0.015);
cursor: pointer;
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
height: 32px;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
color: rgba(0,0,0,0.65);
background-color: #fff;
border-color: #d9d9d9;
}
.ant-btn-primary {
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
box-shadow: 0 2px 0 rgba(0,0,0,0.045);
}
.ant-btn-red {
color: #fff;
background-color: #FF5A44;
border-color: #FF5A44;
text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
box-shadow: 0 2px 0 rgba(0,0,0,0.045);
}
</style>
边栏推荐
- js正则表达式之中文验证(转)
- Qualcomm WLAN framework learning (30) -- components supporting dual sta
- 高通WLAN框架学习(30)-- 支持双STA的组件
- How to choose a securities company? Is it safe to open an account on your mobile phone
- MP advanced operation: time operation, SQL, querywapper, lambdaquerywapper (condition constructor) quick filter enumeration class
- Basic use and upgrade of Android native database
- 【二叉树】节点与其祖先之间的最大差值
- The Chinese output of servlet server and client is garbled
- Excel 快捷键-随时补充
- qt绘制网络拓补图(连接数据库,递归函数,无限绘制,可拖动节点)
猜你喜欢
ICML 2022 | 3dlinker: e (3) equal variation self encoder for molecular link design
Redis introduction complete tutorial: detailed explanation of ordered collection
Actual combat simulation │ JWT login authentication
【二叉树】节点与其祖先之间的最大差值
Redis getting started complete tutorial: hash description
一次edu证书站的挖掘
企业里Win10 开启BitLocker锁定磁盘,如何备份系统,当系统出现问题又如何恢复,快速恢复又兼顾系统安全(远程设备篇)
高通WLAN框架学习(30)-- 支持双STA的组件
【剑指offer】1-5题
C语言快速解决反转链表
随机推荐
S32 design studio for arm 2.2 quick start
Redis introduction complete tutorial: detailed explanation of ordered collection
ScriptableObject
Font design symbol combination multifunctional wechat applet source code
MySQL数据库备份与恢复--mysqldump命令
The difference between cout/cerr/clog
Notepad++--编辑的技巧
Compare two vis in LabVIEW
Redis introduction complete tutorial: Collection details
Jar批量管理小工具
Phpcms paid reading function Alipay payment
【taichi】用最少的修改将太极的pbf2d(基于位置的流体模拟)改为pbf3d
LIst 相关待整理的知识点
45岁教授,她投出2个超级独角兽
【ODX Studio编辑PDX】-0.2-如何对比Compare两个PDX/ODX文件
HMS core unified scanning service
Explanation of bitwise operators
【二叉树】节点与其祖先之间的最大差值
EditPlus--用法--快捷键/配置/背景色/字体大小
【ODX Studio編輯PDX】-0.2-如何對比Compare兩個PDX/ODX文件