zithern_juejin
获得徽章 0
我正在做一个基于vue3+elelment plus+windicss的前端开发页面，使用JSON模拟后端交互的登录场景，但是密码一直校验失败，手动输入db.json文件后，打开http://localhost:3000/users?username=admin&password=123456没有数据，打开http://localhost:3000/users?username=admin有数据，请问各位大佬有遇到过这种情况嘛？豆包解释说：”很可能是 JSON Server 特定版本的多参数查询机制 导致的小 Bug。”并没有给出解决方案，我现在只能暂时仅校验用户名而不校验密码，想知道要怎么样才能校验密码呢？
展开
12
点赞
#新人报道# vue3+element plus + windiCSS 页面渲染宽度与设计不符
使用npm create vue@latest创建vue3项目后，想要设置左右两个盒子各占视口宽度的一半，在HTML文件中测试没有问题，但是在vue组件中出现的效果总是右侧有一列空白区域，请问各位大佬是否有遇到过此类问题，还望不吝赐教
<template>
<div class="container">
<div class="container-left">1</div>
<div class="container-right">2</div>
</div>
</template>
<script setup lang='ts'>
</script>
<style>
/* 1. 重置全局样式（包括 html/body，需解除 scoped 限制） */
:global(*),
:global(html),
:global(body) {
margin: 0;
padding: 0;
/* 关键：让盒模型包含边框/内边距，避免宽度溢出 */
box-sizing: border-box;
}
/* 2. 修复容器宽度计算偏差 */
.container {
/* 替换 100vw 为 100%，避免滚动条占用视口宽度导致计算错误 */
width: 100%;
/* 强制占满屏幕高度 */
height: 100vh;
display: flex;
/* 禁止容器收缩，确保子元素占满 */
flex-shrink: 0;
}
.container-left {
/* 用 flex: 1 替代 50vw，自动平分宽度（更稳定） */
flex: 1;
height: 100%;
background-color: rgb(125, 248, 248);
}
.container-right {
/* 用 flex: 1 替代 50vw，自动平分宽度 */
flex: 1;
height: 100%;
background-color: rgb(248, 205, 125);
}
</style>
使用npm create vue@latest创建vue3项目后，想要设置左右两个盒子各占视口宽度的一半，在HTML文件中测试没有问题，但是在vue组件中出现的效果总是右侧有一列空白区域，请问各位大佬是否有遇到过此类问题，还望不吝赐教
<template>
<div class="container">
<div class="container-left">1</div>
<div class="container-right">2</div>
</div>
</template>
<script setup lang='ts'>
</script>
<style>
/* 1. 重置全局样式（包括 html/body，需解除 scoped 限制） */
:global(*),
:global(html),
:global(body) {
margin: 0;
padding: 0;
/* 关键：让盒模型包含边框/内边距，避免宽度溢出 */
box-sizing: border-box;
}
/* 2. 修复容器宽度计算偏差 */
.container {
/* 替换 100vw 为 100%，避免滚动条占用视口宽度导致计算错误 */
width: 100%;
/* 强制占满屏幕高度 */
height: 100vh;
display: flex;
/* 禁止容器收缩，确保子元素占满 */
flex-shrink: 0;
}
.container-left {
/* 用 flex: 1 替代 50vw，自动平分宽度（更稳定） */
flex: 1;
height: 100%;
background-color: rgb(125, 248, 248);
}
.container-right {
/* 用 flex: 1 替代 50vw，自动平分宽度 */
flex: 1;
height: 100%;
background-color: rgb(248, 205, 125);
}
</style>
展开
13
点赞