使用uniapp内置easycom封装搜索框

src/components/ygSearch/ygSearch.vue

@@ -0,0 +1,18 @@
+<template>
+  <view class="yg_search">
+    <u-search placeholder="搜索" :show-action="false" ></u-search>
+  </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+  
+<style lang="scss">
+  .yg_search {
+    padding: 10rpx;
+    background-color: #eb4450;
+  }
+</style>

src/pages/category/category.vue

@@ -1,9 +1,7 @@
 <template>
   <view class="category">
     <!-- 1. 搜索 -->
-    <view class="category_search">
-      <u-search placeholder="搜索" :show-action="false" ></u-search>
-    </view>
+    <ygSearch></ygSearch>
 
     <!-- 2. 内容 -->
     <view class="category_content">
@@ -86,10 +84,6 @@ export default {
   display: flex;
   flex-direction: column;
   height: 100rpx;
-  .category_search {
-    padding: 10rpx;
-    background-color: red;
-  }
   
   .category_content {
     height: calc(100vh - 100rpx);

src/pages/goods_list/goods_list.vue

@@ -1,5 +1,7 @@
 <template>
-  <view>商品列表</view>
+  <view>
+    <ygSearch></ygSearch>
+  </view>
 </template>
 
 <script>

src/pages/index/index.vue

@@ -1,9 +1,7 @@
 <template>
 	<view class="content">
     <!-- 1.搜索栏 -->
-    <view class="search">
-      <u-search placeholder="搜索" :show-action="false"></u-search>
-    </view>
+    <ygSearch></ygSearch>
 
     <!-- 2.轮播图 -->
     <view class="swiper">
@@ -87,19 +85,6 @@
 </script>
 
 <style lang="scss">
-  /* 搜索 */
-  .search {
-    /* 
-    设计稿375px
-    375px = 750rpx
-    5px = 10rpx
-    */
-    padding: 10rpx;
-    background-color: #eb4450;
-    /* 
-    轮播图750px宽, 340px高
-     */
-  }
 
   /* 导航 */
   .nav {