fei

babel.config.js

@@ -1,5 +1,16 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+    '@vue/cli-plugin-babel/preset',
+	["@babel/preset-env", { "modules": false }]
+  ],
+  plugins: [
+      [
+        "component",
+        {
+          "libraryName": "element-ui",
+          "styleLibraryName": "theme-chalk"
+        }
+      ]
+    ]
 }
+

examples/main.js

@@ -1,12 +1,15 @@
 import Vue from 'vue'
 import App from '../src/App.vue'
 
+//基于element组件封装，引入element组件库
+import { Input } from 'element-ui';
+Vue.use(Input);
+
 // 导入组件库
-import myui from '../packages'
-
+import erp_element_ui from '../packages'
 Vue.config.productionTip = false
+Vue.use(erp_element_ui)
 
-Vue.use(myui)
 
 new Vue({
   render: h => h(App),

package.json

@@ -10,16 +10,18 @@
   },
   "main": "./lib/myErpElement.umd.min.js",
   "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "core-js": "^3.6.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.19",
     "@vue/cli-plugin-eslint": "~4.5.19",
     "@vue/cli-service": "~4.5.19",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "element-ui": "^2.15.14",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

packages/Button/index.js

@@ -1,9 +0,0 @@
-import mButton from './src'
-
-// 为组件提供 install 安装方法，供按需引入
-mButton.install = function (Vue) {
-  Vue.component(mButton.name, mButton)
-}
-
-// 导出组件
-export default mButton

packages/Button/src/index.vue

@@ -1,38 +0,0 @@
-<template>
-    <div class="button">
-      <slot name="default" :datas="datas">{{ datas.a }}</slot>
-    </div>
-  </template>
-
-  <script>
-  export default {
-    name: 'mButton',
-    props: {
-      type: String
-    },
-    data() {
-      return {
-        datas:{
-          a:'666',
-          b:'successs'
-        }
-      }
-    },
-  }
-  </script>
-  
-  <style scoped>
-  .button {
-    width: 100px;
-    border: 1px solid #000;
-    padding: .5rem;
-    margin: 0 auto;
-  }
-  
-  .button:hover {
-    color: aliceblue;
-    background-color: orange;
-  }
-  </style>
-  
-  

packages/Button1/index.js

@@ -1,9 +0,0 @@
-import mButton1 from './src'
-
-// 为组件提供 install 安装方法，供按需引入
-mButton1.install = function (Vue) {
-  Vue.component(mButton1.name, mButton1)
-}
-
-// 导出组件
-export default mButton1

packages/Button1/src/index.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="button">
-    <slot v-bind:data="name">{{ name.a }}</slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'mButton1',
-  props: {
-    type: String
-  },
-  data() {
-    return {
-      name: { a: '777', b: '888' }
-    }
-  },
-}
-</script>
-
-<style scoped>
-.button {
-  width: 100px;
-  border: 1px solid #000;
-  padding: .5rem;
-  margin: 0 auto;
-}
-
-.button:hover {
-  color: aliceblue;
-  background-color: #000000;
-}
-</style>

packages/index.js

@@ -1,10 +1,9 @@
 // 导入button组件
-import mButton from './Button/src/index.vue'
-import mButton1 from './Button1/src/index.vue'
+import pedestal from './pedestal/src/index.vue'
 
 // 组件列表
 const components = [
-  mButton,mButton1
+  pedestal,
 ]
 
 // 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
@@ -24,6 +23,5 @@ export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,
   // 以下是具体的组件列表
-  mButton,
-  mButton1,
+  pedestal,
 }

packages/pedestal/index.js

@@ -0,0 +1,9 @@
+import pedestal from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+pedestal.install = function (Vue) {
+    Vue.component(pedestal.name, pedestal)
+}
+
+// 导出组件
+export default pedestal

packages/pedestal/src/index.vue

@@ -0,0 +1,77 @@
+<template>
+    <el-input
+      class="w-input"
+      :style="{ width }"
+      :value="value"
+      :size="size"
+      v-on="inputListeners"
+      v-bind="[$attrs]"
+    >
+      <slot name="append" slot="append" />
+      <slot name="prefix" slot="prefix" />
+      <slot name="suffix" slot="suffix" />
+      <slot name="prepend" slot="prepend" />
+    </el-input>
+  </template>
+  
+  <script>
+  /**
+   * WInput
+   * @desc    处理输入的输入框(转大写，不能有中文空格等)
+   */
+  export default {
+    name: "WInput",
+    props: {
+      width: {
+        type: String,
+        default: "180px",
+      },
+      size: {
+        type: String,
+        default: "small",
+      },
+      value: {
+        type: String,
+        default: "",
+      },
+      toUpperCase: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      // 所有父级事件
+      inputListeners() {
+        return Object.assign(
+          {},
+          // 我们从父级添加所有的监听器
+          this.$listeners,
+          // 然后我们添加自定义监听器，
+          // 或覆写一些监听器的行为
+          {
+            // 这里确保组件配合 `v-model` 的工作
+            input: (value) => {
+              this.$emit("input", this.toUpperCase ? value.toUpperCase() : value);
+            },
+            blur: (e) => {
+              let value = e.target.value
+                .trim()
+                .replace(/\s/g, (match) =>
+                  match.charCodeAt(0) === 12288 ? String.fromCharCode(32) : match
+                );
+  
+              // 失去焦点自动首位去空格
+              this.$emit("input", value);
+            },
+          }
+        );
+      },
+    },
+    mounted() {
+    //   console.warn(this.$route.name);
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped></style>
+  

src/App.vue

@@ -1,15 +1,45 @@
 <template>
   <div>
-    <moduleName></moduleName>
+    <Pedestal ref="ref_Pedestal" :options="options">
+      <!-- <template #operate="">
+        <el-button
+          class="excel"
+          type="success"
+          icon="el-icon-download"
+          size="small"
+          plain
+          @click="excel()"
+          >导出</el-button
+        >
+      </template> -->
+    </Pedestal>
   </div>
 </template>
 
 <script>
-import moduleName from "../packages/Button/src/index.vue";
+import Pedestal from "../packages/pedestal/src/index.vue";
 export default {
-  components: { moduleName },
+  components: { Pedestal },
   data() {
-    return {};
+    return {
+      options: {
+        fnSearch: this.fnSearch,
+        formItemAttrs: {
+          order_sn: {
+            type: "input",
+            label: "订单号",
+            placeholder: "请输入订单号",
+          },
+          product_category_id: {
+            type: "select",
+            label: "商品分类",
+            multiple: false,
+            selectOpts: [{ label: "全部", value: "" }],
+            placeholder: "选择商品分类",
+          },
+        },
+      },
+    };
   },
   methods: {},
 };

src/utils/cloneDeep.js

@@ -0,0 +1,13 @@
+export default function cloneDeep(obj, hash = new WeakMap()) {
+    if (obj == null || typeof obj !== 'object') return obj
+    if (obj instanceof Date) return new Date(obj)
+    if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
+    if (hash.has(obj)) return hash.get(obj)
+    let deepObj = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj))
+    hash.set(obj, deepObj)
+
+    for (const key in obj) {
+        deepObj[key] = cloneDeep(obj[key], hash)
+    }
+    return deepObj
+}