Skip to content
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

Merged
merged 1 commit into from
Dec 28, 2021

Conversation

mokywu
Copy link
Contributor

@mokywu mokywu commented Dec 24, 2021

增加左侧、右侧文本。子仓库变更:Tencent/tdesign-common#52

issue #81

@mokywu mokywu force-pushed the feature/fix/input branch 2 times, most recently from 4979223 to b5a81ee Compare December 24, 2021 09:44
@@ -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;
Copy link
Collaborator

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>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

[`${name}--suffix`]: suffixIcon,
[`${name}--prefix`]: prefixIcon || labelContent,
[`${name}--suffix`]: suffixIcon || suffixContent,
[`${name}__inner-is-focused`]: this.focused,
Copy link
Collaborator

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

@mokywu mokywu force-pushed the feature/fix/input branch 4 times, most recently from 1ebad64 to 9038e14 Compare December 26, 2021 12:27
@github-actions
Copy link
Contributor

github-actions bot commented Dec 26, 2021

PR 预览产物在 https://preview-pr88-tdesign-vue.surge.sh

@mokywu mokywu force-pushed the feature/fix/input branch 7 times, most recently from 2b03fb7 to 4fb0336 Compare December 27, 2021 09:46
@uyarn
Copy link
Collaborator

uyarn commented Dec 27, 2021

image
image
image

@uyarn
Copy link
Collaborator

uyarn commented Dec 27, 2021

input__inner移动的影响太大了

@94dreamer 94dreamer requested a review from uyarn December 27, 2021 16:33
@mokywu mokywu force-pushed the feature/fix/input branch 2 times, most recently from 8329903 to c1f0795 Compare December 28, 2021 06:28
@chaishi chaishi merged commit 2b38ff7 into Tencent:develop Dec 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants