实现一个油猴脚本工具

 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

// ==UserScript==
// @name         油猴脚本测试 【前端代码生成器v0.0】
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!: 参考：https://codepen.io/vladimirs/pen/wRapwj
// @include      http*
// @require    http://code.jquery.com/jquery-2.1.1.min.js
// @require    https://cdn.jsdelivr.net/npm/vue


// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_setClipboard
// @grant GM_log
// @grant GM_xmlhttpRequest
// @grant unsafeWindow
// @grant window.close
// @grant window.focus
// @grant  GM_notification


// ==/UserScript==

(function() {

    GM_addStyle(`
     body #lyrApp * {
        z-index: 998;
      }
      body #lyrApp button.myTool {
        position: absolute;
        right: 0;
        top: 80px;
        background: white;
        z-index: 1000;
      }
      body #lyrApp .modal0 {
        position: absolute;
        min-width: 40vw;
        min-height: 20vh;
        border: 1px solid black;
        right: 0;
        top: 12px;
        z-index: 999;
        background: white;
      }
      body #lyrApp .modal0 .input {
        margin: 0px;
        width: 358px;
        height: 250px;
      }
      body #lyrApp .modal0 .result {
        margin: 0px;
        width: 358px;
        height: 250px;
      }

      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.5s;
      }
      .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
      }

   `);
    var board = `<div id="lyrApp">
      <button class="myTool" @click="openModal">打开工具</button>
      <transition name="fade">
        <div data-type="resultMap" class="modal0" v-show="show">
          <textarea class="input" placeholder="输入参数"></textarea>
          <br />
          <textarea class="result" placeholder="结果"></textarea>
        </div>
      </transition>
    </div>`

     $(board).appendTo(document.body)



    var _lyr___app = new Vue({
        el: "#lyrApp",
        data: {
            message: "Hello Vue!",
            show: false,
        },
        methods: {
            openModal() {
                this.show = !this.show;
            },
        },
    });

})();