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: 添加 autosize 功能 #115

Merged
merged 6 commits into from
Sep 2, 2020
Merged

Conversation

shoyuf
Copy link
Member

@shoyuf shoyuf commented Aug 26, 2020

Why

需要一个 autosize 属性,让高度根据内容伸缩,目前每个内容统一设置高度,内容却只有一行,浪费了空间。

How

可以设置 autosize 属性,autosize 为一个对象,内部有 minRows 和 maxRows

  1. 当 autosize 属性不设置的情况下,和组件原逻辑一致
  2. 当设置 autosize,将忽略设置的 height 属性

yuque_diagram (1)

Docs

/docs/autosize.md

@auto-add-label auto-add-label bot added the enhancement New feature or request label Aug 26, 2020
@netlify
Copy link

netlify bot commented Aug 26, 2020

Deploy preview for v-editor ready!

Built with commit 363605b

https://deploy-preview-115--v-editor.netlify.app

src/v-editor.vue Outdated Show resolved Hide resolved
Copy link
Contributor

@levy9527 levy9527 left a comment

Choose a reason for hiding this comment

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

只设置一个值:minRows时,表现不正常。直接在netlify 可见

@levy9527 levy9527 changed the title feat: 添加 autosize 功能 WIP feat: 添加 autosize 功能 Sep 1, 2020
@levy9527 levy9527 changed the title WIP feat: 添加 autosize 功能 feat: 添加 autosize 功能 Sep 1, 2020
@levy9527 levy9527 changed the title feat: 添加 autosize 功能 WIP feat: 添加 autosize 功能 Sep 1, 2020
@levy9527 levy9527 changed the title WIP feat: 添加 autosize 功能 feat: 添加 autosize 功能 WIP Sep 1, 2020
@shoyuf shoyuf marked this pull request as draft September 1, 2020 08:11
@shoyuf shoyuf marked this pull request as ready for review September 2, 2020 02:37
@shoyuf shoyuf requested review from levy9527 and colmugx September 2, 2020 02:37
@shoyuf shoyuf changed the title feat: 添加 autosize 功能 WIP feat: 添加 autosize 功能 Sep 2, 2020
@levy9527
Copy link
Contributor

levy9527 commented Sep 2, 2020

有两个修改点:
1.

.ck.ck-editor__editable_inline>:last-child {
  margin-bottom: 8px;
}
  1. autosize例子,minRows=3时,输入第三行时编辑器会变高,视觉上产生抖动。 则应再调整行高算法,让用户在输入的n行,n = minRows 时,编辑不会增加高度。

下面是 minRows = 3 时,最终效果图的高度,仅供参考
image

@levy9527 levy9527 merged commit 1513cb1 into FEMessage:dev Sep 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants