Skip to content

V
Vue-WebDriver
Commit 7f474187 by 高源
Options

界面优化

parent b4b0bef1
Showing with 321 additions and 58 deletions
package-lock.json
......@@ -2483,6 +2483,11 @@
"entities": "^2.0.0"
}
},
"dom-zindex": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/dom-zindex/-/dom-zindex-1.0.1.tgz",
"integrity": "sha512-M/MERVDZ8hguvjl6MAlLWSLYLS7PzEyXaTb5gEeJ+SF+e9iUC0sdvlzqe91MMDHBoy+nqw7wKcUOrDSyvMCrRg=="
},
"domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
......@@ -4548,6 +4553,11 @@
"websocket-driver": "^0.7.4"
}
},
"sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
......@@ -4916,6 +4926,23 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vuedraggable": {
"version": "2.24.3",
"resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-2.24.3.tgz",
"integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
"requires": {
"sortablejs": "1.10.2"
}
},
"vxe-table": {
"version": "3.7.5",
"resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-3.7.5.tgz",
"integrity": "sha512-/52qKkgYQs91MPSL0W6s2EioJqwuemb7lUtNqq0py6B64LZtw0OhA+HsjR9oqSjqujex8GTpzaewwLpvIqX49A==",
"requires": {
"dom-zindex": "^1.0.1",
"xe-utils": "^3.5.13"
}
},
"watchpack": {
"version": "2.4.0",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
......@@ -5190,6 +5217,11 @@
"integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
"dev": true
},
"xe-utils": {
"version": "3.5.14",
"resolved": "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.14.tgz",
"integrity": "sha512-Xq6mS8dWwHBQsQUEBXcZYSaBV0KnNLoVWd0vRRDI3nKpbNxfs/LSCK0W21g1edLFnXYfKqg7hh5dakr3RtYY0A=="
},
"yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
......
package.json
......@@ -20,7 +20,7 @@
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"vue": "^2.7.14",
"vue": "^2.5.2",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.7.14",
"webpack": "^5.75.0",
......@@ -28,11 +28,13 @@
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"element-ui": "^2.15.14",
"element-ui": "^2.5.4",
"jquery": "^3.7.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"url-loader": "^4.1.1",
"vue-router": "^3.5.2"
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vxe-table": "^3.7.5"
}
}
src/App.vue
......@@ -6,35 +6,245 @@
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">测试按钮</el-button>
<!-- 任务信息 -->
<div style="display: flex;">
<div style="width: 100%;display: flex;">
<div style="width: 48%;height: 25px;line-height: 25px;display: flex;padding-top: 5px;">
<span style="width: 100px;padding-left: 5px;">任务名称：</span>
<el-input v-model="input" placeholder="请输入内容" style="height: 20px;"></el-input>
</div>
<div style="width: 48%;height: 25px;line-height: 25px;display: flex;padding-top: 5px;">
<span style="width: 100px;padding-left: 5px;">任务地址：</span>
<el-input v-model="input" placeholder="请输入内容" style="height: 20px;"></el-input>
</div>
</div>
</div>
<el-divider></el-divider>
<!-- 动作集合 -->
<div style="display: flex;justify-content: space-between;line-height: 35px;">
<span style="padding-left: 15px;">动作集合</span>
<el-button icon="el-icon-plus" size="small" style="margin-right: 15px;" class="button-new-tag"
@click="showInput">添加动作</el-button>
</div>
<!-- 动作添加 -->
<div style="padding-left: 15px;width: 500px;overflow: auto;white-space: nowrap;">
<draggable v-model="dynamicTags" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
@start="onStart" @end="onEnd">
<transition-group>
<!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> -->
<el-tag class="boxtags" :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
@close="handleClose(tag)">
{{ tag }}
</el-tag>
</transition-group>
</draggable>
</div>
<el-divider></el-divider>
<!-- 卡片区域 -->
<el-card class="box-card" style="background-color: #FFF;">
<div style="display: flex;line-height: 25px;justify-content: space-around;">
<span>
动作配置
</span>
<div style="display: flex;line-height: 25px;margin-left: 20px;">
<span style="width: 120px;">动作名称：</span> <el-input class="input-new-tag dongzuo"
v-if="!inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
</el-input>
</div>
<div>
<span style="width: 100px;">动作类型：</span> <el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div>
<div style="background-color: aliceblue;">
<div style="display: flex;line-height: 25px;">
<span style="width: 100px;">数据信息</span>
</div>
<!-- <div style="display: flex;line-height: 25px;">
<span style="width: 100px;">动作类型：</span> <el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div> -->
<!-- 表格信息 -->
<vxe-table :data="tableData" ref="xTable" border>
<vxe-column field="name" title="xpath"></vxe-column>
<vxe-column field="sex" title="content"></vxe-column>
<vxe-column title="操作" width="100">
<template #default="{ row }">
<!-- <vxe-button status="warning" content="临时删除" @click="removeRowEvent(row)"></vxe-button> -->
<vxe-button status="danger" content="删除" @click="deleteRowEvent(row)"
style="margin-right: 20px;width: 50px;"></vxe-button>
</template>
</vxe-column>
<!-- <vxe-column field="age" title="Age"></vxe-column> -->
</vxe-table>
</div>
</el-card>
</div>
</div>
</template>
<script>
import VXETable from 'vxe-table'
import draggable from 'vuedraggable'
export default {
name: 'App',
components: { draggable },
props: {},
data () {
return {
input: "",
dynamicTags: ['标签一', '标签二', '标签三','标签一', '标签二', '标签三','标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
tableData: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }],
drag: false,
}
},
created () { },
mounted () { },
watch: {},
computed: {},
methods: {
handleClose (tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput () {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm () {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
getTableData () {
const $table = this.$refs.xTable
const removeRecords = $table.getRemoveRecords()
// VXETable.modal.alert(removeRecords.length)
},
async deleteRowEvent (row) {
console.log(row)
this.tableData = this.tableData.filter(item => item.name !== row.name)
// const type = await VXETable.modal.confirm('您确定要删除该数据?')
// if (type !== 'confirm') {
// return
// }
// this.loading = true
},
//开始拖拽事件
onStart () {
this.drag = true;
},
//拖拽结束事件
onEnd () {
this.drag = false;
console.log(this.dynamicTags)
},
},
}
</script>
<style>
.el-card__body,
.el-main {
padding: 0px !important;
}
.el-divider--horizontal {
margin-top: 5px !important;
margin-bottom: 5px !important;
background-color: #409EFF !important;
}
.el-tag .el-tag__close {
color: #ffffff !important;
}
.el-tag {
background-color: #409EFF !important;
color: #ffffff !important;
}
.el-tag+.el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
.tooltips {
width: 500px;
min-height: 300px;
min-width: 500px;
min-height: 400px;
background-color: white;
position: fixed;
z-index: 2147483647;
z-index: 9999;
right: 30px;
bottom: 30px;
font-size: 13px !important;
font-weight: normal !important;
border: solid navy 2px;
border: solid #3384FF 3px;
border-radius: 10px;
-webkit-user-select: none;
/* 文字不可被选中 */
}
.tooldrag {
background-color: navy;
background-color: #3384FF;
width: 100%;
text-align: center;
font-size: 13px;
height: 26px !important;
padding-top: 8px !important;
color: white;
}
.realcontent {
......@@ -57,46 +267,53 @@
text-decoration: none;
margin-top: 2px !important;
font-size: 13px;
color: navy !important;
color: #3384FF !important;
cursor: pointer;
text-decoration: none !important;
}
.innercontent a:hover {
color: blue !important;
color: #3384FF !important;
}
.innercontent span {
font-size: 20px;
color: navy;
color: #3384FF;
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;
border: solid 1px #409EFF;
background-color: #409EFF;
color: #ffffff;
width: 100px;
height: 30px;
cursor: pointer;
margin-left: 15px !important;
/* margin-left: 15px !important; */
padding: 0 !important;
}
.tooltips input[type=text] {
display: block;
margin-top: 7px !important;
margin-top: 3px !important;
padding-left: 5px !important;
margin-bottom: 7px !important;
font-size: 15px;
border-radius: 5px;
border: solid 2px navy;
width: 204px;
height: 30px;
border: solid 1px #409EFF;
width: 160px;
height: 20px;
}
.el-input--small .el-input__inner {
width: 90px !important;
}
.el-select .el-input__inner {
width: 90px !important;
}
.tooltips select {
......@@ -106,13 +323,13 @@
margin-bottom: 7px !important;
font-size: 15px;
border-radius: 5px;
border: solid 2px navy;
border: solid 2px #3384FF;
width: 204px;
height: 30px;
}
.tooltips button:hover {
color: blue;
color: #3384FF;
}
......@@ -198,4 +415,26 @@
#closeButton:hover {
opacity: 1.0;
}
</style>
\ No newline at end of file
.el-select-dropdown {
z-index: 99999 !important;
}
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
padding: 2px 0 !important;
}
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
/*选中样式*/
.chosen {
border: solid 2px #3089dc !important;
}</style>
\ No newline at end of file
src/main.js
......@@ -4,8 +4,11 @@ import App from './App.vue'
import router from './router' // 引入定义好的router
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
Vue.use(ElementUI);
// import ToolKit from "./views/index.vue";
......@@ -110,52 +113,39 @@ function generateToolkit () {
}, 3000);
}
window.onload = function () {
let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
// window.onload = function () {
toolkit = document.createElement("div");
toolkit.classList = "tooltips"; //添加样式
toolkit.setAttribute("id", "wrapperToolkit");
let tooltips = false; //标记鼠标是否在提示框上
let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
//右键菜单屏蔽
document.oncontextmenu = () => false;
toolkit = document.createElement("div");
toolkit.classList = "tooltips"; //添加样式
toolkit.setAttribute("id", "wrapperToolkit");
let tooltips = false; //标记鼠标是否在提示框上
window.addEventListener('DOMContentLoaded', () => {
// Remove any existing beforeunload events
window.onbeforeunload = null;
//右键菜单屏蔽
document.oncontextmenu = () => false;
// Override the beforeunload event with a custom function
window.addEventListener('beforeunload', (event) => {
// Prevent the event's default action
event.preventDefault();
toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
// Remove the confirmation message
event.returnValue = '';
});
});
toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
document.body.append(toolkit);
console.log(document)
document.body.append(toolkit);
console.log(document)
$(".tooltips").html(`
$(".tooltips").html(`
<div id="app"></div>
`);
// global.app = new Vue(ToolKit);
new Vue({
// global.app = new Vue(ToolKit);
new Vue({
el: '#app',
router,
render: h => h(App)
})
})
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
// 在 DOMContentLoaded 事件触发后执行的代码
var body = document.body;
// 执行其他操作
});
generateToolkit();
}
});
generateToolkit();
// }
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