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

Question

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

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

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

理想如下

Answer 1

好消息！

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

1. 禁用底层蓝线；

使用borderless 属性

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

1. 禁用调整大小选项

使用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.  */
}

1. 缩小滚动条

使用 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;
}