我是歌謠 放棄很難 但是堅持一定很酷

前言

本文主要對子組件的封裝做一個了解
首先我們直接看一下代碼顯示 首先是今天有一個學妹
過來問我如何封裝子組件

實作效果

首先這個組件是基于eleemnt-ui進行封裝的
我們看一眼實作效果

有了實作效果 之后
我們一起來看看他的父子組件

父組件

 <!--增強漏掃（控制臺頁面）查詢頁面封裝 -->
            <ecloudInputSearch
              class="r"
              placeholder="按服務器名稱搜索"
              ref="searchInput"
              @search="searchData"
            ></ecloudInputSearch>

子組件

<!--增強漏掃（控制臺頁面）查詢頁面封裝 -->
<template>
      <!-- -->
  <div class="ecloud-input-search">
    <!--  封裝帶有文本框的按鈕模式  -->
    <!--   placeholder 按鈕的提示文字 -->
    <!--  inputText文本框系結的值  -->
    <!--  獲取焦點進行一個置空操作  -->
    <!--    -->
    <el-input
      :class="['input-content', inputText != '' ? 'input-hover' : '']"
      :placeholder="inputPlaceHolder"
      v-model="inputText"
      @focus="clearPlaceHolder()"
      @blur="setPlaceHolder()"
      @input="changeContent()"
      @keyup.enter.native="searchEnterFun"
    >

      <span slot="suffix" @click="clearText">
        <i class="eicon e-error icon-search"></i>
      </span>
    </el-input>
    <el-button
      class="search-content"
      :class="searchBtn ? 'btnOn' : 'btnOff'"
      icon="eicon e-search"
      @click="searchData"
    ></el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      searchBtn: false, //判斷搜索框是否有輸入的狀態

      /*按鈕框的提示文字*/
      inputPlaceHolder: ''
    }
  },
  props: {
    placeholder: {
      type: String,
      default: '請輸入內容'
    }
  },
  watch: {
    inputText: function(newValue, oldValue) {
      this.changeContent()
    }
  },
  created() {
    this.inputPlaceHolder = this.placeholder
  },
  methods: {
    clearText() {
      this.inputText = ''
      this.searchData()
    },
    /*獲取焦點就將placehoder置空*/
    clearPlaceHolder() {
      this.inputPlaceHolder = ''
    },
    setPlaceHolder() {
      this.inputPlaceHolder = this.placeholder
    },
    //監聽搜索框的輸入狀態來改變搜索按鈕
    changeContent() {
      if (this.inputText != '') {
        this.searchBtn = true
      } else {
        this.searchBtn = false
      }
    },
    searchData() {
      this.$emit('search', this.inputText)

    },
    searchEnterFun(e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode == 13) {
        this.searchData()
      }
    }
  }
}
</script>

<style lang="scss">
.ecloud-input-search {
  .input-content {
    /*寬度200px*/
    width: 200px;
    /*設定radio樣式*/
    .el-input__inner {
      border-radius: 2px 0 0 2px;
      padding: 0 10px;
    }

    .icon-search {
      display: none;
    }
  }
  .input-hover {
    &:hover {
      .icon-search {
        font-size: 15px;
        color: #cccccc;
        display: inline-block;
      }
    }
    .el-input__inner:focus + .el-input__suffix {
      .icon-search {
        display: inline-block;
      }
    }
  }
  .search-content {
    font-size: 14px;
    width: 36px;
    height: 32px;
    border-left: 0;
    padding: 0;
    border-radius: 0 2px 2px 0;
    background: #f5f5f5;
    color: #999999;
    border-color: #d9d9d9;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    vertical-align: top;
  }
  .btnOn {
    background: #337dff;
    color: #ffffff;
    border-color: #337dff;
  }
  .btnOff {
    background: #f5f5f5;
    color: #999999;
    border-color: #d9d9d9;
  }
  .el-input__suffix {
    top: 8px;
    right: 9px;
    cursor: pointer;
  }
  .icon-search {
    font-size: 15px;
    color: #cccccc;
  }
}
</style>

解釋

首先父子組件怎么引入就不多說了
直接說主要知識點 從上向下理解

第一行

class修改系結一個類 一個三元運算子

:class="['input-content', inputText != '' ? 'input-hover' : '']"

系結的值為不為空的時候系結hover樣式

第二行

inputPlaceHolder是父親組件的值 直接父子組件傳值
值為空的時候

顯示名稱

第三行

獲取焦點的時候把inputPlaceHolder置空

第四行

失去焦點的時候將inputPlaceHolder顯示

第五行

輸入的時候父子觸發顯示X號按鈕

第六行

按回車的時候進行父子傳值
父組件拿到值之后進行搜索

我是歌謠 放棄很容易 但是堅持一定很酷