修改容器组件未应用自定义样式的bug。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "variant-form",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open src/main.js",

src/components/form-designer/form-widget/container-widget/container-wrapper.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <div class="container-wrapper">
+  <div class="container-wrapper" :class="[customClass]">
     <slot></slot>
 
     <div class="container-action" v-if="designer.selectedId === widget.id && !widget.internal">
@@ -50,6 +50,12 @@
       indexOfParentList: Number,
       designer: Object,
     },
+    computed: {
+      customClass() {
+        return !!this.widget.options.customClass ? this.widget.options.customClass.join(' ') : ''
+      },
+
+    }
   }
 </script>
 

src/components/form-designer/setting-panel/form-setting.vue

@@ -168,6 +168,15 @@
 
       }
     },
+    created() {
+      //导入表单JSON后需要重新加载自定义CSS样式！！！
+      this.designer.handleEvent('form-json-imported', () => {
+        this.formCssCode = this.formConfig.cssCode
+        insertCustomCssToHead(this.formCssCode)
+        this.extractCssClass()
+        this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
+      })
+    },
     mounted() {
       /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
          此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
@@ -187,8 +196,8 @@
       extractCssClass() {
         let regExp = /\..*{/g
         let result = this.formCssCode.match(regExp)
-        //this.cssClassList.length = 0
+        let cssNameArray = []
-        this.cssClassList.splice(0, this.cssClassList.length)  //清除数组必须用splice，length=0不会响应式更新！！
+
         if (!!result && result.length > 0) {
           result.forEach((rItem) => {
             let classArray = rItem.split(',')  //切分逗号分割的多个class
@@ -198,26 +207,30 @@
                 if (caItem.indexOf('.', 1) !== -1) {  //查找第二个.位置
                   let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('.', 1))  //仅截取第一、二个.号之间的class
                   if (!!newClass) {
-                    this.cssClassList.push(newClass.trim())
+                    cssNameArray.push(newClass.trim())
                   }
                 } else if (caItem.indexOf(' ') !== -1) {  //查找第一个空格位置
                   let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf(' '))  //仅截取第一、二个.号之间的class
                   if (!!newClass) {
-                    this.cssClassList.push(newClass.trim())
+                    cssNameArray.push(newClass.trim())
                   }
                 } else {
                   if (caItem.indexOf('{') !== -1) {  //查找第一个{位置
                     let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('{'))
-                    this.cssClassList.push( newClass.trim() )
+                    cssNameArray.push( newClass.trim() )
                   } else {
                     let newClass = caItem.substring(caItem.indexOf('.') + 1)
-                    this.cssClassList.push( newClass.trim() )
+                    cssNameArray.push( newClass.trim() )
                   }
                 }
               })
             }
           })
         }
+
+        //this.cssClassList.length = 0
+        this.cssClassList.splice(0, this.cssClassList.length)  //清除数组必须用splice，length=0不会响应式更新！！
+        this.cssClassList = Array.from( new Set(cssNameArray) )  //数组去重
       },
 
       saveFormCss() {

src/components/form-designer/toolbar-panel/index.vue

@@ -6,9 +6,9 @@
       <el-button type="text" :disabled="redoDisabled" :title="i18nt('designer.toolbar.redoHint')" @click="redoHistory">
         <svg-icon icon-class="redo" /></el-button>
       <el-button-group style="margin-left: 20px">
-        <el-button :type="layoutType === 'PC' ? 'primary': ''" @click="changeLayoutType('PC')">
+        <el-button :type="layoutType === 'PC' ? 'info': ''" @click="changeLayoutType('PC')">
           {{i18nt('designer.toolbar.pcLayout')}}</el-button>
-        <el-button :type="layoutType === 'H5' ? 'primary': ''" @click="changeLayoutType('H5')">
+        <el-button :type="layoutType === 'H5' ? 'info': ''" @click="changeLayoutType('H5')">
           {{i18nt('designer.toolbar.mobileLayout')}}</el-button>
       </el-button-group>
     </div>
@@ -278,6 +278,8 @@
           this.$message.success(this.i18nt('designer.hint.importJsonSuccess'))
 
           this.designer.emitHistoryChange()
+
+          this.designer.emitEvent('form-json-imported', [])
         } catch(ex) {
           this.$message.error(ex + '')
         }

src/components/form-render/container-item/container-item-wrapper.vue

@@ -9,14 +9,23 @@
 -->
 
 <template>
-  <div class="container-wrapper">
+  <div class="container-wrapper" :class="[customClass]">
     <slot></slot>
   </div>
 </template>
 
 <script>
   export default {
-    name: "container-item-wrapper"
+    name: "container-item-wrapper",
+    props: {
+      widget: Object,
+    },
+    computed: {
+      customClass() {
+        return !!this.widget.options.customClass ? this.widget.options.customClass.join(' ') : ''
+      },
+
+    }
   }
 </script>
 

src/components/form-render/container-item/grid-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
 
     <el-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
             :class="[customClass]"

src/components/form-render/container-item/sub-form-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
 
     <div :key="widget.id" class="sub-form-container"
          v-show="!widget.options.hidden">

src/components/form-render/container-item/tab-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
 
     <div :key="widget.id" class="tab-container"
          v-show="!widget.options.hidden">

src/components/form-render/container-item/table-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
 
     <div :key="widget.id" class="table-container"
          v-show="!widget.options.hidden">

src/extension/samples/card/card-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <container-item-wrapper>
+  <container-item-wrapper :widget="widget">
     <el-card :key="widget.id" class="card-container" :class="[customClass]"
              :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
              :ref="widget.id" v-show="!widget.options.hidden">

src/extension/samples/card/card-widget.vue

@@ -4,7 +4,10 @@
     <el-card :key="widget.id" class="card-container" @click.native.stop="selectWidget(widget)"
              :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
              :class="[selected ? 'selected' : '', customClass]">
-      <div slot="header"><span>{{widget.options.label}}</span></div>
+      <div slot="header" class="clear-fix">
+        <span>{{widget.options.label}}</span>
+        <i class="el-icon-arrow-up float-right"></i>
+      </div>
       <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
                  handle=".drag-handler"
                  @add="(evt) => onContainerDragAdd(evt, widget.widgetList)"
@@ -80,4 +83,18 @@
   ::v-deep .el-card__header {
     padding: 10px 12px;
   }
+
+  .clear-fix:before, .clear-fix:after {
+    display: table;
+    content: "";
+  }
+
+  .clear-fix:after {
+    clear: both;
+  }
+
+  .float-right {
+    float: right;
+  }
+
 </style>

src/utils/config.js

@@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
 
 }
 
-export const VARIANT_FORM_VERSION = '2.1.2'
+export const VARIANT_FORM_VERSION = '2.1.3'
 
 export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'