项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,298 @@
<template>
   <view class="uni-searchbar">
      <view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box"
         @click="searchClick">
         <view class="uni-searchbar__box-icon-search">
            <slot name="searchIcon">
               <uni-icons color="#c0c4cc" size="18" type="search" />
            </slot>
         </view>
         <input v-if="show || searchVal" :focus="showSync" :disabled="readonly" :placeholder="placeholderText" :maxlength="maxlength"
            class="uni-searchbar__box-search-input" confirm-type="search" type="text" v-model="searchVal"
            @confirm="confirm" @blur="blur" @focus="emitFocus" />
         <text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
         <view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='') &&!readonly"
            class="uni-searchbar__box-icon-clear" @click="clear">
            <slot name="clearIcon">
               <uni-icons color="#c0c4cc" size="20" type="clear" />
            </slot>
         </view>
      </view>
      <text @click="cancel" class="uni-searchbar__cancel"
         v-if="cancelButton ==='always' || show && cancelButton ==='auto'">{{cancelTextI18n}}</text>
   </view>
</template>

<script>
   import {
      initVueI18n
   } from '@dcloudio/uni-i18n'
   import messages from './i18n/index.js'
   const {
      t
   } = initVueI18n(messages)

   /**
    * SearchBar æœç´¢æ 
    * @description æœç´¢æ ç»„件，通常用于搜索商品、文章等
    * @tutorial https://ext.dcloud.net.cn/plugin?id=866
    * @property {Number} radius æœç´¢æ åœ†è§’
    * @property {Number} maxlength è¾“入最大长度
    * @property {String} placeholder æœç´¢æ Placeholder
    * @property {String} clearButton = [always|auto|none] æ˜¯å¦æ˜¾ç¤ºæ¸…除按钮
    *    @value always ä¸€ç›´æ˜¾ç¤º
    *    @value auto è¾“入框不为空时显示
    *    @value none ä¸€ç›´ä¸æ˜¾ç¤º
    * @property {String} cancelButton = [always|auto|none] æ˜¯å¦æ˜¾ç¤ºå–消按钮
    *    @value always ä¸€ç›´æ˜¾ç¤º
    *    @value auto è¾“入框不为空时显示
    *    @value none ä¸€ç›´ä¸æ˜¾ç¤º
    * @property {String} cancelText å–消按钮的文字
    * @property {String} bgColor è¾“入框背景颜色
    * @property {Boolean} focus æ˜¯å¦è‡ªåŠ¨èšç„¦
    * @property {Boolean} readonly ç»„件只读，不能有任何操作，只做展示
    * @event {Function} confirm uniSearchBar çš„输入框 confirm äº‹ä»¶ï¼Œè¿”回参数为uniSearchBar的value，e={value:Number}
    * @event {Function} input uniSearchBar çš„ value æ”¹å˜æ—¶è§¦å‘事件，返回参数为uniSearchBar的value，e=value
    * @event {Function} cancel ç‚¹å‡»å–消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
    * @event {Function} clear ç‚¹å‡»æ¸…除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
    * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
    */

   export default {
      name: "UniSearchBar",
      emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
      props: {
         placeholder: {
            type: String,
            default: ""
         },
         radius: {
            type: [Number, String],
            default: 5
         },
         clearButton: {
            type: String,
            default: "auto"
         },
         cancelButton: {
            type: String,
            default: "auto"
         },
         cancelText: {
            type: String,
            default: '取消'
         },
         bgColor: {
            type: String,
            default: "#F8F8F8"
         },
         maxlength: {
            type: [Number, String],
            default: 100
         },
         value: {
            type: [Number, String],
            default: ""
         },
         modelValue: {
            type: [Number, String],
            default: ""
         },
         focus: {
            type: Boolean,
            default: false
         },
         readonly: {
            type: Boolean,
            default: false
         }
      },
      data() {
         return {
            show: false,
            showSync: false,
            searchVal: ''
         }
      },
      computed: {
         cancelTextI18n() {
            return this.cancelText || t("uni-search-bar.cancel")
         },
         placeholderText() {
            return this.placeholder || t("uni-search-bar.placeholder")
         }
      },
      watch: {
         // #ifndef VUE3
         value: {
            immediate: true,
            handler(newVal) {
               this.searchVal = newVal
               if (newVal) {
                  this.show = true
               }
            }
         },
         // #endif
         // #ifdef VUE3
         modelValue: {
            immediate: true,
            handler(newVal) {
               this.searchVal = newVal
               if (newVal) {
                  this.show = true
               }
            }
         },
         // #endif
         focus: {
            immediate: true,
            handler(newVal) {
               if (newVal) {
                  if(this.readonly) return
                  this.show = true;
                  this.$nextTick(() => {
                     this.showSync = true
                  })
               }
            }
         },
         searchVal(newVal, oldVal) {
            this.$emit("input", newVal)
            // #ifdef VUE3
            this.$emit("update:modelValue", newVal)
            // #endif
         }
      },
      methods: {
         searchClick() {
            if(this.readonly) return
            if (this.show) {
               return
            }
            this.show = true;
            this.$nextTick(() => {
               this.showSync = true
            })
         },
         clear() {
            this.$emit("clear", {
               value: this.searchVal
            })
            this.searchVal = ""
         },
         cancel() {
            if(this.readonly) return
            this.$emit("cancel", {
               value: this.searchVal
            });
            this.searchVal = ""
            this.show = false
            this.showSync = false
            // #ifndef APP-PLUS
            uni.hideKeyboard()
            // #endif
            // #ifdef APP-PLUS
            plus.key.hideSoftKeybord()
            // #endif
         },
         confirm() {
            // #ifndef APP-PLUS
            uni.hideKeyboard();
            // #endif
            // #ifdef APP-PLUS
            plus.key.hideSoftKeybord()
            // #endif
            this.$emit("confirm", {
               value: this.searchVal
            })
         },
         blur() {
            // #ifndef APP-PLUS
            uni.hideKeyboard();
            // #endif
            // #ifdef APP-PLUS
            plus.key.hideSoftKeybord()
            // #endif
            this.$emit("blur", {
               value: this.searchVal
            })
         },
         emitFocus(e) {
            this.$emit("focus", e.detail)
         }
      }
   };
</script>

<style lang="scss">
   $uni-searchbar-height: 36px;

   .uni-searchbar {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      position: relative;
      padding: 10px;
      // background-color: #fff;
   }

   .uni-searchbar__box {
      /* #ifndef APP-NVUE */
      display: flex;
      box-sizing: border-box;
      /* #endif */
      overflow: hidden;
      position: relative;
      flex: 1;
      justify-content: center;
      flex-direction: row;
      align-items: center;
      height: $uni-searchbar-height;
      padding: 5px 8px 5px 0px;
   }

   .uni-searchbar__box-icon-search {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      // width: 32px;
      padding: 0 8px;
      justify-content: center;
      align-items: center;
      color: #B3B3B3;
   }

   .uni-searchbar__box-search-input {
      flex: 1;
      font-size: 14px;
      color: #333;
   }

   .uni-searchbar__box-icon-clear {
      align-items: center;
      line-height: 24px;
      padding-left: 8px;
      /* #ifdef H5 */
      cursor: pointer;
      /* #endif */
   }

   .uni-searchbar__text-placeholder {
      font-size: 14px;
      color: #B3B3B3;
      margin-left: 5px;
   }

   .uni-searchbar__cancel {
      padding-left: 10px;
      line-height: $uni-searchbar-height;
      font-size: 14px;
      color: #333333;
      /* #ifdef H5 */
      cursor: pointer;
      /* #endif */
   }
</style>