提交 53910903 编写于 作者: WodahsOrez's avatar WodahsOrez

lxm--formitem,label位置适配必填样式

上级 03499eca
.app-form-item-wrapper {
height: 100%;
}
.app-form-item { .app-form-item {
height: 100%; height: 100%;
.editor {
>.ivu-form-item-label {
text-decoration: none;
display: block;
overflow: hidden;
white-space: nowrap;
}
>.ivu-form-item-content {
height: 100%; height: 100%;
min-height: 36px; .ivu-form-item-content {
>.editor {
height: 100%; height: 100%;
min-height: 36px;
} }
} }
.app-form-item-label {
padding: 6px 12px 6px 0px;
}
} }
.app-form-item.label-top, .app-form-item.label-bottom { .app-form-item.label-top, .app-form-item.label-bottom {
.app-form-item-label { .app-form-item-label {
height: 16px; display: block;
}
.editor {
height: calc(100% - 16px);
} }
} }
.app-form-item.label-left, .app-form-item.label-right { .app-form-item.label-left, .app-form-item.label-right {
.app-form-item-label, .editor { .app-form-item-label, .editor {
height: 100%; height: 100%;
} }
} }
.app-form-item.label-left { .app-form-item.label-left {
.app-form-item-label { .app-form-item-label {
float: left; float: left;
text-align: right;
padding-right: 10px;
} }
} }
.app-form-item.label-right { .app-form-item.label-right {
.app-form-item-label { .app-form-item-label {
float: right; float: right;
text-align: left; padding-left: 12px;
padding-left: 10px;
} }
} }
.app-form-item.label-none { .app-form-item.label-none {
.app-form-item-label { .app-form-item-label {
display: none !important; display: none !important;
} }
.editor {
height: 100%;
}
} }
\ No newline at end of file
<template> <template>
<div class="app-form-item-wrapper"> <div :class="classes">
<template v-if="this.uiStyle === 'STYLE2'"> <template v-if="this.uiStyle === 'STYLE2'">
<app-form-item2 <app-form-item2
:caption="caption" :caption="caption"
...@@ -16,28 +16,32 @@ ...@@ -16,28 +16,32 @@
</app-form-item2> </app-form-item2>
</template> </template>
<template v-if="this.uiStyle !== 'STYLE2'"> <template v-if="this.uiStyle !== 'STYLE2'">
<form-item :prop="name" :error="error" :required="required" :rules="rules" :class="classes"> <div
<div v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos"
v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos" class="editor"
class="editor" :style="slotstyle"
:style="slotstyle" >
> <form-item :prop="name" :error="error" :required="required" :rules="rules">
<slot></slot> <slot></slot>
</div> </form-item>
<span </div>
v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0" <span
:style="labelstyle" v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0"
:class="labelclasses" :style="labelstyle"
> :class="labelclasses"
{{this.isEmptyCaption ? '' : this.caption}}</span> >
<div <span v-if="required" style="color:red;">* </span>
v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')" {{this.isEmptyCaption ? '' : this.caption}}
class="editor" </span>
:style="slotstyle" <div
> v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')"
class="editor"
:style="slotstyle"
>
<form-item :prop="name" :error="error" :required="required" :rules="rules">
<slot></slot> <slot></slot>
</div> </form-item>
</form-item> </div>
</template> </template>
</div> </div>
</template> </template>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册