Skip to content

V
Vue-WebDriver
Commit 47687b56 by 高源
Options

界面样式调整

parent 7f474187
Showing with 800 additions and 224 deletions
.DS_Store
No preview for this file type
src/App.vue
...@@ -5,89 +5,129 @@ ...@@ -5,89 +5,129 @@
<div id="EasySpiderResizer" <div id="EasySpiderResizer"
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">
<img style="width: 20px;height: 20px;" src="./assets/logo.png">
<span style="padding-left: 3px;">K5 网页自动化工具</span>
</div>
<!-- 任务信息 --> <!-- 任务信息 -->
<div style="display: flex;"> <div style="display: flex;align-items: center;height: 60px;">
<div style="width: 100%;display: flex;"> <div style="width: 85%;display: flex;flex-direction: column;text-align: left;">
<div style="width: 48%;height: 25px;line-height: 25px;display: flex;padding-top: 5px;"> <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;">
<span style="width: 100px;padding-left: 5px;">任务名称：</span> <span style="width: 95px;padding-left: 5px;">任务名称：</span>
<el-input v-model="input" placeholder="请输入内容" style="height: 20px;"></el-input> <el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input>
</div> </div>
<div style="width: 48%;height: 25px;line-height: 25px;display: flex;padding-top: 5px;"> <div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;">
<span style="width: 100px;padding-left: 5px;">任务地址：</span> <span style="width: 95px; padding-left: 5px;">任务地址：</span>
<el-input v-model="input" placeholder="请输入内容" style="height: 20px;"></el-input> <el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
</div> </div>
</div> </div>
<div style="display: flex;flex-direction: column;">
<el-button size="mini" style="width: 60px;height: 25px;margin-bottom: 5px;margin-left: 10px;"
@click="submitForm">保存任务</el-button>
<el-button size="mini" style="width: 60px;height: 25px;" @click="showInput">新建动作</el-button>
</div>
</div> </div>
<el-divider></el-divider> <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;"> <div style="max-height: 102px;width: 490px;white-space: wrap;display: flex;margin-left: 10px;">
<draggable v-model="dynamicTags" chosenClass="chosen" forceFallback="true" group="people" animation="1000" <draggable v-model="dynamicTags" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
@start="onStart" @end="onEnd"> @start="onStart" @end="onEnd">
<transition-group> <transition-group>
<!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> --> <el-tag class="boxtags" :key="tag.tagId" v-for="tag in dynamicTags" closable
<el-tag class="boxtags" :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" :disable-transitions="false" @close="handleClose(tag)" @click="selectTag(tag)">
@close="handleClose(tag)"> <span style="margin-left: 3px;">{{ tag.actionName }}</span>
{{ tag }}
</el-tag> </el-tag>
</transition-group> </transition-group>
</draggable> </draggable>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
<!-- 卡片区域 --> <!-- 动作配置 -->
<el-card class="box-card" style="background-color: #FFF;"> <el-card class="box-card" v-if="inputVisible">
<div style="display: flex;line-height: 25px;justify-content: space-around;"> <div style="height: 35px;display: flex;justify-content: space-evenly;align-items: center;">
<span> <span>动作配置:</span>
动作配置 <div style="width: 211px;display: flex;align-items: center;">
</span> <span style="width: 90px;">动作名称:</span>
<div style="display: flex;line-height: 25px;margin-left: 20px;"> <!-- ref="saveTagInput" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" -->
<span style="width: 120px;">动作名称：</span> <el-input class="input-new-tag dongzuo" <el-input class="input-new-tag dongzuo" v-model="actionName" size="small" placeholder="请输入动作名称">
v-if="!inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
</el-input> </el-input>
</div> </div>
<div> <div style="margin-right: 5px;">
<span style="width: 100px;">动作类型：</span> <el-select v-model="value" placeholder="请选择"> <span style="width: 90px;">动作类型:</span>
<el-select id="eventType" name="eventType" v-model="actionType" placeholder="请选择类型">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div style="background-color: aliceblue;"> <!-- 点击动作 -->
<div style="display: flex;line-height: 25px;"> <div style="background-color: white;" v-if="actionType == 'elClick'">
<span style="width: 100px;">数据信息</span> <div style="height: 35px;margin-left: 15px;text-align: left;">
<el-button size="small" style="" class="button-new-tag" @click="selectElement">选择元素</el-button>
<span style="margin-left: 3px;">元素信息如下:</span>
</div> </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-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220">
<vxe-column field="name" title="xpath"></vxe-column> <vxe-column field="name" title="xpath"></vxe-column>
<vxe-column field="sex" title="content"></vxe-column> <vxe-column field="sex" title="content"></vxe-column>
<vxe-column title="操作" width="100"> <vxe-column title="操作" width="100">
<template #default="{ row }"> <template #default="{ row }">
<!-- <vxe-button status="warning" content="临时删除" @click="removeRowEvent(row)"></vxe-button> -->
<vxe-button status="danger" content="删除" @click="deleteRowEvent(row)" <vxe-button status="danger" content="删除" @click="deleteRowEvent(row)"
style="margin-right: 20px;width: 50px;"></vxe-button> style="margin-right: 20px;width: 50px;"></vxe-button>
</template> </template>
</vxe-column> </vxe-column>
<!-- <vxe-column field="age" title="Age"></vxe-column> -->
</vxe-table> </vxe-table>
</div>
</div>
<!-- 右击动作 -->
<div v-if="actionType == 'rightclick'">
右击
</div>
<!-- 提交动作 -->
<div v-if="actionType == 'submit'">
提交动作
</div>
<!-- 等待动作 -->
<div v-if="actionType == 'wait'">
等待动作
</div>
<!-- 输入动作 -->
<div v-if="actionType == 'input'">
输入动作
</div>
<!-- 选择动作 -->
<div v-if="actionType == 'select'">
选择动作
</div>
<!-- 鼠标移动 -->
<div v-if="actionType == 'mouseMove'">
鼠标移动
</div>
<!-- 脚本执行 -->
<div v-if="actionType == 'pageJavascipt'">
脚本执行
</div>
<!-- 循环点击 -->
<div v-if="actionType == 'loopClick'">
循环点击
</div>
<!-- 采集单元素 -->
<div v-if="actionType == 'collectSingleElements'">
采集单元素
</div>
<!-- 采集表 -->
<div v-if="actionType == 'collectionTable'">
采集表
</div>
<!-- 关闭页面 -->
<div v-if="actionType == 'pageClose'">
关闭页面
</div>
</el-card> </el-card>
</div>
</div>
</div> </div>
</template> </template>
...@@ -100,73 +140,114 @@ export default { ...@@ -100,73 +140,114 @@ export default {
props: {}, props: {},
data () { data () {
return { return {
input: "", taskName: '',
dynamicTags: ['标签一', '标签二', '标签三','标签一', '标签二', '标签三','标签一', '标签二', '标签三'], taskAddress: 'https://k5.kivii.org/storages/app/files/bundle.js',
actionName: '',
actionType: '',
dynamicTags: [],
inputVisible: false, inputVisible: false,
inputValue: '',
options: [{ options: [{
value: '选项1', value: 'elClick',
label: '黄金糕' label: '点击'
}, {
value: 'rightclick',
label: '右击'
}, {
value: 'submit',
label: '提交'
}, {
value: 'wait',
label: '等待'
}, {
value: 'input',
label: '输入'
}, {
value: 'select',
label: '选择'
}, { }, {
value: '选项2', value: 'mouseMove',
label: '双皮奶' label: '鼠标移动'
}, { }, {
value: '选项3', value: 'pageJavascipt',
label: '蚵仔煎' label: '脚本执行'
}, { }, {
value: '选项4', value: 'loopClick',
label: '龙须面' label: '循环点击'
}, { }, {
value: '选项5', value: 'collectSingleElements',
label: '北京烤鸭' label: '采集单元素'
}, {
value: 'collectionTable',
label: '采集表'
}, {
value: 'pageClose',
label: '关闭页面'
}], }],
value: '',
tableData: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, 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: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }], { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
{ id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
],
drag: false, drag: false,
allData: [],
tagId: 0,
dynamicTagObj: {},
} }
}, },
created () { }, created () { },
mounted () { }, mounted () {
watch: {}, this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
});
this.$watch('dynamicTagObj.actionName', (newVal, oldVal) => {
this.dynamicTagObj.actionName = newVal
});
},
watch: {
actionName (newVal, oldVal) {
// 在输入值发生变化时触发
if (newVal !== oldVal) {
console.log(newVal)
console.log(this.dynamicTags)
const targetObject = this.dynamicTags.find(obj => obj.tagId === this.dynamicTagObj.tagId);
if (targetObject) {
// 找到匹配的对象
targetObject.actionName = newVal; // 设置新的id值
this.dynamicTagObj.actionName = newVal
console.log(this.dynamicTags)
} else {
// 未找到匹配的对象
console.log("未找到匹配的对象");
}
}
// 可以在这里执行自定义逻辑
}
},
computed: {}, computed: {},
methods: { methods: {
selectTag (item) {
console.log(item)
this.dynamicTagObj = item
this.actionName = item.actionName
this.inputVisible = true
},
handleClose (tag) { handleClose (tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1); this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
}, this.inputVisible = false
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 () { getTableData () {
const $table = this.$refs.xTable const $table = this.$refs.xTable
const removeRecords = $table.getRemoveRecords() const removeRecords = $table.getRemoveRecords()
// VXETable.modal.alert(removeRecords.length)
}, },
async deleteRowEvent (row) { async deleteRowEvent (row) {
console.log(row) console.log(row)
this.tableData = this.tableData.filter(item => item.name !== row.name) this.tableData = this.tableData.filter(item => item.name !== row.name)
// const type = await VXETable.modal.confirm('您确定要删除该数据?')
// if (type !== 'confirm') {
// return
// }
// this.loading = true
}, },
//开始拖拽事件 //开始拖拽事件
onStart () { onStart () {
...@@ -177,264 +258,748 @@ export default { ...@@ -177,264 +258,748 @@ export default {
this.drag = false; this.drag = false;
console.log(this.dynamicTags) console.log(this.dynamicTags)
}, },
showInput () {
this.inputVisible = true;
this.dynamicTagObj = {}
this.actionName = "新建动作"
this.actionType = ""
let obj = {}
obj.taskName = this.taskName
obj.taskAddress = this.taskAddress
this.dynamicTagObj.actionName = '新建动作'
this.dynamicTagObj.actionType = this.actionType
this.dynamicTagObj.tagId = this.tagId++
console.log(this.actionType)
obj.dynamicTags = []
obj.dynamicTags.push(this.dynamicTagObj)
this.dynamicTags.push(this.dynamicTagObj)
this.allData.push(obj)
},
// 创建动作
submitForm (formName) {
console.log(this.actionName)
// let obj = {}
// let dynamicTag = {}
// obj.taskName = this.taskName
// obj.taskAddress = this.taskAddress
// dynamicTag.actionName = this.actionName
// dynamicTag.actionType = this.actionType
// dynamicTag.tagId = this.tagId++
// console.log(this.actionType)
// obj.dynamicTags = []
// obj.dynamicTags.push(dynamicTag)
// this.dynamicTags.push(dynamicTag)
// this.allData.push(obj)
console.log(this.allData)
this.inputVisible = true
},
btnRightClick () {
console.log("测试");
},
handleInputConfirm () {
let actionName = this.actionName;
if (actionName) {
this.dynamicTags.push(actionName);
}
this.inputVisible = true;
this.actionName = '';
},
selectElement () {
let _this = this
document.oncontextmenu = () => true;
document.oncontextmenu = function (e) {
e.preventDefault()
// console.log(e)
var targetElement = e.target;
console.log('右键点击发生在元素：', targetElement);
const xpath = _this.getElementXPath(targetElement);
console.log("XPath:", xpath);
const element = _this.getElementByXPath(xpath);
console.log(element)
_this.docClose()
if (element) {
// 执行你的操作，例如获取元素的文本内容或属性
console.log("元素文本内容:", element.textContent);
console.log("元素属性值:", element.getAttribute("yourAttribute"));
let obj = {}
obj.xpath = xpath;
obj.content = element.textContent;
// _this.data.push(obj);
// _this.addRow(obj)
} else {
console.log("未找到匹配的元素");
}
}
},
docClose () {
console.log('222')
document.oncontextmenu = () => false;
},
// // 根据xpath获取元素信息
getElementByXPath (xpath) {
const result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
const element = result.singleNodeValue;
return element;
},
// 获取元素xpath
getElementXPath (element) {
if (element && element.id) {
// 如果元素有ID，则使用ID作为XPath的一部分
return `id("${element.id}")`;
}
if (element === document.body) {
// 如果已经到达根元素（body），停止递归
return element.tagName;
}
let siblings = element.parentNode.children;
let index = 1;
for (let i = 0; i < siblings.length; i++) {
const sibling = siblings[i];
if (sibling === element) {
// 如果是目标元素，递归调用并添加位置信息
return `${this.getElementXPath(element.parentNode)}/${element.tagName}[${index}]`;
}
if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
// 如果是相同类型的兄弟节点，增加索引
index++;
}
}
},
btnRightClick () {
let _this = this
document.oncontextmenu = function (e) {
e.preventDefault()
// console.log(e)
var targetElement = e.target;
console.log('右键点击发生在元素：', targetElement);
const xpath = _this.getElementXPath(targetElement);
console.log("XPath:", xpath);
const element = _this.getElementByXPath(xpath);
console.log(element)
if (element) {
// 执行你的操作，例如获取元素的文本内容或属性
console.log("元素文本内容:", element.textContent);
console.log("元素属性值:", element.getAttribute("yourAttribute"));
let obj = {}
obj.xpath = xpath;
obj.content = element.textContent;
// _this.data.push(obj);
// _this.addRow(obj)
} else {
console.log("未找到匹配的元素");
}
}
},
}, },
} }
</script> </script>
<style> <style>
/* 拖拽窗口大小 */
.tooldrag {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #3384FF;
text-align: center;
font-size: 15px;
color: white;
}
.tooltips {
min-width: 500px;
min-height: 444px;
background-color: white;
position: fixed;
z-index: 9999;
right: 30px;
bottom: 30px;
font-size: 13px !important;
font-weight: normal !important;
border: solid #3384FF 3px;
border-radius: 10px;
-webkit-user-select: none;
/* 文字不可被选中 */
}
.el-card__body, .el-card__body,
.el-main { .el-main {
padding: 0px !important; padding: 0px !important;
}
.el-input__icon {
line-height: 0px !important;
} }
/* 分割线 */
.el-divider--horizontal { .el-divider--horizontal {
margin-top: 5px !important;
margin-bottom: 5px !important; margin-top: 0px !important;
margin-bottom: 0px !important;
background-color: #409EFF !important; background-color: #409EFF !important;
} }
.el-tag .el-tag__close { .el-tag .el-tag__close {
color: #ffffff !important; color: #ffffff !important;
} }
.el-tag { .el-tag {
background-color: #409EFF !important; background-color: #409EFF !important;
color: #ffffff !important; color: #ffffff !important;
padding: 0 !important;
margin-left: 5px;
margin-right: 5px;
margin-top: 1px;
margin-bottom: 1px;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
} }
.el-tag+.el-tag {
margin-left: 10px;
.el-tag .el-icon-close {
line-height: 17px !important;
right: 0px !important;
} }
/* .el-tag+.el-tag {
margin-left: 10px;
} */
.button-new-tag { .button-new-tag {
margin-left: 10px; margin-left: 10px;
height: 32px; height: 32px;
line-height: 30px; line-height: 30px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.input-new-tag { .input-new-tag {
width: 90px; width: 90px;
margin-left: 10px; margin-left: 10px;
vertical-align: bottom; vertical-align: bottom;
}
.tooltips {
min-width: 500px;
min-height: 400px;
background-color: white;
position: fixed;
z-index: 9999;
right: 30px;
bottom: 30px;
font-size: 13px !important;
font-weight: normal !important;
border: solid #3384FF 3px;
border-radius: 10px;
-webkit-user-select: none;
/* 文字不可被选中 */
} }
.tooldrag {
background-color: #3384FF;
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 { .innercontent {
text-align: left; text-align: left;
padding-top: 5px !important; padding-top: 5px !important;
padding-left: 12px !important; padding-left: 12px !important;
} }
.innercontent a { .innercontent a {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
margin-top: 2px !important; margin-top: 2px !important;
font-size: 13px; font-size: 13px;
color: #3384FF !important; color: #3384FF !important;
cursor: pointer; cursor: pointer;
text-decoration: none !important; text-decoration: none !important;
} }
.innercontent a:hover { .innercontent a:hover {
color: #3384FF !important; color: #3384FF !important;
} }
.innercontent span { .innercontent span {
font-size: 20px; font-size: 20px;
color: #3384FF; color: #3384FF;
line-height: normal; line-height: normal;
padding-left: 5px !important; padding-left: 5px !important;
} }
.tooltips button { .tooltips button {
font-size: 13px; font-size: 13px;
border-radius: 5px; border-radius: 5px;
border: solid 1px #409EFF; border: solid 1px #409EFF;
background-color: #409EFF; background-color: #409EFF;
color: #ffffff; 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;
margin-top: 3px !important; /* display: block; */
padding-left: 5px !important;
margin-bottom: 7px !important; /* margin-top: 3px !important; */
font-size: 15px;
border-radius: 5px; /* padding-left: 5px !important; */
border: solid 1px #409EFF;
width: 160px; /* margin-bottom: 7px !important; */
font-size: 13px;
/* border-radius: 5px; */
/* border: solid 1px #DCDFE6; */
width: 190px;
height: 20px; height: 20px;
} }
.el-input--small .el-input__inner { .el-input--small .el-input__inner {
width: 90px !important;
width: 130px !important;
} }
.el-select .el-input__inner { .el-select .el-input__inner {
width: 90px !important;
width: 110px !important;
} }
.tooltips select { .tooltips select {
display: block; display: block;
margin-top: 7px !important; margin-top: 7px !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 #3384FF; border: solid 2px #3384FF;
width: 204px; width: 204px;
height: 30px; height: 30px;
} }
.tooltips button:hover { .tooltips button:hover {
color: #3384FF; color: #3384FF;
} }
/* 下面用来对冻结表格首行元素和固定表格宽度和高度设定样式 */ /* 下面用来对冻结表格首行元素和固定表格宽度和高度设定样式 */
.toolkitcontain { .toolkitcontain {
border: 1px solid #cdd !important; border: 1px solid #cdd !important;
/*width: 280px !important;*/ /*width: 280px !important;*/
/* 上面的宽度设定很重要 */ /* 上面的宽度设定很重要 */
height: 150px; height: 150px;
overflow: auto; overflow: auto;
margin-top: 10px !important; margin-top: 10px !important;
position: relative; position: relative;
} }
.toolkitcontain table { .toolkitcontain table {
table-layout: fixed; table-layout: fixed;
border-spacing: 0 !important; border-spacing: 0 !important;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
margin-top: 0px !important; margin-top: 0px !important;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
} }
.toolkitcontain th, .toolkitcontain th,
.toolkitcontain td, .toolkitcontain td,
.toolkitcontain tr { .toolkitcontain tr {
border: 1px solid rgb(78, 78, 78) !important; border: 1px solid rgb(78, 78, 78) !important;
height: 25px !important; height: 25px !important;
width: 100px !important; width: 100px !important;
text-align: center !important; text-align: center !important;
font-weight: normal !important; font-weight: normal !important;
overflow: hidden !important; overflow: hidden !important;
font-size: 11px !important; font-size: 11px !important;
padding-left: 10px !important; padding-left: 10px !important;
padding-right: 10px !important; padding-right: 10px !important;
padding-top: 0px !important; padding-top: 0px !important;
padding-bottom: 0px !important; padding-bottom: 0px !important;
vertical-align: middle !important; vertical-align: middle !important;
white-space: nowrap; white-space: nowrap;
} }
.toolkitcontain th span { .toolkitcontain th span {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
/*position: absolute;*/ /*position: absolute;*/
/*position: ;*/ /*position: ;*/
margin-right: 10px; margin-right: 10px;
vertical-align: text-bottom !important; vertical-align: text-bottom !important;
} }
.toolkitcontain th div { .toolkitcontain th div {
display: inline-block !important; display: inline-block !important;
overflow: hidden !important; overflow: hidden !important;
max-width: 90% !important; max-width: 90% !important;
} }
.toolkitcontain .toolkittb2 { .toolkitcontain .toolkittb2 {
position: sticky; position: sticky;
top: 0px; top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
background-color: azure; background-color: azure;
z-index: 1000; z-index: 1000;
} }
.toolkitcontain .toolkittb4 { .toolkitcontain .toolkittb4 {
position: absolute; position: absolute;
} }
#closeButton { #closeButton {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
opacity: 0.05; opacity: 0.05;
} }
#closeButton:hover { #closeButton:hover {
opacity: 1.0; opacity: 1.0;
} }
.el-select-dropdown { .el-select-dropdown {
z-index: 99999 !important; z-index: 99999 !important;
} }
.vxe-table--render-default .vxe-body--column:not(.col--ellipsis), .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-footer--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) { .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
padding: 2px 0 !important; padding: 2px 0 !important;
} }
.item { .item {
padding: 6px; padding: 6px;
background-color: #fdfdfd; background-color: #fdfdfd;
border: solid 1px #eee; border: solid 1px #eee;
margin-bottom: 10px; margin-bottom: 10px;
cursor: move; cursor: move;
} }
/*选中样式*/ /*选中样式*/
.chosen { .chosen {
border: solid 2px #3089dc !important; border: solid 2px #3089dc !important;
}</style>
\ No newline at end of file }
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
background-color: #FFFFFF;
}
/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
background-color: #bfbfbf;
border-radius: 5px;
border: 1px solid #F1F1F1;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
background-color: #A8A8A8;
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
background-color: #787878;
}
/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
background-color: #FFFFFF;
}
</style>
src/main.js
...@@ -131,11 +131,11 @@ document.body.append(toolkit); ...@@ -131,11 +131,11 @@ document.body.append(toolkit);
console.log(document) console.log(document)
$(".tooltips").html(` $(".tooltips").html(`
<div id="app"></div> <div id="k5WebDriver"></div>
`); `);
// global.app = new Vue(ToolKit); // global.app = new Vue(ToolKit);
new Vue({ new Vue({
el: '#app', el: '#k5WebDriver',
router, router,
render: h => h(App) render: h => h(App)
}) })
......
webpack.config.js
let path = require('path'); let path = require('path');
let webpack = require('webpack'); let webpack = require('webpack');
const {VueLoaderPlugin} = require('vue-loader') const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = { module.exports = {
/** /**
* mode的取值有以下两个，默认是development * mode的取值有以下两个，默认是development
* 1.development 开发环境 * 1.development 开发环境
不会对打包生成的文件进行代码压缩和性能优化 不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合在开发阶段使用 打包速度快，适合在开发阶段使用
2.production 2.production
生成环境 生成环境
会对打包生成的文件进行代码压缩和性能优化 会对打包生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用 打包速度很慢，仅适合在项目发布阶段使用
*/ */
mode: 'development', mode: 'development',
entry: './src/main.js', // 入口： 默认是./src/index.html entry: './src/main.js', // 入口： 默认是./src/index.html
// 输出 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。 // 输出 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
output: { output: {
path: path.join(__dirname, 'dist'), // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它 path: path.join(__dirname, 'dist'), // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
filename: "bundle.js" // 默认是 ./dist/main.js filename: "bundle.js" // 默认是 ./dist/main.js
}, },
module: { module: {
// ... 其它规则 // ... 其它规则
rules: [ rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
{ {
loader: 'style-loader' test: /\.vue$/,
}, { loader: 'vue-loader'
loader: 'css-loader' },
} {
] test: /\.css$/,
}, use: [
{ {
test: /\.less$/i, loader: 'style-loader'
use: [ }, {
{ loader: 'css-loader'
loader: 'style-loader', }
}, ]
{ },
loader: 'css-loader', {
}, test: /\.less$/i,
{ use: [
loader: 'less-loader', {
options: { loader: 'style-loader',
lessOptions: { },
strictMath: true, {
}, 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: 2097152,
esModule: false, // 关闭es6模块化解析
//[hash:7]取图片的hash的前7位 [ext]取文件原来扩展名
// name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
],
}, },
}, {
], test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
}, use: [
{ {
test: /\.js$/, loader: 'url-loader',
loader: 'babel-loader', options: {
exclude: /node_modules/ name: 'fonts/[name].[hash:8].[ext]',
}, limit: 2097152,
{ },
test: /\.(png|jpg|gif)$/i, },
use: [ ],
{ },
loader: 'url-loader', ]
options: { },
limit: 8192, devServer: {
esModule: false, // 关闭es6模块化解析 hot: true, // 启用 webpack 的 热模块替换 特性
//[hash:7]取图片的hash的前7位 [ext]取文件原来扩展名 open: true,//初次打包完成后，自动打开浏览器
// name: utils.assetsPath('img/[name].[hash:7].[ext]') 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 绝对不能被用在生产环境)
] ]
},
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