Skip to content

V
Vue-WebDriver
Commit d8176669 by 高源
Options

初始化

parents
Showing with 531 additions and 0 deletions
.DS_Store 0 → 100644
File added
.gitignore 0 → 100644
node_modules
dist
index @ 1caf2ae5
Subproject commit 1caf2ae52132fd74ac3292378a9def7b5a4120f0
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"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/.DS_Store 0 → 100644
File added
src/App.vue 0 → 100644
<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 0 → 100644
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 0 → 100644
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 0 → 100644
<template>
<div class="index">
{{ message }}
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello Word!!!'
}
},
}
</script>
webpack.config.js 0 → 100644
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 绝对不能被用在生产环境)
]
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment