Files
foton-laws-system-front/src/components/CustomFormComponents/Input.vue
T
2022-03-17 15:46:55 +08:00

84 lines
1.5 KiB
Vue

<template>
<!-- <div>-->
<el-col :span="span">
<el-form-item
:label="config.attrName"
:prop="config.attrField"
label-width="150px"
class="add-form-item"
:class="{'form-item-disabled': disabled}"
>
<el-input
:value="value"
:placeholder="placeholder"
:disabled="disabled"
type="textarea"
resize="none"
:autosize="true"
clearable
@input="handleChange"
></el-input>
</el-form-item>
</el-col>
<!-- </div>-->
</template>
<script>
export default {
name: 'CustomInput',
props: {
config: {
type: Object,
required: true
},
value: {
required: true
},
disabled: {
type: Boolean,
default: false
},
// 栅格比例
span: {
type: Number,
default: 24
}
},
computed: {
placeholder () {
return `请输入${this.config.attrName}`
},
showMessage () {
return `${this.config.attrName}不能为空`
},
isRequired () {
return !!this.config.isMust
}
},
methods: {
handleChange (event) {
// const value = event.target.value
const value = event
this.$emit('input', value)
}
},
mounted() {
console.log(this.config);
}
}
</script>
<style lang="less" scoped>
.add-form-item{
/deep/.el-form-item__content{
.el-textarea{
width: calc(~'100% - 90px');
}
}
}
/deep/.el-dialog__body{
padding: 15px 20px;
}
</style>