vue输入框组件开发过程详解
本文实例为大家分享了vue输入框组件开发过程的具体代码，供大家参考，具体内容如下
input-number.js
function isValueNumber(value) {
return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9]*$)|(^-?0{1}$)/).test(value + '');
}
Vue.component('input-number',{
template: '\
<div class=input-number>\
<input\
type="text"\
:value="currentValue"\
@change="handleChange"\
@focus="keyControl">\
<button \
@click="handleDown" \
:disabled="currentValue<=min">-</button>\
<button \
@click="handleUp" \
:disabled="currentValue>=max">+</button>\
</div>',
data: function (){
return {
currentValue: this.value,
currentStep: this.$parent.step
}
},
watch: {
currentValue: function (val){
this.$emit('input',val);
this.$emit('on-change',val);
},
value: function(val){
this.updateValue(val);
}
},
methods: {
handleDown: function(){
if(this.currentValue<=this.min) return;
this.currentValue-=this.currentStep;
},
handleUp: function(){
if(this.currentValue>=this.max) return;
this.currentValue+=this.currentStep;
},
updateValue: function(val){
if(val>this.max) val=this.max;
if(val<this.min) val=this.min;
this.currentValue=val;
},
handleChange: function(event){
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.current = max;
}
if(val < min) {
this.current = min;
}
} else {
//如果输入的不是数字，将输入的内容重置为之前的currentValue
event.target.value = this.currentValue;
}
},
keyControl: function(){
var _this=this;
$(window).keydown(function(e){
if($('input')){
if(e.keyCode==38){
_this.handleUp();
}
else if(e.keyCode==40){
_this.handleDown();
}
}
});
}
},
mounted: function(){
this.updateValue(this.value);
},
props:{
max:{
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type:Number,
default: 0
},
step: {
type:Number,
default: 1
}
}
})
index.js
var app=new Vue({
el: "#app",
data: {
value: 5,
step: 10
}
})
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input-number v-model="value" :max="100" :min="0"></input-number> </div> <script src="js/input-number.js" type="text/javascript" charset="utf-8"></script> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于Vue开发数字输入框组件
随着 Vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: (1)index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-
-
Vue数字输入框组件示例代码详解
数字输入框组件 实现功能:只允许输入数字(包括小数).允许设置初始值.最大值.最小值. 为了方便,这里选用Vue的 cli-service 实现快速原型开发 首先template部分代码 <template> <div class="demo"> <input-number v-model="value" :max="10" :min="0"></input-number> &l
-
Vue数字输入框组件的使用方法
最近在通过<Vue.js实战>系统学习Vue,虽然在项目中已多次使用Vue进行开发,但是对于一些非常基础性的知识点还不是很了解,因此这次通过结合数字输入框组件实战来谈谈简单的组件开发. 源代码:数字输入框组件 项目整体结构 ├── src 项目代码 │ ├── common 公共js库 │ │ ├── number.js 判断是否为数字 │ ├── components 组件 │ │ ├── inputCount.vue 数字输入框组件 │ │ ├── inputNumber.vue 数字输
-
vue实现验证码输入框组件
先来看波完成效果图 需求 输入4位或6位短信验证码,输入完成后收起键盘 实现步骤 第一步 布局排版 <div class="security-code-wrap"> <label for="code"> <ul class="security-code-container"> <li class="field-wrap" v-for="(item, index) in num
-
Vue.js数字输入框组件使用方法详解
本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
-
Vue数字输入框组件使用方法详解
前面的话 关于基础组件介绍,已经更新完了.这篇文章将用组件基础知识开发一个数字输入框组件.将涉及到指令.事件.组件间通信. 基础需求 只能输入数字 设置初始值,最大值,最小值 在输入框聚焦时,增加对键盘上下键的支持 增加一个控制步伐prop-step,例如,设置为10 ,点击加号按钮,一次增加10 项目搭建 在了解需求后,进行项目的初始化: <!DOCTYPE html> <html lang="en"> <head> <meta charse
-
vue输入框组件开发过程详解
本文实例为大家分享了vue输入框组件开发过程的具体代码,供大家参考,具体内容如下 input-number.js function isValueNumber(value) { return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9]*$)|(^-?0{1}$)/).test(value + ''); } Vue.component('input-number',{ template: '\ <div class=input-number>\
-
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父
-
Bootstrap输入框组件使用详解
Bootstrap输入框组件的使用方法,具体内容如下 .input-group--设置div为输入框组: .input-group-lg..input-group-sm..input-group-xs--改变输入框组的尺寸: .input-group-addon--在输入框前或后加入额外内容: .input-group-btn--在输入框前或后加入button或button式下拉菜单组件. 代码: <!DOCTYPE html> <html lang="en">
-
Vue header组件开发详解
一. header 组件开发 之数据的传递 1. App.vue 引入组件 import header from './components/header/header' 2. App.vue 中注册组件 export default { components:{ v-header:header } } 3. 使用组件 <v-header :sell="sellerObj"></v-header> 解释::sell="sellerObj",这
-
Vue shopCart 组件开发详解
一.shopCart组件 (1) goods 父组件和 子组件 shopCart 传参 deliveryPrice:{ // 单价 从json seller 对象数据中获取 type:Number, default:0 }, minPrice:{ // 最低起送价 从json seller 对象数据中获取 type:Number, default:20 } 其中 deliveryPrice 和 minPrice 的数据都是从 data.json数据 中 seller 对象下 获得.所以在good
-
Vue异步组件使用详解
Vue的异步组件,供大家参考,具体内容如下 1.前置要求 建议使用webpack: Browserify在默认情况下不支持: 2.用法解释 首先上官网说明:异步组件 虽然说明是没问题的,但是示例中的写法怪怪的,不符合一般新手学习者在实际使用中的习惯. 嗯,换句话说,这段代码告诉你,通过这种方式引入异步组件,然后他漏掉了一些内容,比如说赋值,如何使用之类. [1]官方示例代码: Vue.component('async-webpack-example', function (resolve) {
-
vue组件编写之todolist组件实例详解
我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>
-
Vue 过渡（动画）transition组件案例详解
Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g
-
通过npm引用的vue组件使用详解
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创
-
vue实现简单表格组件实例详解
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩