<div class="textarea-content">
<textarea name="note" class="textarea" v-model="text"
placeholder="请输入您的问题..."></textarea>
<div class="textarea-visibility">{{ text }}</div>
.textarea-content {
position: relative;
width: 90vw;
min-height: 20px;
max-height: 70px;
overflow-x: hidden;
overflow-y: scroll;
.textarea {
color:#ccc;
font-weight: 400;
font-size: 12px;
outline: none;
border: none;
background: transparent;
resize: none;
position: absolute;
width: 100%;
height: 100%;
/* 设置滚动条的样式 */
.textarea::-webkit-scrollbar {
width: 2px;
/* 滚动槽 */
.textarea::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
border-radius: 10px;
/* 滚动条滑块 */
.textarea::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
.textarea::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, 0.4);
.textarea-visibility {
position: relative;
visibility: hidden;
word-break: break-all;