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类和接口