feat: 搜索栏

examples/pages.json

@@ -150,6 +150,12 @@
 				}
 			}
 		},
+		{
+			"path": "pages/search-bar/search-bar",
+			"style": {
+				"navigationBarTitleText": "SearchBar 搜索栏"
+			}
+		},
 		{
 			"path": "pages/calendar/calendar",
 			"style": {

examples/pages/index/index.vue

@@ -122,6 +122,10 @@ export default {
         {
           name: 'SwipeAction 滑动操作',
           url: 'swipe-action'
+        },
+        {
+          name: 'SearchBar 搜索栏',
+          url: 'search-bar'
         }
       ],
       navigations: [

examples/pages/search-bar/search-bar.vue

@@ -0,0 +1,49 @@
+<template>
+  <view>
+    <view class="example-title">基本用法</view>
+    <view class="example-body">
+      <uni-search-bar
+        @confirm="search"
+        @input="input" />
+      <view
+        class=""
+        style="margin-bottom: 20px;text-align: center;">
+        当前输入为：{{ searchVal }}
+      </view>
+      <uni-search-bar
+        placeholder="自定placeholder"
+        @confirm="search"/>
+      <uni-search-bar
+        :radius="100"
+        placeholder="自定圆角"
+        @confirm="search"/>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      searchVal: ''
+    }
+  },
+  methods: {
+    search (res) {
+      uni.showModal({
+        content: '搜索：' + res.value,
+        showCancel: false
+      })
+    },
+    input (res) {
+      this.searchVal = res.value
+    }
+  }
+}
+</script>
+
+<style>
+  .search-result{
+    margin-top: 10px;
+  }
+</style>

packages/uni-search-bar/config.json

@@ -0,0 +1,8 @@
+{
+	"id":"",
+	"name":"SearchBar",
+	"desc":"搜索栏",
+	"url":"search-bar",
+	"edition":"1.0.0",
+	"path":""
+}

packages/uni-search-bar/readme.md

@@ -0,0 +1,48 @@
+### SearchBar 搜索栏
+
+评分组件，组件名：``uni-search-bar``，代码块： uSearchBar。
+
+**使用方式：**
+
+在 ``script`` 中引用组件 
+
+```javascript
+import {uniSearchBar} from "uni-ui"
+export default {
+    components: {uniSearchBar}
+}
+```
+
+基本用法
+
+```html
+<uni-search-bar @confirm="search" @input="input" />
+```
+
+自定义Placeholder
+
+```html
+<uni-search-bar placeholder="自定placeholder" @confirm="search"/>
+```
+
+设置圆角
+
+```html
+<uni-search-bar :radius="100" @confirm="search"/>
+```
+
+
+
+**uniSearchBar 属性说明：**
+
+|属性名|类型|默认值	|说明|
+|---|----|---|---|
+|placeholder|String|搜索|搜索栏Placeholder|
+|radius|Number|10|搜索栏圆角，单位rpx| 
+
+**uniSearchBar 事件说明：**
+
+|事件称名|说明|返回参数|
+|---|----|---|
+|confirm|uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value|{value:Number}|
+|input|uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value|{value:Number}|

packages/uni-search-bar/uni-search-bar.vue

@@ -0,0 +1,173 @@
+<template>
+  <view class="uni-searchbar">
+    <view
+      :class="show?'':'hide'"
+      class="uni-searchbar-form" >
+      <view
+        :style="{borderRadius:radius+'rpx'}"
+        class="uni-searchbar-form__box"
+      >
+        <uni-icon
+          :color="'#999999'"
+          class="icon-search"
+          type="search"
+          size="18"/>
+        <input
+          :placeholder="placeholder"
+          :focus="show"
+          v-model="searchVal"
+          class="search-input"
+          type="text"
+          placeholder-style="color:#cccccc"
+          confirm-type="search"
+          @confirm="confirm">
+        <uni-icon
+          :color="'#999999'"
+          class="icon-clear"
+          type="clear"
+          size="14"
+          @click="clear"/>
+      </view>
+      <view
+        :style="{borderRadius:radius+'rpx'}"
+        class="uni-searchbar-form__text"
+        @click="searchClick">
+        <uni-icon
+          :color="'#999999'"
+          class="icon-search"
+          type="search"
+          size="18"/>
+        <text class="placeholder">{{ placeholder }}</text>
+      </view>
+      <text
+        class="uni-searchbar-form__cancel"
+        @click="hideSearch">取消</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import uniIcon from '../uni-icon/uni-icon.vue'
+export default {
+  name: 'UniSearchBar',
+  components: {
+    uniIcon
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: '搜索'
+    },
+    radius: {
+      type: Number,
+      default: 10
+    }
+  },
+  data () {
+    return {
+      show: false,
+      searchVal: ''
+    }
+  },
+  watch: {
+    searchVal () {
+      this.$emit('input', { value: this.searchVal })
+    }
+  },
+  methods: {
+    searchClick () {
+      this.searchVal = ''
+      this.show = true
+    },
+    clear () {
+      this.searchVal = ''
+    },
+    hideSearch () {
+      this.searchVal = ''
+      this.show = false
+    },
+    confirm () {
+      this.$emit('confirm', { value: this.searchVal })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  $uni-searbar-height:64rpx;
+  .uni-searchbar{
+    &-form{
+      position: relative;
+      display: flex;
+      padding: 15rpx;
+      width: 100%;
+      box-sizing: border-box;
+      &__box{
+        display: flex;
+        flex: 1;
+        width: 100%;
+        height: $uni-searbar-height;
+        line-height: $uni-searbar-height;
+        color: #c8c7cc;
+        background: #ffffff;
+        border: solid 1px #c8c7cc;
+        border-radius: 10rpx;
+        .icon-search{
+          text-align: right;
+          color: #c8c7cc;
+          line-height: $uni-searbar-height;
+          padding: 0rpx 10rpx 0rpx 15rpx;
+        }
+        .search-input{
+          flex: 1;
+          height: $uni-searbar-height;
+          line-height: $uni-searbar-height;
+          color: #333333;
+        }
+        .icon-clear{
+          color: #c8c7cc;
+          line-height: $uni-searbar-height;
+          padding: 0rpx 15rpx 0rpx 10rpx;
+        }
+      }
+      &__text{
+        display: flex;
+        flex: 1;
+        width: 100%;
+        height: $uni-searbar-height;
+        line-height: $uni-searbar-height;
+        text-align: center;
+        color: #c8c7cc;
+        background: #ffffff;
+        border: solid 1px #c8c7cc;
+        border-radius: 10rpx;
+        display: none;
+        .icon-search{
+          height: $uni-searbar-height;
+          line-height: $uni-searbar-height;
+        }
+        .placeholder{
+          display: inline-block;
+          color: #cccccc;
+          margin-left: 10rpx;
+        }
+      }
+      &__cancel{
+        padding-left: 20rpx;
+        line-height: $uni-searbar-height;
+        color: #333333;
+      }
+      &.hide{
+        .uni-searchbar-form__box{
+          display: none;
+        }
+        .uni-searchbar-form__text{
+          display: block;
+        }
+        .uni-searchbar-form__cancel{
+          display: none;
+        }
+      }
+    }
+  }
+</style>