# 输入框
# 普通用法
<avue-form :option="option" v-model="form"></avue-form>
<script>
export default{
data() {
return {
form: {},
option: {
column: [
{
label:'单文本框',
prop:'input',
row:true
}, {
label:'密码框',
prop:'password',
type:'password',
row:true
}, {
label:'多文本框',
prop:'textarea',
type:'textarea'
}
]
}
}
}
}
</script>
Expand Copy Copy
# 复合型输入框
可以通过 prefixIcon
和 suffixIcon
以及prepend
和append
属性在 input
组件首部和尾部增加显示图标
<avue-form :option="option" v-model="form"></avue-form>
<script>
export default{
data() {
return {
form: {},
option: {
column: [
{
label:'单文本框1',
prop:'input',
prepend:'HTTP',
append:'COM',
row:true
},
{
label:'单文本框2',
prop:'input',
suffixIcon:"el-icon-date",
prefixIcon:"el-icon-search"
}
]
}
}
}
}
</script>
Expand Copy Copy
# 多行文本框
通过设置 minRows
和minRows
属性可以使得文本域的高度能够根据文本内容自动进行调整
<avue-form :option="option" v-model="form"></avue-form>
<script>
export default{
data() {
return {
form: {},
option: {
column: [
{
label:'多行文本框',
prop:'input',
type:'textarea',
minRows: 8,
maxRows: 10
}
]
}
}
}
}
</script>
Expand Copy Copy
# 字符长度提示
配置showWordLimit
为true
即可
<avue-form :option="option" v-model="form"></avue-form>
<script>
export default{
data() {
return {
form: {},
option: {
column: [
{
label:'单文本框',
prop:'input',
maxlength:10,
showWordLimit:true
}, {
label:'多文本框',
prop:'textarea',
type:'textarea',
minRows:10,
maxlength:20,
span:24,
showWordLimit:true
}
]
}
}
}
}
</script>
Expand Copy Copy