提交 6d3ff6d3 编写于 作者: neko's avatar neko

优化表单布局

上级 e149f635
.app-form-group {
>.ivu-card-head {
>p {
>i {
......@@ -7,9 +8,12 @@
}
}
}
>.ivu-card-extra {
.item-extract-mode {
display: flex;
.item {
margin-left: 12px;
}
......@@ -26,7 +30,8 @@
.app-group-flex {
height: 100%;
overflow: auto;
> .ivu-card-body {
>.ivu-card-body {
height: calc(100% - 51px);
overflow: auto;
}
......
<template>
<div class="app-form-group">
<div v-if="uiStyle=='STYLE2'">
<div :class="classes">
<template v-if="uiStyle=='STYLE2'">
<app-form-group2
:caption="caption"
:uiStyle="uiStyle"
......@@ -10,8 +10,8 @@
:titleBarCloseMode="titleBarCloseMode">
<slot></slot>
</app-form-group2>
</div>
<div v-else>
</template>
<template v-else>
<card v-if="isShowCaption === true" :bordered="false" :dis-hover="true" :class="classes">
<p class='' slot='title'>
<icon v-if="titleBarCloseMode !== 0" :type="collapseContant ? 'ios-arrow-dropright-circle' : 'ios-arrow-dropdown-circle'"
......@@ -87,17 +87,22 @@
</template>
</a >
</template>
<div v-if="Object.is(layoutType, 'FLEX')">
<template v-if="Object.is(layoutType, 'FLEX')">
<slot></slot>
</div>
<div v-if="!Object.is(layoutType, 'FLEX')">
</template>
<template v-if="!Object.is(layoutType, 'FLEX')">
<row :gutter="10"><slot></slot></row>
</div>
</template>
</card>
<row v-if="isShowCaption === false" :class="classes">
<template v-if="isShowCaption === false">
<template v-if="Object.is(layoutType, 'FLEX')">
<slot></slot>
</row>
</div>
</template>
<template v-if="!Object.is(layoutType, 'FLEX')">
<row :gutter="10"><slot></slot></row>
</template>
</template>
</template>
</div>
</template>
......
.app-form-item {
// margin-bottom: 16px;
height: 100%;
>.ivu-form-item-label {
text-decoration: none;
display: block;
overflow: hidden;
white-space: nowrap;
}
>.ivu-form-item-content {
height: 100%;
min-height: 36px;
>.editor {
height: 100%;
}
}
}
.app-form-item-label-top {
>.ivu-form-item-label {
float: none;
display: inline-block;
padding: 0 0 10px;
.app-form-item.label-top, .app-form-item.label-bottom {
.app-form-item-label {
height: 16px;
}
.editor {
height: calc(100% - 16px);
}
}
.app-form-item.label-left, .app-form-item.label-right {
.app-form-item-label, .editor {
height: 100%;
}
}
.app-form-item-label-left{
.app-form-item-label{
.app-form-item.label-left {
.app-form-item-label {
float: left;
text-align: right;
padding-right: 12px;
}
}
.app-form-item-label-right{
.app-form-item-label{
.app-form-item.label-right {
.app-form-item-label {
float: right;
text-align: left;
padding-left: 12px;
}
}
.app-form-item-label-top{
.app-form-item-label{
display: block;
padding-bottom: 10px;
.app-form-item.label-none {
.app-form-item-label {
display: none !important;
}
}
.app-form-item-label-bottom{
.app-form-item-label{
display: block;
padding-top: 10px;
.editor {
height: 100%;
}
}
\ No newline at end of file
<template>
<div>
<div v-if="this.uiStyle === 'STYLE2'">
<div class="app-form-item-wrapper">
<template v-if="this.uiStyle === 'STYLE2'">
<app-form-item2
:caption="caption"
:labelStyle="labelStyle"
......@@ -14,33 +14,38 @@
:itemRules="itemRules">
<slot></slot>
</app-form-item2>
</div>
<div v-if="this.uiStyle !== 'STYLE2'">
<form-item
:prop="name"
:error="error"
:required="required"
:rules="rules"
:class="classes">
<div v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos" class="slot-editor" :style="slotstyle">
</template>
<template v-if="this.uiStyle !== 'STYLE2'">
<form-item :prop="name" :error="error" :required="required" :rules="rules" :class="classes">
<div
v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos"
class="editor"
:style="slotstyle"
>
<slot></slot>
</div>
<span v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0" :style="labelstyle" :class="labelclasses">
{{this.isEmptyCaption ? '' : this.caption}}
</span>
<div v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')" class="slot-editor" :style="slotstyle">
<span
v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0"
:style="labelstyle"
:class="labelclasses"
>
{{this.isEmptyCaption ? '' : this.caption}}</span>
<div
v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')"
class="editor"
:style="slotstyle"
>
<slot></slot>
</div>
</form-item>
</div>
</template>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({})
export default class AppFormItem extends Vue {
/**
* 名称
*
......@@ -71,7 +76,13 @@ export default class AppFormItem extends Vue {
* @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
* @memberof AppFormItem
*/
@Prop() public labelPos?: string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP';
@Prop() public labelPos?:
| string
| "BOTTOM"
| "LEFT"
| "NONE"
| "RIGHT"
| "TOP";
/**
* 标签宽度
......@@ -144,7 +155,7 @@ export default class AppFormItem extends Vue {
* @param {*} oldVal
* @memberof AppFormItem
*/
@Watch('itemRules',{deep:true})
@Watch("itemRules", { deep: true })
onItemRulesChange(newVal: any, oldVal: any) {
if (newVal) {
try {
......@@ -152,14 +163,13 @@ export default class AppFormItem extends Vue {
const _rules: any[] = newVal;
this.rules = [..._rules];
this.rules.some((rule: any) => {
if (rule.hasOwnProperty('required')) {
if (rule.hasOwnProperty("required")) {
this.required = rule.required;
return true;
}
return false;
});
} catch (error) {
}
} catch (error) {}
}
}
......@@ -171,28 +181,25 @@ export default class AppFormItem extends Vue {
* @memberof AppFormItem
*/
get classes(): string[] {
let posClass = '';
let posClass = "";
switch (this.labelPos) {
case 'TOP':
posClass = 'app-form-item-label-top';
case "TOP":
posClass = "label-top";
break;
case 'LEFT':
posClass = 'app-form-item-label-left';
case "LEFT":
posClass = "label-left";
break;
case 'BOTTOM':
posClass = 'app-form-item-label-bottom';
case "BOTTOM":
posClass = "label-bottom";
break;
case 'RIGHT':
posClass = 'app-form-item-label-right';
case "RIGHT":
posClass = "label-right";
break;
case 'NONE':
posClass = 'app-form-item-label-none';
case "NONE":
posClass = "label-none";
break;
}
return [
'app-form-item',
posClass
];
return [ "app-form-item", posClass ];
}
/**
......@@ -202,8 +209,10 @@ export default class AppFormItem extends Vue {
* @type {string}
* @memberof AppFormItem
*/
get labelclasses():string{
return this.labelStyle?this.labelStyle+' app-form-item-label':'app-form-item-label';
get labelclasses(): string {
return this.labelStyle
? this.labelStyle + " app-form-item-label"
: "app-form-item-label";
}
/**
......@@ -213,8 +222,10 @@ export default class AppFormItem extends Vue {
* @type {string}
* @memberof AppFormItem
*/
get labelstyle():any{
return {width:this.labelWidth+'px'};
get labelstyle(): any {
if (Object.is(this.labelPos, 'LEFT') || Object.is(this.labelPos, 'RIGHT')) {
return { width: this.labelWidth + "px" };
}
}
/**
......@@ -224,11 +235,11 @@ export default class AppFormItem extends Vue {
* @type {string}
* @memberof AppFormItem
*/
get slotstyle():any{
if(Object.is(this.labelPos,'LEFT')){
return {marginLeft:this.labelWidth+'px'};
}else if(Object.is(this.labelPos,'RIGHT')){
return {marginRight:this.labelWidth+'px'};
get slotstyle(): any {
if (Object.is(this.labelPos, "LEFT")) {
return { marginLeft: this.labelWidth + "px" };
} else if (Object.is(this.labelPos, "RIGHT")) {
return { marginRight: this.labelWidth + "px" };
}
}
......@@ -243,19 +254,17 @@ export default class AppFormItem extends Vue {
const _rules: any[] = this.itemRules;
this.rules = [..._rules];
this.rules.some((rule: any) => {
if (rule.hasOwnProperty('required')) {
if (rule.hasOwnProperty("required")) {
this.required = rule.required;
return true;
}
return false;
});
} catch (error) {
} catch (error) {}
}
}
}
}
</script>
<style lang='less'>
@import './app-form-item.less';
@import "./app-form-item.less";
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册