用于聊天输入的 Quasar 文本区域

Posted 2023-05-06

【中文标题】用于聊天输入的 Quasar 文本区域

【英文标题】：Quasar text area for chat input

【发布时间】：2021-12-26 17:51:45

【问题描述】：

以下是找到的文本区域 https://quasar.dev/vue-components/input#textarea

我突出显示了我希望修改为不同颜色的矩形 - 我希望将其设为聊天输入文本区域。

红色矩形 - 我可以禁用底层蓝线吗？ 绿色矩形 - 我可以禁用调整大小选项吗？ 黄色矩形 - 我可以把滚动条变小吗？

理想如下

【参考方案1】：

好消息！

您实际上可以实现您提到的一切！如果这是你改变人生的梦想，你就称我为“上帝”！否则没关系。

禁用底层蓝线；

使用borderless 属性

<q-input borderless v-model="text" label="no resize arrow" type="textarea" />

禁用调整大小选项

使用autogrow 属性隐藏调整大小箭头。但是，当您可以拥有普通的text input box 时，为什么还要使用textarea？如果您想用普通的textbox 替换textarea，请删除type 属性

<q-input borderless autogrow v-model="text" label="no underlying border" type="textarea" />

如果您想借助手动 css 来隐藏调整大小图标，可以使用下面的 css。

textarea 
  resize: none; /* this will disable resize for all textarea elements.  */

缩小滚动条

使用 Quasar 的 scrollarea，它有一个非常性感的滚动条。

<q-scroll-area style="height: 200px; max-width: 300px;"> <!-- have you chat window here --> </q-scroll-area>

如果您想拥有自己的自定义滚动条设计；然后你可以按照下面的sn-p；但目前浏览器支持仅限于“chrome”。

::-webkit-scrollbar 
  width: 10px;