vue3使用element plus时遇到的问题

news2024/12/24 3:50:28

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)
    }
  })
}

5.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)
        }
      },
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1194218.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【python海洋专题三十九】海洋指数画法--折线图样式三--不同颜色的线条

【python海洋专题三十九】海洋指数画法–折线图样式三–不同颜色的线条 数据:AMO_index 图像展示: 图片 往期推荐 图片 【python海洋专题一】查看数据nc文件的属性并输出属性到txt文件 【python海洋专题二】读取水深nc文件并水深地形图 【python海洋专题三】图像修饰之画…

文心一言 VS 讯飞星火 VS chatgpt (132)-- 算法导论11.2 4题

四、用go语言&#xff0c;说明在散列表内部&#xff0c;如何通过将所有未占用的槽位链接成一个自由链表&#xff0c;来分配和释放元素所占的存储空间。假定一个槽位可以存储一个标志、一个元素加上一个或两个指针。所有的字典和自由链表操作均应具有 O(1)的期望运行时间。该自由…

单元测试工具-Junit

文章目录 一. 认识Junit二. Junit中常用的注解1. Test2. Disabled3. BeforeAll & AfterAll4. BeforeEach & AfterEach 三. ParameterizedTest参数化1. 单参数2. 多参数2.1. CSV 获取参数2.2. 方法获取参数 四. Order控制测试用例的执行顺序五. 断言六. 测试套件1. 通过…

node插件MongoDB(三)—— 库mongoose 的使用和数据类型(一)

前言 提示&#xff1a;使用mongoose 的前提是你安装了node和 MongoDB。 mongoose 官网文档&#xff1a;http://mongoosejs.net/docs/index.html 文章目录 前言一、安装二、基本使用1. 打开bin目录的mongod.exe文件2. 基本使用的代码&#xff08;连接mongodb 服务&#xff09;3.…

【C++优先队列使用】问题总结

说明&#xff1a; 文章内容为关于priority_queue的使用总结&#xff0c;在C中要包含头文件<queue>文章内容为个人的学习整理&#xff0c;如有错误&#xff0c;欢迎指正。 文章目录 1. 优先队列默认是大根堆2. 关于优先队列和sort的比较逻辑2.1 sort的比较逻辑2.2 优先队…

【学术综述】-如何写出一篇好综述-写好综述要注意的问题

文章目录 1.前置1.1 SSD 的结构1.2 FTL的架构和作用 2 动机-why&#xff1f;3 做了什么【做了哪些方面的survey】&#xff1f;4 背景知识【上下文】5 研究的问题6 每个问题对应的解决方案 从昨天晚上【2023.11.09 22:00】到今天22:29的&#xff0c;花了一天的时间在读这篇surve…

gcc [linux]

目录 背景知识 gcc如何完成 格式 预处理&#xff08;进行宏替换&#xff09; 编译&#xff08;生成汇编&#xff09; 汇编&#xff08;生成机器可执行码&#xff09; 连接&#xff08;生成可执行文件或库文件&#xff09; 函数库 静态库 静态链接优势 动态库 动态链…

Ubuntu配置Yolov8环境并训练自己的数据集

文章目录 一、环境配置与功能测试1.1 安装1.2 目标检测1.3 实例分割1.4 分类1.5 姿态检测 二、训练数据标注三、数据集训练方法3.1 命令训练3.2 代码训练 前言&#xff1a;需要先安装CUDA和Anaconda&#xff0c;它们的安装参考我这篇文章&#xff1a;Ubuntu配置深度学习环境&am…

局域网下搭建SVN服务器

文章目录 1. 下载SVN服务器(VisualSVN Server)2. 安装SVN服务器(VisualSVN Server)3. 下载并安装TortoiseSVN4. 搭建SVN服务器 1. 下载SVN服务器(VisualSVN Server) 下载地址 2. 安装SVN服务器(VisualSVN Server) 默认安装即可 Location&#xff1a;VisualSVN Server的安装…

SpringBoot前后端分离整合cas(客户端)

SpringBoot前后端分离整合cas&#xff08;客户端&#xff09; cas认证详细流程&#xff1a; 前后端分离&#xff1a;项目前端使用nginx启动&#xff0c;后端是springBoot服务&#xff1b; nginx可以统一管理Cookie&#xff0c;避免出现跨域问题。 添加依赖 <dependency&g…

探索未来,开启无限可能:打造智慧应用,亚马逊云科技大语言模型助您一臂之力

文章目录 什么是大模型&#xff1f;大模型训练方法亚马逊云科技推出生成式AI新工具 —— aws toolkit使用教程 总结 什么是大模型&#xff1f; 近期&#xff0c;生成式大模型是人工智能领域的研究热点。这些生成式大模型&#xff0c;诸如文心一言、文心一格、ChatGPT、Stable …

strcat()用法

描述 头文件&#xff1a;<string.h>char *strcat&#xff08;char *dest&#xff0c; const char *src&#xff09;功能&#xff1a;将src字符串加到dest上&#xff0c;并返回指向dest字符串的指针。 举例 #include<stdio.h> #include<string.h> int mai…

使用非递归的方式实现归并排序

使用非递归的方式实现归并排序 话不多说&#xff0c;直接上代码&#xff1a; public class MergySort {public static void main(String[] args) {int[] nums {38, 27, 43, 3, 9, 82, 10};int[] sortedArray MergySort.mergySort(nums);// 输出排序后的数组for (int num : …

神仙打架!腾讯云阿里云谁更棋高一着?

现在&#xff0c;腾讯云和阿里云都在打价格战&#xff0c;推出了一系列的优惠政策。其中&#xff0c;腾讯云服务器只需要88元&#xff0c;而阿里云服务器也只需要99元。这么便宜的价格&#xff0c;是不是让你心动不已呢&#xff1f; 腾讯云的88元服务器&#xff1a;https://te…

CG Magic分享如何解决Vray渲染器使用不了的问题?

大家在使用Vray渲染器时&#xff0c;经常会有网友反馈说&#xff0c;为什么Vray渲染器使用不了的情况&#xff1f; vray渲染器是安装中出了问题嘛&#xff0c;还是什么原因呢&#xff1f;导致vray渲染器渲染不了。 那么&#xff0c;vray渲染器怎么安装才能正常使用呢&#xff…

java try catch 异常后还会继续执行吗

1、有 try-catch 语句块&#xff0c;并且 throw 在 catch 语句块里&#xff0c;那么 try 语句块中引发异常&#xff08;报错&#xff09;的那一行代码的后续代码都不执行并且 catch 语句块后的代码也都不执行&#xff08;遇到 finally 除外&#xff09;。&#xff08;见情形一和…

已解决:Rust Error: the trait bound is not satisfied 问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页: &#x1f405;&#x1f43e;猫头虎的博客&#x1f390;《面试题大全专栏》 &#x1f995; 文章图文并茂&#x1f996…

C# 同步异步大白话

同步异步大白话 背景 任务异步编程模型&#xff08;TAP&#xff09;提供了对异步代码的抽象。您可以像往常一样&#xff0c;将代码编写为一系列语句。您可以阅读该代码&#xff0c;就好像每条语句都在下一条语句开始之前完成一样。编译器执行许多转换&#xff0c;因为其中一些…

最详细的LightGBM参数介绍与深入分析

前言 我使用LightGBM有一段时间了&#xff0c;它一直是我处理大多数表格数据问题的首选算法。它有很多强大的功能&#xff0c;如果你还没有看过的话&#xff0c;我建议你去了解一下。 但我一直对了解哪些参数对性能影响最大&#xff0c;以及如何调整LightGBM参数以发挥最大作用…

使用WinDbg分析CPU100%的问题

在我们软件运行的时候&#xff0c;偶尔会出现CPU占比100%的问题&#xff0c;而且极其不容易排查&#xff0c;概率极低&#xff0c;我硬是操作了一个下午&#xff0c;出现了一次&#xff0c;然后找到了dmp文件&#xff0c;也没有任何的规律&#xff0c;那么就可以借助windbg进行…