Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 b8e44c70 编写于 作者: Shine-zwj's avatar Shine-zwj
浏览文件
操作

面板成员update

上级 2e1f3dda
隐藏空白字符变更
内嵌 并排
正在显示 包含 73 行增加 和 46 行删除
src/components/app-panel-field/app-panel-field.less
浏览文件 @ b8e44c70
.app-panel-item {
.app-panel-field {
height: 100%;
width: 100%;
display: flex;
padding: 0 6px;
.editor{
flex-grow: 1;
height: 34px !important;
.editorstyle{
.ivu-input.ivu-input-default{
border-color: red;
}
}
.errorstyle{
color:red !important;
}
}
.app-panel-item-label {
.app-panel-field-label {
height: 34px !important;
line-height: 25px;
flex-shrink: 0;
......@@ -15,34 +22,29 @@
}
}
.app-panel-item.label-top {
.app-panel-field.label-top {
flex-flow: column;
}
.app-panel-item.label-bottom{
.app-panel-field.label-bottom{
flex-flow: column-reverse;
}
.app-panel-item.label-left {
.app-panel-item-label {
.app-panel-field.label-left {
.app-panel-field-label {
text-align: right;
}
}
.app-panel-item.label-right {
.app-panel-field.label-right {
flex-flow: row-reverse;
.app-panel-item-label {
.app-panel-field-label {
padding: 6px 0px 6px 10px;
}
}
.app-panel-item.label-none {
.app-panel-item-label {
.app-panel-field.label-none {
.app-panel-field-label {
display: none !important;
}
}
.editorStyle{
.ivu-input.ivu-input-default{
border-color: red;
}
}
\ No newline at end of file
src/components/app-panel-field/app-panel-field.vue
浏览文件 @ b8e44c70
<template>
<div :class="classes">
<div v-if="Object.is(labelPos,'NONE') || !labelPos" class="editor">
<div :class="valueCheck == true ?'':'editorStyle'">
<div :class="valueCheck == true ?'':'editorstyle'">
<slot ></slot>
<span :class="error ? 'errorstyle':''">{{error}}</span>
</div>
</div>
<div v-if="!Object.is(labelPos,'NONE')" class="app-panel-item-label">
<div v-if="!Object.is(labelPos,'NONE')" class="app-panel-field-label">
<span v-if="required" style="color:red;">* </span>
{{isEmptyCaption ? '' : caption}}
</div>
<div v-if="Object.is(labelPos,'BOTTOM') || Object.is(labelPos,'TOP') || Object.is(labelPos,'LEFT') || Object.is(labelPos,'RIGHT')" class="editor">
<div :class="valueCheck == true ?'':'editorStyle'">
<div :class="valueCheck == true ?'':'editorstyle'">
<slot ></slot>
<span :class="error ? 'errorstyle':''">{{error}}</span>
</div>
</div>
</div>
......@@ -20,12 +22,12 @@
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({})
export default class AppPanelItem extends Vue {
export default class AppPanelField extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Prop() public caption!: string;
......@@ -33,7 +35,7 @@ export default class AppPanelItem extends Vue {
* 错误信息
*
* @type {string}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Prop() public error?: string;
......@@ -41,7 +43,7 @@ export default class AppPanelItem extends Vue {
* 标签位置
*
* @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Prop() public labelPos?:
| string
......@@ -55,7 +57,7 @@ export default class AppPanelItem extends Vue {
* 标签是否空白
*
* @type {boolean}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Prop() public isEmptyCaption?: boolean;
......@@ -63,7 +65,7 @@ export default class AppPanelItem extends Vue {
* 列表项名称
*
* @type {string}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Prop() public name!: string;
......@@ -71,7 +73,7 @@ export default class AppPanelItem extends Vue {
* 面板数据
*
* @type {any}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Prop() public data!: any;
......@@ -79,7 +81,7 @@ export default class AppPanelItem extends Vue {
* 编辑器值
*
* @type {any}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Prop() public value !: any;
......@@ -87,7 +89,7 @@ export default class AppPanelItem extends Vue {
* 值规则
*
* @type {string}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Prop() public itemRules!: any;
......@@ -95,7 +97,7 @@ export default class AppPanelItem extends Vue {
* 是否必填
*
* @type {boolean}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
public required: boolean = false;
......@@ -103,7 +105,7 @@ export default class AppPanelItem extends Vue {
* 值规则数组
*
* @type {any[]}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
public rules: any[] = [];
......@@ -112,7 +114,7 @@ export default class AppPanelItem extends Vue {
*
* @param {*} newVal
* @param {*} oldVal
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Watch("itemRules", { deep: true })
onItemRulesChange(newVal: any, oldVal: any) {
......@@ -136,7 +138,7 @@ export default class AppPanelItem extends Vue {
* 编辑器样式
*
* @type {boolean}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
public valueCheck: boolean = true;
......@@ -145,7 +147,7 @@ export default class AppPanelItem extends Vue {
*
* @param {*} newVal
* @param {*} oldVal
* @memberof AppPanelItem
* @memberof AppPanelField
*/
@Watch("value")
ItemValueRules(newVal: any, oldVal: any) {
......@@ -161,7 +163,7 @@ export default class AppPanelItem extends Vue {
*
* @readonly
* @type {string []}
* @memberof AppPanelItem
* @memberof AppPanelField
*/
get classes(): string[] {
let posClass = "";
......@@ -182,13 +184,13 @@ export default class AppPanelItem extends Vue {
posClass = "label-none";
break;
}
return [ "app-panel-item", posClass ];
return [ "app-panel-field", posClass ];
}
/**
* vue 生命周期
*
* @memberof AppPanelItem
* @memberof AppPanelField
*/
public mounted() {
if (this.itemRules) {
......
src/components/app-panel-item/app-panel-item.less 0 → 100644
浏览文件 @ b8e44c70
.app-panel-item{
.app-panel-item-rawitem{
padding-right: 10px;
}
}
\ No newline at end of file
src/components/app-panel-item/app-panel-item.vue
浏览文件 @ b8e44c70
<template>
<div>
<div class="app-panel-item">
<div v-if="Object.is(itemType,'BUTTON')" >
<Button type="primary" long @click="onClick">
<i v-if="icon" :class="icon"></i>
<span v-if="showCaption">{{caption ? caption : ''}}</span>
<span v-if="showCaption" :class="lableStyle">{{caption ? caption : ''}}</span>
</Button>
</div>
<div v-if="Object.is(itemType,'RAWITEM')">
<i v-if="icon" :class="icon"></i>
<span v-if="showCaption" style="padding-right: 10px;">{{caption ? caption : ''}}</span>
<span v-if="showCaption" :class="lableStyle ? lableStyle : 'app-panel-item-rawitem'">{{caption ? caption : ''}}</span>
<div :class="contentStyle">
<slot></slot>
</div>
</div>
</div>
</template>
......@@ -18,13 +20,13 @@
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({})
export default class AppPanelButton extends Vue {
export default class AppPanelItem extends Vue {
/**
* 面板成员类型
*
* @type {string}
* @memberof AppPanelButton
* @memberof AppPanelItem
*/
@Prop() public itemType!: string;
......@@ -32,7 +34,7 @@ export default class AppPanelButton extends Vue {
* 图标
*
* @type {string}
* @memberof AppPanelButton
* @memberof AppPanelItem
*/
@Prop() public icon?: string;
......@@ -40,7 +42,7 @@ export default class AppPanelButton extends Vue {
* 标题
*
* @type {string}
* @memberof AppPanelButton
* @memberof AppPanelItem
*/
@Prop() public caption?: string;
......@@ -48,15 +50,31 @@ export default class AppPanelButton extends Vue {
* 显示标题
*
* @type {boolean}
* @memberof AppPanelButton
* @memberof AppPanelItem
*/
@Prop() public showCaption?: boolean;
/**
* 标题样式
*
* @type {boolean}
* @memberof AppPanelItem
*/
@Prop() public lableStyle?: string;
/**
* 内容样式
*
* @type {boolean}
* @memberof AppPanelItem
*/
@Prop() public contentStyle?: string;
/**
* 点击按钮
*
* @param {*} $event
* @memberof AppPanelButton
* @memberof AppPanelItem
*/
public onClick($event: any){
this.$emit('onClick',$event);
......@@ -65,5 +83,5 @@ export default class AppPanelButton extends Vue {
}
</script>
<style lang='less'>
@import "./app-panel-item.less";
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或