自动调整翻译输入框中的字号

[mantou132]

类似谷歌翻译的 webapp，字数或者行数过多时调整字号

[u3u]

这是个好主意，不过不知道是否会影响界面美观

[mantou132]

多行时才会调整字号，就算在当前样式下问题也不大。

我在实现时遇到两个问题：

1. vue-emotion 怎么响应式的修改样式
2. 跟 autosize 冲突，监听 的行数需要 autosize 的回调函数，但是 autosize 让 <textarea> 增高的同时字号减少，让 <textarea> 高度跳动</li> </ol> <p>不过当 <textarea> <strong>达到最大高度时才触发字号的自动调整</strong> 也行，最后，字号达到一个临界值时，通过滚动条来排版更多的内容。</p> <p>如果今后需要显示更多的翻译结果信息，其他内容的字号需要相应的调整。</p> <p>这个 <textarea> 还有个问题是换行的问题，不应该在单词内换行。</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/u3u"><img src="https://avatars.githubusercontent.com/u/20062482?v=4" />u3u</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>vue-emotion 怎么响应式的修改样式</p> </blockquote> <p>可以通过传递 <code>props</code> 的方式动态修改</p> <pre><code class="language-js">const H1 = styled.h1` font-size: ${(props) => props.size}px; color: ${(props) => props.color}; transition: all 0.3s ease; `;</code></pre> <pre><code class="language-js">@Component export default class Test extends Vue { size = 12; color = 'red'; created() { setTimeout(() => { this.size = 16; this.color = 'green'; }, 500); } render() { const { size, color } = this; return ( <H1 size={size} color={color}> Title </H1> ); } }</code></pre> <blockquote> <p>跟 autosize 冲突</p> </blockquote> <p>这个应该可以用 <a href="http://www.jacklmoore.com/autosize/"><code>autosize.update(elements)</code></a> 来重新更新高度</p> <blockquote> <p>不应该在单词内换行</p> </blockquote> <p>这个需要把 <code>word-break</code> 的 <code>break-all</code> 修改成 <code>keep-all</code> 🌚</p> <p><a href="https://github.com/MoeFE/GoogleTranslate/blob/15bdc95ebc12d7b1c8571346d002fffe8f46a81f/src/renderer/components/TextBox.tsx#L25">https://github.com/MoeFE/GoogleTranslate/blob/15bdc95ebc12d7b1c8571346d002fffe8f46a81f/src/renderer/components/TextBox.tsx#L25</a></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>