Vue怎么實(shí)現(xiàn)加水波紋效果

本篇內(nèi)容主要講解“Vue怎么實(shí)現(xiàn)加水波紋效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue怎么實(shí)現(xiàn)加水波紋效果”吧!

自定義指令

指令的作用

言簡意賅，就是操作底層dom

當(dāng)然vue自身有非常強(qiáng)大的指令功能，代替你進(jìn)行dom操作，比如v-on綁定事件對(duì)不對(duì)，這應(yīng)該大家熟悉的指令，100%要用到，畢竟js就是個(gè)事件驅(qū)動(dòng)的語言。還有大家可以去官方文檔去看看

水波紋

實(shí)現(xiàn)

原理

我們?cè)邳c(diǎn)擊的時(shí)候，鼠標(biāo)會(huì)發(fā)散一個(gè)圓，是不是有點(diǎn)擊事件觸發(fā)了，此時(shí)我們就增加一個(gè)span標(biāo)簽，當(dāng)然要給他設(shè)置寬高，等屬性，而且我們觀察，圓的顏色是慢慢沒有的，所以還有opacity屬性，還有span是不是跟隨鼠標(biāo)移動(dòng)的，所以還有添加定位屬性。

核心

注意發(fā)現(xiàn)，span發(fā)散的圓是不斷變大的，所以寬高是不斷變化的，變化，我們就能想到定時(shí)器，定時(shí)器里面就可以控制圓的寬高，讓span變化的屬性不斷有規(guī)律變化，當(dāng)然要有臨界值，我們可以看看下圖

我們可以看看需求，水波紋，肯定是要覆整個(gè)按鈕的，那么span的發(fā)散半徑肯定就是按鈕中最大的距離，如圖所示，對(duì)角線肯定最長邊，一目了然。怎么求，在構(gòu)造函數(shù)Math有個(gè)方法可以求Math.sqrt（a*a+b*b）所以span的寬高是2倍的最長距離。所以臨界值找到了，達(dá)到都就清除定時(shí)器，讓span的屬性不在變化。并且刪除span。

代碼實(shí)現(xiàn)

上面我們分析了分析，接下來我們用代碼實(shí)現(xiàn)。

結(jié)構(gòu)：

 <div class="app">
        <h2>{{title}}</h2>
        <button v-shuibowen="">點(diǎn)我發(fā)散水波紋</button>
        <!-- <div class="box" v-shuibowen=""></div> -->
    </div>

實(shí)例化一個(gè)vue對(duì)象。

 const vm = new Vue({
            data: {
                title: "自定義指定設(shè)置水波紋"
            }
        }).$mount(".app")

自定義指令

 Vue.directive('shuibowen', {
                        //binding 指令攜帶的變量數(shù)據(jù)
            inserted: function(el, binding) {
                el.addEventListener('click', function(e) {
                    let x = e.clientX - el.offsetLeft
                    let y = e.clientY - el.offsetTop

                    //在鼠標(biāo)位置增加一個(gè)span標(biāo)簽
                    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
                        //判斷超出最大值時(shí)，清除定時(shí)，并且刪除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)
                })

            }
        })

到此，相信大家對(duì)“Vue怎么實(shí)現(xiàn)加水波紋效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！