孤独狂饮Test_VUE

本脚本自带 VUE 和 element-ui 属性，可以更方便的添加各种功能
当前为 2018-07-20 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         孤独狂饮Test_VUE
// @namespace    [url=mailto:[email protected]][email protected][/url]
// @version      0.5
// @description  本脚本自带 VUE 和 element-ui 属性，可以更方便的添加各种功能
// @author       gdky005
// @match        *://www.80s.tw/*
// @require      https://unpkg.com/vue/dist/vue.js
// @require      https://unpkg.com/element-ui/lib/index.js
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...

    var header_link = '<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">';
    //将以上拼接的html代码插入到网页里的ul标签中
    var header_link_tag = $("head");
    if (header_link_tag) {
       header_link_tag.append(header_link);
    }




    var vue_code = '<div id="app" style="text-align:center">'

    vue_code+='{{ message }}'

    vue_code+='<el-popover placement="top-start" title="" width="100" trigger="hover" content="这是 WangQing 的订阅内容。">'
    vue_code+='<el-button type="primary" size="medium" slot="reference" @click="btnOnClick">订阅按钮</el-button>'
    vue_code+='</el-popover>'

    vue_code+='<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>'
    vue_code+='<span>{{ dialogText }}</span>'
    vue_code+='<span slot="footer" class="dialog-footer">'
    vue_code+='<el-button @click="cancelSub">取 消</el-button>'
    vue_code+='<el-button type="primary" @click="requestData">确 定</el-button>'
    vue_code+='</span>'
    vue_code+='</el-dialog>'

    vue_code+='</div>'


    var ul_tag = $("div.img");
    if (ul_tag) {
       ul_tag.append(vue_code);
    };



    new Vue({
        el: '#app',
        data: function () {
            return {
                message: "",
                dialogText: "是否真的要订阅？",
                dialogVisible: false,
                centerDialogVisible: false,

                name: '',
                pid: '',
                url: '',
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                    done();
                }).catch(_ => {});
            },
            cancelSub() {
                this.centerDialogVisible = false
                this.$message({
                     message: '取消订阅',
                     type: 'warning'
                });
            },
            btnOnClick() {
                this.centerDialogVisible = true;

                var url = document.URL;
                var name = $("h1.font14w")[0].innerText;
                var pid = url.substring(url.lastIndexOf("/") + 1, url.length);
                var msg = "url 是：" + url + ",\n名字：" + name + ",\nid：" + pid;

                console.log(msg);
                this.dialogText = msg;

                this.pid = pid;
                this.name = name;
                this.url = url;
            },
            requestData() {
                this.centerDialogVisible = false;

                var params = 'pid=' + this.pid;
                params+= '&name=' + this.name;
                params+= '&url=' + this.url;

                var that = this;

                GM_xmlhttpRequest({
                    method: 'GET',
                    url: "http://zkteam.cc/Subscribe/add?" + params,
                    onload: function(result) {
                        //eval(result.responseText);
                        console.log(result.responseText);

                        that.$message({
                            message: '订阅成功！',
                            type: 'success'
                        });
                    }
                });

            }
        }
    })

    //var down_btn_html = '<button>订阅</button>';
    //将以上拼接的html代码插入到网页里的ul标签中
    //var ul_tag = $("div.info>h1");
    //if (ul_tag) {
    //   ul_tag.append(down_btn_html);
    //};
})();