vue-custom component

1. Custom components: Component

Components are one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulating reusable code. At a high level, a component is a custom element to which the Vue.js compiler adds special functionality. In some cases, components can also be in the form of native HTML elements, extended with the is attribute.

2. Basic usage

2.1 Create a custom component (myTransition folding)

<template>
<div id="myTransition">
  <div class="ss">
  <slot name="header"></slot>
  </div>
  <el-button class="but" v-if="!show" @click="show = !show" style="width: 100%;  height: 10px;">
    <i class="el-icon-arrow-down" ></i>
  </el-button>
  <transition name="fade">
  <div v-if="show" class="up" style="width: 100%;">
  <div class="up2" style="width: 100%;">
  <slot name="footer"></slot>
  </div>
  <el-button class="but" v-if="show" @click="show = !show" style="width: 100%;">
    <i class="el-icon-arrow-up" ></i>
  </el-button>
  </div>
  </transition>
</div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.el-icon-d-caret {
  font-size: 3px;
}
.up {
    border: 0px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
    background-color: #fff;
}
.up2 {
    padding-left: 10px;
}
.but {
    border: 0;
    height: 10px;
}
.ss {
    background-color: #fff;
    padding-top: 10px;
    padding-left: 10px;
}
</style>

2.2 Reference custom components

...
<myTransition>
     <a slot="header">开始日期：</a>
      <el-date-picker @keyup.enter.native="handleFilter" style="width: 140px;" slot="header" class="filter-item" placeholder="请选择日期" v-model="listQuery.xdstart" suffix-icon="el-icon-date" value-format="yyyyMMdd">
      </el-date-picker><a slot="header">&nbsp;-&nbsp;</a>
      <el-date-picker @keyup.enter.native="handleFilter" style="width: 140px;" slot="header" class="filter-item" placeholder="请选择日期" v-model="listQuery.xdend" suffix-icon="el-icon-date" value-format="yyyyMMdd">
      </el-date-picker><a slot="header">&nbsp;</a>
      ...
      <el-button class="filter-item" type="primary" icon="el-icon-search" slot="header" @click="handleFilter">搜索</el-button><br slot="header">
      ...
      <el-select v-model="listQuery.kcjgbz" prop="kcjgbz" clearable placeholder="盘点结果" @keyup.enter.native="handleFilter" style="width: 120px;" slot="footer" class="filter-item">
        <el-option v-for="item in kcjgbz_options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
      </el-select><a slot="footer">&nbsp;</a>
       <el-input @keyup.enter.native="handleFilter" style="width: 120px;" slot="footer" class="filter-item" placeholder="经销商代码" v-model="listQuery.xskhdm">
      </el-input><br slot="footer">
      <a slot="footer">结束日期：</a>
      <el-date-picker @keyup.enter.native="handleFilter" style="width: 140px;" slot="footer" class="filter-item" placeholder="请选择日期" v-model="listQuery.jsstart" suffix-icon="el-icon-date" value-format="yyyyMMdd">
      </el-date-picker><a slot="footer">&nbsp;-&nbsp;</a>
      </el-input><a slot="footer">&nbsp;</a>
       <el-input @keyup.enter.native="handleFilter" style="width: 120px;" slot="footer" class="filter-item" placeholder="仓库名称" v-model="listQuery.kcckmc">
      </el-input>
     </myTransition>
     ...
     <script> // 引入声明
     import myTransition from 'components/MyTransition/index.vue'
      export default {
      components: { myTransition }, 
       ...

Note:

slot slot