全国咨询热线:18720358503

开发小程序的好处是啥_说说怎么在Vue.js中完成数

类别:企业动态 发布时间:2021-01-08 浏览人次:

说说如何在Vue.js中实现数字输入组件的方法       这篇文章主要介绍了说说如何在Vue.js中实现数字输入组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
设计两个快捷按钮,可直接在当前值的基础上增 1 或者减 1。 数字输入组件可设置初始值、最大值与最小值。

接着,规划好 API。一个 Vue.js 组件最重要的 3 个部分就是 pro凡科抠图、events 以及 slot,我们需要定义这三个部分的命名以及业务规则。这个组件比较简单,所以我们只用到  pro凡科抠图 与 events。

1 基础版

html:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 数字输入组件 /title 
 /head 
 body 
 div id="app" 
 number-input v-model="value" :min="0" :max="6" /number-input 
 /div 
 script src="vue/2.2.2/vue.min.js" /script 
 script src="number.js" /script 
 script 
 var app = new Vue({
 el: '#app',
 data: {
 value: 3
 /script 
 /body 
 /html 

这里,我们使用了 v-model,双向绑定了 value。

number.js:

 * 是否为数字
 * @param val
 * @returns {boolean}
function isNum(val) {
 return (/^[0-9]*$/).test(val);
 * 数字输入组件
ponent('number-input', {
 template: '\
 div \
 input \
 type="text"\
 :value="currentVal"\
 @change="change" \
 button\
 @click="down"\
 :disabled="currentVal =min" - /button \
 button\
 @click="up"\
 :disabled="currentVal =max" + /button \
 /div ',
 pro凡科抠图: {//校验
 //最大值
 max: {
 type: Number,
 default: Infinity
 //最小值
 min: {
 type: Number,
 default: -Infinity
 //初始值
 value: {
 type: Number,
 default: 0
 data: function () {
 return {
 currentVal: this.value
 watch: {
 currentVal: function (val) {
 console.log("currentVal:" + this.currentVal);
 this.$emit('input',val);
 value: function (val) {//更新 currentVal
 this.update(val);
 methods: {
 * 更新
 * @param val
 update: function (val) {
 //让输入的值在限定范围内
 if (val this.max) {
 val = this.max;
 if (val this.min) {
 val = this.min
 this.currentVal = val;
 * 减少
 down: function () {
 if (this.currentVal = this.min) {
 return;
 this.currentVal -= 1;
 * 增长
 up: function () {
 if (this.currentVal = this.max) {
 return;
 this.currentVal += 1;
 * 如果输入的值,
 * @param event
 change: function (event) {
 var val = event.target.value.trim();//获取输入值
 if (isNum(val)) {//赋值 currentVal
 val = Number(val);
 this.currentVal = val;
 //超出限定范围时,规整
 var max = this.max;
 var min = this.min;
 if (val max) {
 this.currentVal = max;
 } else if (val min) {
 this.currentVal = min;
 } else {//还原为 currentVal
 event.target.value = this.currentVal;
 mounted: function () {
 //对初始值进行范围限定
 this.update(this.value);

这里,我们专门定义了一个 number.js,用于定义数字输入组件。
在 number.js 中,我们做了如下工作:

利用正则表达式 ,定义了一个判断 “是否为数字” 的函数。 在模板定义中,我们定义了一个输入框以及两个按钮,首先在 input 中绑定了 currentVal 数据以及原生的 change 事件。接着,定义了递增与递减按钮,每个按钮都绑定了相应的事件,还绑定了 disabled 属性,这样当输入的值超出范围时,按钮就会置灰不可用。 在定义的 change() 方法中,先获取输入值,然后判断是否为数字。如果是数字,则赋值给 currentVal;如果不是数字,则还原为 currentVal,这样可以保证组件的内容始终是数字。 接着在 pro凡科抠图 中,对每一个参数(最大值、最小值、初始值)定义了相应的校验规则。这样就可以在父组件中初始化这个数字输入组件啦O(∩_∩)O~ 因为 Vue.js 组件时单向数据流,所以不能在组件内部修改之前在 pro凡科抠图 中定义的 value。我们可以在 data 函数中,声明一个 currentVal,并把  pro凡科抠图 中定义的 value 值赋给它。这样就实现了组件初始化时,引用父组件中的值的工作。 为了当父组件修改了输入值,也要更新子组件中的 currentVal 的功能,我们需要用到 watch 属性。 watch 属性用于监听某个 prop 或者 data,当它们发生变化时,会触发定义在 watch 中的函数。这里我们监听了 currentVal 与 value,监听了 currentVal 是为了将来当内部更新了 currentVal 的场景时,可以同步到 Value,这里起核心作用的是监听 value 值。为了让输入的值在限定范围内,这里封装了一个 update() 函数。 watch 中的监听函数,有两个入参,第一个是新值,第二个是旧值。这里只用到新值。因为监听函数中的 this ,指向的是当前组件实例,所以可以直接调用定义在 methods 中的函数。 为了在组件初始化时,对初始值进行范围限定,这里在 mounted 挂载函数中,也调用了 update() 函数。

效果:

2 按键支持

当输入框获得焦点时,按下“向上键”时,增长;按下“向上键”时,减少。

这可以利用按键修饰符来实现,我们修改示例中的组件模板:

 input 
 type="text"
 :value="currentVal"
 @change="change"
 @keyup.up="up"
 @keyup.down="down" 
...

Vue.js 定义按键别名有这些:

.enter .tab .delete(捕获“删除”和“退格”键) .esc .space .down .left .right

效果:

3 控制步伐

新增一个步伐属性,增长或者减少以步伐值为变化量。之前的示例,步伐为 1。

首先在 pro凡科抠图 中,定义一个步伐属性:

step: {
 type: Number,
 default: 1

然后在增长与减少函数中,使用步伐属性做为变化量:

 * 减少
down: function () {
 if (this.currentVal = this.min) {
 return;
 this.currentVal -= this.step;
 * 增长
up: function () {
 if (this.currentVal = this.max) {
 return;
 this.currentVal += this.step;

最后为组件重新配置参数:

 number-input v-model="value" :min="0" :max="50" :step="5" /number-input 

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


下一篇:没有了

推荐阅读

开发小程序的好处是啥_说说怎么在Vue.js中完成数

说说怎样在Vue.js中完成数据键入部件的方式 本文关键详细介绍了说说怎样在Vue.js中完成数据键入部件的方式,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追...

2021-01-08
SEM竞价长尾理论是什么?

SEM竟价排行的实质便是在与你同行业的市场竞争之中,抢得大量的总流量。可是每一个广告宣传主的费用预算和推广时间段不是同的,这也就防止了一家独大的将会性,不管是大型企业...

2021-01-08
如何专注你的目标

针对营销推广型网站来讲,不管总体目标被界定成甚么,都可以以梳理为说动客户采用网站所期待的行動。在方案策划网站时,如果你决策写出一句话,并放上一个图象或图型时,一定...

2021-01-08
广州凡科互联网科技股份有限公司招聘初级操盘

招聘人数:15职位信息公司致力于为年轻人提供一个实现自我提升的平台,如果你对自己的能力有足够的自信,相信凭借自己的努力可以获得自己想要的未来,那么我司将会是你正确的选...

2021-01-08
广州凡科互联网科技股份有限公司招聘旅行编辑

招聘人数:14职位信息岗位职责:1、负责国内外相关目的地的旅行信息搜集、编辑制作优秀的目的地旅行攻略等;2、负责旅行新媒体的内容:完成从选题策划、撰稿执行到排版;3、协助...

2021-01-08
广州凡科互联网科技股份有限公司招聘外贸专员

招聘人数:23职位信息岗位职责:1.独立操作wayfair电子商务平台产品的发布、营销及订单管理;2.负责产品信息的整理编辑及维护优化,能够准确抓住产品的重要信息(主要包括标题、关键...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信