Vue自定義加水波紋效果指令實例代碼

Posted on by

前言

大傢好，我是不吃魚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，代碼沒有優化，望見諒。自定義水波紋指令的好處就是，哪裡需要用到水波紋的效果就往哪裡加。

到此這篇關於Vue自定義加水波紋效果指令的文章就介紹到這瞭,更多相關Vue自定義水波紋指令內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：