可复用的显示隐藏按钮组件

先上效果图

子组件代码1

<template  >
    <transition name="slide-fade">
      <div v-show="show"> //是否显示隐藏
        <slot></slot>  //使用插槽
      </div>
    </transition>
</template>
<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    showss() {
      let than = this;
      than.show = !than.show;
    }
  }
};
</script>
<style scoped>
.slide-fade-enter-active {
  transition: all 1s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>

子组件代码2

<template  >
  <div>
      <f-button v-if="show" icon="unfold" @click="handleClick(false)" :icon-size="14">更多</f-button>
      <f-button v-else icon="packup" @click="handleClick(true)" :icon-size="14">收起</f-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    handleClick(state) {
        this.show = state;
        this.$emit("click")
      }
  }
};
</script>

父组件

//html代码
			<t-button @click="control(selectRow)">1</t-button>
            <t-button  @click="track(selectRow)">2</t-button>
            <t-button  @click="customcode(selectRow)">3</t-button>
            <t-button @click="remark(selectRow)">4</t-button>
            <t-button  @click="handleOne(selectRow)">5</t-button>
         <button-show ref="btshow">
            <t-button  @click="handleTwo(selectRow)">6</t-button>
            <t-button  @click="handleThree(selectRow)">7</t-button>
            <t-button  @click="handleFour(selectRow)">8</t-button>
            <t-button @click="chongdian(selectRow)" type="warning" class="one">9</t-button>
            <t-button @click="chongdian(selectRow)" type="warning class="one oneBtn">10</t-button>
            <t-button  @click="fangdian(selectRow)" type="warning" class="two" >11</t-button>
            <t-button @click="fangdian(selectRow)" type="warning" class="two oneBtn">12</t-button>
            <t-button @click="Locate(selectRow)" type="warning" >13</t-button> 
          </button-show>
          <div style="text-align:center"><gen-duo @click="genduo()"></gen-duo></div>

//js代码
	<script>
		import ButtonShow from "@/components/ButtonShow/index";
		import GenDuo from "@/components/ButtonShow/Genduo";
		export default {
		components: {ButtonShow,GenDuo},
		 data() {
   			 return {}
   			 },
		  methods: {
   		   genduo(){
   	  	   this.$refs.btshow.showss()
   		 },
	 }
}
	</script>