element plus时遇到的问题"/>
vue3使用element plus时遇到的问题
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-formref="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) returnawait form.validate((valid, fields) => {console.log(valid);if (valid) {console.log('submit!')} else {console.log('error submit!', fields)}})
}
5.vue设置代理后查看真实接口调用的ip地址
proxy: {// 选项写法'/api': {target: ':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)}},},
更多推荐
vue3使用element plus时遇到的问题
发布评论