有一个设置价格的场景,只允许数据整数或者小数,用的uni-app中的input组件,解决了原生组件【可以输入多个小数点“.”】的问题,博主这里只是用于微信小程序端,安卓和ios系统均已验证通过,不确定其他端是否有异常。话不多说,代码如下,欢迎各路高手指正。
<template>
<view>
<!-- 价格 -->
<input
auto-blur
style="width: 100%; text-align: right; color: red"
type="digit"
v-model="price"
placeholder-styl,e="color: red;"
placeholder="¥ 0.00"
:maxlength="9"
@input="handlePrice"
/>
</view>
</template>
<script>
export default {
data() {
return {
price: "",
};
},
methods: {
handlePrice() {
const { price } = this;
const dotIndex = price.indexOf(".");
const dotLastIndex = price.lastIndexOf(".");
if (dotIndex !== dotLastIndex) {
const p = price.slice(0, dotLastIndex);
this.$nextTick(() => {
this.price = p;
});
}
},
},
};
</script>