vue3按钮波纹效果封装

引言

项目中使用到的很多组件，是对于elementplus组件库中的组件进行的二次封装，以按钮为例，需要以指令的方式添加点击的波纹的效果。

指令

在vue3+ts中，指令需要注意的写法同vue2中是有一些不同的，主要有：

1. 添加类型

import type { Directive, DirectiveBinding } from 'vue';

2. vue2.x与vue3.x指令生命周期不同：
   bind → beforeMount
   inserted → mounted
   beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
   update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
   componentUpdated → updated
   beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
   unbind -> unmounted

3. 代码演示与挂载方式

import './waves.css';
import type { Directive, DirectiveBinding } from 'vue';
const waves: Directive = {
  mounted(el: Element, binding: DirectiveBinding) {
    el.addEventListener(
      'click',
      (e: MouseEvent) => {
        const customOpts = Object.assign({}, binding.value);
        const opts = Object.assign(
          {
            ele: el, // 波纹作用元素
            type: 'hit', // hit点击位置扩散center中心点扩展
            color: 'rgba(0, 0, 0, 0.15)', // 波纹颜色
          },
          customOpts
        );
        const target = opts.ele;
        if (target) {
          target.style.position = 'relative';
          target.style.overflow = 'hidden';
          const rect = target.getBoundingClientRect();
          let ripple = target.querySelector('.waves-ripple');
          if (!ripple) {
            ripple = document.createElement('span');
            ripple.className = 'waves-ripple';
            ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
            target.appendChild(ripple);
          } else {
            ripple.className = 'waves-ripple';
          }
          switch (opts.type) {
            case 'center':
              ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px';
              ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px';
              break;
            default:
              ripple.style.top =
                e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop + 'px';
              ripple.style.left =
                e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft + 'px';
          }
          ripple.style.backgroundColor = opts.color;
          ripple.className = 'waves-ripple z-active';
          return false;
        }
      },
      false
    );
  },
};

export default waves;


// main.ts
import { createApp } from 'vue';
const app = createApp({})
app.directive('myDirective',myDirective)

包装

模板语法

说明:

1. 指令是全局注册，是可以直接使用的。
2. 对于属性与事件的传递（ 在vue2中的还有一个$listeners 被移除 ），直接使用 v-bind="$attrs"。
3. 对于插槽的传递可以直接使用默认插槽。

render函数

import { h, withDirectives ,resolveDirective} from 'vue';
import { ElButton } from 'element-plus';
import waves from '@/directives/waves';

const Button = (__props, context) => {
// const waves = resolveDirective('waves')
  return withDirectives(
    h(
      ElButton,
      {
        ...context.attrs,
      },
      context.slots
    ),
    [[waves]]
  );
};

export default Button;

说明：

1. 事件与属性的传递，是在context.attrs下的，注意没有$。
2. 插槽使用 context.slots.default()
3. withDirectives的使用，注意[[waves]]是二维数组，为什么是二维呢？因为可以传递多个指令，并且每个指令是可以添加参数的。
   4.对于全局注册的指令，可以通过resolveDirective得到。

tsx写法

const Button = (__props, context) => {
  return (
    
      {context.slots}
    
  );
};

export default Button;

说明：

1. vite安装插件 @vitejs/plugin-vue-jsx，并使用
2. 文件后缀名为tsx
3. el-button 必须为全局注册

最后

这样我们就是可以对组件轻松的添加上相应的功能。