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

[mantou132]

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

[u3u]

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

[mantou132]

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

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

1. vue-emotion 怎么响应式的修改样式
2. 跟 autosize 冲突，监听 <textarea> 的行数需要 autosize 的回调函数，但是 autosize 让 <textarea> 增高的同时字号减少，让 <textarea> 高度跳动

不过当 <textarea> 达到最大高度时才触发字号的自动调整 也行，最后，字号达到一个临界值时，通过滚动条来排版更多的内容。

如果今后需要显示更多的翻译结果信息，其他内容的字号需要相应的调整。

这个 <textarea> 还有个问题是换行的问题，不应该在单词内换行。

[u3u]

vue-emotion 怎么响应式的修改样式

可以通过传递 props 的方式动态修改

const H1 = styled.h1`
  font-size: ${(props) => props.size}px;
  color: ${(props) => props.color};
  transition: all 0.3s ease;
`;

@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>
    );
  }
}

跟 autosize 冲突

这个应该可以用 autosize.update(elements) 来重新更新高度

不应该在单词内换行

这个需要把 word-break 的 break-all 修改成 keep-all 🌚

GoogleTranslate/src/renderer/components/TextBox.tsx

Line 25 in 15bdc95

word-break: break-all;