ES6 class使用方法

class字面来看是一个类，类里面无非就是属性和方法，内里面定义的变量可以被new实例化，在new的对象身上可以调取实例化的属性和方法，具有stats前缀的属性和方法在实例化的时候是无法直接挂载到实例对象身上，需要在实例化对象身上 .属性or方法。

class的使用可以极大的优化我们的代码，下面是class的使用方法

class loginClass {
    // 这里定义变量 这个变量在nwe的时候，会自动挂载到对应的this上
    username
    password
    constructor(params) {
        /* 内部使用this的话，相当于是双向绑定   
           new 的时候，定义的属性会被直接实例化，实例化的值会对应显示到页面上
           这个时候如果给页面做回显，需要将值传入class，此时的this就是内部的对应字段
           this.name = params.name   params是传入的参数，this.name是实例的值
           传入的参数等于实例的值，实例的值会对应的在页面上做双向绑定
           此时对应的页面就会根据实例的值回显内容
        */
        this.username = params.username
    }

    // 这边的静态是为了防止new的时候挂载了这个实例 只有loginClass.rules的时候才会挂载
    static  rules = {
        username : [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { pattern:/^[a-zA-Z0-9]{2,8}$/, message: '仅允许2到8位字母和数字', trigger: 'blur' }
       ],
       password : [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern:/^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号', trigger: 'blur'}
       ],
    }


}

export { loginClass }

下面是在页面使用的方法

<template>
    <div class='box' >
    

          <div class="loginBox">
              <div class="rightBox">
           
                <div class="right_innerBox">
                 
                    <div class="weclometitle Text">欢迎登录</div>
                    <!-- 账号密码表单 -->
                     <div class="LoginInput">
                         <el-form
                              ref="ruleFormRef"
                              :model="ruleForm"
                              :rules="loginClass.rules"
                              class="demo-ruleForm"
                              :size="formSize"
                        >
                           <!-- 账号 -->
                              <el-form-item aria-placeholder="请输入账号" prop="username">
                                <el-input class="userInput" v-model="ruleForm.username" />
                              </el-form-item>
                            <!-- 密码 -->
                             <el-form-item aria-placeholder="密码"  prop="password">
                                <el-input class="passInput" v-model="ruleForm.password" type="password"/>
                             </el-form-item>
                             <div class="forgetBox">忘记密码</div>
    
                             <!-- 登录 -->
                             <el-form-item>
                           
                            <el-button  
                            class="ensure" 
                            type="primary"
                            @click="submitForm(ruleFormRef)">登录</el-button>
                          
                            </el-form-item>
                            <!-- 清空 -->
                              <el-form-item>
                               <el-button
                                plain class="merchant"
                               @click="resetForm(ruleFormRef)">我要成为商家</el-button>
                              </el-form-item>
                        </el-form>
    
                     </div>
                     <!-- 账号密码表单输入end -->
                
                </div>
                     
             </div>
          </div>

    </div>
    </template>
    <script setup>
    import { reactive,ref } from 'vue';
    import { useRouter } from 'vue-router'
    import { loginClass } from './config'
    import { login } from '@/server/login'
    const router = useRouter()
    
    
    const formSize = ref('default')  // 字体大小
    const ruleFormRef = ref()   // 获取ref的表单节点 用于做重置和双向绑定
    const ruleForm = reactive(new loginClass()) //   表单关联的数据  响应式的数据 使用reactive包裹 new loginClass
    

    // 表单验证提示
    const rules = reactive(
        loginClass.rules
    )
    
    // 登录按钮
    const submitForm = async (formEl) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('正在登录')
            // 登录请求  登录的账号密码需要是字符串
            ruleForm.password = String(ruleForm.password)
            
            login(ruleForm)
            .then(res=>{
                console.log(res);
                localStorage.setItem('token',res.data.data.token)
                router.push('/home')
            })
            .catch(error=>{
                ElMessage.error('网络错误，请联系服务商')
            })
        } else {
            
        }
      })
    }
    // 清空输入按钮
    const resetForm = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
    }
    
    
    
    </script>
    <style scoped lang="less">
    /* scoped 使用得定义的样式只在本页面内生效  */
    .box{
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .loginBox{
        width: 1000px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        display: flex;
        overflow: hidden;
        justify-content: space-around;
        .rightBox{
            border: 1px solid #eee;
            text-align: center;
            width: 500px;
            height: 500px; 
     
            .right_innerBox{
                width: 400px;
                height: 500px;
                margin: 0 auto;
                .weclometitle{
                width: 400px;
                text-align: center;
                height: 40px;
                line-height: 40px;
                // border: 1px solid red;
                margin-top: 50px;
                margin-bottom: 30px;
                font-size: 18px;
            }
            .LoginInput{
                width: 400px;
                height: 120px;
                // border: 1px solid gold;
    
                .userInput,.passInput{
                    height: 40px;
                }
            }
            
            // 提交按钮
           .loginBtn{
                width: 400px;
                height: 40px;
                line-height: 40px;
                margin-top: 10px;
             
           }
           .merchantBtn{
            width: 400px;
                height: 40px;
                line-height: 40px;
                margin-top: 10px;
           
           }
           .explain{
            width: 400px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            // border: 1px solid cyan;
            margin-top: 30px;
            font-size: 10px;
            color:#999999 ;
           }
                
            }
            
        }
    }
    
       // 登录按钮
       .ensure{
            width: 400px;
            height: 40px;
         }
        //  清空按钮
        .merchant{
              width: 400px;
              height: 40px;
          }
        // 忘记密码
        .forgetBox{
                // border: 1px solid red;
                text-align: right;
                margin-top: 20px;
                color: #94a1fd;
                font-size: 14px;
                margin-bottom: 10px;
            } 
    
    </style>
     

class的具体用法和说明请看另一篇：【TS】class类和接口