element-ui中el-button搜索时带波纹的按钮

最新推荐文章于 2024-08-07 10:30:00 发布

@lwg

最新推荐文章于 2024-08-07 10:30:00 发布

阅读量739

点赞数 1

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/lwg112233/article/details/122187285

版权

本文介绍了如何在Element UI的el-button组件上实现搜索时带波纹效果的方法。首先，在JS文件中定义全局组件，然后导入waves.css样式，接着在main.js入口文件中引入自定义的waves组件，最后在页面中通过v-waves指令应用到el-button上。

摘要由CSDN通过智能技术生成

看下效果

1.先在js文件中自定义全局组件

import './waves.css';//导入样式

const vueWaves = {};
vueWaves.install = (Vue, options = {}) => {
  Vue.directive('waves', {
    bind(el, binding) {
      el.addEventListener('click', e => {
        const customOpts = Object.assign(options, binding.value);
        const opts = Object.assign({
            ele: el, // 波纹作用元素
            type: 'hit', // hit点击位置扩散center中心点扩展
            color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
          }, customOpts),
          target = opts.ele;
        if (target) {
          target.style.position = 'relative';
          target.style.overflow = 'hidden';
          const rect = target.getBoundingClientRect(