vue3使用时遇到的问题

使用elementplus遇到的问题

1.el-form中input无法输入

问题描述：在el-form中的el-input中输入数字或字母时出现卡顿，输入不进去的现象
问题原因：el-form的ref和model的名称写成了一样的单词
问题解决：两个不能一样
在这里插入图片描述

2.input去除边框

问题描述：el-input的边框使用border:none无法去除
问题原因：element plus和element的el-input不太一样，不止需要border，还需要使用box-shadow: none
问题解决：

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border-radius: 0;
}
:deep(.el-input) {
  box-shadow: none !important;
  border-radius: 0;
}

在这里插入图片描述

3.去除el-input验证失败后的红框

问题描述：el-input验证失败后鼠标移上去还会出现红框
问题解决：

:deep(.el-form-item.is-error .el-input__wrapper.is-focus) {
  box-shadow: none !important;
}

在这里插入图片描述

4.el-form表单验证

由于使用vue+js，导致表单验证不会用，哈哈哈，正在摸索vue3，先用js把vue2项目迁移过来后再使用ts

<el-form
   ref="loginFormRef"
   :model="loginForm"
   :rules="loginRules"
   class="login-form"
>

import { ref, computed, unref } from 'vue';
const loginFormRef = ref(null)
const handleLogin = async () => {
  const form = unref(loginFormRef)
  if (!form) return
  await form.validate((valid, fields) => {
    console.log(valid);
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

vue3遇到的问题

1.vue设置代理后查看真实接口调用的ip地址

    proxy: {
      // 选项写法
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx:xxxx',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
        bypass (req, res, options) {
          const proxyUrl = new URL(options.rewrite(req.url) || '', (options.target))?.href || '';
          console.log(proxyUrl);
          req.headers["x-req-proxyUrl"] = proxyUrl;
          res.setHeader("x-res-proxyUrl", proxyUrl)
        }
      },
    },

2.使用动态路由后刷新页面会出现找不到路径导致的空白页面或404

解决方法：

获取动态路由使用await而不是.then
获取前加一个判断：

import router from './router/index';

const whiteList = ['/login']; // no redirect whitelist
let hasRoles = true;

router.beforeEach(async (to, from, next) => {
  if (getItem('token')) {
    if (to.path === '/login') {
      // 1.已经登陆跳转到首页
      next({ path: '/' });
    } else {
      const userStore = useUserStore();
      const permissionStore = usePermissionStore();
      try {
        if (userStore.sysUser === '') {
          await userStore.getUserInfo();
        }
        const accessRoutes = await permissionStore.generateRoutes();
        if (hasRoles) {
          accessRoutes.forEach((route) => {
            router.addRoute(route);
          });
          hasRoles = false;
          next({ ...to, replace: true });
        } else {
          next();
        }
      } catch (error) {
        // 移除 token 并跳转登录页
        await userStore.logout();
        next(`/login?redirect=${to.path}`);
      }
    }
  } else {
    //  2.未登录，只能去登录页面
    if (whiteList.indexOf(to.path) !== -1) {
      next();
    } else {
      next(`/login?redirect=${to.path}`);
    }
  }
});