init

src/components/SearchBox.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="bottom-filter-tip">
+    <div class="filter-label txtjustify">{{label}}</div>
+    <div class="fxcol mgl20 relative">
+      <input
+        type="text"
+        class="filter-input filter-scan-input search_input"
+        ref="scaninput"
+        :placeholder="keyCode === '' ? placeholder : keyCode"
+        :disabled="disabled"
+        :value="value"
+        @focus="handleFocus($event)"
+        @blur="handleBlur($event)"
+        @input="handleChange($event)">
+      <div class="button_box">
+        <button class="search_box_icon fxcol" @click="handleScan">
+          <span class="iconfont scan_icon" :class="{'scan_icon_checked': type === true}"></span>
+        </button>
+        <button class="search_box_icon fxcol" @click="handleKey">
+          <span class="iconfont key_icon" :class="{'key_icon_checked': type === false}"></span>
+        </button>
+        <button v-show="seaShow === true" class="search_box_icon fxcol" @click="handleSearch">
+          <span class="iconfont search_icon" :class="{'key_icon_checked': type === false}"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchBox',
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    value: String,
+    label: String,
+    focused: {
+      type: Boolean,
+      default: false
+    },
+    seaShow: {
+      type: Boolean,
+      default: true
+    },
+    keyCode: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      placeholder: '',
+      type: '',
+      cur: ''
+    }
+  },
+  mounted () {
+    if (!this.focused) this.handleScan()
+  },
+  methods: {
+    handleScan () {
+      this.$refs.scaninput.focus()
+      this.placeholder = '请扫码键输入'
+      this.type = true
+      this.$emit('input', '')
+    },
+    handleKey () {
+      this.$refs.scaninput.focus()
+      this.placeholder = '请键盘输入'
+      this.type = false
+      // this.$emit('input', this.cur)
+    },
+    handleFocus ($event) {
+      this.cur = $event.target.value
+      this.placeholder = '请扫码键输入'
+      this.type = false
+      // $event.target.value = ''
+      // this.$emit('input', $event.target.value)
+    },
+    handleBlur ($event) {
+      this.type = ''
+      this.placeholder = ''
+      // if ($event.target.value === '') {
+      //   $event.target.value = this.cur
+      // }
+      this.$emit('input', $event.target.value)
+    },
+    handleChange ($event) {
+      if ($event.target.value) {
+        if (this.type) {
+          this.cur = $event.target.value.split('##')[0]
+          let _this = this
+          setTimeout(() => {
+            _this.$emit('input', this.cur)
+            _this.$emit('handleChange', this.cur, true)
+            _this.$emit('getScanTxt', $event.target.value)
+          }, 20)
+          this.$refs.scaninput.blur()
+        } else if (!this.type) {
+          this.cur = $event.target.value
+          this.$emit('input', this.cur)
+          this.$emit('handleChange', this.cur, false)
+        } else {
+          this.cur = $event.target.value
+        }
+      }
+    },
+    handleSearch () {
+      this.$emit('handleChange', this.cur, true)
+      this.$refs.scaninput.blur()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.search_input
+ padding-right 2.1rem
+.button_box
+  _fj()
+  position absolute
+  top 50%
+  transform translateY(-50%)
+  right 1px
+  // height .9rem
+.search_box_icon
+  _wh(.7rem, 100%)
+  background-color #fff
+</style>