vue如何自定義InputNumber計數器組件
更新時間：2023年10月20日 14:45:10 作者：酷酷的橙007
這篇文章主要介紹了vue如何自定義InputNumber計數器組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue自定義InputNumber計數器組件
ElementUI中關于計數器組件（InputNumber）在設置大小時具有一定局限性。
因此利用兩個button和一個input對上述計數器進行重構，并封裝成組件，供今后使用。
看效果（hover時）
上代碼
組件封裝（Input_num.vue）:
<!-- 自定義Input_num計數器組件 -->
<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, // 計數
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對應的百分比 */
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">
<!-- 引入自定義計數器組件 -->
<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, // 設定最小值
max_val: Infinity, // 設定最大值,Infinity表示無窮大
val: 0 // 計數器初始值
}
},
components: {
Input_num
},
methods: {
// 從子組件中接收input框中的數據，并更新父組件val值
count_num(data) {
this.val = data
}
}
}
</script>
<style scoped>
#create6 {
width: 100%;
height: 100%;
background: #fff;
padding: 100px; /*控制按鈕的位置*/
}
</style>
使用時，min_val用于設定最小值、max_val用于設定最大值（Infinity表示無窮大）、val設定初始值。
注：給自定義組件添加v-model屬性過程
在之前的博客中介紹過手動實現v-model的過程：
<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>
也就是說，任意元素包括組件，v-model就是:value和@input的語法糖（標紅的這兩個是固定的，不能變），接著按照需求進行逐步完成組件引入v-mdel
1.在父元素中定義組件上綁定我們要傳給子組件的值
<Input_num
:value="val"
></Input_num>
const Input_num = () => import('@/components/Input_num/Input_num')
data() {
return {
val: 0 // 計數器初始值
}
},
components: {
Input_num
}
2.向子組件（Input_num.vue）傳值
data() {
return {
counter_num: this.value // 計數
}
},
props: ['value']
上述過程完成了父組件向子組件傳值的過程
3.監(jiān)聽子組件中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框中的數據，并更新父組件val值
count_num(data) {
this.val = data
}
}
5.將上述子組件屬性寫成語法糖的形式
<Input_num1
v-model="val"
></Input_num1>
完成！可以實現與data中val的雙向綁定。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了Vue 一鍵清空表單的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了vue .sync修飾符的使用,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
vue的ui組件庫很多種，但是這么多的組件庫也不能滿足我們的開發(fā)需求，所以需要我們根據自己需求自己寫一個插件，下文小編通過兩個栗子給大家介紹js自定義組件的方法，感興趣的朋友一起看看吧2018-03-03
如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細步驟，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue如何實現路由跳轉到外部鏈接界面，具有很好的參考價值，希望對大家有所幫助。2022-10-10
下面小編就為大家?guī)硪黄赩ue生產環(huán)境部署詳解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點擊事件監(jiān)聽,具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個Vector2對象來獲取鼠標位置；然后,創(chuàng)建一個Raycaster對象來投射光線2024-10-10
vue.config.js配置報錯解決辦法(可能是與webpack混淆)
在Vue.js開發(fā)過程中,vue.config.js文件是用于配置項目的,特別是對于開發(fā)環(huán)境的設置,這篇文章主要給大家介紹了關于vue.config.js配置報錯解決的相關資料,可能是與webpack混淆,需要的朋友可以參考下2024-06-06