aiot-app/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue

<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: 32rpx;
  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: 32rpx;
  color: #b3b3b3;
  margin-left: 5px;
}

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