面板成员update

src/components/app-panel-field/app-panel-field.less

-.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

 <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

+.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

 <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