写的过程遇到了点问题,因为对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;
}
`)