u

code/base-project/base-vue/src/App.vue

@@ -1,143 +1,144 @@
-<script setup>
-function createRipple(event) {
-  const button = event.currentTarget
-  const circle = document.createElement('span')
-  const diameter = Math.max(button.clientWidth, button.clientHeight)
-  const radius = diameter / 2
+<script>
+export default {
+  directives: {
+    flash: {
+      beforeMount(el) {
+        el.style.position = 'relative'
+        el.style.overflow = 'hidden'
 
-  circle.style.width = circle.style.height = `${diameter}px`
-  circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`
-  circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`
-  circle.classList.add('ripple')
+        el.addEventListener('click', (e) => {
+          if (el.disabled)
+            return
 
-  // 如果已有 ripple，先清除
-  const ripple = button.querySelector('.ripple')
-  if (ripple)
-    ripple.remove()
+          const rect = el.getBoundingClientRect()
+          const size = Math.max(rect.width, rect.height) * 2
+          const flash = document.createElement('span')
 
-  button.appendChild(circle)
+          flash.style.position = 'absolute'
+          flash.style.width = flash.style.height = `${size}px`
+          flash.style.left = `${(rect.width - size) / 2}px`
+          flash.style.top = `${(rect.height - size) / 2}px`
+          flash.style.background = 'rgba(255,255,255,0.2)'
+          flash.style.borderRadius = '50%'
+          flash.style.pointerEvents = 'none'
+          flash.style.transform = 'scale(0)'
+          flash.style.opacity = '0.4'
+          flash.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out'
+
+          el.appendChild(flash)
+
+          requestAnimationFrame(() => {
+            flash.style.transform = 'scale(1)'
+            flash.style.opacity = '0'
+          })
+
+          flash.addEventListener('transitionend', () => flash.remove())
+        })
+      },
+    },
+  },
 }
 </script>
 
 <template>
   <div class="button-demo">
-    <button class="btn btn-primary" @click="createRipple($event)">
-      <span>主按钮</span>
+    <h3>现代后台按钮 - 瞬态扩散 + 内凹反馈</h3>
+    <button v-flash class="btn btn-primary">
+      主按钮
     </button>
-    <button class="btn btn-outline" @click="createRipple($event)">
-      <span>次按钮</span>
+    <button v-flash class="btn btn-secondary">
+      次按钮
     </button>
-    <button class="btn btn-warning" @click="createRipple($event)">
-      <span>警告按钮</span>
+    <button v-flash class="btn btn-danger">
+      危险按钮
     </button>
-    <button class="btn btn-danger" @click="createRipple($event)">
-      <span>危险按钮</span>
+    <button v-flash class="btn btn-link">
+      链接按钮
     </button>
     <button class="btn btn-primary" disabled>
-      <span>禁用按钮</span>
+      禁用按钮
     </button>
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .button-demo {
   display: flex;
-  gap: 12px;
-  padding: 20px;
+  flex-direction: column;
+  gap: 14px;
+  padding: 24px;
+  background: #f0f2f5;
 }
 
-/* 基础样式 */
+/* 基础按钮 */
 .btn {
   position: relative;
-  overflow: hidden;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 6px 16px;
+  padding: 10px 22px;
   font-size: 14px;
   font-weight: 500;
-  border-radius: 4px;
+  border-radius: 6px;
+  border: none;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-  border: 1px solid transparent;
+  outline: none;
   user-select: none;
-
-  span {
-    position: relative;
-    z-index: 1; // 文字在上层
-  }
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
 
   &:disabled {
-    opacity: 0.6;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 
-  /* 水波纹效果 */
-  .ripple {
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    transform-origin: center; // 保证扩散中心
-    animation: ripple 600ms linear;
-    background-color: rgba(255, 255, 255, 0.5);
-    pointer-events: none;
-    z-index: 0; // 在文字下
+  &:focus-visible {
+    box-shadow: 0 0 0 3px rgba(0, 100, 250, 0.15);
+  }
+
+  &:hover:not(:disabled) {
+    filter: brightness(1.08);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active:not(:disabled) {
+    filter: brightness(0.95);
+    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
   }
 }
 
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
-/* ===== 按钮类型 ===== */
+/* 主按钮 */
 .btn-primary {
-  background-color: #0064fa;
+  background: linear-gradient(180deg, #0072ff, #0053d6);
   color: #fff;
-  border-color: #0064fa;
-
-  &:hover:not(:disabled) {
-    background-color: #0053d6;
-  }
-
-  &:active:not(:disabled) {
-    background-color: #0041ad;
-  }
 }
 
-.btn-outline {
-  background-color: #fff;
+/* 次按钮 */
+.btn-secondary {
+  background: #fff;
+  border: 1px solid #d9d9d9;
   color: #0064fa;
-  border-color: #0064fa;
+}
+
+/* 危险按钮 */
+.btn-danger {
+  background: linear-gradient(180deg, #ef4444, #b91c1c);
+  color: #fff;
+}
+
+/* 链接按钮 */
+.btn-link {
+  background: transparent;
+  color: #0064fa;
+  padding: 8px 16px;
 
   &:hover:not(:disabled) {
-    background-color: #f3f7ff;
+    text-decoration: underline;
+    background: rgba(0, 100, 250, 0.05);
   }
 
   &:active:not(:disabled) {
-    background-color: #e1ecff;
-  }
-}
-
-.btn-warning {
-  background-color: #f59e0b;
-  border-color: #f59e0b;
-  color: #fff;
-
-  &:hover:not(:disabled) {
-    background-color: #d97706;
-  }
-}
-
-.btn-danger {
-  background-color: #dc2626;
-  border-color: #dc2626;
-  color: #fff;
-
-  &:hover:not(:disabled) {
-    background-color: #b91c1c;
+    background: rgba(0, 100, 250, 0.1);
   }
 }
 </style>

code/base-project/base-vue/test.html

@@ -0,0 +1,103 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Material ui 水波纹效果</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" href="#" />
+    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
+  </head>
+  <style>
+    button {
+      display: block; /* button 默认是inline-block 无法用margin给它居中 */
+      margin: 50px auto;
+      height: 60px;
+      width: 150px;
+      color: #fff;
+      font-size: 16px;
+      background: #e95546;
+      outline: none;
+      border: 0;
+      cursor: pointer; /* 为了增加用户体验 */
+
+      position: relative; /* 为了保持和ripple的位置关系 */
+      overflow: hidden; /* 为了遮盖超出的ripple */
+    }
+
+    .ripple {
+      position: absolute; /* 为了保持和button的位置关系 */
+      border-radius: 50% 50%; /* 水波纹圆形 */
+      background: rgba(255, 255, 255, 0.4); /* 水波纹颜色 */
+
+      /* 下面与动画效果相关 是0%时候的状态 */
+      /* 默认的 transform-origin 是 center 即中心点 */
+      transform: scale(0);
+      -webkit-transform: scale(0);
+      opacity: 1;
+    }
+
+    .rippleEffect {
+      /* 执行时长0.6s、效果为渐变(linear)、名称为rippleDrop的动画 */
+      -webkit-animation: rippleDrop 0.6s linear;
+      animation: rippleDrop 0.6s linear;
+    }
+
+    @keyframes rippleDrop {
+      /* 下面是动画100%时候的状态 */
+      100% {
+        transform: scale(2);
+        -webkit-transform: scale(2);
+        opacity: 0;
+      }
+    }
+
+    @-webkit-keyframes rippleDrop {
+      100% {
+        transform: scale(2);
+        -webkit-transform: scale(2);
+        opacity: 0;
+      }
+    }
+  </style>
+  <body>
+    <div>
+      <button>这是一个按钮</button>
+    </div>
+  </body>
+
+  <script>
+    $('button').click(function (e) {
+      $('.ripple').remove() // 每次先把之前添加的水波纹div删除
+
+      let button_left = $(this).offset().left // button距离页面左边的距离
+      let button_top = $(this).offset().top // button距离页面上边的距离
+      let button_width = $(this).width() // button的宽度
+      let button_height = $(this).height() // button的高度
+
+      // 水波纹div为一个圆形，使得它的半径等于button的最长边，故在这里计算最长边是多少
+      let ripple_width = 0
+      ripple_width = button_width > button_height ? button_width : button_height
+
+      // e.pageX是click事件的鼠标触发点距离页面左边的距离
+      // e.pageY是click事件的鼠标触发点距离页面上边的距离
+      // 这里的算法是，算出鼠标点击点的坐标为 (e.pageX - button_left, e.pageY - button_top)
+      // 但是由于`transform-origin`默认是center，所以这里再减去半径才是div应该的位置
+      let ripple_x = e.pageX - button_left - ripple_width / 2
+      let ripple_y = e.pageY - button_top - ripple_width / 2
+
+      // 往button里面塞水波纹div
+      $(this).prepend("<div class='ripple'></div>")
+
+      // 给水波纹div应用样式和动画
+      $('.ripple')
+        .css({
+          width: ripple_width + 'px',
+          height: ripple_width + 'px',
+          top: ripple_y + 'px',
+          left: ripple_x + 'px',
+        })
+        .addClass('rippleEffect')
+    })
+  </script>
+</html>