Vue数字输入框组件的使用方法
最近在通过《Vue.js实战》系统学习Vue,虽然在项目中已多次使用Vue进行开发,对于一些非常基础性的知识点还不是很了解,这次通过结合数字输入框组件实战来谈谈简单的组件开发。
源代码
项目整体结构
├── src 项目代码
│ ├── mon 公共js库
│ │ ├── number.js 判断是否为数字
│ ├── ponents 组件
│ │ ├── 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, ponents: { 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 '@/ponents/inputNumber' Vue.use(Router) // 然后定义路由(routes),并创建路由实例 export default new Router({ routes: [ { path: '/', name: 'index', ponent: inputNumber } ] })
mon/number.js
// 判断输入的值是否为数字 function isValueNumber (value) { var reg = /^[0-9]+.?[0-9]$/ if (reg.test(value)) { return true } return false } // 切记将此函数暴露,否则无法调用 export { isValueNumber }
ponents/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 '../ponents/inputCount' export default { data () { return { value: 5 //设置初始值为5 } }, ponents: { inputCount } } </script>
ponents/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 '../mon/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组件的教程,请大家点击专题进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程