[Update] 添加help text

This commit is contained in:
ibuler
2020-04-26 19:35:32 +08:00
parent 159e1d85df
commit ae6459f92b
3 changed files with 23 additions and 1 deletions

View File

@@ -6,6 +6,15 @@
:rules="_show && Array.isArray(data.rules) ? data.rules : []" :rules="_show && Array.isArray(data.rules) ? data.rules : []"
v-bind="data.attrs" v-bind="data.attrs"
> >
<template v-if="data.helpTips" #label>
<el-tooltip placement="top">
<div slot="content" v-html="data.helpTips" />
<el-button style="padding: 0">
<i class="fa fa-info-circle" />
</el-button>
</el-tooltip>
{{ data.label }}
</template>
<template v-if="readonly && hasReadonlyContent"> <template v-if="readonly && hasReadonlyContent">
<div <div
v-if="data.type === 'input'" v-if="data.type === 'input'"
@@ -55,6 +64,7 @@
>{{ opt.label }}</el-radio> >{{ opt.label }}</el-radio>
</template> </template>
</custom-component> </custom-component>
<div v-if="data.helpText" class="help-block" v-html="data.helpText" />
</el-form-item> </el-form-item>
</template> </template>
<script> <script>

View File

@@ -2,7 +2,6 @@
<el-form ref="elForm" v-bind="$attrs" :model="value" class="el-form-renderer"> <el-form ref="elForm" v-bind="$attrs" :model="value" class="el-form-renderer">
<template v-for="item in innerContent"> <template v-for="item in innerContent">
<slot :name="`id:${item.id}`" /> <slot :name="`id:${item.id}`" />
<slot :name="`$id:${item.id}`" />
<component <component
:is="item.type === GROUP ? 'render-form-group' : 'render-form-item'" :is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
:key="item.id" :key="item.id"
@@ -14,6 +13,7 @@
:options="options[item.id]" :options="options[item.id]"
@updateValue="updateValue" @updateValue="updateValue"
/> />
<slot :name="`$id:${item.id}`" />
</template> </template>
<slot /> <slot />
</el-form> </el-form>

View File

@@ -91,4 +91,16 @@ export default {
.el-form /deep/ .form-group-header { .el-form /deep/ .form-group-header {
margin-left: 50px; margin-left: 50px;
} }
.el-form /deep/ .help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #999;
font-size: 12px;
line-height: 18px;
}
.el-form /deep/ .help-block a {
color: #1c84c6;
}
</style> </style>