vvcomponent/class/MD3Button.js

VV组件

class MD3Button extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });

        // Styles for MD3 Button with ripple
        const style = document.createElement('style');
        style.textContent = `
            :host {
                display: inline-block;
                font-family: 'Roboto', Arial, sans-serif;
            }
            button {
                all: unset;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0 24px;
                height: 40px;
                min-width: 64px;
                border-radius: var(--md3-btn-radius, 1000px);
                background: var(--md3-btn-bg, #6750a4);
                color: var(--md3-btn-color, #fff);
                font-size: 1rem;
                font-weight: 500;
                letter-spacing: 0.1em;
                cursor: pointer;
                transition: background 0.2s, box-shadow 0.2s;
                box-shadow: 0 1px 2px rgba(0,0,0,0.08);
                outline: none;
            }
            button:active {
                background: var(--md3-btn-bg-active, #57408c);
            }
            button:focus-visible {
                box-shadow: 0 0 0 3px var(--md3-btn-focus-visible-color ,#cbbcff);
            }
            .ripple {
                position: absolute;
                border-radius: 50%;
                transform: scale(0);
                animation: ripple 0.6s linear;
                background: rgba(255,255,255,0.4);
                pointer-events: none;
            }
            @keyframes ripple {
                to {
                    transform: scale(2.5);
                    opacity: 0;
                }
            }
            ::slotted(svg) {
                margin-right: 8px;
                width: 20px;
                height: 20px;
                fill: currentColor;
            }
        `;

        // Button element
        const button = document.createElement('button');
        button.setAttribute('part', 'button');
        button.appendChild(document.createElement('slot'));
        const rippleEffect = (e) => {
            console.log(e)
            const rect = button.getBoundingClientRect();
            const ripple = document.createElement('span');
            ripple.className = 'ripple';
            const size = Math.max(rect.width, rect.height);
            console.log(size);
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = (e.clientX - size / 2) + 'px';
            ripple.style.top = (e.clientY - size / 2) + 'px';
            button.appendChild(ripple);
            ripple.addEventListener('animationend', () => {
                ripple.remove();
            });
        }
        // Ripple effect
        button.addEventListener('mousedown', rippleEffect);
        button.addEventListener('touchstart', rippleEffect);

        shadow.appendChild(style);
        shadow.appendChild(button);
    }
}

customElements.define('md3-button', MD3Button);