2020-11-03在vue项目中利用计算属性和监听属性同时监听多条数据(登录时身份验证)

在vue项目中利用计算属性和监听属性同时监听多条数据(登录时身份验证)

<template>
  <!-- 手机号 -->
        <my-input
          onpaste="return false"
          type="tel"
          v-model="mobile"
          clearable
          :left-icon="leftIcon"
          :placeholder="
            active == 1 ? '请输入联通/移动/电信手机号码' : '请输入联通手机号码'
          "
        />
        <!-- 密码 -->
        <my-input
          onpaste="return false"
          type="password"
          v-if="active == 2"
          v-model="password"
          clearable
          left-icon="pwd"
          right-icon="eye"
          placeholder="请输入6位服务密码"
        />
        <!-- 验证码 -->
        <my-input
          type="tel"
          v-if="active == 1"
          v-model="sms"
          left-icon="sms"
          placeholder="请输入验证码"
        >
</template>

<script>
import {
      Dialog, Toast, Input } from "woui-mobile";
import MyDialog from "@/components/Dialog";
import myInput from "@/components/Input";
import api from "@/api";
import Vue from "vue";
export default {
     
  data: function() {
     
    return {
     
      mobilePattern: /^1[3|4|5|7|8][0-9]{9}$/, //手机号校验
      passwordPattern: /^\d{6}$/, //密码校验
      // passwordPattern: /^.\w{6,16}$/, //密码校验
      smsPattern: /^\d{6}$/,
      mobile: "",
      password: "",
      sms: "",
    };
  },
  components: {
     
    [Dialog.name]: Dialog,
    [Input.name]: Input,
    myInput
  },
  computed: {
     
    changeData() {
     
      const {
      mobile, password, sms } = this;
      return {
     
        mobile,
        password,
        sms
      };
    }
  },
  watch: {
     
    changeData: function(newValue) {
     
      if (
        this.mobilePattern.test(newValue.mobile) &&
        this.passwordPattern.test(newValue.password)
      ) {
     
        this.btnDisabled = true;
      } else if (
        this.mobilePattern.test(newValue.mobile) &&
        this.smsPattern.test(newValue.sms)
      ) {
     
        this.btnDisabled = true;
      } else {
     
        this.btnDisabled = false;
      }
    }
  },
  created() {
     },
  mounted() {
     },
  methods:{
     
  }
};
</script>