elementplus适配1440 element- plus

1. 导语

本文是主要记录的是我在使用Vue 3.x+ Element-plus开发时遇到的各种问题，会持续更新。

2. 导入Axios

2.1. 下载插件

按下图中的顺序安装Axios。

2.2. 在main.js进行如下操作

import axios from 'axios'
// 创建 Axios 实例
const http = axios.create({
    baseURL: 'http://localhost:8888/' 
    // 这里也可以配超时的相关信息
});

// axiox请求拦截
http.interceptors.request.use(config => {
    // 为请求头对象，添加token验证Authorization字段
    config.headers.Authorization = window.sessionStorage.getItem('token') 
    return config;
},error => {
    // Do something with request error
    return Promise.reject(error);
});
const app = createApp(App)
app.config.globalProperties.$http = http // 使用$http做为axios的具体访问名称
app.mount('#app')

2.3. 使用

这个不在main.js中使用啊，这个在你具体的业务组件中的js代码里使用啊！

// 登录操作
login () {
  // 表单预验证
  // valid：bool类型
  this.$refs.loginFormRef.validate(async valid => {
    if (!valid) return false
    // this.$http.post('login', this.loginForm): 返回值为promise
    // 返回值为promise，可加await简化操作 相应的也要加async
    const { data: res } = await this.$http.post('login', 'username='+this.loginForm.username+'&password='+this.loginForm.password)
    if (res.code !== 200) return this.$message.error('登录失败')
    this.$message.success('登录成功')
    // 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; localStorage中是持久化的保存
    //   1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问
    //   1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
    window.sessionStorage.setItem('token', res.data.token)
    // 2、通过编程式导航跳转到后台主页, 路由地址为：/home
    this.$router.push({
      path: '/Home',
    })
    // 3.将用户的id传到home界面，方便个人信息的修改操作
    window.sessionStorage.setItem('reg_id', res.data.register.regId)
  })
}

如果是其他形式的请求就是:
this.$http.put('***')
this.$http.get('***')
this.$http.delete('***')
前面的await是为了配合上面的async，即异步请求的意思

3. Element-plus中的el-submenu组件的问题

我们在项目中要使用如果需要二级目录就需要使用el-sub-menu标签，但是官网提供的这个el-sub-menu是有问题的，如果这样写会有二级或一级菜单显示不出来的问题，如果有遇到显示有问题的时候可以试试将el-sub-menu换成el-submenu即可解决。

4. 引入Element-plus中的Icon图标组件

4.1.安装组件

安装之前看看有下图中右侧的目录中是否有Icon这个文件，有的话就不用下载安装包，然后在main.js中按照下图中左半部分高亮的内容即可导入组件并在全局中使用。

4.2. 官网提供的安装步骤

这个是官网提供的安装步骤
https://element-plus.org/zh-CN/component/icon.html 如果你在导入下图中高亮的部分时报错(我的报错是icons-vue找不到)，请使用4.1提供的方式。

5. el-form-item表单验证问题

5.1. 问题：el-form-item的表单输入值后v-model取不到值，导致验证一直不通过

下图是具体的错误内容：

这个是我的代码和验证规则，期望的是我输入字母后应该报是否为合法的手机号或邮箱的提示，而不是因为没输入值的提示。

5.2. 问题原因和解决方案

问题原因：el-form-item中的prop的值和el-input中v-model中的值不一致

正确的写法：
prop="regMobile"
v-model="updateRegisterInfoForm.regMobile"
regMobile = regMobile
错误的写法：
prop="mobile"
v-model="updateRegisterInfoForm.regMobile"
mobile ≠ regMobile

6. 使用El-button组件的Icon属性时，图标不显示

6.1. 问题

我要实现的效果是下面高亮部分的样子，下面的代码是官网提供的，但是icon前面加":“(冒号)浏览器的控制台会报错。有一位博主的解决办法是去掉icon前面的”:"(冒号),我尝试后无法解决，于是我使用了官网提供的icon图标解决方式解决了该问题，请看6.2。

6.2. 解决方式

<el-button type="primary" size="small" circle><el-icon><Edit/></el-icon></el-button>
<el-button type="danger" size="small" circle><el-icon><Delete/></el-icon> </el-button>
<el-button type="success" size="small" >Detail</el-button>
<el-button type="warning" size="small" >ResetPassword</el-button>
这是官网提供加载Icon图标的方式：
<el-icon><Edit/></el-icon>