引言
项目中使用到的很多组件，是对于elementplus组件库中的组件进行的二次封装，以按钮为例，需要以指令的方式添加点击的波纹的效果。
指令
在vue3+ts中，指令需要注意的写法同vue2中是有一些不同的，主要有：
- 添加类型
import type { Directive, DirectiveBinding } from 'vue';
vue2.x与vue3.x指令生命周期不同：
bind → beforeMount
inserted → mounted
beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
componentUpdated → updated
beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
unbind -> unmounted代码演示与挂载方式
import './waves.css';
import type { Directive, DirectiveBinding } from 'vue';
const waves: Directive = {
mounted(el: Element, binding: DirectiveBinding<any>) {
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)
包装
模板语法
<template>
<el-button v-waves v-bind="$attrs">
<span v-if="$slots.default"><slot></slot></span>
</el-button>
</template>
<script lang="ts">
import { ElButton } from 'element-plus';
import { defineComponent } from 'vue';
export default defineComponent({
components: { ElButton },
setup(__props, __ctx) {
return {};
},
});
</script>
说明:
- 指令是全局注册，是可以直接使用的。
- 对于属性与事件的传递（ 在vue2中的还有一个$listeners 被移除 ），直接使用 v-bind="$attrs"。
- 对于插槽的传递可以直接使用默认插槽。
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;
说明：
- 事件与属性的传递，是在context.attrs下的，注意没有$。
- 插槽使用 context.slots.default()
- withDirectives的使用，注意[[waves]]是二维数组，为什么是二维呢？因为可以传递多个指令，并且每个指令是可以添加参数的。
4.对于全局注册的指令，可以通过resolveDirective得到。
tsx写法
const Button = (__props, context) => {
return (
<el-button v-waves {...context.attrs}>
{context.slots}
</el-button>
);
};
export default Button;
说明：
- vite安装插件 @vitejs/plugin-vue-jsx，并使用
- 文件后缀名为tsx
- el-button 必须为全局注册
最后
这样我们就是可以对组件轻松的添加上相应的功能。
