快捷導(dǎo)航

vue自定義數(shù)字輸入框組件

更新時間：2022年06月09日 15:53:53 作者：小雷雷哥哥

這篇文章主要為大家詳細介紹了vue自定義數(shù)字輸入框組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近自己在練習(xí)組件開發(fā)，做了一個簡單的數(shù)字輸入框加減的組件，效果圖如下：

組件可以傳入三個參數(shù)，value是初始化值，max是可輸入的最大值，min是可輸入最小值，當(dāng)然參數(shù)可以按需求繼續(xù)擴展的。

組件代碼如下：

<template>
? ? <div style="text-align: center;margin-top: 20px;">
? ? ? ? <input type="text" v-model="currentValue" @change="handleChange">
? ? ? ? <button @click="handleUp" :disabled="currentValue >= max">+</button>
? ? ? ? <button @click="handleDown" :disabled="currentValue <= min">-</button>
? ? </div>
</template>
?
<script>
? ? export default {
? ? ? ? props:['max','min','value'],
? ? ? ? name: "MyInput",
? ? ? ? data(){
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? currentValue:this.value
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? watch:{
? ? ? ? ? ? currentValue: function (val) { //currentValue值變動就向父組件傳值
? ? ? ? ? ? ? ? this.$emit('input',val);
? ? ? ? ? ? ? ? this.$emit('on-change',val);
? ? ? ? ? ? },
? ? ? ? ? ? value:function (val) { //對值進行驗證
? ? ? ? ? ? ? ? this.updataValue(val);
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mounted(){
? ? ? ? ? ? this.updataValue(this.value);
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? handleDown: function () { ?//加法
? ? ? ? ? ? ? ? if(this.currentValue <= this.min){
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? this.currentValue -= 1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? handleUp: function () { //減法
? ? ? ? ? ? ? ? if(this.currentValue >= this.max){
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? this.currentValue += 1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? updataValue: function (val) {
? ? ? ? ? ? ? ? if(val > this.max){val = this.max}
? ? ? ? ? ? ? ? if(val < this.min){val = this.min}
? ? ? ? ? ? ? ? this.currentValue = val;
?
? ? ? ? ? ? },
? ? ? ? ? ? handleChange: function (event) { ?//對值進行驗證
? ? ? ? ? ? ? ? var val = event.target.value.trim();
? ? ? ? ? ? ? ? var max = this.max;
? ? ? ? ? ? ? ? var min = this.min;
? ? ? ? ? ? ? ? if(this.isNumber(val)){
? ? ? ? ? ? ? ? ? ? val = Number(val);
? ? ? ? ? ? ? ? ? ? this.currentValue = val;
? ? ? ? ? ? ? ? ? ? if(val > max){
? ? ? ? ? ? ? ? ? ? ? ? this.currentValue = max;
? ? ? ? ? ? ? ? ? ? }else if(val < min){
? ? ? ? ? ? ? ? ? ? ? ? this.currentValue = min;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? this.currentValue = 0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? isNumber: function (value) {
? ? ? ? ? ? ? ? return (/^\-?[0-9]+$/).test(value + '');
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>
?
<style scoped>
? ? input{
? ? ? ? width: 280px;
? ? ? ? height: 36px;
? ? ? ? padding: 0 10px;
? ? ? ? border: 1px solid #ccc;
? ? ? ? border-radius: 4px;
? ? }
? ? button{
? ? ? ? border: none;
? ? ? ? background: #4e83e4;
? ? ? ? color: #fff;
? ? ? ? height: 36px;
? ? ? ? width: 36px;
? ? }
</style>

調(diào)用組件就很簡單了，如下：

<template>
? ? <div>
? ? ? ? <h2>數(shù)字輸入框組件</h2>
? ? ? ? <!-- ?max是可輸入的最大值 ?min是可輸入的最小值 ?value是初始值-->
? ? ? ? <my-input v-model="value" :max="10" :min="-5"></my-input>
? ? ? ? <p style="text-align: center;"><button @click="doAlert(value)">輸入框的值是</button></p>
? ? </div>
</template>
?
<script>
? ? import MyInput from '../components/MyInput.vue';
? ? export default {
? ? ? ? name: "computeNumber",
? ? ? ? components:{MyInput},
? ? ? ? data(){
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? value: 1
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? doAlert: function (val) {
? ? ? ? ? ? ? ? alert(val);
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>

組件做的很簡單，歡迎大家一起交流。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: