<!-- * @Author: your name * @Date: 2022-01-26 10:52:10 * @LastEditTime: 2022-02-17 10:11:35 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /test/hello-world/src/components/PipeColor.vue --> <template> <div> <div class="pipePressure" :style="{ pointerEvents: dynamicPointerEvents }"> <div class="container" id="div1"> <div class="searchbar1"> <form> <table> <li v-for="data in newDatalist" :key="data.id" @click="goPage(data)"> {{data.pipeName}} </li> </table> </form> </div> </div> <div class="input-group"> <input class="input-field" type="text" v-model="inputText" placeholder="请输入管道名称..."> <button class="close" @click="handleClick">×</button> </div> </div> </div> </template> <script> import { getPipeForSelect } from "@/api/bigWindow/getDevice"; export default { data(){ return{ downIcon: true, inputText:"", datalist:[], //原始数据 newDatalist:[], rowsToShow: 3, // 默认显示的行数 maxRows: 6, // 最多显示的行数 dynamicPointerEvents: 'none', } }, created(){ this.fetchData(); }, methods: { fetchData(){ getPipeForSelect().then((res) => { if (res.data){ this.datalist = res.data } }) }, goPage:function(data){ var path = data.path.replaceAll("[[","").replaceAll("]]","").replaceAll("],["," "); var id = data.pipeId; let arrArea = path.split(" ") let centerLength = null; if (arrArea.length % 2 == 0) { centerLength = arrArea.length / 2; } else { centerLength = (arrArea.length + 1) /2; } if (centerLength != null) { this.$emit('transmit', arrArea[centerLength],id) } else { alert("数据异常") } }, handleClick(){ this.newDatalist=[]; this.inputText = ""; this.$emit('closeMediumPressureLine'); } }, watch:{//监听输入框的变化 inputText:function(newText){ this.dynamicPointerEvents = newText ? 'auto' : 'none'; if(newText.length>0){ this.newDatalist.splice(0,this.newDatalist.length);//清空之前数组 for(let value of this.datalist){ if(value.pipeName.indexOf(newText)>-1){// 可以直接用indexOf(属性) this.newDatalist.push(value);//一定要加this } } }else{ this.newDatalist=[];//输入框为空,等于原始数据 } } }, }; </script> <style lang="scss" scoped> .pipePressure { width: 210px; height: auto; position: fixed; color: rgb(205, 219, 228); left: 660px; bottom: 50px; padding: 5px; } form { position: relative; width: 300px; margin: 0 auto; } input { width: 100%; height: 42px; padding-left: 13px; } .pipePressure input { border: 2px solid #7BA7AB; border-radius: 5px; background: #f9f0da1f; color: #9E9C9C; } li{ text-align: left; width:100%; background: #f9f0da0c; list-style: none; } .container { height: 150px; overflow-y: auto; overflow-x: hidden; display:flex; flex-direction: column-reverse; } .input-group { position: relative; display: inline-block; pointer-events: auto; } .input-field { padding-right: 40px; /* Make space for the button */ width: 200px; /* Adjust width as needed */ } .close { font-size: 18px; font-weight: bold; color: #000; text-shadow: 0 1px 0 #fff; opacity: 0.5; float: right; margin-left: 10px; cursor: pointer; position: absolute; top: 0; right: 0; height: 100%; /* Match height with input */ width: 40px; /* Adjust width as needed */ } .close:hover { opacity: 1; } </style>