优化界面样式，实现下拉列表失去焦点收起

src/App.vue

@@ -46,7 +46,7 @@
                     </el-button>
                 </div>
             </div>
-            <div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;">
+            <div style="display: flex;align-items: flex-start;justify-content: space-between;width: 460px;height: 36px;">
                 <!-- 动作标签 -->
                 <div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 88%;">
                     <draggable v-model="currentAction.actions" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">

src/components/collectionTable.vue

 <template>
     <div class="collectionTable">
-        <div style="display: flex;height: 40px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
+        <div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
             <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button>
             <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
-            <span style="margin-left: 80px;font-size: 15px;" v-if="isSelectTable">表名:</span>
+            <div style="display: flex;">
+                <span style="margin-left: 45px;font-size: 15px;" v-if="isSelectTable">表名:</span>
                 <vxe-input style="margin-left: 10px;" v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
             </div>
+            <el-button style="padding-right: 15px;" size="small" class="button-new-tag" @click="getTable">获取表格信息</el-button>
+        </div>
         <!-- 全部表格信息 -->
-        <div style="overflow: auto;" :style="{ width: widthResize + 'px' }">
+        <div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }">
             <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
                 <vxe-column field="" title="列名" min-width="150">
                     <template v-slot="{ row }">
@@ -46,7 +49,7 @@
                 <vxe-table-column show-overflow="ellipsis" v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>
             </vxe-table>
         </div>
-        <el-button size="small" class="button-new-tag" @click="getTable" style="position: absolute;bottom: 10px;right: 15px;">获取表格信息</el-button>
+
     </div>
 </template>
 
@@ -87,7 +90,6 @@ export default {
     watch: {},
     computed: {},
     methods: {
-
         getTable () {
             let _this = this
             _this.table = new table()

src/components/elOutput.vue

@@ -17,10 +17,6 @@
         <el-input v-model="actionConfig.Target.Timeout"></el-input>
       </el-form-item>
     </el-form>
-    <!-- 提交按钮 -->
-    <div style="width: 100%; text-align: right;">
-      <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
-    </div>
   </div>
 </template>
 
@@ -61,17 +57,19 @@ export default {
     // 在组件销毁前移除事件监听器
     document.removeEventListener('contextmenu', this.contextMenuHandler);
   },
-  watch: {},
-  computed: {},
-  methods: {
-    // 提交表单信息
-    submit () {
-      console.log(this.actionConfig);
-      // 防止父级改变，子级未改变重新赋值
+  watch: {
+    actionConfig: {
+      handler (newVal) {
         this.activedAction.Target = this.actionConfig.Target;
         this.activedAction.Attributes = this.actionConfig.Attributes;
         this.$emit('dataChanged', this.activedAction);
+        console.log(this.activedAction)
       },
+      deep: true
+    }
+  },
+  computed: {},
+  methods: {
     // 获取页面元素方法
     contextMenuHandler (event) {
       event.preventDefault(); // 阻止默认的右击菜单

src/components/elclick.vue

@@ -18,8 +18,6 @@
                 <el-input v-model="actionConfig.Target.Timeout"></el-input>
             </el-form-item>
         </el-form>
-        <!-- 提交按钮 -->
-        <el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
     </div>
 </template>
 
@@ -53,17 +51,18 @@ export default {
         // 在组件销毁前移除事件监听器
         document.removeEventListener('contextmenu', this.contextMenuHandler);
     },
-    watch: {},
-    computed: {},
-    methods: {
-        // 提交表单信息
-        submit () {
-            console.log(this.actionConfig);
-            // 防止父级改变，子级未改变重新赋值
+    watch: {
+        actionConfig: {
+            handler (newVal) {
                 this.activedAction.Target = this.actionConfig.Target;
                 this.$emit('dataChanged', this.activedAction);
+                console.log(this.activedAction)
             },
-
+            deep: true
+        }
+    },
+    computed: {},
+    methods: {
         // 获取页面元素方法
         contextMenuHandler (event) {
             event.preventDefault(); // 阻止默认的右击菜单

src/components/onInput.vue

@@ -20,10 +20,6 @@
         <el-input v-model="actionConfig.Target.Timeout"></el-input>
       </el-form-item>
     </el-form>
-    <!-- 提交按钮 -->
-    <div style="width: 100%; text-align: right;">
-      <el-button size="small" class="button-new-tag" @click="submit" style="margin-right: 5px;">提交信息</el-button>
-    </div>
   </div>
 </template>
 
@@ -44,8 +40,6 @@ export default {
         },
         "InputValue": "",//输入的内容
         "Script": null,
-        "Name": this.actionName,
-        "Alias": this.actionType
       },
       selectDisabled: true // 控制选择按钮的禁用状态
     }
@@ -60,18 +54,20 @@ export default {
     }
   },
   mounted () { },
-  watch: {},
-  computed: {},
-  methods: {
-    // 提交表单信息
-    submit () {
-      console.log(this.actionConfig);
-      // 防止父级改变，子级未改变重新赋值
+  watch: {
+    actionConfig: {
+      handler (newVal) {
         this.activedAction.Target = this.actionConfig.Target;
         this.activedAction.InputValue = this.actionConfig.InputValue;
+        this.activedAction.Script = this.actionConfig.Script;
         this.$emit('dataChanged', this.activedAction);
+        console.log(this.activedAction)
       },
-
+      deep: true
+    }
+  },
+  computed: {},
+  methods: {
     // 获取页面元素方法
     contextMenuHandler (event) {
       event.preventDefault(); // 阻止默认的右击菜单

src/components/pageJavascript.vue

@@ -6,8 +6,6 @@
         <el-input type="textarea" :rows="3" v-model="actionConfig.Script"></el-input>
       </el-form-item>
     </el-form>
-    <!-- 提交按钮 -->
-    <el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
   </div>
 </template>
 
@@ -18,7 +16,6 @@ export default {
   props: ['activedAction'],
   data () {
     return {
-      elementInfos: {}, // 存储当前选中元素的信息
       actionConfig: {
         "Script": "",
       },
@@ -31,17 +28,18 @@ export default {
     }
   },
   mounted () { },
-  watch: {},
-  computed: {},
-  methods: {
-    // 提交表单信息
-    submit () {
-      console.log(this.actionConfig);
-      // 防止父级改变，子级未改变重新赋值
+  watch: {
+    actionConfig: {
+      handler (newVal) {
         this.activedAction.Script = this.actionConfig.Script;
         this.$emit('dataChanged', this.activedAction);
+        console.log(this.activedAction)
       },
+      deep: true
+    }
   },
+  computed: {},
+  methods: {},
 };
 </script>
 

src/components/pageNavigates.vue

@@ -14,8 +14,6 @@
             <!-- 获取当前页面地址的按钮 -->
             <el-button size="small" class="button-new-tag" @click="getCurrentPageUrl" style="margin-left: 15px;">获取当前页面地址</el-button>
         </div>
-        <!-- 提交信息的按钮 -->
-        <el-button size="small" class="button-new-tag" @click="submit" style="position: absolute;bottom: 10px;right: 15px;">提交信息</el-button>
     </div>
 </template>
 <script>
@@ -38,16 +36,18 @@ export default {
         }
     },
     mounted () { },
-    watch: {},
-    computed: {},
-    methods: {
-        // 提交表单信息的方法
-        submit () {
-            console.log(this.actionConfig);
-            // 防止父级改变，子级未改变重新赋值
+    watch: {
+        actionConfig: {
+            handler (newVal) {
                 this.activedAction.Url = this.actionConfig.Url;
                 this.$emit('dataChanged', this.activedAction);
+                console.log(this.activedAction)
             },
+            deep: true
+        }
+    },
+    computed: {},
+    methods: {
         // 获取当前页面地址的方法
         getCurrentPageUrl (event) {
             // 使用window.location.href获取当前页面地址

src/components/sysSleep.vue

@@ -7,10 +7,6 @@
         <el-input v-model="actionConfig.PauseMilliseconds"></el-input>
       </el-form-item>
     </el-form>
-    <!-- 提交按钮 -->
-    <div style="width: 100%; text-align: right;">
-      <el-button size="small" class="button-new-tag" @click="submit" style="margin-right:15px;">提交信息</el-button>
-    </div>
   </div>
 </template>
 
@@ -33,17 +29,18 @@ export default {
     }
   },
   mounted () { },
-  watch: {},
-  computed: {},
-  methods: {
-    // 提交表单信息
-    submit () {
-      console.log(this.actionConfig);
-      // 防止父级改变，子级未改变重新赋值
+  watch: {
+    actionConfig: {
+      handler (newVal) {
         this.activedAction.PauseMilliseconds = this.actionConfig.PauseMilliseconds;
         this.$emit('dataChanged', this.activedAction);
+        console.log(this.activedAction)
       },
+      deep: true
+    }
   },
+  computed: {},
+  methods: {},
 };
 </script>