iview 组件的封装

父组件

<sac-input

v-model="filterForm.name"

label="banner名称"

ref="filterFormName"

prop="banner"

></sac-input>

子组件

<template>
  <FormItem :label="label==''?'':label+'：'" :prop="prop" :required="isRequired">
    <Input
      v-model.trim="inputVal"
      :placeholder="newPlaceholder"
      @on-change="onChange"
      :type="type"
      clearable
      :autosize="autosize"
      :disabled="disabled"
      :number="number"
    ></Input>
  </FormItem>
</template>
<script>
export default {
  name: "sac-input",
  model: {
    event: "change"
  },
  props: {
    label: {
      type: String,
      default: ""
    },
    prop: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    },
    autosize: [Object],
    value: [String, Number],
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ""
    },
    number: {
      type: Boolean,
      default: false
    },
    isRequired:{
      type: Boolean,
      default: null
    }
    
  },
  data() {
    return {
      inputVal: "",
      newPlaceholder: ""
    };
  },
  watch: {
    value(val, oldVal) {
      this.inputVal = val;
    }
  },
  methods: {
    onChange(val) {
      this.$emit("change", this.inputVal);
    },
    reset() {
      this.inputVal = "";
      this.onChange();
    }
  },
  mounted() {
    this.inputVal = this.value;
    this.newPlaceholder = this.placeholder
      ? this.placeholder
      : "请输入" + this.label;
  }
};
</script>

 

转载于:https://my.oschina.net/u/4004801/blog/3029082