❤ vue3 使用 ElementPlus

❤ vue3 使用ElementPlus

承接自上一篇文章
VUE3 项目具体配置（二）

1、 使用 ElementPlus Icon 图标

官网地址：
https://element-plus.org/zh-CN/component/icon.html

①安装

yarn add @element-plus/icons-vue

安装成功以后：

② 注册所有图标

从 @element-plus/icons-vue 中导入所有图标并进行全局注册

main.ts 配置：

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

③ 直接使用 SVG 图标

 <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <Edit />
  </div>

④ 动态使用 SVG 图标

普通使用:

<el-icon><Menu/> </el-icon>


动态使用:
<el-icon>
 	<component class="icons" :is="val.iconclass"></component>
</el-icon>

2、Element-ui中的el-image的图片预览功能（preview-src-list）

错误：踩坑

• url和srcList[0]不同导致预览为空
  官网示例 url和srcList[0]不同也可以正常显示预览第一张图片，但是项目中实际测试如果url和srcList[0]不同则导致预览的为空，向右切换时才正常显示第一张图片

• 使用按钮展示图片预览

1
<el-table-column label="员工照片" align="center">
   <template slot-scope="scope">
     <el-image
       style="width: 100px; height: 100px"
       :src="scope.row.staffIcon" 
       :preview-src-list="srcList"
       @click="vbs(scope.row.staffIcon)"
     >
     </el-image>
   </template>
</el-table-column>



2
<el-table-column label="员工照片" align="center">
   <template slot-scope="scope">
     <el-image
       style="width: 100px; height: 100px"
       :src="scope.row.staffIcon" 
       :preview-src-list="[scope.row.staffIcon]"
       @click="vbs(scope.row.staffIcon)"
     >
     </el-image>
   </template>
</el-table-column>


vbs(val) {
      this.srcList = []
      this.srcList.push(val)
}

2、element 表单校验

<el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
 >
 <el-form-item>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

自定义element 表单规则校验

年龄校验

:rules="[{required: true, message: '请输入年龄',trigger: 'blur', },
        { validator: validateAge, trigger: 'blur' }]"
// 年龄校验
const validateAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入年龄！'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('请输入正确的年龄！'))
    } else {
      callback()
    }
  }, 500)
}

手机号校验

{ validator: validatePhone, trigger: 'blur' }


// 手机号校验
const validatePhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('手机号不能为空'))
  }
  setTimeout(() => {
    if (!/^1[34578]\d{9}$/.test(value)) {
      callback(new Error('请输入正确的手机号'))
    } else {
        callback()
    }
  }, 500)
}

证件号校验

:rules="[{required: true, message: '请输入证件号',trigger: 'blur',},
     { validator: validateIdCard, trigger: 'blur' }
]"

// 证件校验
const validateIdCard = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入证件号！'))
  }
  setTimeout(() => {
    if (!/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\d|X|x]$/.test(value)) {
      callback(new Error('请输入正确的证件号'))
    } else {
      callback()
    }
  }, 500)
}

3、身份证号获取年龄

var age = getAge(value);
console.log(age);

const getAge = (idCard) => {
    if(ruleForm.value.idCard!=''){
         var currentDate = new Date();
          var currentYear = currentDate.getFullYear();
          var currentMonth = currentDate.getMonth() + 1;
          var birthYear = parseInt(idCard.substr(6, 4));
          var birthMonth = parseInt(idCard.substr(10, 2));
          var age = currentYear - birthYear;
          // 如果当前月份小于出生月份，则减去一岁
          if (currentMonth < birthMonth) {
            age--;
          }
          return age;
    }
}

邮箱校验

:rules="[{required: true, message: '请输入证件号',trigger: 'blur',},
     { validator: validateEmail, trigger: 'blur' }
  ]"

// 邮箱校验
const validateEmail  = (rule: any, value: any, callback: any) => {
  var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
  if (!value) {
    return callback(new Error('请输入邮箱！'))
  }
  setTimeout(() => {
    if ( !reg.test(value)) {
      callback(new Error('请输入正确的邮箱'))
    } else {
      callback()
    }
  }, 500)
}

解决input自动填充账号密码时的背景色

一定一定 要去掉css上的scope

input:-webkit-autofill {
box-shadow:0 0 0 1000px white inset !important;
}
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
transition: background-color 500s ease-in-out 0s !important;
background-color:#fff !important;
}


.el-input__inner:-webkit-autofill,
.el-input__inner:-webkit-autofill:hover,
.el-input__inner:-webkit-autofill:focus {
  background-color: #fff !important;
}

4、清空表单数据

<el-form
ref="ruleFormRef"

resetForm(ruleFormRef);

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields();
  //  ruleForm使用ref
  ruleForm.value.teacherCertificateRelevanceList=[{
        certificateName: '', //发证单位
        issueUnit: '', //有效期限
        expireDate: '', //详细描述
        descContent: '', //状态
        enable: 0, //
        imgUrl: '', //证书缩略图
        key:'1',
  }];
}