亲宝软件园·资讯

展开

Vue自定义水波纹指令

不吃鱼d猫 人气:0

前言

大家好,我是不吃鱼d猫,过年以来。断更许久,又回来了,学无止境,作为程序员知识是要不断更新迭代的。在此期间,接触了几天的Vue,确实好用,今天给大家说个好玩的,在做项目过程中,点击按钮,大家肯定会接触过很花的效果。接下来给大家说说水波纹效果。

自定义指令

指令的作用

言简意赅,就是操作底层dom

当然vue自身有非常强大的指令功能,代替你进行dom操作,比如v-on绑定事件对不对,这应该大家熟悉的指令,100%要用到,毕竟js就是个事件驱动的语言。还有大家可以去官方文档去看看

水波纹

水波纹效果

如上图所示,点击按钮时鼠标四周会发散一个圆像水波一样。

实现

原理

我们在点击的时候,鼠标会发散一个圆,是不是有点击事件触发了,此时我们就增加一个span标签,当然要给他设置宽高,等属性,而且我们观察,圆的颜色是慢慢没有的,所以还有opacity属性,还有span是不是跟随鼠标移动的,所以还有添加定位属性。

核心

注意发现,span发散的圆是不断变大的,所以宽高是不断变化的,变化,我们就能想到定时器,定时器里面就可以控制圆的宽高,让span变化的属性不断有规律变化,当然要有临界值,我们可以看看下图

我们可以看看需求,水波纹,肯定是要覆整个按钮的,那么span的发散半径肯定就是按钮中最大的距离,如图所示,对角线肯定最长边,一目了然。怎么求,在构造函数Math有个方法可以求Math.sqrt(a*a+b*b)所以span的宽高是2倍的最长距离。所以临界值找到了,达到都就清除定时器,让span的属性不在变化。并且删除span。

代码实现

上面我们分析了分析,接下来我们用代码实现。

结构:

 <div class="app">
        <h1>{{title}}</h1>
        <button v-shuibowen="">点我发散水波纹</button>
        <!-- <div class="box" v-shuibowen=""></div> -->
    </div>

实例化一个vue对象。

 const vm = new Vue({
            data: {
                title: "自定义指定设置水波纹"
            }
        }).$mount(".app")

自定义指令

 Vue.directive('shuibowen', {
                        //binding 指令携带的变量数据
            inserted: function(el, binding) {
                el.addEventListener('click', function(e) {
                    let x = e.clientX - el.offsetLeft
                    let y = e.clientY - el.offsetTop

                    //在鼠标位置增加一个span标签
                    let span = document.createElement("span")
                    span.style.position = "absolute"
                    span.style.background = binding.value || 'rgba(150, 91, 91, .5)'
                    span.style.opacity = 1;
                    span.style.borderRadius = '50%'
                    el.append(span)
                    let width = 0
                    let height = 0
                    let opacity = 1
                    let max_length = Math.sqrt(el.offsetWidth * el.offsetWidth + el.offsetHeight * el.offsetHeight) * 2

                    let time = setInterval(() => {
                        width += 5
                        height += 5
                        opacity -= 0.01
                        //判断超出最大值时,清除定时,并且删除span
                        if (width < max_length) {
                            span.style.width = width + 'px'
                            span.style.height = height + 'px'
                            span.style.opacity = opacity;
                            span.style.left = x - span.offsetWidth / 2 + 'px'
                            span.style.top = y - span.offsetHeight / 2 + 'px'
                        } else {
                            clearInterval(time)
                            time = null;
                            span.remove()
                        }
                    }, 10)
                })

            }
        })

总结

刚接触Vue,代码没有优化,望见谅。自定义水波纹指令的好处就是,哪里需要用到水波纹的效果就往哪里加。

加载全部内容

相关教程
猜你喜欢
用户评论