-
Notifications
You must be signed in to change notification settings - Fork 363
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(input): 增加左侧、右侧文本 #88
Conversation
4979223
to
b5a81ee
Compare
src/input/input.tsx
Outdated
@@ -85,6 +86,9 @@ export default (Vue as VueConstructor<InputInstance>).extend({ | |||
const prefixIcon = this.renderIcon(h, this.prefixIcon, 'prefix-icon'); | |||
let suffixIcon = this.renderIcon(h, this.suffixIcon, 'suffix-icon'); | |||
|
|||
const labelContent = this.label ? <span class={`${name}__prefix`}>{renderTNodeJSX(this, 'label')}</span> : null; | |||
const suffixContent = this.suffix ? <span class={`${name}__suffix`}>{renderTNodeJSX(this, 'suffix')}</span> : null; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
业务侧使用的时候:props this.label
和插槽 <div slot="label">
二选一。
逻辑不对,不是 this.label
存在,才能执行 renderTNodeJSX(this, 'label')
。这样子,无法正常渲染插槽 label
。
renderTNodeJSX(this, 'label')
包含了插槽渲染,和渲染函数 this.label
两种。
建议代码:
const label = renderTNodeJSX(this, 'label');
// 使用 __label 而非 __prefix;使用 div 而非 span,这些自定义元素很可能会是 block 元素
const labelContent = label ? <div class={`${name}__label`}>{label}</div>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
src/input/input.tsx
Outdated
[`${name}--suffix`]: suffixIcon, | ||
[`${name}--prefix`]: prefixIcon || labelContent, | ||
[`${name}--suffix`]: suffixIcon || suffixContent, | ||
[`${name}__inner-is-focused`]: this.focused, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
__inner-is-focused
更为 __inner--focused
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
1ebad64
to
9038e14
Compare
2b03fb7
to
4fb0336
Compare
input__inner移动的影响太大了 |
8329903
to
c1f0795
Compare
增加左侧、右侧文本 Tencent#81
c1f0795
to
a2c34e8
Compare
增加左侧、右侧文本。子仓库变更:Tencent/tdesign-common#52
issue #81