<!-- 搜索输入框 -->
<template>
  <el-input v-model="currentValue" :size="size" :placeholder="currentPlaceholder" :disabled="disabled">
    <template slot="append">
      <i class="el-icon-search"></i>
    </template>
  </el-input>
</template>
<script>
export default {
  name: 'CsFieldSearch',
  props: {
    value: {
      type: String,
      default: null
    },
    size: {
      type: String,
      default: 'mini'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: null
    }
  },
  components: {},
  data() {
    return {
      currentValue: this.value
    }
  },
  //监听属性 类似于data概念
  computed: {
    currentPlaceholder() {
      if (this.placeholder) {
        return this.placeholder
      } else {
        return this.$t('common.placeholderSearch')
      }
    }
  },
  //监控data中的数据变化
  watch: {
    value(val) {
      this.currentValue = val
    },
    currentValue(val) {
      this.$emit('input', val)
    }
  },
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.el-input-group__append {
  padding: 0 10px;
}
</style>