V-textarea пользовательские изменения высоты и ширины?

Question

Есть ли способ настроить высоту и ширину текстовой области?Она действительно огромная, и мне нужно, чтобы она не превышала размер кнопки, а также есть ли способ добавить значок рядом с заполнителем?

Я пытался изменить строки на 1, но это меня мало

Вот мой кодовый блок: https://codepen.io/anon/pen/MdxprL

    <v-flex>
     <v-btn>
     Hello!!
    </v-btn>

     <v-textarea
   placeholder="can it be the size of the button above somehow? Also how can i add an icon after the placeholder end?"
   rows="1">
     </v-textarea>
    </v-flex> 

Спасибо всем заранее.

Answer 1

Вы можете использовать style для установки ширины (или оболочки div и т. Д. С определенной шириной). Вы также можете добавить значок к v-textarea и усложнить ввод данных пользователем, чтобы сделать его отображаются как часть текста placeholder. Нельзя добавить значки в текст placeholder из-за разных шрифтов.

[CodePen Mirror]

Примерно так должно работать:

new Vue({
  el:'#app',
  data:{
    text: ''
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet"/>

<div id="app">
  <v-app id="inspire"> 
    <v-flex>
      <v-btn>
        Hello!!
      </v-btn>
      <v-textarea
       v-model="text"
       style="width:300px;"
       height="100"
       :append-icon="text == '' ? 'person' : ''"
       class="ml-5"
       placeholder="can it be the size of the button above somehow? Also how can i add an icon after the placeholder end?"
      ></v-textarea>
    </v-flex>
  </v-app>
</div>