Merge pull request '组件' (#7) from qiaopengfei into master

Reviewed-on: #7

examples/main.js

@@ -2,9 +2,10 @@ import Vue from 'vue'
 import App from '../src/App.vue'
 
 //基于element组件封装，引入element组件库
-import { Input } from 'element-ui';
+import { Input, Select } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(Input);
+Vue.use(Select);
 
 // 导入组件库
 import erp_element_ui from '../packages'

packages/Select/index.js

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

packages/Select/src/index.vue

@@ -0,0 +1,103 @@
+<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() {
+      cloneDeep();
+      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>

src/App.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <Pedestal ref="ref_Pedestal" v-model="value" @input="changeInput">
+    <Pedestal
+      ref="ref_Pedestal"
+      v-model="value"
+      @input="changeInput"
+      :width="'180px'"
+    >
       <!-- <template #operate="">
         <el-button
           class="excel"
@@ -17,7 +22,7 @@
 </template>
 
 <script>
-import Pedestal from "../packages/pedestal/src/index.vue";
+import Pedestal from "../packages/Select/src/index";
 export default {
   components: { Pedestal },
   data() {

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
+}