起点终点导航样式

screen-demo/src/views/templateInstance.vue

@@ -69,12 +69,12 @@
           filterable
       ></el-cascader>
       <div class="input-container">
-        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
-          <el-button slot="append" icon="el-icon-search" @click="setValue"></el-button>
+        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" @focus="open=true">
+          <el-button slot="append" icon="el-icon-search" @click="setValue" ></el-button>
         </el-input>
       </div>
-      <div  class="router-wraps" style="top: calc(100% + 2px); margin-top: 4px; left: 117px;">
-        <div style="width: 90%"><!---->
+      <div  class="router-wraps" v-if="open" style="top: calc(100% + 2px); margin-top: 4px; left: 117px;">
+          <div style="width: 90%"><!---->
           <el-input placeholder="请输入起点" v-model="start">
           </el-input><el-input placeholder="请输入终点" v-model="end">
           </el-input>
@@ -96,6 +96,7 @@
             </el-dropdown-menu>
           </el-dropdown>
           <el-button  icon="el-icon-search" @click="loadFind"></el-button>
+          <el-button  icon="el-icon-close" @click="open=false"></el-button>
       </div>
     </div>
     <div class="table-container3">
@@ -194,7 +195,7 @@ export default {
   },
   data() {
     return {
-      dropdownVisible: false,
+      open: false,
       input3:'',
       start:'',
       end:'',