vue中有關el-input 的有關樣式

• 2019 年 10 月 8 日
• 筆記

1.png

2.png

• 使用/deep/ 是因為使用了 less 作為預處理器。

<el-input v-model="inTxt" placeholder="請輸入您要搜索的資訊" @keyup.enter.native="search" @focus= 'focus($event)'></el-input>    /// 滑鼠獲得焦點之後，全選已經輸入的字元串。   focus(event) {                  event.currentTarget.select();              },            /deep/ input::-webkit-input-placeholder {          color: @txtColor;          font-size: 20px;      }        /deep/ input::-moz-input-placeholder {          color: @txtColor;          font-size: 20px;      }        /deep/ input::-ms-input-placeholder {          color: @txtColor;          font-size: 20px;      }        ///  當el-input  獲得焦點的時候，讓提示語不顯示的方法，就是讓他透明。            /deep/ input:focus::-webkit-input-placeholder {          color: transparent;          /* transparent是全透明黑色(black)的速記法，即一個類似rgba(0,0,0,0)這樣的值 */      }          /* Mozilla Firefox 4 to 18 */        /deep/ input:focus:-moz-placeholder {          color: transparent;      }          /* Mozilla Firefox 19+ */        /deep/ input:focus::-moz-placeholder {          color: transparent;      }          /* Internet Explorer 10+ */        /deep/ input:focus:-ms-input-placeholder {          color: transparent;      }