vue文本输入框（textarea）

深藏阁楼爱情的钟 2022-02-28 04:06 1318阅读 0赞

源码：

<template>
      <div>
        <headers title="新建记录"></headers>
        <div class="text-area">
          <textarea placeholder="请输入记录评语...">
    
          </textarea>
        </div>
      </div>
    </template>
    
    <script>
      import headers from '../components/headers.vue'
      import MuContainer from "muse-ui/src/Grid/Container";
      export default{
        name: "assignPointsDirectly",
        data(){
          return {}
        },
        components: {
          MuContainer,
          headers
        }
      }
    </script>
    
    <style scoped>
      /*文本域*/
      .text-area{
        width: 100%;
        border-top:1px solid gainsboro;
        border-bottom:1px solid gainsboro;
    
      }
      .text-area textarea {
        width: 100%;
        margin: 0.75rem  0;
        border: none;
        outline: none;
        padding-left: 1.125rem;
        height: 6.5rem ;
      }
    
      .text-area textarea::-webkit-input-placeholder {
        color: #9E9E9E;
    
      }
    
    </style>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pFRkZfbHV5aWR1YW4_size_16_color_FFFFFF_t_70]: /images/20220228/9c6c6b4beeff4978adc822a70e197df8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1318人围观）

还没有评论，来说两句吧...

相关阅读

相关 textarea 输入框限制字数（兼容ie）

*问题**：在input标签中，只需要设置maxlength=”\*\*\*”即可，但是在textarea标签中，IE9及IE9以下浏览器是不支持的，IE10、IE11则...

r囧r小猫/ 2024年04月18日 07:10/ 0 赞/ 79 阅读

相关文本输入框＜input＞

(1)创建文本输入框文本输入框是获取用户输入的一种方便的方法。 `<input>` 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种

小咪咪/ 2024年03月29日 15:46/ 0 赞/ 116 阅读

相关 canvas文本输入框，仿ps文字工具，模拟输入框输入文本

前言这两天在写一个绘画板工具，就纯html+js实现的绘画板，其中有一个文本输入功能，这个不是在画板上按住鼠标绘制文字，而是单击画板，然后单击的位置出现一个输入框（没有

小鱼儿/ 2024年03月17日 23:29/ 0 赞/ 117 阅读

相关微信小程序文本输入＜textarea/＞详解

> 也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。在微信小程序开发中，input 用来实现文本输入，是单行的，textarea是多行的输入实现 1 基

左手的ㄟ右手/ 2023年10月07日 17:39/ 0 赞/ 32 阅读

相关 uniapp textarea 输入框被遮挡问题

问题图片： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

布满荆棘的人生/ 2023年01月11日 15:28/ 0 赞/ 376 阅读

相关文本输入框和密码框案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

比眉伴天荒/ 2022年12月24日 01:59/ 0 赞/ 183 阅读

相关 38.textArea多行输入框 uni-app

查看官方文档[https://uniapp.dcloud.io/component/textarea][https_uniapp.dcloud.io_component_tex

柔情只为你懂/ 2022年12月11日 13:58/ 0 赞/ 337 阅读

相关修改input、textarea输入框placeholder样式

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

青旅半醒/ 2022年04月13日 14:54/ 0 赞/ 727 阅读

相关 vue文本输入框（textarea）

源码： <template> <div> <headers title="新建记录"></headers> <div cl

深藏阁楼爱情的钟/ 2022年02月28日 04:06/ 0 赞/ 1319 阅读

相关 Vue中input文本输入框自动获得鼠标焦点

this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus() }) saveT

Love The Way You Lie/ 2021年07月25日 18:19/ 0 赞/ 951 阅读