meixioacomponent 0.3.37 → 0.3.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.3.37",
+  "version": "0.3.40",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",

package/packages/components/base/baseImg/baseImg.vue

@@ -153,6 +153,7 @@ export default {
   img {
     width: 100%;
     height: 100%;
+    border-radius: inherit;
   }
   .img-error-wrap {
     width: 100%;

package/packages/components/dynamicmount/dynamicMount.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script>
-import Vue from "vue";
-import componentConfig from "../../config/componentConfig";
+import Vue from 'vue'
+import componentConfig from '../../config/componentConfig'
 export default {
-  name: "dynamicMount",
+  name: 'dynamicMount',
   data() {
     return {
       id: null,
@@ -18,13 +18,13 @@ export default {
       vueComponent: null,
       //传递给被挂载的组件的props值
       componentProps: null,
-    };
+    }
   },
   mounted() {
     //console.log("dyMounted");
     this.$nextTick(() => {
       //console.log(this.componentMounted);
-    });
+    })
   },
 
   computed: {},
@@ -32,24 +32,22 @@ export default {
   methods: {
     init() {
       // 初始化并且赋予需要挂载的组件props值
-      let props = this.vueComponent.props;
-      console.log(props);
-
+      let props = this.vueComponent.props
       if (props) {
-        if (typeof props == "Array") {
+        if (props instanceof Array) {
           for (const key in this.componentProps) {
-            this.vueComponent.props.push(`${key}`);
+            this.vueComponent.props.push(`${key}`)
           }
         } else {
           for (const key in this.componentProps) {
             if (!props.hasOwnProperty(`${key}`)) {
-              Vue.set(props, `${key}`, null);
+              Vue.set(props, `${key}`, null)
             }
           }
         }
       }
 
-      const components = Vue.extend(this.vueComponent);
+      const components = Vue.extend(this.vueComponent)
       this.componentMounted = new components({
         propsData: {
           ...this.componentProps,
@@ -57,35 +55,35 @@ export default {
         store: componentConfig.store,
         parent: this,
         router: componentConfig.router,
-      });
-      this.registerListen();
-      this.$children.push(this.componentMounted);
+      })
+      this.registerListen()
+      this.$children.push(this.componentMounted)
       this.$nextTick(() => {
-        this.componentMounted.$mount();
-        this.$refs.dynamicMount.appendChild(this.componentMounted.$el);
-      });
+        this.componentMounted.$mount()
+        this.$refs.dynamicMount.appendChild(this.componentMounted.$el)
+      })
     },
     registerListen() {
-      this.componentMounted.$on("hook:mounted", () => {});
-      this.componentMounted.$on("hook:destroyed", () => {
-        this.mountedDom = null;
+      this.componentMounted.$on('hook:mounted', () => {})
+      this.componentMounted.$on('hook:destroyed', () => {
+        this.mountedDom = null
         //console.log("destroyed");
-        this.close();
-      });
+        this.close()
+      })
     },
 
     close() {
-      this.$destroy();
+      this.$destroy()
       if (this.mountedDom) {
-        this.mountedDom.$destroy();
+        this.mountedDom.$destroy()
       }
-      let dom = document.getElementById(`dynamic-${this.id}`);
+      let dom = document.getElementById(`dynamic-${this.id}`)
       if (dom) {
-        dom.remove();
+        dom.remove()
       }
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>

package/packages/components/proForm/proForm/pro_form.vue

@@ -32,30 +32,33 @@
               :config="item"
               :disabled="disabled"
               v-model="item.value"
-              :labelWidth="labelWidth"
+              :width="formItemWidth"
               :labelPosition="labelPosition"
               :class="[`form-item-${item.key}`]"
               @formItemConfirm="formItemConfirm"
               @disableWatcherResult="disableWatcherResult"
               :disableWatcher="setWatcher(item.key)"
-              v-if="formType == 'default' && item.type != 'area'"
+              v-if="formType == 'default'"
             >
               <template slot="template" v-if="item.type == 'template'">
                 <slot :name="`form-${item.key}`" :scope="module"></slot>
               </template>
+              <template slot="area" v-if="item.type == 'area'">
+                <baseAreaVue
+                  v-model="item.value"
+                  :disable="item.disabled"
+                  :ref="`area-${item.key}`"
+                  :style="{ width: `100%` }"
+                  :class="[`form-item-${item.key}`]"
+                  @confirmAreaValue="
+                    formItemConfirm({
+                      config: item,
+                    })
+                  "
+                ></baseAreaVue>
+              </template>
             </pro_form_itemVue>
-            <baseAreaVue
-              :disable="item.disabled"
-              v-if="item.type == 'area'"
-              :ref="`area-${item.key}`"
-              v-model="item.value"
-              :class="[`form-item-${item.key}`]"
-              @confirmAreaValue="
-                formItemConfirm({
-                  config: item,
-                })
-              "
-            ></baseAreaVue>
+
             <baseUploadVue
               v-model="item.value"
               :max="formConfig.max"
@@ -102,12 +105,15 @@ export default {
   name: 'baseForm',
   data() {
     return {
+      loading: true,
       handleConfig: [],
       chunkLength: null,
-      loading: true,
+      formItemWidth: null,
     }
   },
-  created() {},
+  created() {
+    this.setFormItemWidth()
+  },
   mounted() {
     this.$nextTick(() => {
       this.init()
@@ -363,6 +369,11 @@ export default {
     disableWatcherResult(params) {
       this.$emit('disableWatcherResult', params)
     },
+
+    setFormItemWidth() {
+      const { labelWidth } = this.$props
+      this.formItemWidth = `calc(100% - ${labelWidth}) !important`
+    },
   },
   watch: {
     chunkLength(newVal, oldVal) {

package/packages/components/proForm/proForm/pro_form_item.vue

@@ -8,7 +8,7 @@
       'form-item-wrap': true,
     }"
   >
-    <div class="item-content" v-if="config.type != 'template' && !isEdit">
+    <div class="item-content" v-if="!typeOftemplate && !isEdit">
       <p
         v-if="!spContentType"
         class="content-value"
@@ -78,6 +78,7 @@
         :size="size"
         v-model="module"
         :disabled="isDisabled"
+        :maxlength="config.maxlength"
         v-if="config.type == 'input'"
         style="width: 100%; height: 100%;"
       ></el-input>
@@ -88,6 +89,7 @@
         :controls="false"
         v-model.number="module"
         :disabled="isDisabled"
+        :maxlength="config.maxlength"
         v-else-if="config.type == 'number'"
         style="width: 100%; height: 100%;"
       ></el-input-number>
@@ -99,6 +101,7 @@
         :controls="false"
         v-model.number="module"
         :disabled="isDisabled"
+        :maxlength="config.maxlength"
         style="width: 100%; height: 100%;"
         v-else-if="config.type == 'number2'"
       ></el-input-number>
@@ -186,6 +189,7 @@
       ></el-input>
       <!-- 插槽 -->
       <slot name="template" v-else-if="config.type == 'template'"></slot>
+      <slot name="area" v-else-if="config.type == 'area'"></slot>
     </div>
     <!-- 确定的按钮 -->
     <div class="bottom-handle-wrap" v-show="isEdit && !form">
@@ -210,7 +214,6 @@
 </template>
 
 <script>
-import { FilterTime } from '../../../utils/utils'
 //
 import componentConfig from '../../../config/componentConfig'
 export default {
@@ -225,9 +228,9 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      const { labelWidth, labelPosition } = this.$props
+      const { labelPosition, width } = this.$props
       if (labelPosition != 'top') {
-        this.$refs.formItemRef.parentNode.style.cssText += `;width:calc(100% - ${labelWidth}) !important`
+        this.$refs.formItemRef.parentNode.style.cssText += `width:${width}`
       }
       if (this.$props.disableWatcher) {
         this.triggerDisable(this.$props.value)
@@ -260,7 +263,9 @@ export default {
       default: 'small',
     },
 
-    labelWidth: {},
+    width: {
+      type: String,
+    },
   },
 
   computed: {
@@ -298,6 +303,17 @@ export default {
       }
       return false
     },
+
+    typeOftemplate() {
+      const { type } = this.$props.config
+
+      if (type == 'template' || type == 'area') {
+        return true
+      }
+
+      return false
+    },
+
     contentValue() {
       let type = this.$props.config.type
       switch (type) {
@@ -420,7 +436,6 @@ export default {
     },
     targetFocus() {
       let ref = this.$refs.target
-      console.log(ref)
       if (ref) {
         ref.focus()
       }

package/src/App.vue

@@ -1,20 +1,7 @@
 <template>
   <div id="app">
     <div style="height: 100vh">
-      <test />
 
-      <!-- <base-time-line
-        :hasTimeWeek="false"
-        :timeLineSource="items"
-      ></base-time-line> -->
-
-      <!-- <base-popover-button
-       v-model="test" 
-        iconClass="element"
-        buttonIcon="el-icon-delete-solid"
-      ></base-popover-button>
-
-      <base-icon  iconClass="element" name="el-icon-delete-solid" :event="true"> </base-icon> -->
     </div>
   </div>
 </template>