初始化

.gitignore

+node_modules
+dist

index @ 1caf2ae5

+Subproject commit 1caf2ae52132fd74ac3292378a9def7b5a4120f0

package.json

+{
+  "name": "m5",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server",
+    "build": "webpack",
+    "serve": "npm run dev"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^3.3.1",
+    "vue": "^2.7.14",
+    "vue-loader": "^15.9.8",
+    "vue-template-compiler": "^2.7.14",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "element-ui": "^2.15.14",
+    "jquery": "^3.7.1",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
+    "url-loader": "^4.1.1",
+    "vue-router": "^3.5.2"
+  }
+}

src/App.vue

+<template>
+    <!-- <router-view></router-view>
+     -->
+    <div id="realcontent">
+        <div id="EasySpiderResizer"
+            style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;"> </div>
+        <div>
+            <div class="tooldrag" style="width: 100%;">K5 网页自动化工具</div>
+            <el-button type="primary">Element UI按钮</el-button>
+        </div>
+
+    </div>
+</template>
+<style>
+.tooltips {
+    width: 500px;
+    min-height: 300px;
+    background-color: white;
+    position: fixed;
+    z-index: 2147483647;
+    right: 30px;
+    bottom: 30px;
+    font-size: 13px !important;
+    font-weight: normal !important;
+    border: solid navy 2px;
+    -webkit-user-select: none;
+    /* 文字不可被选中 */
+}
+
+.tooldrag {
+    background-color: navy;
+    width: 100%;
+    text-align: center;
+    font-size: 13px;
+    height: 26px !important;
+    padding-top: 8px !important;
+    color: white;
+}
+
+.realcontent {
+    text-align: left;
+    color: black !important;
+    padding-top: 10px !important;
+    padding-bottom: 80px !important;
+    padding-left: 20px !important;
+    padding-right: 10px !important;
+}
+
+.innercontent {
+    text-align: left;
+    padding-top: 5px !important;
+    padding-left: 12px !important;
+}
+
+.innercontent a {
+    display: inline-block;
+    text-decoration: none;
+    margin-top: 2px !important;
+    font-size: 13px;
+    color: navy !important;
+    cursor: pointer;
+    text-decoration: none !important;
+}
+
+.innercontent a:hover {
+    color: blue !important;
+}
+
+.innercontent span {
+    font-size: 20px;
+    color: navy;
+    line-height: normal;
+    padding-left: 5px !important;
+}
+
+.tooltips button {
+    margin-top: 7px !important;
+    font-size: 13px;
+    border-radius: 5px;
+    border: solid 2px navy;
+    background-color: white;
+    color: navy;
+    width: 100px;
+    height: 30px;
+    cursor: pointer;
+    margin-left: 15px !important;
+    padding: 0 !important;
+}
+
+.tooltips input[type=text] {
+    display: block;
+    margin-top: 7px !important;
+    padding-left: 5px !important;
+    margin-bottom: 7px !important;
+    font-size: 15px;
+    border-radius: 5px;
+    border: solid 2px navy;
+    width: 204px;
+    height: 30px;
+}
+
+.tooltips select {
+    display: block;
+    margin-top: 7px !important;
+    padding-left: 5px !important;
+    margin-bottom: 7px !important;
+    font-size: 15px;
+    border-radius: 5px;
+    border: solid 2px navy;
+    width: 204px;
+    height: 30px;
+}
+
+.tooltips button:hover {
+    color: blue;
+}
+
+
+/* 下面用来对冻结表格首行元素和固定表格宽度和高度设定样式 */
+
+.toolkitcontain {
+    border: 1px solid #cdd !important;
+    /*width: 280px !important;*/
+    /* 上面的宽度设定很重要 */
+    height: 150px;
+    overflow: auto;
+    margin-top: 10px !important;
+    position: relative;
+}
+
+.toolkitcontain table {
+    table-layout: fixed;
+    border-spacing: 0 !important;
+    word-break: break-all;
+    word-wrap: break-word;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-top: 0px !important;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.toolkitcontain th,
+.toolkitcontain td,
+.toolkitcontain tr {
+    border: 1px solid rgb(78, 78, 78) !important;
+    height: 25px !important;
+    width: 100px !important;
+    text-align: center !important;
+    font-weight: normal !important;
+    overflow: hidden !important;
+    font-size: 11px !important;
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+    vertical-align: middle !important;
+    white-space: nowrap;
+}
+
+.toolkitcontain th span {
+    font-size: 15px;
+    font-weight: bold;
+    cursor: pointer;
+    /*position: absolute;*/
+    /*position: ;*/
+    margin-right: 10px;
+    vertical-align: text-bottom !important;
+}
+
+.toolkitcontain th div {
+    display: inline-block !important;
+    overflow: hidden !important;
+    max-width: 90% !important;
+}
+
+.toolkitcontain .toolkittb2 {
+    position: sticky;
+    top: 0px;
+    margin-bottom: 0px;
+    background-color: azure;
+    z-index: 1000;
+}
+
+.toolkitcontain .toolkittb4 {
+    position: absolute;
+}
+
+#closeButton {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    cursor: pointer;
+    padding: 5px;
+    opacity: 0.05;
+}
+
+#closeButton:hover {
+    opacity: 1.0;
+}
+</style>
\ No newline at end of file

src/main.js

+import $ from "jquery";
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'  // 引入定义好的router
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
+// import ToolKit from "./views/index.vue";
+
+
+
+
+let toolkit
+let timer;
+//生成Toolkit
+function generateToolkit () {
+    // global.app = new Vue(ToolKit);
+    let h = $(".tooldrag").height();
+    console.log(h)
+    let difference = 26 - h; //获得高度值差
+    if (difference > 0) {
+        $(".tooldrag").css("cssText", "height:" + (26 + difference) + "px!important")
+    }
+    //实现提示框拖拽功能
+    $('.tooldrag').mousedown(function (e) {
+        // e.pageX
+        var positionDiv = $(this).offset();
+        var distanceX = e.pageX - positionDiv.left;
+        var distanceY = e.pageY - positionDiv.top;
+        $(document).mousemove(function (e) {
+            var x = e.clientX - distanceX;
+            var y = e.clientY - distanceY;
+
+            if (x < 0) {
+                x = 0;
+            } else if (x > window.innerWidth - $('.tooldrag').outerWidth(true)) {
+                x = window.innerWidth - $('.tooldrag').outerWidth(true);
+            }
+
+            if (y < 0) {
+                y = 0;
+            } else if (y > window.innerHeight - $('.tooldrag').outerHeight(true)) {
+                y = window.innerHeight - $('.tooldrag').outerHeight(true);
+            }
+
+            $('.tooltips').css({
+                'right': window.innerWidth - x - $('.tooltips').outerWidth(true) + 'px',
+                'bottom': window.innerHeight - y - $('.tooltips').outerHeight(true) + 'px',
+            });
+        });
+
+        $(document).mouseup(function () {
+            $(document).off('mousemove');
+        });
+    });
+    // 拖拽右下角改变大小
+    const wrapperToolkit = document.getElementById('wrapperToolkit');
+    const EasySpiderResizer = document.getElementById('EasySpiderResizer');
+    console.log(EasySpiderResizer)
+    let mousedown = false;
+    let startX, startY, startWidth, startHeight;
+
+
+    EasySpiderResizer.addEventListener('mousedown', e => {
+        mousedown = true;
+        startX = e.clientX;
+        startY = e.clientY;
+        startWidth = wrapperToolkit.offsetWidth;
+        startHeight = wrapperToolkit.offsetHeight;
+        e.preventDefault();
+    });
+
+    window.addEventListener('mousemove', e => {
+        // if the mouse is not pressed, do nothing
+        if (!mousedown) return;
+        let newX = e.clientX;
+        let newY = e.clientY;
+
+        // Update the width: Original width - (current mouse X position - original mouse X position)
+        let newWidth = startWidth - (newX - startX);
+
+        // Update the height: Original height - (current mouse Y position - original mouse Y position)
+        let newHeight = startHeight - (newY - startY);
+        if (newWidth > 300 && newWidth < 1200) {
+            wrapperToolkit.style.width = `${newWidth}px`;
+        }
+        if (newHeight > 420 && newHeight < 800) {
+            wrapperToolkit.style.height = `${newHeight}px`;
+            // console.log(newHeight)
+            try {
+                let toolkitcontain = document.getElementsByClassName('toolkitcontain')[0];
+                toolkitcontain.style.height = `${newHeight - 330}px`;
+            } catch (e) {
+
+            }
+        }
+    });
+
+    window.addEventListener('mouseup', e => {
+        // when the mouse is released, stop resizing
+        mousedown = false;
+    });
+    timer = setInterval(function () { //时刻监测相应元素是否存在(防止出现如百度一样元素消失重写body的情况)，如果不存在，添加进来
+        if (document.body != null && document.getElementsByClassName("tooltips").length == 0) {
+            this.clearInterval(); //先取消原来的计时器，再设置新的计时器
+            document.body.append(toolkit);
+            generateToolkit();
+        }
+    }, 3000);
+}
+
+window.onload = function () {
+
+    let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
+
+    toolkit = document.createElement("div");
+    toolkit.classList = "tooltips"; //添加样式
+    toolkit.setAttribute("id", "wrapperToolkit");
+    let tooltips = false; //标记鼠标是否在提示框上
+
+    //右键菜单屏蔽
+    document.oncontextmenu = () => false;
+
+    window.addEventListener('DOMContentLoaded', () => {
+        // Remove any existing beforeunload events
+        window.onbeforeunload = null;
+
+        // Override the beforeunload event with a custom function
+        window.addEventListener('beforeunload', (event) => {
+            // Prevent the event's default action
+            event.preventDefault();
+
+            // Remove the confirmation message
+            event.returnValue = '';
+        });
+    });
+    toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
+
+    document.body.append(toolkit);
+    console.log(document)
+
+    $(".tooltips").html(`
+<div id="app"></div>
+`);
+    // global.app = new Vue(ToolKit);
+    new Vue({
+        el: '#app',
+        router,
+        render: h => h(App)
+    })
+
+    document.addEventListener("DOMContentLoaded", function () {
+        // 在 DOMContentLoaded 事件触发后执行的代码
+        var body = document.body;
+ 
+        // 执行其他操作
+    });
+    generateToolkit();
+}
+

src/router/index.js

+import Vue from 'vue'
+import Router from 'vue-router'  // 引入定义好的router
+import Index from '../views/index.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'history',
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      component: Index
+    }
+  ]
+})
+

src/views/index.vue

+<template>
+    <div class="index">
+        {{ message }}
+    </div>
+</template>
+  
+<script>
+export default {
+    data () {
+        return {
+            message: 'Hello Word!!!'
+        }
+    },
+}
+</script>

webpack.config.js

+let path = require('path');
+let webpack = require('webpack');
+const {VueLoaderPlugin} = require('vue-loader')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+module.exports = {
+  /**
+     * mode的取值有以下两个，默认是development
+     * 1.development 开发环境
+      不会对打包生成的文件进行代码压缩和性能优化
+      打包速度快，适合在开发阶段使用
+
+      2.production
+      生成环境
+      会对打包生成的文件进行代码压缩和性能优化
+      打包速度很慢，仅适合在项目发布阶段使用
+  */
+  mode: 'development',
+  entry: './src/main.js', // 入口： 默认是./src/index.html
+  // 输出 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
+  output: {
+    path: path.join(__dirname, 'dist'), // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
+    filename: "bundle.js" // 默认是 ./dist/main.js
+  },
+  module: {
+    // ... 其它规则
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        test: /\.css$/,
+        use: [
+            {
+                loader: 'style-loader'
+            }, {
+                loader: 'css-loader'
+            }
+        ]
+      },
+      {
+        test: /\.less$/i,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              lessOptions: {
+                strictMath: true,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192,
+              esModule: false, // 关闭es6模块化解析
+              //[hash:7]取图片的hash的前7位  [ext]取文件原来扩展名
+              // name: utils.assetsPath('img/[name].[hash:7].[ext]')
+            }
+          },
+        ],
+      },
+    ]
+  },
+  devServer:{
+    hot: true, // 启用 webpack 的 热模块替换 特性
+    open:true,//初次打包完成后，自动打开浏览器
+    host:'127.0.0.1',//实时打包所使用的主机地址
+    port: 8080 // 将本地启动的服务默认端口号设置为8080
+  },
+  plugins:[
+    // 生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中
+    new HtmlWebpackPlugin({
+      template: 'index/index.html'
+    }),
+    new VueLoaderPlugin(), // 使用npm 导入使用vue-loader的插件
+    new webpack.HotModuleReplacementPlugin() // 热更新引入(HMR 绝对不能被用在生产环境)
+  ]
+};