關於給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掉此方案。



講真，肝不動了，趕腳江郎才盡了~~~