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 @@ ...@@ -2483,6 +2483,11 @@
"entities": "^2.0.0" "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": { "domelementtype": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz", "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
...@@ -4548,6 +4553,11 @@ ...@@ -4548,6 +4553,11 @@
"websocket-driver": "^0.7.4" "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": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
...@@ -4916,6 +4926,23 @@ ...@@ -4916,6 +4926,23 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true "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": { "watchpack": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz", "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
...@@ -5190,6 +5217,11 @@ ...@@ -5190,6 +5217,11 @@
"integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==", "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
"dev": true "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": { "yallist": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz", "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
......
package.json
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"vue": "^2.7.14", "vue": "^2.5.2",
"vue-loader": "^15.9.8", "vue-loader": "^15.9.8",
"vue-template-compiler": "^2.7.14", "vue-template-compiler": "^2.7.14",
"webpack": "^5.75.0", "webpack": "^5.75.0",
...@@ -28,11 +28,13 @@ ...@@ -28,11 +28,13 @@
"webpack-dev-server": "^4.11.1" "webpack-dev-server": "^4.11.1"
}, },
"dependencies": { "dependencies": {
"element-ui": "^2.15.14", "element-ui": "^2.5.4",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"less": "^3.9.0", "less": "^3.9.0",
"less-loader": "^4.1.0", "less-loader": "^4.1.0",
"url-loader": "^4.1.1", "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 @@ ...@@ -6,35 +6,245 @@
style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;"> </div> style="width: 10px; height: 10px; position: absolute; left: 0; top: 0; cursor: nw-resize;"> </div>
<div> <div>
<div class="tooldrag" style="width: 100%;">K5 网页自动化工具</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>
</div> </div>
</template> </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> <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 { .tooltips {
width: 500px; min-width: 500px;
min-height: 300px; min-height: 400px;
background-color: white; background-color: white;
position: fixed; position: fixed;
z-index: 2147483647; z-index: 9999;
right: 30px; right: 30px;
bottom: 30px; bottom: 30px;
font-size: 13px !important; font-size: 13px !important;
font-weight: normal !important; font-weight: normal !important;
border: solid navy 2px; border: solid #3384FF 3px;
border-radius: 10px;
-webkit-user-select: none; -webkit-user-select: none;
/* 文字不可被选中 */ /* 文字不可被选中 */
} }
.tooldrag { .tooldrag {
background-color: navy; background-color: #3384FF;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
height: 26px !important; height: 26px !important;
padding-top: 8px !important; padding-top: 8px !important;
color: white; color: white;
} }
.realcontent { .realcontent {
...@@ -57,46 +267,53 @@ ...@@ -57,46 +267,53 @@
text-decoration: none; text-decoration: none;
margin-top: 2px !important; margin-top: 2px !important;
font-size: 13px; font-size: 13px;
color: navy !important; color: #3384FF !important;
cursor: pointer; cursor: pointer;
text-decoration: none !important; text-decoration: none !important;
} }
.innercontent a:hover { .innercontent a:hover {
color: blue !important; color: #3384FF !important;
} }
.innercontent span { .innercontent span {
font-size: 20px; font-size: 20px;
color: navy; color: #3384FF;
line-height: normal; line-height: normal;
padding-left: 5px !important; padding-left: 5px !important;
} }
.tooltips button { .tooltips button {
margin-top: 7px !important;
font-size: 13px; font-size: 13px;
border-radius: 5px; border-radius: 5px;
border: solid 2px navy; border: solid 1px #409EFF;
background-color: white; background-color: #409EFF;
color: navy; color: #ffffff;
width: 100px; width: 100px;
height: 30px; height: 30px;
cursor: pointer; cursor: pointer;
margin-left: 15px !important; /* margin-left: 15px !important; */
padding: 0 !important; padding: 0 !important;
} }
.tooltips input[type=text] { .tooltips input[type=text] {
display: block; display: block;
margin-top: 7px !important; margin-top: 3px !important;
padding-left: 5px !important; padding-left: 5px !important;
margin-bottom: 7px !important; margin-bottom: 7px !important;
font-size: 15px; font-size: 15px;
border-radius: 5px; border-radius: 5px;
border: solid 2px navy; border: solid 1px #409EFF;
width: 204px; width: 160px;
height: 30px; height: 20px;
}
.el-input--small .el-input__inner {
width: 90px !important;
}
.el-select .el-input__inner {
width: 90px !important;
} }
.tooltips select { .tooltips select {
...@@ -106,13 +323,13 @@ ...@@ -106,13 +323,13 @@
margin-bottom: 7px !important; margin-bottom: 7px !important;
font-size: 15px; font-size: 15px;
border-radius: 5px; border-radius: 5px;
border: solid 2px navy; border: solid 2px #3384FF;
width: 204px; width: 204px;
height: 30px; height: 30px;
} }
.tooltips button:hover { .tooltips button:hover {
color: blue; color: #3384FF;
} }
...@@ -198,4 +415,26 @@ ...@@ -198,4 +415,26 @@
#closeButton:hover { #closeButton:hover {
opacity: 1.0; 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' ...@@ -4,8 +4,11 @@ import App from './App.vue'
import router from './router' // 引入定义好的router import router from './router' // 引入定义好的router
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; 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); Vue.use(ElementUI);
// import ToolKit from "./views/index.vue"; // import ToolKit from "./views/index.vue";
...@@ -110,52 +113,39 @@ function generateToolkit () { ...@@ -110,52 +113,39 @@ function generateToolkit () {
}, 3000); }, 3000);
} }
window.onload = function () { // window.onload = function () {
let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
toolkit = document.createElement("div"); let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
toolkit.classList = "tooltips"; //添加样式
toolkit.setAttribute("id", "wrapperToolkit");
let tooltips = false; //标记鼠标是否在提示框上
//右键菜单屏蔽 toolkit = document.createElement("div");
document.oncontextmenu = () => false; toolkit.classList = "tooltips"; //添加样式
toolkit.setAttribute("id", "wrapperToolkit");
let tooltips = false; //标记鼠标是否在提示框上
window.addEventListener('DOMContentLoaded', () => { //右键菜单屏蔽
// Remove any existing beforeunload events document.oncontextmenu = () => false;
window.onbeforeunload = null;
// Override the beforeunload event with a custom function toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
window.addEventListener('beforeunload', (event) => {
// Prevent the event's default action
event.preventDefault();
// Remove the confirmation message document.body.append(toolkit);
event.returnValue = ''; console.log(document)
});
});
toolkit.addEventListener("mousedown", function (e) { e.stopPropagation(); }); //重新定义toolkit里的点击事件
document.body.append(toolkit); $(".tooltips").html(`
console.log(document)
$(".tooltips").html(`
<div id="app"></div> <div id="app"></div>
`); `);
// global.app = new Vue(ToolKit); // global.app = new Vue(ToolKit);
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,
render: h => h(App) render: h => h(App)
}) })
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
// 在 DOMContentLoaded 事件触发后执行的代码 // 在 DOMContentLoaded 事件触发后执行的代码
var body = document.body; 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