Input.vue 1.61 KB
<template>
  <el-input
    v-model="inputVal"
    :placeholder="placeholder"
    :disabled="isDisabled"
    :maxlength="maxLength"
    @input="handleInput"
    @change="handleChange"
    @blur="handleBlur"
    @focus="handleFocus"
  >
    <el-button v-if="autoId" slot="append" icon="el-icon-magic-stick" @click="getProjectId()" />
  </el-input>
</template>
<script>
export default {
  name: 'RcInput',
  components: {},
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: String,
    disabled: Boolean,
    autoId: {
      type: Boolean,
      default: false
    },
    maxLength: {
      type: Number,
      default() {
        return 300
      }
    },
    valueFormat: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      inputVal: this.value,
      isDisabled: this.disabled
    }
  },
  computed: {},
  watch: {
    value(newVal) {
      this.inputVal = newVal
    }
  },
  created() {},
  mounted() {
    // if (this.autoId) {
    //   this.isDisabled = true;
    //   this.getProjectId();
    // }
  },
  methods: {
    handleChange(e) {
      this.$emit('change', e)
    },
    handleInput(e) {
      this.$emit('input', e)
    },
    handleBlur(e) {
      this.$emit('blur', e)
    },
    handleFocus(e) {
      this.$emit('focus', e)
    },
    getProjectId() {
      this.$http.get('/pmsinstance/getProjectId', {}).then((res) => {
        if (res.code === '200') {
          this.inputVal = res.data
          this.$emit('input', res.data)
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.el-input
  width unset
</style>