V-textarea自定义高度和宽度会改变吗?

时间:2019-06-04 03:16:14

标签: vuejs2 vuetify.js

是否可以自定义文本区域的高度和宽度? 它确实很大,我需要它的大小不超过按钮的大小,并且是否可以在占位符旁边添加图标?

我尝试将行更改为1,但这对我没有多大帮助。

这是我的代码笔:https://codepen.io/malahovks/pen/gLxLWX?editors=1010

        [RestRoute(HttpMethod = HttpMethod.GET, PathInfo = "/")]
        public IHttpContext Root(IHttpContext context)
        {
            var filepath = Path.Combine(context.Server.PublicFolder.FolderPath, 
                                        context.Server.PublicFolder.IndexFileName); ;

            var lastModified = File.GetLastWriteTimeUtc(filepath).ToString("R");
            context.Response.AddHeader("Last-Modified", lastModified);

            if (context.Request.Headers.AllKeys.Contains("If-Modified-Since"))
            {
                if (context.Request.Headers["If-Modified-Since"].Equals(lastModified))
                {
                    context.Response.SendResponse(HttpStatusCode.NotModified);
                    return context;
                }
            }

            context.Response.ContentType = ContentType.DEFAULT.FromExtension(filepath);
            context.Response.SendResponse(new FileStream(filepath, FileMode.Open));

            return context;
        }

谢谢大家。

1 个答案:

答案 0 :(得分:2)

您可以使用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>