collect_information/src/pages/police/index/index.vue.bak

@@ -1,19 +1,21 @@
 <template>
-  <div class="search" id="search">
-    <a-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></a-input>
-    <div v-if="valueInput">
+  <view class="search" id="search">
+    <nut-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></nut-input>
+    <view v-if="valueInput">
       <ul>
         <li v-for="item in searchResults" :key="item.id">{{item}}</li>
       </ul>
-    </div>
-    <div v-else >
+    </view>
+    <view v-else >
       没有找到相关结果
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
 <script setup lang="ts">
-import {onMounted, ref,} from "vue";
+import './index.scss'
+import { ref} from "vue";
 const valueInput = ref('')
+// '齐家园','刘德华','张学友','黎明','家具城','左岸春天','麦德龙商城','世纪酒店','四方小学','海洋半岛'
 const list = ref([])
 const dataList = ref([
   {
@@ -64,7 +66,7 @@ const dataList = ref([
     value:'明德小学'
   },{
     id:12,
-    value:'希望小学',
+    value:'希望小学'
   }
 ])
 const searchResults =  ref([])
@@ -72,37 +74,21 @@ const searchInput = (e:any)=>{
   valueInput.value = e.target.value
   if (!valueInput.value) {
     searchResults.value = []
-    return;
+    return [];
   }else{
+    dataList.value.map((item)=>{
+      return list.value.push(item.value)
+    })
     searchResults.value =  list.value.filter(item =>
-        item.toLowerCase().includes(valueInput.value.toLowerCase())
+      item.toLowerCase().includes(valueInput.value.toLowerCase())
     );
   }
+  // console.log(searchResults.value)
 }
-onMounted(()=>{
-  dataList.value.map((item)=>{
-    return list.value.push(item.value)
-  })
-})
 </script>
 
 
 
 <style scoped lang="scss">
-.search{
-  padding: 0 10px;
-  overflow: hidden;
-  border: 1px solid #4e71f2;
-  margin: 1px 5px;
-  border-radius: 10px;
-  width: 30%;
-  .ceShi{
-    height: 300px;
-    background: #ccc;
-  }
-}
-.nut-input{
-  padding: 20rpx 20rpx;
-  margin: 5px 0;
-}
+
 </style>

securityManagement/src/views/test.vue

@@ -1,114 +1,7 @@
 <template>
-  <div class="search" id="search">
-    <a-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></a-input>
-    <div v-if="valueInput">
-      <ul>
-        <li v-for="item in searchResults" :key="item.id">{{item}}</li>
-      </ul>
+    <div style="margin: 100px auto;width: 500px">
     </div>
-    <div v-else >
-      没有找到相关结果
-    </div>
-  </div>
 </template>
-<script setup lang="ts">
-import {onMounted, ref,} from "vue";
-const valueInput = ref('')
-const list = ref([])
-const dataList = ref([
-  {
-    id:0,
-    value:'齐家园'
-  },
-  {
-    id:1,
-    value:'刘德华'
-  },
-  {
-    id:2,
-    value:'张学友'
-  },{
-    id:3,
-    value:'黎明'
-  },
-  {
-    id:4,
-    value:'家具城'
-  },
-  {
-    id:5,
-    value:'左岸春天'
-  },
-  {
-    id:6,
-    value:'麦德龙商城'
-  },
-  {
-    id:7,
-    value:'世纪酒店'
-  },
-  {
-    id:8,
-    value:'四方小学'
-  },
-  {
-    id:9,
-    value:'海洋半岛'
-  },
-  {
-    id:10,
-    value:'育英小学'
-  },
-  {
-    id:11,
-    value:'明德小学'
-  },{
-    id:12,
-    value:'希望小学',
-  }
-])
-const searchResults =  ref([])
-const searchInput = (e:any)=>{
-  valueInput.value = e.target.value
-  if (!valueInput.value) {
-    searchResults.value = []
-    return;
-  }else{
-    searchResults.value =  list.value.filter(item =>
-        item.toLowerCase().includes(valueInput.value.toLowerCase())
-    );
-  }
-}
-// watch(()=>valueInput.value,(value)=>{
-//    if(!value){
-//      searchResults.value = []
-//    }
-// })
-
-onMounted(()=>{
-  dataList.value.map((item)=>{
-    return list.value.push(item.value)
-  })
-})
+<script lang="ts" setup>
 </script>
 
-
-
-<style scoped lang="scss">
-.search{
-  padding: 0 10px;
-  overflow: hidden;
-  border: 1px solid #4e71f2;
-  margin: 1px 5px;
-  border-radius: 10px;
-  width: 30%;
-  .ceShi{
-    height: 300px;
-    background: #ccc;
-  }
-}
-.nut-input{
-  padding: 20rpx 20rpx;
-  margin: 5px 0;
-}
-</style>