meixioacomponent 0.4.38 → 0.4.39

package/package.json

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

package/packages/components/base/baseNumberInput/index.js

@@ -0,0 +1,6 @@
+import baseNumberInput from './index.vue'
+
+baseNumberInput.install = function (Vue) {
+  Vue.component(baseNumberInput.name, baseNumberInput)
+}
+export default baseNumberInput

package/packages/components/base/baseNumberInput/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="pro-number-wrap">
+    <el-input-number
+      :size="size"
+      ref="target"
+      :controls="false"
+      :class="{
+        unit: unit,
+      }"
+      :precision="precision"
+      v-model.number="module"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      style="width: 100%; height: 100%;"
+    ></el-input-number>
+    <div class="number-unit" v-if="unit">
+      <span>{{ unit }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'baseNumberInput',
+  data() {
+    return {}
+  },
+  props: {
+    value: {},
+    precision: {
+      default: 0,
+    },
+    unit: {},
+
+    disabled: {
+      default: false,
+    },
+
+    maxlength: {},
+
+    size: {},
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.$props.value
+      },
+    },
+  },
+  methods: {
+    focus() {
+      this.$refs.target.focus()
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.pro-number-wrap {
+  width: 100%;
+  display: flex;
+  position: relative;
+  justify-items: center;
+  &:hover {
+    border-color: var(--color-primary);
+  }
+  .unit {
+    width: calc(100%);
+    border-radius: inherit;
+    /deep/ input {
+      padding-right: 34px !important;
+    }
+  }
+
+  .number-unit {
+    width: 28px;
+    height: 28px;
+    right: 2px;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    line-height: 28px;
+    position: absolute;
+    background: var(--color-gray-d);
+    span {
+      color: var(--font-color-d);
+      font-size: var(--font-size-s);
+      font-weight: var(--font-weight-g);
+    }
+  }
+}
+</style>

package/packages/components/index.js

@@ -37,6 +37,7 @@ import baseTreeSelect from './base/baseTreeSelect'
 import baseUploadTemplate from './base/baseUploadTemplate'
 import VueCropper from 'vue-cropper'
 import baseList from './base/baseList'
+import baseNumberInput from './base/baseNumberInput'
 // js 文件相关
 import Theme from '../config/theme/theme'
 import DynamicMount from './dynamicmount/index.js'
@@ -89,7 +90,8 @@ const meixicomponents = [
   basePopoverButton,
   baseTreeSelect,
   baseUploadTemplate,
-  baseList
+  baseList,
+  baseNumberInput
 ]
 
 const install = (Vue) => {
@@ -145,6 +147,7 @@ export default {
   basePopoverButton,
   baseTreeSelect,
   baseUploadTemplate,
+  baseNumberInput,
   Theme,
   SelectStore,
   useImg,

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

@@ -83,45 +83,28 @@
         style="width: 100%; height: 100%;"
       ></el-input>
       <!-- 数字类型无小数 -->
-      <div class="pro-number-wrap" v-else-if="config.type == 'number'">
-        <el-input-number
-          ref="target"
-          :size="size"
-          :class="{
-            unit: config.unit,
-          }"
-          :controls="false"
-          v-model.number="module"
-          :disabled="isDisabled"
-          :maxlength="config.maxlength"
-          style="width: 100%; height: 100%;"
-        ></el-input-number>
-
-        <div class="number-unit" v-if="config.unit">
-          <span>{{ config.unit }}</span>
-        </div>
-      </div>
+      <BaseNumberInput
+        v-else-if="config.type == 'number'"
+        ref="target"
+        :size="size"
+        v-model="module"
+        :unit="config.unit"
+        :disabled="isDisabled"
+        :maxlength="config.maxlength"
+      ></BaseNumberInput>
 
       <!--数字类型两位小数  -->
 
-      <div class="pro-number-wrap" v-else-if="config.type == 'number2'">
-        <el-input-number
-          :size="size"
-          ref="target"
-          :precision="2"
-          :controls="false"
-          :class="{
-            unit: config.unit,
-          }"
-          v-model.number="module"
-          :disabled="isDisabled"
-          :maxlength="config.maxlength"
-          style="width: 100%; height: 100%;"
-        ></el-input-number>
-        <div class="number-unit" v-if="config.unit">
-          <span>{{ config.unit }}</span>
-        </div>
-      </div>
+      <BaseNumberInput
+        v-else-if="config.type == 'number2'"
+        ref="target"
+        :size="size"
+        v-model="module"
+        :precision="2"
+        :unit="config.unit"
+        :disabled="isDisabled"
+        :maxlength="config.maxlength"
+      ></BaseNumberInput>
 
       <!-- select选择器 -->
       <el-select
@@ -240,6 +223,7 @@
 <script>
 //
 import componentConfig from '../../../config/componentConfig'
+import BaseNumberInput from '../../base/baseNumberInput/index.vue'
 export default {
   data() {
     return {
@@ -270,7 +254,6 @@ export default {
     config: {
       type: Object,
     },
-
     form: {
       type: Boolean,
       default: false,
@@ -279,19 +262,15 @@ export default {
       type: String,
       default: `right`,
     },
-
     value: {},
-
     size: {
       type: String,
       default: 'small',
     },
-
     width: {
       type: String,
     },
   },
-
   computed: {
     isDisabled() {
       const { config, disabled } = this.$props
@@ -306,15 +285,12 @@ export default {
     selectStore() {
       return componentConfig.selectStore.getStore(this.$props.config.useStore)
     },
-
     selectData() {
       return this.selectStore.getData()
     },
-
     selectConfig() {
       return this.selectStore.getConfig()
     },
-
     spContentType() {
       let configType = this.$props.config.type
       if (
@@ -327,24 +303,19 @@ 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) {
         case 'input':
         case 'textarea':
           return this.module
-
         case 'select':
           let list = this.selectData
           const selectConfig = this.selectConfig
@@ -354,7 +325,6 @@ export default {
                 let index = list.findIndex((item) => {
                   return item[`${selectConfig.value}`] == this.module
                 })
-
                 return list[index][`${selectConfig.label}`]
               } else {
                 return '暂无数据'
@@ -365,7 +335,6 @@ export default {
                 let index = list.findIndex((citem) => {
                   return citem[`${selectConfig.value}`] == item
                 })
-
                 text += text
                   ? ` / ${list[index][`${selectConfig.label}`]}`
                   : list[index][`${selectConfig.label}`]
@@ -376,7 +345,6 @@ export default {
             this.loadSelectData()
             return this.$props.config.value
           }
-
         // case "time":
         //   if (this.module) {
         //     let config = this.$props.config;
@@ -385,12 +353,10 @@ export default {
         //   } else {
         //     return "暂无时间";
         //   }
-
         default:
           return this.module
       }
     },
-
     datePickPlace() {
       const { datePickPlace } = this.$props.config
       if (!datePickPlace || datePickPlace.length < 2) {
@@ -398,21 +364,17 @@ export default {
       }
       return datePickPlace
     },
-
     type() {
       return this.$props.config.type
     },
-
     checkMax() {
       let max = this.$props.config.max
       return max ? max : this.$props.config.list.length
     },
-
     checkMin() {
       let min = this.$props.config.min
       return min < 0 || min == undefined || min == null ? 0 : min
     },
-
     isDatePick() {
       return (
         this.type == 'time' ||
@@ -420,7 +382,6 @@ export default {
         this.type == 'daterange'
       )
     },
-
     module: {
       get() {
         let type = this.$props.config.type
@@ -429,7 +390,6 @@ export default {
             this.loadSelectData()
           }
         }
-
         return this.$props.value
       },
       set(val) {
@@ -505,7 +465,6 @@ export default {
           type: item.type,
           result: item.fn(val),
         }
-
         console.log(val)
         this.$emit('disableWatcherResult', obj)
       })
@@ -516,6 +475,7 @@ export default {
       this.init()
     },
   },
+  components: { BaseNumberInput },
 }
 </script>
 
@@ -675,36 +635,4 @@ export default {
     min-height: 24px;
   }
 }
-.pro-number-wrap {
-  width: 100%;
-  display: flex;
-  position: relative;
-  justify-items: center;
-  &:hover {
-    border-color: var(--color-primary);
-  }
-  .unit {
-    width: calc(100%);
-    border-radius: inherit;
-    /deep/ input {
-      padding-right: 34px !important;
-    }
-  }
-
-  .number-unit {
-    width: 28px;
-    height: 28px;
-    right: 2px;
-    top: 50%;
-    transform: translateY(-50%);
-    text-align: center;
-    line-height: 28px;
-    position: absolute;
-    background: var(--color-gray-d);
-    span {
-      font-size: var(--font-color-d);
-      font-weight: var(--font-weight-g);
-    }
-  }
-}
 </style>

package/src/component/test.vue

@@ -558,9 +558,7 @@ export default {
     <template v-slot:formslot-test1="data">
       <el-input v-model="data.scope[0].value"></el-input>
     </template>
-    <template v-slot:formslot-test3="data">
-      <el-input v-model="data.scope[3].value"></el-input>
-    </template>
+
     <!-- <template slot="formWrap-test2">
       <div style="width: 100%; height: 100px; background: red;"></div>
     </template> -->
@@ -612,7 +610,8 @@ export default {
             },
             {
               key: 'test3',
-              type: 'template',
+              type: 'number2',
+              unit: '元',
 
               disabled: false,
               value: 17490,