溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在通過《Vue.js實戰》系統學習Vue，雖然在項目中已多次使用Vue進行開發，但是對于一些非常基礎性的知識點還不是很了解，因此這次通過結合數字輸入框組件實戰來談談簡單的組件開發。
源代碼：數字輸入框組件
項目整體結構
├── src 項目代碼
│ ├── common 公共js庫
│ │ ├── number.js 判斷是否為數字
│ ├── components 組件
│ │ ├── inputCount.vue 數字輸入框組件
│ │ ├── inputNumber.vue 數字輸入框調用頁
| ├── router 路由
| | ├── index.js 路由相關操作
| ├── App.vue 入口頁
| ├── main.js !Webpack配置約定的js入口，不要修改名稱和路徑
main.js
入口文件，主要作用是初始化vue實例并使用需要的插件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue
主組件，所有頁面都是在App.vue下進行切換的。所有的路由也是App.vue的子組件
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
router/index.js
// import引入路由組件
import Vue from 'vue'
import Router from 'vue-router'
import inputNumber from '@/components/inputNumber'
Vue.use(Router)
// 然后定義路由(routes)，并創建路由實例
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: inputNumber
}
]
})
common/number.js
// 判斷輸入的值是否為數字
function isValueNumber (value) {
var reg = /^[0-9]+.?[0-9]*$/
if (reg.test(value)) {
return true
}
return false
}
// 切記將此函數暴露，否則無法調用
export {
isValueNumber
}
components/inputNumber.vue
<template>
<div>
// 雙向綁定value，并設默認值為5，最大值為100，最小值為0
<input-count v-model="value" :max="100" :min="0"></input-count>
</div>
</template>
<script>
//引入子組件
import inputCount from '../components/inputCount'
export default {
data () {
return {
value: 5 //設置初始值為5
}
},
components: {
inputCount
}
}
</script>
components/inputCount.vue
<template> <div class="input-number"> <input type="text" :value="currentValue" @change="handleChange" @keyup.down="handleDown" @keyup.up="handleUp"/> <button @click="handleDown" :disabled="currentValue <= min" >-</button> <button @click="handleUp" :disabled="currentValue >= max">+</button> </div> </template>
input綁定了currentValue和原生的change事件，在句柄handleChagne函數中，因為綁定的currentValue是單向數據流，所以在輸入時，currentValue的值并沒有實時進行改變。如果輸入的不是數字，就將輸入的內容重置為之前的currentValue；如果輸入的值是數字，就把輸入的值賦給currentValue。
@keyup.down="handleDown"和@keyup.up="handleUp"實現在輸入框聚焦時，對鍵盤上下按鍵的支持。
<script>
// 引入判斷函數
import { isValueNumber } from '../common/number'
export default {
data () {
return {
step: 10, // 控制步伐
currentValue: this.value //初始化引用父組件value
}
},
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},
// 監聽選項用來監聽某個prop或data的改變，當它們發生變化時，就會觸發watch配置的函數
watch: {
currentValue: function (val) {
// 使用v-model時改變value
this.$emit('input', val)
// 觸發自定義事件on-change事件，用于告知父組件數字輸入框的值有所改變
this.$emit('on-change', val)
},
value: function (val) {
this.updateValue(val)
}
},
methods: {
handleDown: function () {
if (this.currentValue <= this.min) return
this.currentValue -= this.step
},
handleUp: function () {
if (this.currentValue >= this.max) return
this.currentValue += this.step
},
// 過濾出一個正確的currentValue
updateValue: function (val) {
if (val > this.max) val = this.max
if (val < this.min) val = this.min
this.currentValue = val
},
// 判斷輸入的值是否為數字
handleChange: function (event) {
// e.target.value:指向事件執行時鼠標所點擊區域的那個元素的值
// trim():刪除字符串開始和末尾的空格
var val = event.target.value.trim()
var max = this.max
var min = this.min
if (isValueNumber(val)) {
val = Number(val)
this.currentValue = val
if (val > max) {
this.currentValue = max
} else if (val < min) {
this.currentValue = min
}
} else {
event.target.value = this.currentValue
}
}
},
// 第一次初始化需對value進行過濾
mounted: function () {
this.updateValue(this.value)
}
}
</script>
更多教程點擊《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
