当前位置:网站首页>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>
边栏推荐
- Qt个人学习总结
- [odx Studio Edit pdx] - 0.2 - Comment comparer deux fichiers pdx / odx
- [graph theory] topological sorting
- Wechat official account solves the cache problem of entering from the customized menu
- 【ODX Studio编辑PDX】-0.3-如何删除/修改Variant变体中继承的(Inherited)元素
- LabVIEW中比较两个VI
- Redis introduction complete tutorial: client communication protocol
- ICML 2022 || 3DLinker: 用于分子链接设计的E(3)等变变分自编码器
- Application of machine learning in housing price prediction
- MariaDB's Galera cluster application scenario -- multi master and multi active databases
猜你喜欢
uniapp 除了数字,其他输入无效
Stm32 Reverse Introduction to CTF Competition Interpretation
实战模拟│JWT 登录认证
Galera cluster of MariaDB - dual active and dual active installation settings
The difference between debug and release
Solution record of jamming when using CAD to move bricks in high configuration notebook
Blue sky nh55 series notebook memory reading and writing speed is extremely slow, solution process record
【js】-【排序-相关】-笔记
cout/cerr/clog的区别
企业里Win10 开启BitLocker锁定磁盘,如何备份系统,当系统出现问题又如何恢复,快速恢复又兼顾系统安全(远程设备篇)
随机推荐
CTF competition problem solution STM32 reverse introduction
Why does infographic help your SEO
ECS settings SSH key login
VIM editor knowledge summary
HMS core unified scanning service
CTF競賽題解之stm32逆向入門
Etcd database source code analysis - brief process of processing entry records
The caching feature of docker image and dockerfile
debug和release的区别
Docker镜像的缓存特性和Dockerfile
[sword finger offer] questions 1-5
蓝天NH55系列笔记本内存读写速度奇慢解决过程记录
Redis introduction complete tutorial: client communication protocol
Redis: redis message publishing and subscription (understand)
初试为锐捷交换机跨设备型号升级版本(以RG-S2952G-E为例)
Advantages of Alibaba cloud international CDN
OSEK standard ISO_ 17356 summary introduction
Ffmpeg quick clip
【js】-【动态规划】-笔记
[Taichi] change pbf2d (position based fluid simulation) of Taiji to pbf3d with minimal modification