事情原由：(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掉此方案。



講真，肝不動了，趕腳江郎才盡了~~~哭唧唧，遂，換需求中..