vue-stop-multiple-click/example.html at master · En777/vue-stop-multiple-click · GitHub

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue prevent multiple click</title>
</head>

<body>
  <div id="app">
    <h1>vue prevent multiple click</h1>
    <div>
      <a href="https://github.com/En777/vue-stop-multiple-click">Github source</a>
    </div>
    <br>
    <br>

    <div>v-click="onGetData"</div>
    <button v-click="onGetData">stop multiple click button</button>
    <br>
    <br>
    <div>v-click:5000="onGetData"</div>
    <button v-click:5000="onGetData">stop multiple click button(5s delay at least)</button>
    <br>
    <br>
    <div>v-click:0="onGetData2"</div>
    <button v-click:0="onGetData2">stop multiple click button(0s delay)</button>
    <br>
    <br>
    <div>normal button</div>
    <button @click="onGetData">normal button click</button>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
  <!-- <script src="./vue-prevent-multiple-click.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue-stop-multiple-click@0/vue-prevent-multiple-click.min.js"></script>
  <script>
    Vue.directive('click', window.StopMultipleClick)

    new Vue({
      el: '#app',
      methods: {
        onGetData: function () {
          var url = 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js?_ts=' + new Date().getTime()

          return Promise.all([
            fetch(url),
            delay(2000)
          ])
        },
        onGetData2: function () {
          return delay(300)
        },
      }
    })

    function delay(ms) {
      return new Promise(function (resolve) {
        setTimeout(resolve, ms)
      })
    }
  </script>

  <!-- element-ui -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>

  <div id="app2">
    <h3>custom disabled class (work with others UI components)</h3>
    <div>v-click="onGetData" disabled-class="is-disabled"</div>
    <el-button v-click="onGetData" disabled-class="is-disabled" type="primary">stop multiple click button</el-button>
    <br>
    <br>
    <div>v-click="onGetData" disabled style is not working</div>
    <el-button v-click="onGetData" type="primary">stop multiple click button</el-button>
    <br>
    <br>
  </div>

  <script>
    new Vue({
      el: '#app2',
      methods: {
        onGetData: function () {
          var url = 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js'

          return Promise.all([
            fetch(url),
            delay(2000)
          ])
        }
      }
    })
  </script>

</body>

</html>