vue中 input输入框的封装

﹏ヽ暗。殇╰゛Y 2023-02-17 06:24 139阅读 0赞

## 在vue中会将常用的组件进行封装，如下是input输入框的一个封装。 ##

<template>
      <div class="text_group">
        
        
        <div class="input_group" :class="{'is-invalid':error}">
          
          <input
            :type="type"
            :value="value"
            :placeholder="placeholder"
            :name="name"
            @input="$emit('input',$event.target.value)"
          >
          
          <button v-if="btnTitle" :disabled="disabled" @click="$emit('btnClick')">{
       {btnTitle}}</button>
        </div>
        
        <div v-if="error" class="invalid-feedback">{
       {error}}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: "inputGroup",
      props: {
        type: {
          type: String,
          default: "text"
        },
        value: String,
        placeholder: String,   
        name: String,     //name 名称
        btnTitle: String,   //按钮名称
        disabled: Boolean,  //是否禁用。比如点击获取验证码的时候倒计时期间便会禁用按钮
        error: String   //错误提示
      }
    };
    </script>
    
    <style scoped>
    .input_group {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .input_group input {
      height: 100%;
      width: 60%;
      outline: none;
    }
    .input_group button {
      border: none;
      outline: none;
      background: #fff;
    }
    .input_group button[disabled] {
      color: #aaa;
    }
    .is-invalid {
      border: 1px solid red;
    }
    .invalid-feedback {
      color: red;
      padding-top: 5px;
    }
    </style>

## 如图所示： ##

![在这里插入图片描述][20200613003029374.png_pic_center]

## 如下是在登录页组件的代码展示： ##

<template>
      <div class="login">
        <div class="logo">
          <img src="../assets/logo.jpg" alt="my login image">
        </div>
        
        <InputGroup
          type="number"
          v-model="phone"
          placeholder="手机号"
          :btnTitle="btnTitle"
          :disabled="disabled"
          :error="errors.phone"
          @btnClick="getVerifyCode"
        />
        
        <InputGroup type="number" v-model="verifyCode" placeholder="验证码" :error="errors.code"/>
    
        
        <div class="login_des">
          <p>
            新用户登录即自动注册，表示已同意
            <span>《用户服务协议》</span>
          </p>
        </div>
        
        <div class="login_btn">
          <button :disabled="isClick" @click="handleLogin">登录</button>
        </div>
      </div>
    </template>
    
    <script>
    import InputGroup from "../components/InputGroup";
    export default {
      name: "login",
      data() {
        return {
          phone: "",
          verifyCode: "",
          errors: {},
          btnTitle: "获取验证码",
          disabled: false
        };
      },
      computed: {
        isClick() {
          if (!this.phone || !this.verifyCode) return true;
          else return false;
        }
      },
      methods: {
        handleLogin() {
          // 取消错误提醒
          this.errors = {};
          // 发送请求
          this.$axios
            .post("/api/posts/sms_back", {
              phone: this.phone,
              code: this.verifyCode
            })
            .then(res => {
              // console.log(res.data);
              // 检验成功 设置登录状态并且跳转到/
              localStorage.setItem("ele_login", res.data.user._id);
              this.$router.push("/");
            })
            .catch(err => {
              // 返回错误信息
              this.errors = {
                code: err.response
              };
            });
        },
    idateBtn() {
          let time = 60;
          let timer = setInterval(() => {
            if (time == 0) {
              clearInterval(timer);
              this.btnTitle = "获取验证码";
              this.disabled = false;
            } else {
              // 倒计时
              this.btnTitle = time + "秒后重试";
              this.disabled = true;
              time--;
            }
          }, 1000);
        },
        validatePhone() {
          // 验证手机号码
          if (!this.phone) {
            this.errors = {
              phone: "手机号码不能为空"
            };
            return false;
          } else if (!/^1[345678]\d{9}$/.test(this.phone)) {
            this.errors = {
              phone: "请填写正确的手机号码"
            };
            return false;
          } else {
            this.errors = {};
            return true;
          }
        }
      },
      components: {
        InputGroup
      }
    };
    </script>

[20200613003029374.png_pic_center]: https://img-blog.csdnimg.cn/20200613003029374.png#pic_center