hkyy/admin-frame/naf/data/naf-input.vue

<template>
  <div class="naf-input">
    <el-select
      v-if="dict"
      v-model="holdValue"
      :placeholder="placeholder || '请选择'"
      :disabled="disabled"
      :size="size"
      :clearable="clearable"
      @change="handleChange"
    >
      <template v-if="typeof dict == 'function'">
        <template v-for="(_item, _index) in dict()">
          <el-option v-if="typeof _item == 'string'" :key="'option-item-' + _index" :label="_item" :value="_item"></el-option>
          <el-option v-else :key="'option-item-' + _index" :label="_item.name" :value="_item.code" :disabled="_item.status == '1'"></el-option>
        </template>
      </template>
      <template v-else>
        <template v-for="(_item, _index) in dict">
          <el-option v-if="typeof _item == 'string'" :key="'option-item-' + _index" :label="_item" :value="_item"></el-option>
          <el-option v-else :key="'option-item-' + _index" :label="_item.name" :value="_item.code" :disabled="_item.status == '1'"></el-option>
        </template>
      </template>
    </el-select>
    <el-checkbox v-else-if="type == 'checkbox'" v-model="holdValue" v-bind="options" @change="handleChange">
      {{ placeholder }}
    </el-checkbox>
    <el-date-picker
      v-else-if="type == 'date' || type == 'datetime'"
      :type="type"
      v-model="holdValue"
      :value-format="valueFormat"
      v-bind="options"
      @change="handleChange"
    >
    </el-date-picker>
    <el-input
      v-else
      v-model="holdValue"
      :type="type"
      v-bind="options"
      @change="handleChange(true)"
      @input="handleInput"
      :minlength="minlength || 0"
      :maxlength="maxlength || 48"
    >
      <template #append>
        <slot name="append"> </slot>
      </template>
      <template #prepend>
        <slot name="prepend"> </slot>
      </template>
      <template #prefix>
        <slot name="prefix"> </slot>
      </template>
      <template #suffix>
        <slot name="suffix"> </slot>
      </template>
    </el-input>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  props: {
    value: { required: true },
    disabled: Boolean,
    type: String,
    dict: [Array, Boolean, Function],
    placeholder: [String, Boolean],
    clearable: Boolean,
    size: String,
    valueFormat: String,
    maxlength: Number,
    minlength: Number,
  },
  data() {
    return {
      holdValue: this.value,
    };
  },
  computed: {
    options() {
      return { placeholder: this.placeholder || undefined, clearable: this.clearable, disabled: this.disabled, size: this.size };
    },
  },
  methods: {
    handleChange(flag) {
      if (typeof this.holdValue == 'string' && this.holdValue && this.holdValue != this.holdValue.trim()) {
        this.holdValue = this.holdValue.trim();
      }
      this.$emit('input', this.holdValue);
      this.$emit('change', this.holdValue);
    },
    handleInput() {
      if (typeof this.holdValue == 'string' && this.holdValue && this.holdValue != this.holdValue.trim()) {
        this.holdValue = this.holdValue.trim();
      }
      this.$emit('input', this.holdValue);
    },
  },
  watch: {
    value(val) {
      if (this.holdValue != val) {
        this.holdValue = val;
      }
    },
  },
};
</script>

<style></style>