关于给textarea里面的内容添加下划线不得不说的那些事(在uniapp中使用)

事情原由：(uni-app中 ->  会编译成小程序的那种哦)

新需求是：做一个记事本的功能，记录用户输入的文字，并且文字有下划线。

这里肯定要用到 textarea 标签对叭。

然后开始思考：下划线怎么添加？动态添加？....思索一阵后，得出的结论是不可行的，但是总要尝试的是叭(可是自己内心是拒绝的，
因为感觉是无用功嘛)，
没办法，
然后就疯狂google,
结果发现，都没有好的idea，真的香菇了~~

竟然都香菇了，那为啥还要写这篇内容呢，主要是为了告诉大家，下次遇到这个需求，能避则避吧，实在避不了。只能换需求实现了。

需求效果展示(具体见代码描述)：

html代码：(代码布局很简单，不涉及逻辑)
  <template>
     .......

     //这里是点击某个按钮，弹出记事本区域哦，然后在这个区域里面，点击添加按钮，就新增一个记事本区域内容的那种

    <view>点击记事本按钮，弹出记事本区域</view>

    //这里是弹出记事本区域的地方哦

    <view class="notepadlist-container">
      <scroll-view scroll-y="true">
        <view class="notepadlist-detail  v-for="(item,index) in notepadList" :key="index" >
          <view>{{item.title}}</view>
          <view class="textarea-content">
            <textarea :value="item.content" maxlength="-1" fixed  
            :data-index="index" @input="getTextareaContent" class="text-area"></teatarea>
          </view>
          ...
        </view>
      </scroll-view>

      <view @click="add">添加记事本</view>

    </view>

  </templte>
  <script>
    export default{
       data(){
         return{
            notepadList:[]
         }
       },
       methods:{
         add(){
           this.push({
              title:'',
              content:''
           })
         }
       }
    }

  </script>

尝试解决的方案：

方案一：
     使用css属性： text-decoration:underline;
     直接设置在 textarea 标签上面
     测试结果： pc浏览器上面可以正常显示，文字下划线可以添加上。但是小程序上面就不能正常显示。 pass掉此方案。

方案二：
     使用图片的方式，图片的内容就是一根线，要注意高度哦。
     然后给 textarea 设置为背景图片。(插一嘴，在小程序中，背景图片只支持两种方式，base64格式 或者 网络图片)
     
     感觉还有个硬性要求：要固定字数。(但是，我这个需求是没有限制用户输入字数的嘛,固定字数的话，要把maxlength=-1去掉重新设置哦)
     具体写法：
        .text-area{
           background:url('下划线的那种图片路径') repeat;
           border:none;
           outline:none;
           overflow:hidden;
           line-height:40rpx;//这里要注意 行高 要和 背景图片高度一致哦
           resize:none;
        }
     目前结果，机型iPhone6下面(即开发者工具测试效果) 界面确实能出现看似完美的文字下划线。但是因为没有限制用户输入字数，多输入几行文字
     就会出现 字和下划线重叠了，其他机型效果也不好。  只能pass掉此方案

方案三：(https://www.it1352.com/870070.html)
    这里必须要把这位老哥的网址贡献出来，个人感觉，不管是pc还是小程序，视觉效果还不错的。但是由于追求理想状态，还是得pass掉此方案。
    如果pc需要给textarea标签加下划线，强烈安利这种方式。
    <textarea class="text-area"></textarea>
    .text-area{
       background-image:linear-gradient(left,white 10px,transparent 10px),
                        linear-gradient(right,white 10px,transparent 10px),
                        linear-gradient(white 30px,#ccc 30px,#ccc 31px,shite 31px);
       //这里老哥写了兼容,嘿嘿，我就偷个懒，就不写了,-moz-linear-gradient,-ms-linear-gradient,-o-linear-gradient
       background-image:-webkit-linear-gradient.......
       background-size:100% 100%,100% 100%,100% 31rpx;
       border-radius:10px;
       box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
       line-height:31px;
       padding:10px;
    } 

     
方案四：
    说是写个text标签，用来装输入内容，点击text，就显示textarea，textarea失去焦点，就隐藏textarea标签。
    这个方法的缺点就是，有些手机需要点击两次才能唤起 输入键盘，这样子体验效果更不好了,所以 pass 掉此方案。但是还是要实际操作一次，
    ~~
    
    将这里的内容替换一下：
    <view class="textarea-content">
       <text @click="showTextarea(index)" v-if="!item.showTextarea">{{item.content}}</text>
       <textarea value="item.content" v-if="item.showTextarea" 
       :data-index="index" @focus="focusTextarea" @blur="blurTextarea" @input="getTextareaContent"
       maxlength="-1" fixed></textarea>
      
    </view>
    //js里面
    focusTextarea(e){
       let index = e.currentTarget.dataset.index;
       this.notepadList[index].showTextarea = true;
    }
    blurTextarea(e){
       let index = e.currentTarget.dataset.index;
       this.notepadList[index].showTextarea = false;
    }
    showTextarea(index){
       this.notepadList[index].showTextarea = !this.notepadList[index].showTextarea;
    }
    add(){
       this.notepadList.push({
          title:'',
          content:'',
          showTextarea:true
       })
    }

方案五：
    这里采用动态设置 textarea 的高度以及 行高, 下划线采用 view 循环行数来设置 尝试一波，结果发现体验极不好，pass掉此方案
    上面代码替换
    <view class="textarea-content">
       //这个view 表示设置的下划线,采用定位的方式哦
       <view class="border-line" v-for="items in item.lineCount" 
       :style="{'top':getTop(items,item.lineHeight)+'rpx'}"></view>
       <textarea :value="item.content" :data-index="index"
       @linechange="getLineChange" @input="getTextarea" maxlength="-1"
       :style="{'height':getHeight(item.lineHeight,item.lineCount)+'rpx',
       'line-height':item.lineHeight+'rpx'}"></textarea>
    </view>
    //js
    add(){
       this.notepadList.push({
          title:'',
          content:'',
          lineCount:1,
          lineHeight:40 //这里默认一个行高
       })
    }
    getLineChange(e){
       let lineCount = e.detail.lineCount;
       let index = e.currentTarget.dataset.index;
       this.notepadList[index].lineCount = lineCount;
       this.notepadList[index].lineHeight = e.detail.heightRpx / e.detail.lineCount;
    },
    getHeight(lineHeight,lineCount){
       return (lineCount+1)*lineHeight
    } //好吧，这里的方法是一样的，可以使用其中一个即可，哈哈哈哈哈，懒得换了，就多写了一个
    getTop(lineCount,lineHeight){
       return (lineCount+1)*lineHeight
    }


方案六：
    不动态设置 textarea 的高多，直接使用属性里面的 auto-height
    上面代码替换：
    <view class="textarea-content">
       <textarea :value="item.content" :data-index="index" maxlength="-1"
       auto-height="true" @input="getTextareaContent" ></textarea>
    </view>

     为什么会pass掉这个方案呢？是因为 在某些机型下，点击添加按钮，textarea 的高度会先变大后变为自己设定的高度，视觉效果不好，以及
     有些机型，在textarea里面设置placeholder，这个内容会根据屏幕滚动而移动，体验也不好，所以 pass掉此方案。



讲真，肝不动了，赶脚江郎才尽了~~~