vue自定義數(shù)字輸入框組件
更新時間:2022年06月09日 15:53:53 作者:小雷雷哥哥
這篇文章主要為大家詳細介紹了vue自定義數(shù)字輸入框組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
最近自己在練習組件開發(fā),做了一個簡單的數(shù)字輸入框加減的組件,效果圖如下:
組件可以傳入三個參數(shù),value是初始化值,max是可輸入的最大值,min是可輸入最小值,當然參數(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法
本篇文章主要介紹了詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法,在VUE開發(fā)時,數(shù)據(jù)可以使用jquery和vue-resource來獲取數(shù)據(jù),有興趣的可以了解一下。2017-01-01Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element開發(fā)時遇到了不少問題,下面這篇文章主要給大家介紹了關(guān)于Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級結(jié)構(gòu)與用法的相關(guān)資料,需要的朋友可以參考下2022-12-12vue/react項目刷新頁面出現(xiàn)404報錯的原因及解決辦法
Vue項目打包部署到線上后,刷新頁面會提示404,下面這篇文章主要給大家介紹了關(guān)于vue/react項目刷新頁面出現(xiàn)404報錯的原因及解決辦法,文中將解決的辦法介紹的很詳細,需要的朋友可以參考下2023-05-05elementui時間/日期選擇器選擇禁用當前之前(之后)時間代碼實例
當我們在進行網(wǎng)頁開發(fā)時,通常需要用到一些日期組件來方便用戶選擇時間,其中element日期組件是一個非常好用的工具,這篇文章主要給大家介紹了關(guān)于elementui時間/日期選擇器選擇禁用當前之前(之后)時間的相關(guān)資料,需要的朋友可以參考下2024-02-02