护眼模式

Reviewed-on: #11

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,17 @@
 import Vue from 'vue'
 import App from '../src/App.vue'
 
+//基于element组件封装，引入element组件库
+import { Input, Select } from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(Input);
+Vue.use(Select);
+
 // 导入组件库
-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/MultifunctionSearch/index.js

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

packages/MultifunctionSearch/src/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1>主组件</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang='scss'>
+</style>

packages/agInput/index.js

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

packages/agInput/src/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-input
+    class="ag_input"
+    :style="{ width }"
+    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: "agInput",
+  props: {
+    width: {
+      type: String,
+      default: "",
+    },
+    toUpperCase: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    attrs() {
+      return {
+        size: "small",
+        clearable: true, // 默认清空
+        ...this.$attrs,
+      };
+    },
+    // 所有父级事件
+    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() {},
+};
+</script>
+  
+  <style lang="scss" scoped></style>
+  

packages/agSelect/index.js

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

packages/agSelect/src/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-select
+    class="ag_select"
+    :style="{ width }"
+    :value="value"
+    :size="size"
+    v-on="inputListeners"
+    v-bind="attrs"
+  >
+    <el-option
+      v-for="(item, index) in options"
+      :key="index"
+      :label="item.label"
+      :value="item.value"
+    ></el-option>
+    <!-- <slot name="options" slot="options" /> -->
+  </el-select>
+</template>
+
+<script>
+import cloneDeep from "../../../src/utils/cloneDeep";
+export default {
+  name: "agSelect",
+  props: {
+    width: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
+  },
+  data() {
+    return {
+      model: "",
+      options: [],
+    };
+  },
+  computed: {
+    attrs() {
+      if (this.$attrs["remote-method"]) {
+        let obj = cloneDeep(this.$attrs);
+        Reflect.deleteProperty(obj, "remote-method");
+        return { ...obj, clearable: true, filterable: true, remote: true };
+      }
+      return false;
+    },
+    // 所有父级事件
+    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);
+          },
+        }
+      );
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(newVal) {
+        this.removeMethod(newVal);
+        this.model = newVal;
+      },
+    },
+  },
+  methods: {
+    async removeMethod(keywords) {
+      if (this.$attrs["remote-method"]) {
+        let opts = await this.$attrs["remote-method"](keywords);
+        this.options = opts;
+      }
+    },
+    handleChange(value) {
+      this.$emit("input", value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

packages/index.js

@@ -1,32 +1,32 @@
-// 导入button组件
-import mButton from './Button/index'
-import mButton1 from './Button1/index'
+	// 导入组件
+  import agInput from './agInput/index'
+  import agSelect from './agSelect/index'
   
-// 组件列表
-const components = [
-  mButton, mButton1
-]
+  // 组件列表
+  const components = [
+    agInput,
+    agSelect
+  ]
   
-// 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
-const install = function (Vue) {
+  // 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
+  const install = function (Vue) {
     // 判断是否安装
     if (install.installed) return
     // 遍历注册全局组件
     components.map(component => Vue.component(component.name, component))
-}
+  }
   
-// 判断是否是直接引入文件
-if (typeof window !== 'undefined' && window.Vue) {
+  // 判断是否是直接引入文件
+  if (typeof window !== 'undefined' && window.Vue) {
     install(window.Vue)
-}
+  }
   
-export default {
+  export default {
     // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
     install,
-}
-export {
-  install,
+  }
+  export {
     // 以下是具体的组件列表
-  mButton,
-  mButton1,
-}
+    agInput,
+    agSelect
+  }

src/App.vue

@@ -1,19 +1,45 @@
 <template>
   <div>
-    <moduleName></moduleName>
+    <agSelect ref="ref_Pedestal" :value="value" @input="changeInput">
+    </agSelect>
   </div>
 </template>
 
 <script>
-import moduleName from "../packages/Button/src/index.vue";
+import agSelect from "../packages/agSelect/src/index";
 export default {
-  components: { moduleName },
+  components: { agSelect },
   data() {
-    return {};
+    return {
+      value: "",
+      options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+    };
+  },
+  methods: {
+    changeInput() {
+      // console.log(this.value);
+    },
   },
-  methods: {},
 };
 </script>
 
-<style scoped lang='scss'>
+<style>
+body {
+  background: #81aa6e;
+}
 </style>

src/utils/cloneDeep.js

@@ -0,0 +1,12 @@
+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
+}