技術標籤：css3css3

效果展示

<template>
    <div class="zs-btn base-btn ripple" v-ripple @click="$emit('click')">
        <i v-if="icon" :class="icon" class="base-icon"></i>
        <span>{{ title }}</span>
    </div>
 

</template>

<script>
export default {
    data() {
        return {

        };
    },
    props: {
        title:{
            type:String,
            default:'標題'
        },
        icon:{
            type:String,
            default:''
        }
    },
    computed: {

    },
    created
 
() {

    },
    mounted() {

    },
    watch: {

    },
    directives:{
        ripple:{
            inserted(el){
                el.addEventListener('click',(e)=>{
                    let target = e.currentTarget
                    const { left, top } = target.getBoundingClientRect();
                    target.
 
style.setProperty('--x',(e.clientX - left)+'px');
                    target.style.setProperty('--y',(e.clientY - top)+'px');
                })
            }
        }
    },
    methods: {
    },
    components: {

    },
};
</script>

<style lang="scss" scoped>
    .base-btn{
        @include flex-row;
        height: 32px;
        background-color: #007CC8;
        border-radius: 6px;
        padding: 0 10px;
        color: white;
        cursor: pointer;
        box-shadow: 0px 2px 4px 0px rgba(73, 114, 197, 0.15);
        .base-icon{
            margin-right: 5px;
        }
    }
    // 按鈕波紋
.ripple {
    position: relative;
    overflow: hidden;  /*隱藏溢位的徑向漸變背景 */
}
.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: var(--x,0); 
    top: var(--y,0);
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}

.ripple:active:after {  /*設定初始狀態 */
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}
.ripple::before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    transition:.2s;
    background:#fff;
    opacity:0;
}
.ripple:active::before{ 
    opacity:.2;
}
</style>