当前位置:网站首页>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>
边栏推荐
猜你喜欢
Blue sky nh55 series notebook memory reading and writing speed is extremely slow, solution process record
智力考验看成语猜古诗句微信小程序源码
Font design symbol combination multifunctional wechat applet source code
Redis getting started complete tutorial: hash description
QT personal learning summary
French scholars: the explicability of counter attack under optimal transmission theory
[sword finger offer] questions 1-5
Editplus-- usage -- shortcut key / configuration / background color / font size
Observable time series data downsampling practice in Prometheus
Redis:Redis消息的发布与订阅(了解)
随机推荐
ffmpeg快速剪辑
QT drawing network topology diagram (connecting database, recursive function, infinite drawing, dragging nodes)
Servlet+jdbc+mysql simple web exercise
[crawler] jsonpath for data extraction
The difference between debug and release
Editplus-- usage -- shortcut key / configuration / background color / font size
[ODX studio edit PDX] -0.3- how to delete / modify inherited elements in variant variants
heatmap. JS picture hotspot heat map plug-in
The small program vant tab component solves the problem of too much text and incomplete display
ECS settings SSH key login
Network namespace
Redis:Redis的事务
头文件重复定义问题解决“C1014错误“
CTF竞赛题解之stm32逆向入门
Actual combat simulation │ JWT login authentication
【taichi】用最少的修改将太极的pbf2d(基于位置的流体模拟)改为pbf3d
金融市场,资产管理与投资基金
Intelligence test to see idioms guess ancient poems wechat applet source code
HMS core unified scanning service
Redis: redis transactions