vue如何自定義InputNumber計(jì)數(shù)器組件
更新時(shí)間：2023年10月20日 14:45:10 作者：酷酷的橙007
這篇文章主要介紹了vue如何自定義InputNumber計(jì)數(shù)器組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue自定義InputNumber計(jì)數(shù)器組件
ElementUI中關(guān)于計(jì)數(shù)器組件（InputNumber）在設(shè)置大小時(shí)具有一定局限性。
因此利用兩個(gè)button和一個(gè)input對(duì)上述計(jì)數(shù)器進(jìn)行重構(gòu)，并封裝成組件，供今后使用。
看效果（hover時(shí)）
上代碼
組件封裝（Input_num.vue）:
<!-- 自定義Input_num計(jì)數(shù)器組件 -->
<template>
<div class="input_num">
<button @click="minus">-</button>
<input type="text" :value="counter_num" disabled />
<button @click="add">+</button>
</div>
</template>
<script>
export default {
data() {
return {
counter_num: this.value, // 計(jì)數(shù)
min_num: this.min, // 最小值
max_num: this.max // 最大值
}
},
props: ['min', 'max', 'value'],
methods: {
minus() {
if (this.counter_num <= this.min_num) {
this.counter_num = this.min_num
} else {
this.counter_num--
}
},
add() {
if (this.counter_num >= this.max_num) {
this.counter_num = this.max_num
} else {
this.counter_num++
}
}
},
watch: {
counter_num(newVal) {
// console.log(newVal)
this.$emit('input', newVal)
}
}
}
</script>
<style scoped>
.input_num {
/* width: 120px; counter組件的寬 */
/* height: 24px; counter組件的高=上面的width*34行width對(duì)應(yīng)的百分比 */
position: absolute;
border-radius: 2px;
}
.input_num:hover {
box-shadow: 0 0 0 0.5px #409eff;
}
.input_num > button {
width: 20%;
height: 100%;
float: left;
box-sizing: border-box;
border: 1px solid #dcdfe6;
outline: none;
cursor: pointer;
background: #f5f7fa;
border-radius: 2px;
}
.input_num > button:active {
background: #ffffff;
}
.input_num > button:hover {
color: #409eff;
}
.input_num > input {
width: 60%;
height: 100%;
float: left;
box-sizing: border-box;
outline: none;
border: 1px solid #dcdfe6;
text-align: center;
border-left: 0;
border-right: 0;
background: #fff;
}
</style>組件使用：
<template>
<div id="create6">
<!-- 引入自定義計(jì)數(shù)器組件 -->
<Input_num
:min="min_val"
:max="max_val"
v-model="val"
></Input_num>
</div>
</template>
<script>
import Input_num from '@/components/Input_num/Input_num'
export default {
data() {
return {
min_val: 0, // 設(shè)定最小值
max_val: Infinity, // 設(shè)定最大值,Infinity表示無(wú)窮大
val: 0 // 計(jì)數(shù)器初始值
}
},
components: {
Input_num
},
methods: {
// 從子組件中接收input框中的數(shù)據(jù)，并更新父組件val值
count_num(data) {
this.val = data
}
}
}
</script>
<style scoped>
#create6 {
width: 100%;
height: 100%;
background: #fff;
padding: 100px; /*控制按鈕的位置*/
}
</style>
使用時(shí)，min_val用于設(shè)定最小值、max_val用于設(shè)定最大值（Infinity表示無(wú)窮大）、val設(shè)定初始值。
注：給自定義組件添加v-model屬性過(guò)程
在之前的博客中介紹過(guò)手動(dòng)實(shí)現(xiàn)v-model的過(guò)程：
<template>
<div class="hello">
<!-- <input type="text" v-model="aaa"> -->
<input type="text" :value="aaa" @input="aaa=$event.target.value">
{{ aaa }}
</div>
</template>
<script>
export default {
data() {
return {
aaa: ''
}
}
}
</script>
也就是說(shuō)，任意元素包括組件，v-model就是:value和@input的語(yǔ)法糖（標(biāo)紅的這兩個(gè)是固定的，不能變），接著按照需求進(jìn)行逐步完成組件引入v-mdel
1.在父元素中定義組件上綁定我們要傳給子組件的值
<Input_num
:value="val"
></Input_num>
const Input_num = () => import('@/components/Input_num/Input_num')
data() {
return {
val: 0 // 計(jì)數(shù)器初始值
}
},
components: {
Input_num
}
2.向子組件（Input_num.vue）傳值
data() {
return {
counter_num: this.value // 計(jì)數(shù)
}
},
props: ['value']
上述過(guò)程完成了父組件向子組件傳值的過(guò)程
3.監(jiān)聽(tīng)子組件中data屬性值的變化，并向父組件發(fā)送input事件
watch: {
counter_num(newVal) {
// console.log(newVal)
this.$emit('input', newVal)
}
}
4.父組件接收子組件input事件，并更新父組件val值
<Input_num
:value="val"
@input = "count_num"
></Input_num>
methods: {
// 從子組件中接收input框中的數(shù)據(jù)，并更新父組件val值
count_num(data) {
this.val = data
}
}
5.將上述子組件屬性寫(xiě)成語(yǔ)法糖的形式
<Input_num1
v-model="val"
></Input_num1>
完成！可以實(shí)現(xiàn)與data中val的雙向綁定。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
隨著前端技術(shù)的飛速發(fā)展,Vue.js作為一個(gè)流行的JavaScript框架,已經(jīng)被廣泛應(yīng)用于構(gòu)建現(xiàn)代Web應(yīng)用,然而,隨著應(yīng)用的復(fù)雜性和規(guī)模的增加,性能優(yōu)化也成為開(kāi)發(fā)者必須面對(duì)的重要任務(wù),在本篇博客中,我們將探討幾種常用的Vue性能優(yōu)化方法,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了Vue+Django項(xiàng)目部署詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue在項(xiàng)目中使用百度地圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue項(xiàng)目前端錯(cuò)誤收集之sentry教程詳解
Sentry 是一個(gè)開(kāi)源的錯(cuò)誤追蹤工具，可以幫助開(kāi)發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。這篇文章主要介紹了vue項(xiàng)目前端錯(cuò)誤收集之sentry,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
本文主要介紹了vue3在項(xiàng)目中的邏輯抽離和字段顯示，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue實(shí)施重新發(fā)布和軟件熱更新的經(jīng)驗(yàn)分享
在Web應(yīng)用的開(kāi)發(fā)周期中,版本管理和軟件熱更新是一個(gè)不可或缺的話題,隨著Vue.js框架的流行,越來(lái)越多的應(yīng)用程序選擇使用Vue來(lái)構(gòu)建前端,本文將探討在Vue應(yīng)用中實(shí)施重新發(fā)布和熱更新的最佳實(shí)踐,需要的朋友可以參考下2024-09-09
如何監(jiān)聽(tīng)Vue項(xiàng)目報(bào)錯(cuò)的4種方式?
本文主要介紹了如何監(jiān)聽(tīng)Vue項(xiàng)目報(bào)錯(cuò)的4種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
解決vue頁(yè)面刷新或者后退參數(shù)丟失的問(wèn)題
下面小編就為大家分享一篇解決vue頁(yè)面刷新或者后退參數(shù)丟失的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
VUE 配置vue-devtools調(diào)試工具及安裝方法
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開(kāi)發(fā)vue應(yīng)用。這篇文章主要介紹了VUE 配置vue-devtools調(diào)試工具及安裝步驟 ,需要的朋友可以參考下2018-09-09
這篇文章主要為大家介紹了vue的父子組件傳值，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11