Skip to content

V
Vue-WebDriver
Commit c0d4f2bd by 郁子恒
Options

优化动作样式

parent b36c7aee
Showing with 137 additions and 95 deletions
src/App.vue
...@@ -10,45 +10,39 @@ ...@@ -10,45 +10,39 @@
</div> </div>
<div style="text-align: left;"> <div style="text-align: left;">
<!-- 任务信息 --> <!-- 任务信息 -->
<div style="display: flex;align-items: center;height: 25px;justify-content: space-between;margin-right: 5px;"> <div style="display: flex;align-items: center;height: 25px;justify-content: space-between;">
<div style="width: 65%;display: flex;flex-direction: column;text-align: left;"> <div style="width: 60%;display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;"> <span style="width: 90px;padding-left: 15px;font-size: 13px;">任务名称:</span>
<span style="width: 95px;padding-left: 5px;">任务名称:</span> <el-input style="padding-left: 5px;" v-model="taskName" placeholder="请输入内容"></el-input>
<el-input v-model="taskName" placeholder="请输入内容" style="height: 20px;"></el-input>
</div>
<div style="width: 100%;height: 25px;display: flex;align-items: center;padding-left: 10px;display: none;">
<span style="width: 95px; padding-left: 5px;">任务地址:</span>
<el-input v-model="taskAddress" placeholder="请输入内容" style="height: 20px;" disabled></el-input>
</div>
</div> </div>
<div style="display: flex; flex-direction: row; justify-content: space-around; width: 170px;"> <div style="width: 40%;display: flex; flex-direction: row;justify-content: flex-end;">
<el-button size="mini" style="width: 50px;height: 20px;">导入任务</el-button> <el-button size="mini" style="width: 50px;height: 20px;margin-right: 5px;">导入任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;" @click="exportJson">导出任务</el-button> <el-button size="mini" style="width: 50px;height: 20px;margin-right: 5px;" @click="exportJson">导出任务</el-button>
<el-button size="mini" style="width: 50px;height: 20px;">保存任务</el-button> <el-button size="mini" style="width: 50px;height: 20px;margin-right: 15px;">保存任务</el-button>
</div> </div>
</div> </div>
<el-divider></el-divider> <el-divider></el-divider>
<!-- 动作集合 --> <!-- 动作集合 -->
<div style="display: flex;justify-content: space-between;"> <div style="display: flex;justify-content: space-between;">
<div style="height: 25px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;"> <div style="width: 90%;;height: 25px;display: flex;justify-content: flex-start;align-items: center;">
<span>动作集合:</span> <span style="width: 63px;padding-left: 15px;font-size: 13px;">动作集合: </span>
<div class="scroll-container" @wheel="handleScroll" style="width: 325px;"> <div class="scroll-container" @wheel="handleScroll" style="width: 325px;padding-left: 5px;">
<div class="scroll-content" style="margin-left: 16px;"> <div class="scroll-content">
<span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in currentActionsParents" :key="item.tagId" :style="{ color: item == currentAction ? '#68C23A!important' : '#409EFF' }">{{ <span id="Breadcrumb" @click="onBreadcrumb(item)" v-for="item in currentActionsParents" :key="item.tagId" :style="{ color: item == currentAction ? '#68C23A!important' : '#409EFF' }">{{
item.Name item.Name
}}></span> }}></span>
</div> </div>
</div> </div>
</div> </div>
<div style="display:flex;align-items: center;margin-right: 7px;"> <div style="width: 10%;margin-right: 15px;display:flex;align-items: center;justify-content: flex-end;">
<el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction"> <el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction">
<img style="width: 12px;height: 12px;" src="./assets/add.svg"> <img style="width: 12px;height: 12px;" src="./assets/add.svg">
</el-button> </el-button>
</div> </div>
</div> </div>
<div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;height: 36px;"> <div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;min-height: 36px;">
<!-- 动作标签 --> <!-- 动作标签 -->
<div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 88%;"> <div style="margin-bottom: 5px;margin-right: 15px;white-space: wrap;display: flex;width: 100%;">
<draggable v-model="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd"> <draggable v-model="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
<transition-group> <transition-group>
<el-tag class="boxtags" v-for="(action, index) in currentAction.actions" @click="selectTag(action)" :style="{ backgroundColor: action == activedAction ? '#68C23A!important' : '#409EFF' }" :key="action.tagId"> <el-tag class="boxtags" v-for="(action, index) in currentAction.actions" @click="selectTag(action)" :style="{ backgroundColor: action == activedAction ? '#68C23A!important' : '#409EFF' }" :key="action.tagId">
...@@ -67,18 +61,22 @@ ...@@ -67,18 +61,22 @@
<el-divider></el-divider> <el-divider></el-divider>
<!-- 容器配置 --> <!-- 容器配置 -->
<div v-if="isShowAction"> <div v-if="isShowAction">
<div style="height: 35px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid rgb(165 165 165);"> <div style="height: 35px;width: 100%;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid rgb(165 165 165);">
<div style="width: 211px;display: flex;align-items: center;margin-left: 15px;"> <div style="width: 50%;height: 100%;display: flex;align-items: center;">
<span style="width: 90px;">动作名称:</span> <span style="width: 59px;padding-left: 15px;">动作名称:</span>
<el-input class="input-new-tag dongzuo" v-model="activedAction.Name" size="small" placeholder="请输入动作名称"> <div>
</el-input> <el-input class="input-new-tag dongzuo" v-model="activedAction.Name" size="small" placeholder="请输入动作名称">
</el-input>
</div>
</div> </div>
<div style="margin-right: 15px;"> <div style="width: 50%;height: 100%;padding-left: 10px;display: flex;align-items: center;justify-content: flex-start;">
<span style="width: 90px;">动作类型:</span> <span style="width: 65px;">动作类型:</span>
<el-select id="eventType" name="eventType" v-model="activedAction.Alias" placeholder="请选择类型" @change="handleChange" @visible-change="handleVisibleChange" ref="mySelect" filterable remote> <div>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <el-select id="eventType" name="eventType" v-model="activedAction.Alias" placeholder="请选择类型" @change="handleChange" @visible-change="handleVisibleChange" ref="mySelect" filterable remote>
</el-option> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-select> </el-option>
</el-select>
</div>
</div> </div>
</div> </div>
<div style="margin-left: 15px;margin-top: 10px;" v-if="activedAction.Alias == 'actions'"> <div style="margin-left: 15px;margin-top: 10px;" v-if="activedAction.Alias == 'actions'">
...@@ -120,9 +118,6 @@ export default { ...@@ -120,9 +118,6 @@ export default {
isShowAction: false, isShowAction: false,
widthResize: '', widthResize: '',
options: [{ options: [{
value: 'page.navigate',
label: '页面跳转'
}, {
value: 'el.click', value: 'el.click',
label: '点击' label: '点击'
}, { }, {
...@@ -135,17 +130,20 @@ export default { ...@@ -135,17 +130,20 @@ export default {
value: 'el.output', value: 'el.output',
label: '取值' label: '取值'
}, { }, {
value: 'actions',
label: '容器'
}, {
value: 'page.navigate',
label: '页面跳转'
}, {
value: 'page.javascipt', value: 'page.javascipt',
label: '脚本执行' label: '脚本执行'
}, { }, {
value: 'collectionTable', value: 'collectionTable',
label: '采集表' label: '采集表格'
}, { }, {
value: 'collectionForm', value: 'collectionForm',
label: '采集表单' label: '采集表单'
}, {
value: 'actions',
label: '容器'
}], }],
drag: false, drag: false,
tagId: 0, tagId: 0,
...@@ -419,6 +417,11 @@ export default { ...@@ -419,6 +417,11 @@ export default {
</script> </script>
<style> <style>
#realcontent {
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
/* 窗口整体样式 */ /* 窗口整体样式 */
.tooltips { .tooltips {
min-width: 460px; min-width: 460px;
...@@ -452,7 +455,7 @@ export default { ...@@ -452,7 +455,7 @@ export default {
/* 输入框样式 */ /* 输入框样式 */
.tooltips input[type=text] { .tooltips input[type=text] {
font-size: 13px; font-size: 13px;
width: 145px; width: 140px;
height: 20px; height: 20px;
} }
......
src/components/elOutput.vue
...@@ -2,19 +2,25 @@ ...@@ -2,19 +2,25 @@
<div class="elOutput"> <div class="elOutput">
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;"> <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button> <el-button size="small" class="button-new-tag" @click="selectElement">选择内容</el-button>
<el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect">取消选择</el-button> <el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect" v-if="outputState">取消选择</el-button>
</div> </div>
<!-- 表单区域 --> <!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig"> <el-form label-position="right" :model="actionConfig">
<el-form-item label="查找方式"> <!-- <el-form-item label="查找方式">
<el-input v-model="actionConfig.Target.Type" disabled></el-input> <el-input v-model="actionConfig.Target.Type" disabled></el-input>
</el-form-item> -->
<el-form-item>
<div style="display: flex;width: 100%;">
<span style="font-size: 13px;width: 85px;padding-left: 15px;">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容:</span>
<el-input v-model="actionConfig.Attributes.innerText" disabled placeholder="请选择内容"></el-input>
</div>
</el-form-item> </el-form-item>
<el-form-item label="内容"> <el-form-item>
<el-input v-model="actionConfig.Attributes.innerText" disabled></el-input> <div style="display: flex;width: 100%;">
</el-form-item> <span style="font-size: 13px;width: 85px;padding-left: 15px;">查询时间:</span>
<el-form-item label="查询时间"> <el-input v-model="actionConfig.Target.Timeout"></el-input>
<el-input v-model="actionConfig.Target.Timeout"></el-input> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -27,6 +33,7 @@ export default { ...@@ -27,6 +33,7 @@ export default {
props: ['activedAction'], props: ['activedAction'],
data () { data () {
return { return {
outputState: false,
elementInfos: {}, // 存储当前选中元素的信息 elementInfos: {}, // 存储当前选中元素的信息
actionConfig: { actionConfig: {
"Target": { "Target": {
...@@ -50,8 +57,6 @@ export default { ...@@ -50,8 +57,6 @@ export default {
} }
}, },
mounted () { mounted () {
// 在组件挂载后调用selectElement来添加事件监听器
this.selectElement();
}, },
beforeDestroy () { beforeDestroy () {
// 在组件销毁前移除事件监听器 // 在组件销毁前移除事件监听器
...@@ -63,7 +68,7 @@ export default { ...@@ -63,7 +68,7 @@ export default {
this.activedAction.Target = this.actionConfig.Target; this.activedAction.Target = this.actionConfig.Target;
this.activedAction.Attributes = this.actionConfig.Attributes; this.activedAction.Attributes = this.actionConfig.Attributes;
this.$emit('dataChanged', this.activedAction); this.$emit('dataChanged', this.activedAction);
console.log(this.activedAction) // console.log(this.activedAction)
}, },
deep: true deep: true
} }
...@@ -85,11 +90,13 @@ export default { ...@@ -85,11 +90,13 @@ export default {
this.elementInfos = elementInfo; this.elementInfos = elementInfo;
this.actionConfig.Target.Xpath = elementInfo.Xpath; this.actionConfig.Target.Xpath = elementInfo.Xpath;
this.actionConfig.Attributes.innerText = elementInfo.Text; this.actionConfig.Attributes.innerText = elementInfo.Text;
this.outputState = false;
// 移除事件监听器 // 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler); document.removeEventListener('contextmenu', this.contextMenuHandler);
}, },
// 选择元素按钮调用 // 选择元素按钮调用
selectElement () { selectElement () {
this.outputState = true;
// 添加事件监听器 // 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false); document.addEventListener('contextmenu', this.contextMenuHandler, false);
}, },
......
src/components/elclick.vue
...@@ -3,19 +3,25 @@ ...@@ -3,19 +3,25 @@
<div class="elClick"> <div class="elClick">
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;"> <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button> <el-button size="small" class="button-new-tag" @click="selectElement">选择点击内容</el-button>
<el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect">取消选择</el-button> <el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect" v-if="clickState">取消选择</el-button>
</div> </div>
<!-- 表单区域 --> <!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig"> <el-form label-position="left" :model="actionConfig">
<el-form-item label="查找方式"> <!-- <el-form-item label="查找方式">
<el-input v-model="actionConfig.Target.Type" disabled></el-input> <el-input v-model="actionConfig.Target.Type" disabled></el-input>
</el-form-item> -->
<el-form-item>
<div style="display: flex;width: 100%;">
<span style="font-size: 13px;width: 85px;padding-left: 15px;">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容:</span>
<el-input v-model="actionConfig.Target.InnerText" disabled placeholder="请选择点击内容"></el-input>
</div>
</el-form-item> </el-form-item>
<el-form-item label="内容"> <el-form-item>
<el-input v-model="actionConfig.Target.InnerText" disabled></el-input> <div style="display: flex;width: 100%;">
</el-form-item> <span style="font-size: 13px;width: 85px;padding-left: 15px;">查询时间:</span>
<el-form-item label="查询时间"> <el-input v-model="actionConfig.Target.Timeout"></el-input>
<el-input v-model="actionConfig.Target.Timeout"></el-input> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -28,6 +34,7 @@ export default { ...@@ -28,6 +34,7 @@ export default {
props: ['activedAction'], props: ['activedAction'],
data () { data () {
return { return {
clickState: false,
elementInfos: {}, // 存储当前选中元素的信息 elementInfos: {}, // 存储当前选中元素的信息
actionConfig: { actionConfig: {
"Target": { "Target": {
...@@ -56,7 +63,7 @@ export default { ...@@ -56,7 +63,7 @@ export default {
handler (newVal) { handler (newVal) {
this.activedAction.Target = this.actionConfig.Target; this.activedAction.Target = this.actionConfig.Target;
this.$emit('dataChanged', this.activedAction); this.$emit('dataChanged', this.activedAction);
console.log(this.activedAction) // console.log(this.activedAction)
}, },
deep: true deep: true
} }
...@@ -78,13 +85,14 @@ export default { ...@@ -78,13 +85,14 @@ export default {
this.elementInfos = elementInfo; this.elementInfos = elementInfo;
this.actionConfig.Target.Selector = elementInfo.Xpath; this.actionConfig.Target.Selector = elementInfo.Xpath;
this.actionConfig.Target.InnerText = elementInfo.Text; this.actionConfig.Target.InnerText = elementInfo.Text;
console.log(element.innerText); this.clickState = false;
// 移除事件监听器 // 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler); document.removeEventListener('contextmenu', this.contextMenuHandler);
}, },
// 选择元素按钮调用 // 选择元素按钮调用
selectElement () { selectElement () {
this.clickState = true;
// 添加事件监听器 // 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false); document.addEventListener('contextmenu', this.contextMenuHandler, false);
}, },
...@@ -122,7 +130,7 @@ export default { ...@@ -122,7 +130,7 @@ export default {
} }
.tooltips button { .tooltips button {
width: 60px !important; width: 70px !important;
height: 30px !important; height: 30px !important;
} }
</style> </style>
\ No newline at end of file
src/components/onInput.vue
...@@ -2,22 +2,31 @@ ...@@ -2,22 +2,31 @@
<div class="onInput"> <div class="onInput">
<!-- 操作按钮区域 --> <!-- 操作按钮区域 -->
<div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;"> <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
<el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button> <el-button size="small" class="button-new-tag" @click="selectElement">选择输入框</el-button>
<el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect">取消选择</el-button> <el-button size="small" style="margin-left: 10px !important;" class="button-new-tag" @click="cancelSelect" v-if="inputState">取消选择</el-button>
</div> </div>
<!-- 表单区域 --> <!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig"> <el-form label-position="right" :model="actionConfig">
<el-form-item label="查找方式"> <!-- <el-form-item label="查找方式">
<el-input v-model="actionConfig.Target.Type" disabled></el-input> <el-input v-model="actionConfig.Target.Type" disabled></el-input>
</el-form-item> -->
<el-form-item>
<div style="display: flex;width: 100%;">
<span style="font-size: 13px;width: 85px;padding-left: 15px;">动作状态:</span>
<el-input v-model="actionConfig.Target.tagName" disabled></el-input>
</div>
</el-form-item> </el-form-item>
<el-form-item label="当前标签"> <el-form-item>
<el-input v-model="actionConfig.Target.tagName" disabled></el-input> <div style="display: flex;width: 100%;">
<span style="font-size: 13px;width: 85px;padding-left: 15px;">输入内容:</span>
<el-input v-model="actionConfig.InputValue" placeholder="请输入内容"></el-input>
</div>
</el-form-item> </el-form-item>
<el-form-item label="文本内容"> <el-form-item>
<el-input v-model="actionConfig.InputValue"></el-input> <div style="display: flex;width: 100%;">
</el-form-item> <span style="font-size: 13px;width: 85px;padding-left: 15px;">查询时间:</span>
<el-form-item label="查询时间"> <el-input v-model="actionConfig.Target.Timeout"></el-input>
<el-input v-model="actionConfig.Target.Timeout"></el-input> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -30,18 +39,18 @@ export default { ...@@ -30,18 +39,18 @@ export default {
props: ['activedAction'], props: ['activedAction'],
data () { data () {
return { return {
inputState: false,
elementInfos: {}, // 存储当前选中元素的信息 elementInfos: {}, // 存储当前选中元素的信息
actionConfig: { actionConfig: {
"Target": { "Target": {
"Type": "xpath", "Type": "xpath",
"Selector": "", "Selector": "",
"Timeout": 5000, "Timeout": 5000,
"tagName": '' "tagName": '请选择输入框'
}, },
"InputValue": "",//输入的内容 "InputValue": "",//输入的内容
"Script": null, "Script": null,
}, },
selectDisabled: true // 控制选择按钮的禁用状态
} }
}, },
created () { created () {
...@@ -80,17 +89,26 @@ export default { ...@@ -80,17 +89,26 @@ export default {
Xpath: this.getElementXPath(element), Xpath: this.getElementXPath(element),
TagName: element.tagName TagName: element.tagName
}; };
console.log(elementInfo.TagName)
if (elementInfo.TagName != 'INPUT') {
this.$message.error("请选择输入框");
this.actionConfig.Target.tagName = '未选择输入框';
return; // 找到重复后退出函数
} else {
this.actionConfig.Target.tagName = '已选择输入框';
}
this.elementInfos = elementInfo; this.elementInfos = elementInfo;
console.log(event); console.log(event);
this.actionConfig.Target.Selector = elementInfo.Xpath; this.actionConfig.Target.Selector = elementInfo.Xpath;
this.actionConfig.Target.tagName = elementInfo.TagName;
this.selectDisabled = false; this.inputState = false;
// 移除事件监听器 // 移除事件监听器
document.removeEventListener('contextmenu', this.contextMenuHandler); document.removeEventListener('contextmenu', this.contextMenuHandler);
}, },
// 选择元素按钮调用 // 选择元素按钮调用
selectElement () { selectElement () {
this.inputState = true;
// 添加事件监听器 // 添加事件监听器
document.addEventListener('contextmenu', this.contextMenuHandler, false); document.addEventListener('contextmenu', this.contextMenuHandler, false);
}, },
......
src/components/pageJavascript.vue
<template> <template>
<div class="pageJavascript"> <div class="pageJavascript">
<!-- 表单区域 --> <!-- 表单区域 -->
<el-form label-position="right" label-width="120px" :model="actionConfig"> <el-form label-position="right" :model="actionConfig">
<el-form-item label="JavaScript脚本"> <el-form-item>
<el-input type="textarea" :rows="3" v-model="actionConfig.Script"></el-input> <div style="display: flex;width: 100%;">
<span style="font-size: 13px;width: 80px;padding-left: 15px;">JavaScript脚本输入:</span>
<el-input type="textarea" :rows="3" v-model="actionConfig.Script" placeholder="请输入JavaScript脚本内容"></el-input>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
......
src/components/pageNavigates.vue
<template> <template>
<!-- 页面导航组件的根元素 --> <!-- 页面导航组件的根元素 -->
<div class="pageNavigates"> <div class="pageNavigates">
<!-- 按钮区域 -->
<div style="width: 100%; text-align: right; display: flex; justify-content: space-between;margin-top: 10px;">
<!-- 获取当前页面地址的按钮 -->
<el-button size="small" class="button-new-tag" @click="getCurrentPageUrl" style="margin-left: 15px;">获取当前页面地址</el-button>
</div>
<!-- 表单元素，用于配置页面导航 --> <!-- 表单元素，用于配置页面导航 -->
<el-form style="margin-left: 4px;" label-position="right" label-width="80px" :model="actionConfig"> <el-form label-position="right" :model="actionConfig">
<!-- 表单项，用于输入页面地址 --> <!-- 表单项，用于输入页面地址 -->
<el-form-item> <el-form-item>
<div style="display: flex;"> <div style="display: flex;width: 100%;">
<span>页面地址:</span> <span style="font-size: 13px;width: 85px;padding-left: 15px;">页面地址:</span>
<!-- 输入框，双向绑定到 actionConfig.Url --> <!-- 输入框，双向绑定到 actionConfig.Url -->
<el-input v-model="actionConfig.Url"></el-input> <el-input v-model="actionConfig.Url" placeholder="请输入页面地址"></el-input>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 按钮区域 -->
<div style="width: 100%; text-align: right; display: flex; justify-content: space-between;">
<!-- 获取当前页面地址的按钮 -->
<el-button size="small" class="button-new-tag" @click="getCurrentPageUrl" style="margin-left: 15px;">获取当前页面地址</el-button>
</div>
</div> </div>
</template> </template>
<script> <script>
......
src/components/sysSleep.vue
...@@ -2,9 +2,12 @@ ...@@ -2,9 +2,12 @@
<!-- 点击菜单组件 --> <!-- 点击菜单组件 -->
<div class="sysSleep"> <div class="sysSleep">
<!-- 表单区域 --> <!-- 表单区域 -->
<el-form label-position="right" label-width="80px" :model="actionConfig"> <el-form label-position="right" :model="actionConfig">
<el-form-item label="等待时间"> <el-form-item>
<el-input v-model="actionConfig.PauseMilliseconds"></el-input> <div style="display: flex;width: 100%;">
<span style="font-size: 13px;width: 85px;padding-left: 15px;">等待时间:</span>
<el-input v-model="actionConfig.PauseMilliseconds" placeholder="请输入等待时间"></el-input>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -47,7 +50,6 @@ export default { ...@@ -47,7 +50,6 @@ export default {
<style scoped> <style scoped>
.el-form-item { .el-form-item {
margin-bottom: 0; margin-bottom: 0;
margin-left: 4px;
} }
.tooltips button { .tooltips button {
......
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