meixioacomponent 0.3.35 → 0.3.38

package/package.json

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="base-img-wrap">
+  <div class="base-img-wrap" :class="[shape]">
     <img
       alt=""
       :src="src"
@@ -13,7 +13,7 @@
     <baseSkeletonVue
       v-if="loading"
       :lines="[1]"
-      :shape="`rect`"
+      :shape="shape"
     ></baseSkeletonVue>
     <div class="img-error-wrap" v-if="isError">
       <base-icon
@@ -26,18 +26,18 @@
 </template>
 
 <script>
-import useImg from "../../../config/use/UseImg";
-import baseSkeletonVue from "../baseSkeleton/baseSkeleton.vue";
+import useImg from '../../../config/use/UseImg'
+import baseSkeletonVue from '../baseSkeleton/baseSkeleton.vue'
 export default {
-  name: "baseImg",
+  name: 'baseImg',
   data() {
     return {
       isError: false,
       loading: true,
-    };
+    }
   },
   created() {
-    this.init();
+    this.init()
   },
   components: {
     baseSkeletonVue,
@@ -46,98 +46,104 @@ export default {
     //   cover,fill,contain,
     fit: {
       type: String,
-      default: "cover",
+      default: 'cover',
     },
     src: {
       type: String,
     },
     error: {
       type: String,
-      default: "图片加载失败",
+      default: '图片加载失败',
     },
     event: {
       type: Boolean,
       default: false,
     },
+    shape: {
+      type: String,
+      default: 'rect',
+    },
   },
   computed: {
     imgStyle() {
       return {
         objectFit: this.$props.fit,
-        cursor: this.$props.event ? "zoom-in" : "default",
-      };
+        cursor: this.$props.event ? 'zoom-in' : 'default',
+      }
     },
     imgShow() {
       if (this.$props.src) {
-        return true;
+        return true
       }
-      return false;
+      this.loading = false
+      this.isError = true
+      return false
     },
   },
   methods: {
     init() {
       if (!this.$props.src) {
-        this.loading = true;
+        this.loading = true
       }
     },
     loadEd() {
-      this.loading = false;
+      this.loading = false
     },
     errorEd() {
       //console.log(this.$props.src)
       //console.log("imgError");
-      this.loading = false;
-      this.isError = true;
+      this.loading = false
+      this.isError = true
     },
     viewImg() {
-      if (!this.$props.event || this.loading || this.isError) return;
-      let parent = this.$parent;
+      if (!this.$props.event || this.loading || this.isError) return
+      let parent = this.$parent
       if (!parent) {
-        useImg.toView([this.$props.src]);
-        return;
+        useImg.toView([this.$props.src])
+        return
       }
-      let tags = parent.$options._componentTag;
-      if (tags == "baseUploadItemVue") {
-        useImg.toView([this.$props.src]);
+      let tags = parent.$options._componentTag
+      if (tags == 'baseUploadItemVue') {
+        useImg.toView([this.$props.src])
       } else {
-        let parentChildrenList = parent.$children;
-        let name = this.$options.name;
+        let parentChildrenList = parent.$children
+        let name = this.$options.name
         let filterList = parentChildrenList.filter((item) => {
-          return item.$options.name == name;
-        });
-        let imgList = [];
-        let thisIndex = null;
-        let thisSrc = this.$props.src;
+          return item.$options.name == name
+        })
+        let imgList = []
+        let thisIndex = null
+        let thisSrc = this.$props.src
         filterList.forEach((item, index) => {
-          let itemSrc = item.$props.src;
+          let itemSrc = item.$props.src
           if (itemSrc == thisSrc) {
-            thisIndex = index;
+            thisIndex = index
           }
-          imgList.push(itemSrc);
-        });
-        this.viewListImg(thisIndex, imgList);
+          imgList.push(itemSrc)
+        })
+        this.viewListImg(thisIndex, imgList)
       }
     },
 
     viewListImg(index, imgList) {
-      let templateList = [...imgList];
+      let templateList = [...imgList]
       if (index == 0) {
-        useImg.toView(templateList);
-        return;
+        useImg.toView(templateList)
+        return
       }
-      let start = templateList.splice(index);
-      let remain = templateList.splice(0, index);
-      useImg.toView(start.concat(remain));
+      let start = templateList.splice(index)
+      let remain = templateList.splice(0, index)
+      useImg.toView(start.concat(remain))
     },
   },
 
   watch: {
     src: function (newVal, oldVal) {
-      this.isError = false;
-      this.loading = true;
+      this.isError = false
+      this.loading = true
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -147,6 +153,7 @@ export default {
   img {
     width: 100%;
     height: 100%;
+    border-radius: inherit;
   }
   .img-error-wrap {
     width: 100%;
@@ -157,4 +164,7 @@ export default {
     justify-content: center;
   }
 }
+.cir {
+  border-radius: 50%;
+}
 </style>

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,7 +32,7 @@
               :config="item"
               :disabled="disabled"
               v-model="item.value"
-              :labelWidth="labelWidth"
+              :width="formItemWidth"
               :labelPosition="labelPosition"
               :class="[`form-item-${item.key}`]"
               @formItemConfirm="formItemConfirm"
@@ -45,10 +45,11 @@
               </template>
             </pro_form_itemVue>
             <baseAreaVue
+              v-model="item.value"
               :disable="item.disabled"
               v-if="item.type == 'area'"
               :ref="`area-${item.key}`"
-              v-model="item.value"
+              :style="{ width: formItemWidth }"
               :class="[`form-item-${item.key}`]"
               @confirmAreaValue="
                 formItemConfirm({
@@ -102,12 +103,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 +367,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

@@ -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>
@@ -225,9 +228,9 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      const { labelWidth, labelPosition } = this.$props
+      const { labelPosition } = 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: {

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>