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

Question

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

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

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

理想如下

标签： quasar-frameworkquasar

Answer 1

好消息！

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

1. 禁用底层蓝线；

使用该borderless物业

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

2. 禁用调整大小选项

使用该autogrow属性隐藏调整大小箭头。textarea但是，当您可以拥有一个普通的 时，为什么还要使用 atext input box呢？如果您想textarea用普通替换textbox，请删除该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.  */
}

3. 使滚动条变小

scrollarea使用具有非常性感的滚动条的 Quasar's 。

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

如果您想拥有自己的自定义滚动条设计；然后您可以按照以下代码段进行操作；但到目前为止，浏览器支持仅限于“chrome”。

::-webkit-scrollbar {
  width: 10px;
}