Vue数字输入框组件的使用方法
最近在通过《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组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- Vue.js路由组件vue-router的使用方法
- 基于Vue开发数字输入框组件
- Vue 兄弟组件通信的方法(不使用Vuex)
- 在VUE里使用全局公共组件(自定js文件)的简单方法,bus实现父子或兄弟组件用$emit的通信方法
- 基于Vue的数字输入框组件开发
- vue使用Element组件时v-for循环里的表单项验证方法
- VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!
- vue 使用ref 让父组件调用子组件的方法
- 使用use注册Vue全局组件和全局指令的方法
- Vue的自定义组件不能使用click方法
- 详解Vue组件插槽的使用以及调用组件内的方法
- vue html 动态渲染组件几种方法(使用vue-qrcode 生成二维码)
- Vue.js路由组件vue-router使用方法详解
- vue 使用ref 让父组件调用子组件的方法
- vue.js中组件的创建和使用方法
- 在vue组件中使用axios的方法
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- vue全局组件与局部组件使用方法详解
- 在Vue组件中使用 TypeScript的方法
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法