一，子组件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
四，点击效果如下
