提交 3feee2df 编写于 作者: KK's avatar KK

解决item 样式不统一问题 && 代码格式化

上级 ce7934bc
<template>
<ion-item :class="[classes,labelPos.toLowerCase()]" :disabled="disabled">
<template v-if="uiStyle == 'STYLE2'">
<ion-label class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" :class="required?'app-form-item-label-required':'app-form-item-label-notRequired'" :style="{minWidth:labelWidth+'px'}" position="floating" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</ion-label>
<ion-label :class="classes" :style="{minWidth:labelWidth+'px'}" position="floating" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</ion-label>
<slot></slot>
</template>
<template v-else>
<template v-if="labelPos == 'LEFT'">
<ion-label class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" :class="required?'app-form-item-label-required':'app-form-item-label-notRequired'" :style="{minWidth:labelWidth+'px'}" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</ion-label>
<ion-label :class="classes" :style="{minWidth:labelWidth+'px'}" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</ion-label>
<div :style="contentStyle" style="display: flex;align-items: center;">
<slot></slot>
</div>
......@@ -14,8 +14,7 @@
</template>
<template v-if="labelPos == 'TOP'">
<ion-label
class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated"
:class="required?'app-form-item-label-required':'app-form-item-label-notRequired'"
:class="classes"
:style="{minWidth:labelWidth+'px'}"
position="floating"
v-if="isShowCaption && labelWidth > 0">
......@@ -27,7 +26,7 @@
<template v-if="labelPos == 'RIGHT' ">
<slot></slot>
<div class="prompt_text_right">{{error}}</div>
<ion-label class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" :class="required?'app-form-item-label-required':'app-form-item-label-notRequired'" :style="{minWidth:labelWidth+'px'}" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</ion-label>
<ion-label :class="classes" :style="{minWidth:labelWidth+'px'}" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</ion-label>
</template>
<template v-if="labelPos == 'NONE'" >
<slot></slot>
......@@ -41,18 +40,6 @@ import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { Util } from '@/ibiz-core/utils';
@Component({})
export default class AppFormItem extends Vue {
/**
* 内容样式
*
* @readonly
* @memberof AppFormItem
*/
get contentStyle() {
return {
width: this.isShowCaption && this.labelWidth > 0 ? `calc(100% - ${this.labelWidth}px)` : '100%',
}
}
/**
* 名称
*
......@@ -80,22 +67,11 @@ export default class AppFormItem extends Vue {
/**
* 表单项值
*
* @type {string}
* @type {any}
* @memberof AppFormItem
*/
@Prop() public itemValue?: any;
/**
* 校验值规则
*
* @type {string}
* @memberof AppFormItem
*/
@Watch('itemValue')
onItemValueChange() {
// this.validateRules();
}
/**
* 错误信息
*
......@@ -163,7 +139,7 @@ export default class AppFormItem extends Vue {
/**
* 表单项值规则
*
* @type {string}
* @type {any}
* @memberof AppFormItem
*/
@Prop() public itemRules!: any;
......@@ -199,7 +175,6 @@ export default class AppFormItem extends Vue {
this.computeRequired(newVal);
}
/**
* 计算样式
*
......@@ -210,32 +185,19 @@ export default class AppFormItem extends Vue {
get classes(): string[] {
return [
'app-form-item',
Object.is(this.labelPos, 'TOP') ? 'app-form-item-label-top' : ''
Object.is(this.labelPos, 'TOP') ? 'app-form-item-label-top' : '', this.required ? 'app-form-item-label-required' : 'app-form-item-label-notRequired', this.itemValue ? "item-has-value" : "", 'sc-ion-label-ios-h', 'sc-ion-label-ios-s ', 'ios', ' hydrated'
];
}
/**
* label样式
* 内容样式
*
* @readonly
* @type {string[]}
* @memberof IBizMDControl
*/
get labelclasses(): string[] {
return [
this.required ? 'app-form-item-label-required' : '',
this.labelStyle ? this.labelStyle : ''
];
}
/**
* vue 生命周期
*
* @memberof AppFormItem
*/
public mounted() {
if (this.itemRules) {
this.computeRequired(this.itemRules);
get contentStyle() {
return {
width: this.isShowCaption && this.labelWidth > 0 ? `calc(100% - ${this.labelWidth}px)` : '100%',
}
}
......@@ -268,7 +230,7 @@ export default class AppFormItem extends Vue {
* @memberof AppFormItem
*/
public async validateRules(): Promise<boolean> {
return await this.validate(name,this.itemValue);
return await this.validate(name, this.itemValue);
}
/**
......@@ -277,9 +239,9 @@ export default class AppFormItem extends Vue {
* @returns {boolean}
* @memberof AppFormItem
*/
public validate(property:string, data:any):Promise<any>{
public validate(property: string, data: any): Promise<any> {
return new Promise((resolve, reject) => {
Util.validateItem(property,data,this.rules).then(()=>{
Util.validateItem(property, data, this.rules).then(() => {
this.errorText = "";
resolve(true);
}).catch(({ errors, fields }) => {
......@@ -287,6 +249,18 @@ export default class AppFormItem extends Vue {
resolve(false);
});
});
}
/**
* vue 生命周期
*
* @memberof AppFormItem
*/
public mounted() {
if (this.itemRules) {
this.computeRequired(this.itemRules);
}
}
}
......
......@@ -156,3 +156,9 @@ ion-toolbar {
}
}
}
// 输入不禁用
.item-input.sc-ion-label-ios-h,
.item-input .sc-ion-label-ios-h {
pointer-events: all;
max-width: inherit;
}
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册