elementUI组件库的学习

1、安装

yarn add element-ui

2、引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、使用

表单校验

---

表单form

<el-form class="el_form" ref="form" :rules="rules" :model="loginForm">

表单单元格item

<el-form-item prop="mobile">

表单单元格下input

<el-input v-model="loginForm.mobile"></el-input>

data return下写入规则

loginForm: {
  mobile: "",
  password: "",
},
rules: {
  mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "输入的手机号格式不正确",
      trigger: "blur",
    },
    { validator: MarkMobile, trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      min: 6,
      max: 12,
      message: "长度在 6 到 12 个字符",
      trigger: "blur",
    },
  ],
},

data return上面写入validator规则

const MarkMobile=(rule, value, callback)=>{
  value[0]==9?callback():callback(new Error('手机号第三位必须为9'))
}

校验成功发送请求

---

校验表单

// 方法一
this.$refs.form.validate((isOK) => {
  console.log(isOK);
});

// 方法二
this.$refs.form.validate().then((res) => {
  console.log(res);
});

// 方法三  async await
try {
  let res = await this.$refs.form.validate();
  console.log(res);
} catch (error) {
  console.log("fail");
}

校验部分表单

this.$refs.form.validateField("mobile", (err) => {
  if (err) {
    console.log("fail");
  } else {
    console.log("success");
  }
});