vue 组件封装 按钮button 支持点击按钮带阴影效果和Loading加载效果

一，子组件shadowButton

<template>
    <!-- 此组件支持自定义按钮文字和自定义按钮图片 -->
    <button :style="{backgroundColor:btnBgc,color:btnColor,width:width,height:height,fontSize:fontSize,boxShadow:boxShadow}" @click="handleClick" class="rytBtn">
        <label class="btnText"><slot></slot></label>
    </button>
</template>

<script>
     export default {
           name:'shadowButton',
           props:{
               btnBgc:{
                   type:String,
                   default:'pink'
               },
               btnColor:{
                   type:String,
                   default:'#fff'
               },
               width:{
                   type:String,
                   default:'200px'
               },
               height:{
                   type:String,
                   default:'44px'
               },
               fontSize:{
                   type:String,
                   default:'16px'
               },
               boxShadow:{
                   type:String,
                   default:'0px 2px 4px 0px rgba(255,130,0,0.7)'
               }
           },
          data(){
              return{

              }

          },
          methods:{
              handleClick(){

                  this.$emit('clickBtn')

              }
          }

     }
</script>
<style scoped>
  .rytBtn{
      position: relative;
      border-radius: 22px;
  }
  /*思路：添加伪元素，设置伪元素的透明度opacity伪0，当点击的时候利用伪类:active 改变透明度伪
  0.3，从而实现透明度的添加，效果类似mint-ui中的按钮效果*/
  .rytBtn::after { 
       background-color: #000;
       border-radius: 22px;
    content: " ";
    opacity: 0;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
  }
  .rytBtn:active::after{ 
       opacity: 0.3;
  }
 .rytBtn .btnText{
      font-size: 18px;
  }


</style>

二，父组件

<template>
  <div class="about marquee">
  
   <!--  按钮点击带阴影 -->
   <!-- <button>点击按钮带阴影效果shadowButton支持点击带loading图片</button> -->

   <shadow-button @clickBtn="clickShadowBtn" btnBgc="#FF8200">按钮<img src="../../assets/CombinedShape.png" style="width:20px;height:20px;" v-if="showLoading"></shadow-button>

  </div>
</template>

<script>
import shadowButton from '../../components/button/shadowButton.vue';  //下拉框带popup蒙层
export default {
   name:'ceButton',
   components: { //注册组件
    shadowButton,
  },
 
  data() {
    return {
     showLoading:false,
    };
  },
  methods: {
     // 按钮封装点击
     clickShadowBtn(){  //点击按钮执行逻辑
       this.showLoading = true;
       // 请求接口提交逻辑
     }
  
  },


 }
</script>


<style scoped>

</style>

三，所用知识点：slot 插槽  伪类:active  伪元素::after

四，点击效果如下