1

2

3

4

5

<div class="app">

       <h1>{{title}}</h1>

       <button v-shuibowen="">点我发散水波纹</button>

       <!-- <div class="box" v-shuibowen=""></div> -->

   </div>

1

2

3

4

5

const vm = new Vue({

           data: {

               title: "自定义指定设置水波纹"

           }

       }).$mount(".app")

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

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)

               })

           }

       })