父组件
<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>