需求: 项目中有个a-input框,填写的内容过多,直接使用会展示不全,影响体验。
解决: 利用a-input与a-textarea切换展示。
须引入loadsh 使用方法isArray与isNil 可自己编写函数判断则不用引入
<template>
<div class="textarea-box">
<a-textarea
ref="textarea"
class="textarea"
v-bind="$attrs"
v-model="innerValue"
v-show="textareaBool"
@blur="textareaBool = false"
:style="{ width: `${width}` }"
:auto-size="{ minRows: 3, maxRows: 5 }"
:placeholder="placeholder"
/>
<a-input
v-bind="$attrs"
v-show="!textareaBool"
v-model="innerValue"
allowClear
@change="onChange"
@focus="handleInpClick"
:style="{ width: `${width}` }"
:placeholder="placeholder"
/>
</div>
</template>
<script>
export default {
name: "multInput",
model: {
prop: "value",
event: "change",
},
props: {
value: [String, Array],
width: {
type: [Number, String],
default: () => "100%",
},
placeholder: {
type: String,
default: "请输入,多值以英文,;或换行符分隔",
},
autoFormatted: {
type: Boolean,
default: true,
},
},
data() {
return {
textareaBool: false,
inInnerChange: false,
innerValue: this.value,
formattedValue: _.isArray(this.value) ? this.value : [this.value],
};
},
watch: {
// 监听父组件动态修改value
value(val) {
if (this.inInnerChange) {
this.inInnerChange = false;
} else {
this.setValue(val);
}
},
innerValue(val) {
this.inInnerChange = true;
this.onChange();
},
},
methods: {
// 点击聚焦
handleInpClick() {
this.textareaBool = true;
this.$nextTick(() => {
this.$refs.textarea.focus();
});
},
// 父组件动态修改value
setValue(val) {
if (val === this.innerValue) {
this.onChange();
} else {
if (_.isArray(val)) {
this.innerValue = val.join("\n");
} else {
this.innerValue = _.isNil(val) ? "" : `${val}`;
}
}
},
// 通知变化
onChange() {
const val = this.innerValue;
this.formattedValue = val
? val.replace(/^[,;\s]*|[,;\s]*$/g, "").split(/[,;\s]+/)
: [];
let changeValue;
if (this.autoFormatted) {
changeValue = this.formattedValue;
} else {
changeValue = val;
}
this.$emit("change", changeValue);
},
},
};
</script>
<style lang="less" scoped>
.textarea-box {
position: relative;
min-width: 250px;
min-height: 40px;
.textarea {
position: absolute;
top: 4px;
z-index: 10;
}
}
</style>
使用例子
<template>
<mult-input
width='200px'
v-model="ip"
placeholder="请输入"
@change='handleChange'
/>
</template>
<script>
export default {
components: {
mult-input: () => import("./multInput"),
},
data() {
return {
ip: undefined,
};
},
methods: {
handleChange(value){
console.log(value);
}
},
};
</script>