对组件进行简单封装

最新推荐文章于 2023-02-26 16:58:04 发布

摩羯座**

最新推荐文章于 2023-02-26 16:58:04 发布

阅读量60

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48864616/article/details/122329617

版权

笔记专栏收录该内容

102 篇文章 0 订阅

订阅专栏

需求

需求： 
    1.只能输入数字
    2.设置初始值，最大值，最小值
    3.在输入框聚焦的时候，键盘上下键也可以增减值
    4.可以自定义步长 例如：设置为10，初始值为0，点一下加，值为10，再点一下为 20

    v-model: v-bind:value= num   @input="this.num = event.targtet.value"

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
   <div id="app">
       <input-number v-model="num" :max="100" :min="1" :step="3"></input-number>
   </div>

   <!-- input组件的模板内容 -->
   <template id="input-number">
       <div>
           <button @click="sub">-</button>
           <input type="text" v-model="inputValue" @keyup.up="add" @keyup.down="sub" @input="updateValue">
           <button @click="add">+</button>
       </div>

   </template>

   <script>
       //创建Vue示例 得到ViewModel
       var vm = new Vue({
           el:"#app",
           data:{
               num:10
           },
           components:{
               inputNumber:{
                   template:"#input-number",
                   data(){
                       return {
                           inputValue: this.value
                       }
                   },
                   props:{
                       value:{
                           type:Number,
                           default:1
                       },
                       max: {
                           type: Number,
                           default: Infinity
                       },
                       min: {
                           type: Number,
                           default: -Infinity
                       },
                       step: {
                           type:Number,
                           default:1
                       }
                   },
                   methods: {
                       //定义一个方法 ,每一次值跟更新的时候 判断是不是数字
                       isNumber(value){
                        return /^[0-9]*$/.test(value);
                       },
                       //定义 值++
                       add(){
                           this.inputValue +=this.step;
                       },
                    //    定义 值--
                    sub(){
                        this.inputValue -= this.step;
                    },
                    updateValue(event){
                        let newValue = Number(event.target.value.trim())
                        //判断是不是数字
                        if(this.isNumber(newValue)){
                            if (newValue > this.max) {
                  //超出最大值，设置为最大值
                  this.inputValue = this.max;
                } else if (newValue < this.min) {
                  //小于最小值，设置为最小值
                  this.inputValue = this.min;
                }
                //子向父传递数据
                this.$emit('input', newValue);
              } else {
                //不是数字，修改为原来的数据
                this.inputValue = this.value;
              }
                  
            }
           }
               }
           }
       })
   </script>
</body>
</html>

摩羯座**

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对组件进行简单封装

需求需求： 1.只能输入数字 2.设置初始值，最大值，最小值 3.在输入框聚焦的时候，键盘上下键也可以增减值 4.可以自定义步长例如：设置为10，初始值为0，点一下加，值为10，再点一下为 20 v-model: v-bind:value= num @input="this.num = event.targtet.value"代码<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录