如何自定义Quasar Textarea组件适配聊天输入框使用场景

• 禁用组件底部默认蓝色下划线
  有两种实现方案可选：
  1. 直接给q-input组件添加borderless属性，可快速移除默认底部边框及聚焦态蓝色下划线
  2. 若需保留其他边框样式仅隐藏底部下划线，可添加自定义样式覆盖：

  .q-field__bottom {
    display: none !important;
  }
  

• 关闭组件可调整尺寸功能
  直接给q-input组件添加no-resize属性即可禁用默认的拖拽调整大小能力，也可通过样式强制覆盖：

  .q-input textarea {
    resize: none !important;
  }
  

• 缩小组件滚动条尺寸
  新增自定义滚动条样式即可修改尺寸，适配主流浏览器：

  /* 适配Webkit内核浏览器（Chrome、Edge、Safari等） */
  .q-input textarea::-webkit-scrollbar {
    width: 4px; /* 可根据需求自行调整宽度数值 */
  }
  .q-input textarea::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
  }
  .q-input textarea::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
  }
  .q-input textarea::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }
  
  /* 适配Firefox浏览器 */
  .q-input textarea {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }
  

内容的提问来源于stack exchange，提问作者william007