Closed wthvosk closed 1 month ago
没能复现这个问题,需要提供一下最小化的可复现 demo。
找到问题了,是表单内传给input的验证规则引起的
<var-input
v-model="model.username"
:placeholder="$t('page.login.common.userNamePlaceholder')"
:rules="new Rules().required().value"
size="small"
variant="outlined"
>
<template #prepend-icon>
<var-icon name="account-circle"/>
</template>
</var-input>
export class Rules {
rules = []
get value() {
return this.rules;
}
required(errorMessage = '不能为空') {
this.rules.push((v) => {
if (v === null || v === undefined) return errorMessage;
if (typeof v === 'string' && v.trim() === '') return errorMessage;
if (Array.isArray(v) && v.length === 0) return errorMessage;
if (typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length === 0) return errorMessage;
return true;
});
return this;
}
}
理论上提供的代码不会影响到渲染,可以提供一个最小复现吗?github 仓库,线上 playground 地址都可以。
---原始邮件--- 发件人: @.> 发送时间: 2024年5月6日(周一) 中午11:59 收件人: @.>; 抄送: @.**@.>; 主题: Re: [varletjs/varlet] form组件内嵌space组件,space和其中的内容不渲染 (Issue #1609)
找到问题了,是表单内传给input的验证规则引起的
<var-input v-model="model.username" :placeholder="$t('page.login.common.userNamePlaceholder')" :rules="new Rules().required().value" size="small" variant="outlined" > <template #prepend-icon> <var-icon name="account-circle"/> </template> </var-input> export class Rules { rules = [] get value() { return this.rules; } required(errorMessage = '不能为空') { this.rules.push((v) => { if (v === null || v === undefined) return errorMessage; if (typeof v === 'string' && v.trim() === '') return errorMessage; if (Array.isArray(v) && v.length === 0) return errorMessage; if (typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length === 0) return errorMessage; return true; }); return this; } }
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.Message ID: @.***>
午休了,下午整一个
抱歉,水平有限,起新项目实在是复现不出来,总而言之换了种导出方式后问题解决了(还是一样,开发时正常,生产环境才出问题),可能是打包时类名压缩啥的出的问题,所以新项目不会出现。
class formRules{
rules = []
get value() {
return this.rules;
}
required(errorMessage = '不能为空') {
this.rules.push((v) => {
if (v === null || v === undefined) return errorMessage;
if (typeof v === 'string' && v.trim() === '') return errorMessage;
if (Array.isArray(v) && v.length === 0) return errorMessage;
if (typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length === 0) return errorMessage;
return true;
});
return this;
}
}
export const Rules = new formRules();
<var-form ref="formRef">
<var-space
direction="column"
size="5vmin"
>
<var-input
v-model="model.username"
:placeholder="$t('page.login.common.userNamePlaceholder')"
:rules="Rules.required().value"
size="small"
variant="outlined"
@keydown.enter="handleSubmit"
>
<template #prepend-icon>
<var-icon name="account-circle"/>
</template>
</var-input>
<var-input
v-model="model.password"
:placeholder="$t('page.login.common.passwordPlaceholder')"
:rules="Rules.required().value"
size="small"
type="password"
variant="outlined"
@keydown.enter="handleSubmit"
>
<template #prepend-icon>
<var-icon name="lock"/>
</template>
</var-input>
</var-space>
</var-form>
这种现象很像是构建触发了 tree-shaking 导致部分代码被摇掉了。这个 issue 暂时开启一段时间,有问题可以留在这边。
Bug report 🐞
同标题, 在开发环境下一切正常,打包部署后和其中的内容不渲染,换成div用flex gap就可以,已知:
Version & Environment
node 20.11.1 "vue": "3.3.4", "@varlet/ui": "3.2.4", "vite": "4.4.8"
Expectation
开发环境
Actual results (or Errors)
打包上生产环境,无了