针对油猴中文网的自动回复功能

wwwwwllllk · 发表于 2022-5-11 22:45:07

写的过程遇到了点问题，因为对vue组件引入的时候总会报些莫名其妙的错，所以没办法。本来想用checkBox的这样用选中的方式来表达比较好。但是用原生的在vue怎么触发怎么拿到选中指定的内容有点费劲。拿this的时候第一次默认会拿到未定义。这一块没搞懂。但是不影响脚本的使用。


// ==UserScript==
// @name         油猴中文网的自动回复
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  针对油猴中文网的自动回复，自动回复的内容大家可以在脚本数组里面自行添加。
// @author       xiaofeiwu
// @match        https://bbs.tampermonkey.net.cn/*
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @require      https://cdn.jsdelivr.net/npm/vue@next
// @grant        unsafeWindow
// @run-at document-start
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==

unsafeWindow.Vue = Vue;
window.onload=()=>{
let text=`<div id="app">
       <button @click="replay" class="replayBtn">自动回复</button>
       <div v-for="(item,index) in  content" :key="index" class="default" @click="getContent">{{item}}</div>
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
var divPosition = document.querySelector('.kmstt'); //搜寻元素
divPosition.insertAdjacentHTML('afterend',`${text}`);
document.body.append(el)
      const App = {
        data() {
          return {
            content: ["ggnb666!!!","你是我的心你是我的肝你是我生命四分之三"],
            selectContent:"山东曹县牛皮666我的宝贝",
          };
        },
        methods: {
            // 这里注意一下this的指向,注意一下就行。最好直接把里面写成箭头函数
            // onload是回调函数，指向的应该是关于xhr的东西
            replay:()=>{
                document.querySelector('#fastpostmessage').value = "山东曹县牛皮666我的宝贝";
                document.querySelector('#fastpostrefresh').checked = true
                document.querySelector('#fastpostsubmit').click()
            },
            getContent:(e)=>{
                console.log(this)
               console.log(this.selectContent)
               e.target.className = "active";
                this.selectContent = e.target.innerText;
                console.log(this.selectContent)
                //document.querySelector('#fastpostmessage').value = this.selectContent;
                //document.querySelector('#fastpostrefresh').checked = true
                //document.querySelector('#fastpostsubmit').click()
            }
        }
      };
      const app = Vue.createApp(App);
      app.mount("#app");
}

GM_addStyle(`
  #app {
     margin-top: 10px;
  }
  .replayBtn {
     background: #ff8838;
   }
  .default {
     background-color: white;
   }

   .active {
     background-color: #ff8838;
    }

`)