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