项目中的笔记

鼠标变小手： cursor:pointer；

标准盒子模型（w3c盒子）：box-sizing:content-box;（默认值，不写就是标准盒子）

我们自己定义的width指的是内容区的宽度，加边框和内间距会撑大盒子

怪异盒子模型(IE盒子)： box-sizing:border-box;

element-plus 让表单居中 ：给div加  text-align:center改成了text-align: -webkit-center

动态组件 

 <button v-for="(item, index) in data" :key="index" class="pos-btn" @click="selectactive(item)">
          {{ item.name }}
          {{ item.num }}
  </button>
    <keep-alive include="PullCom,PosCom">
      <component :is="current.comName"></component>
    </keep-alive>

const data = reactive([
  {
    name: '招聘中',
    comName: markRaw(PosCom),
    num: 0
  },
  {
    name: '已下架',
    comName: markRaw(PullCom),
    num: 10
  }
])

// 设置默认选中
let current = reactive({
  comName: data[0].comName
})

const selectactive = (item) => {
  current.comName = item.comName

}

手机/密码/确认密码  

// 手机号
const validatePhone = (rule, value, callback) => {
  if (!rule.required && !value) {
    return callback()
  }
  if (!value) {
    callback(new Error('请输入手机号码'))
  } else {
    const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
    if (reg.test(value)) {
      callback()
    } else {
      return callback(new Error('请输入正确的手机号码'))
    }
  }
}
// 密码
var validatePassword = (rule, value, callback) => {
  if (value !== '') {
    if (value.length < 8) {
      callback(new Error('请输入至少8位的密码'))
      return false
    } else if (!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@!*#$%&_=])[A-Za-z\d@!*#$%&_=]{8,18}$/.test(value)) {
      callback(new Error('密码必须包含字母、数字和特殊字符(@!*#$%&_=)'))
      return false
    } else {
      callback()
    }
  }
}
// 确认密码
var validateSurePassword = (rule, value, callback) => {
  if (value !== '') {
    if (value.length < 8) {
      callback(new Error('请输入至少8位确认密码'))
      return false
    } else if (value !== form.value.companyUser.password) {
      callback(new Error('两次输入的新密码不一致'))
      return false
    } else {
      callback()
    }
  }
}