摘要：第八集從零開始實現輸入框組件本集定位組件是交互的一大利器他與用戶的交流最為密切所以奠定了他在組件界的重要地位也算是一種如果可以的話本集也會一起說完畢竟是一個類型的一起學完收獲會很大古人云組件不封輸入框，一到面試就發慌一簡介大家如果對這個

第八集: 從零開始實現(輸入框input,textarea組件)

本集定位:
input組件是交互的一大利器, 他與用戶的交流最為密切, 所以奠定了他在組件界的重要地位.
textarea也算是一種input, 如果可以的話, 本集也會一起說完, 畢竟是一個類型的, 一起學完收獲會很大.
古人云:"組件不封輸入框，一到面試就發慌"

一. v-model 簡介
大家如果對 v-model這個指令的原理不熟悉, 建議去學習下vue源碼或者看看相關的分析文章, 很重要的知識, 封裝組件多了就會知道這個指令真是太棒了! 這里我就簡單說一下他的規則.
1: 父級在組件上綁定了v-model時, 其實就是在往組件里面傳遞value變量.
2: 你的組件在props上定義value, 就可以取到值.
3: 每當組件里this.$emit("input",n)往外面發送事件的時候, 外面會把這個n值 賦值給value
4: 這么設計的原因: 你在組件里面無權改變傳入的值, 這個值你想改成什么值就要吐出去, 讓外面改.

好了說了這么多開始實戰吧!

二. 基本結構
vue-cc-ui/src/components/Input/index.js
老套路, 統一導出為了適配vue.use的使用方式

import Input from "./main/input.vue"

Input.install = function(Vue) {
  Vue.component(Input.name, Input);
};

export default Input

vue-cc-ui/src/components/Input/main/input.vue

type: 這個屬性比較重要, 因為要通過它來區分input與textarea, 還可以為input指定number模式.

命名依然是bem

v-bind="$attrs" 解釋下這個的意思, $attrs指的就是用戶傳進來的屬性, 但是不包括我們組件內部用props接收的屬性, 也不包括class style這種, 寫它是為了用戶可以傳很多input原生的屬性, 畢竟我們沒必要把所有屬性都做處理, 讓組件保有原生功能.

placeholder這種模式基本也被現代拋棄了, 針對他也可以封裝成一個具體的組件, 這個屬性想調整屬性實在是太困難了, 更別說我們現在還需要placeholder輪播,變色,點擊等等效果.

vue 在行間寫事件的時候, 事件對象會以$event的形式傳給你使用, 其實從代碼的角度來說, 是監控到你這里用了$event關鍵詞,則把對應的參數賦值為事件對象.

props: {
    value: [String, Number],
    placeholder: [String, Number],
    type: {
      type: String,
      default: "text"
    }
  },

三. 豐富事件

輸入框有很多種事件, 他們能給用戶更好的體驗性.

比如在手機端, 我們項目之前遇到的問題就是, 用戶點擊輸入框的時候, 會彈出手機鍵盤, 但是彈出的鍵盤會把輸入框頂上去, 某些型號的手機會出現, 就算輸入完畢點擊完成, 可是輸入框還是被頂上去的狀態, 后來我是借助blur 與 focus事件才兼容了這寫手機

很多輸入框也采取節流與防抖, 比如做搜索的相關模糊匹配

有些以搜索為主的頁面, 需要自動聚焦

四. 各種狀態

禁用狀態, 置灰并且把鼠標變為禁止狀態 (disabled)

只讀, 并不置灰, 但是也不能改 (readonly)

具體樣式會在后面出來詳細解釋

五. 為輸入框添加狀態, 并附上icon選項

很多輸入框左右都要放個icon充充門面, 分為左側與右側icon

右側icon允許輸入文字, icon要有相應的點擊效果

當組件為disabled狀態的時候, icon也要相應的置灰

效果圖

六. 清空按鈕
現在的輸入框基本都有這個清空按鈕, 畢竟可以節省用的時間, 也算是個好功能,
當用戶傳入clear的時候會判斷, 是否禁止修改, 框內是否有值, 是否是hover狀態

hover事件放在父級上

清除事件, 對外返回空就ok

clickClear() {
      this.$emit("input", "");
      this.$emit("change", "");
    },

判斷是否顯示

  computed: {
    showClear() {
      if (
        this.clear &&      // 開啟功能
        !this.disabled &&  // 不是禁用
        !this.readonly &&  // 不是只讀
        this.value!== "" &&  // 不是空值
        (this.hovering || this.focus) // 聚焦或者hover狀態下
      )return true;
      return false;
    }
  },

vue-cc-ui/src/style/Input.scss

// 引入老四樣
@import "./common/var.scss";
@import "./common/extend.scss";
@import "./common/mixin.scss";
@import "./config/index.scss";
// 這里畢竟是兩個月前寫的組件, 命名方面不是很好, 接下來會統一改正
@include b(input) {
    cursor: pointer;
    position: relative;
    align-items: center;
    display: inline-flex; // 直接flex會獨占一行
    background-color: white;
    transition: all .3s;
    @include b(input__inner) {
        border: none;
        flex: 1;
        width: 100%;
        font-size: 1em;
        padding: 9px 16px;
        &:focus { outline: 0; } // 這樣寫對障礙閱讀不是很友好
        @include placeholder{ // placeholder設置顏色很頭疼, 請看下面
            color: $--color-input-placeholder;
        }
    };
    @include b(input__prefix) {
        align-items: center;
        display: inline-flex;
        &:hover{transform: scale(1.1)}
        @include when(left) {
            padding-left:6px;
        }
        @include when(right) {
            padding-right:6px;
        }
    };
    @include b(input__clear){
        position: absolute;
        right: 24px;
        &:hover{ animation: size .5s infinite linear;}
    };
    @include b(input--input__disabled){
        @include commonShadow(disabled);
    };
    @at-root {
        @include b(input__normal){
            @include commonShadow($--color-black);
            &:hover {
                z-index: 6;
                transform: scale(1.2);
            }
        }
        @include b(input__error){
            @include commonShadow(danger);
        }
        @include b(input__abnormal){
            @include commonShadow($--color-black);
        }
    }
}

element 這個處理做的也不錯

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

七. textarea 文本域

基本結構

在用戶type輸入的是textarea時候開啟

把上面的基礎功能復制下來, 直接放上就可以用的

textareaCalcStyle: 來設置他的寬高, 畢竟他與input不同, 可能需要很大面積

用戶可以設置最大高度與最小高度

難點: 如果用戶選擇了自動適應高度那就麻煩了, 這個組件沒有提供原生的解決方案, 第一版我是采用獲取其高度進行運算得出來的, 但是及特殊的情況會有bug, 最后參考了element-ui的實現方式, 這里也讓我學習到了.