packages/agInput/src/index.vue

@@ -2,17 +2,22 @@
   <el-input
     class="ag_input"
     size="small"
-    ref="apinputref"
     :style="{ width }"
-    v-bind="$attrs"
+    v-on="Listeners"
-    v-on="$listeners" 
+    v-bind="attrs"
-   
   >
-  <slot v-for="(_,name) in $slots" :name="name"  :slot="name"> </slot> 
+    <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: {
@@ -25,22 +30,42 @@ export default {
       default: false,
     },
   },
+  computed: {
+    attrs() {
+      return {
+        size: "small",
+        clearable: true, // 默认清空
+        ...this.$attrs,
+      };
+    },
+    // 所有父级事件
+    Listeners() {
+      return Object.assign(
+        {},
+        // 我们从父级添加所有的监听器
+        this.$listeners,
+        // 然后我们添加自定义监听器，
+        // 或覆写一些监听器的行为
+        {
+          // 这里确保组件配合 `v-model` 的工作
+          input: (value) => {
+            this.$emit("change", 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
+              );
 
-  watch:{
+            // 失去焦点自动首位去空格
-    $attrs:function(val){
+            this.$emit("change", value);
-      console.log(val,'attrsattrs'); 
+          },
+        }
+      );
     },
   },
-
+  mounted() {},
-  mounted(){  
-    if(this.$refs.apinputref){
-      for(const key in this.$refs.apinputref){ 
-        if(!this[key]&&key!='value'){
-          this[key]=this.$refs.apinputref[key];
-        } 
-     }
-    } 
-  },
 };
 </script>
   

packages/agMultifunctionSearch/src/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="ag-MultifunctionSearch">
     <ag-select
-      v-bind="$attrs"
+      slot="prepend"
-      v-on="listeners"
+      :clearable="false"
-      :value="values&&values[0]" 
+      placeholder="请选择"
+      :value="value[0]"
+      v-bind="config.select"
       @change="onSelect"
       class="ag_select_group"
        :style="{ width: `${swidth}px` }"
@@ -13,12 +15,10 @@
      v-if="!showExtra"
       class="ag_input_group"
       placeholder="请输入内容"
-      :disabled="$attrs.disabled||imeipopover"  
-       v-bind="$attrs"
-        v-on="listeners"
       :value="value[1]"
-      @input="onInputChange"
+      :disabled="config.input.disabled||imeipopover"
-     
+      v-bind="config.input"
+      @change="onInputChange"
     > 
     </ag-input>
     <el-popover 
@@ -33,11 +33,10 @@
   <ag-input
   class="ag_input_group"
   placeholder="请输入内容" 
-  :disabled="$attrs.disabled||imeipopover" 
+  :value="value[1]"
-  v-bind="$attrs"
+  :disabled="config.input.disabled||imeipopover"
-  v-on="listeners"
+  v-bind="config.input"
-   :value="value&&value[1]"
+  @change="onInputChange"
-  @input="onInputChange"
 >
 <template slot="suffix" v-if="showExtra">
   <i 
@@ -50,9 +49,9 @@
 </ag-input>
  </template>
     <el-input
+      v-model="value[1]"
       type="textarea"
       :rows="12"
-      :value="value&&value[1]"
       placeholder="一行一项，最多支持200行"
       resize="none"
       border="none"
@@ -99,7 +98,7 @@ export default {
     value: {
       type: Array,
       default: () => {
-        return [null, ''];
+        return [null, null];
       },
     },
     options: {
@@ -115,14 +114,28 @@ export default {
   },
   data() {
     return {
-      values: [null, ""],
+      values: [null, null],
       swidth:90,
-      inputValue:"",
       selectvalue:"",
-      imeipopover:false,
+      imeipopover:false
-      listeners:{}
     };
   },
+  computed: {
+    config() { 
+      const input = {
+        ...this.$attrs 
+      }; 
+      const select = {
+        ...this.$attrs,
+        options:this.options
+      }; 
+      return {
+        input,
+        select,
+      };
+    },
+   
+  },
   watch: {
     value: {
       handler(newVal) { 
@@ -140,18 +153,12 @@ export default {
       immediate: true,
     },
   },
-  mounted(){   
-    let newlist=Object.assign({},this.$listeners);
-    delete newlist.change;
-    delete newlist.input; 
-    this.listeners=newlist;  
-  },
   methods: {
     onSelect(value){
       this.$emit("change", [value, this.value[1]||""]);
     },
-    onInputChange(val){ 
+    onInputChange(value){
-      this.$emit("change", [this.values[0] ||"",val]);
+      this.$emit("change", [ this.value[0] ||"",value]);
     },
     getStringWidth(text) {
         let font = "13px";

packages/agSelect/src/index.vue

@@ -4,11 +4,12 @@
     class="ag_select"
     :style="{ width: `100%` }"
     :value="selectValue" 
-    ref="apselectref"
+    v-bind="attrs"
-    v-bind="$attrs"
     v-on="$listeners" 
   >
-  <slot v-for="(_,name) in $slots" :name="name"  :slot="name"> </slot> 
+    <slot />
+    <slot name="prefix" slot="prefix" />
+    <slot name="empty" slot="empty" />
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -42,15 +43,6 @@ export default {
       selectValue:""
     };
   },
-  mounted(){ 
-    if(this.$refs.apselectref){
-      for(const key in this.$refs.apselectref){ 
-        if(!this[key]&&key!='value'){
-          this[key]=this.$refs.apselectref[key];
-        } 
-      }
-    } 
-  },
   watch: {
     value: {
       handler(newVal) {  
@@ -65,6 +57,16 @@ export default {
       immediate: true,
     },
   },
+  computed: {
+    attrs() {
+      return {
+        size: "small",
+        clearable: true,
+        filterable: true,
+        ...this.$attrs,
+      };
+    },
+  },
   methods: {
   },
 };

src/App.vue

@@ -4,9 +4,13 @@
     <ag-dialog :visible.sync="abb"> </ag-dialog>
     <ag-datePicker v-model="date_value" :showTime="true" :range="true" @change="onPicker">
     </ag-datePicker>
-    <ag-input v-model="inputValue" placeholder="请输入" @change="onInputChange" ref="aginputref"> 
+    <ag-input value="value"> </ag-input>
-       </ag-input>
     <ag-select :options="a_options" v-model="value">
+      <!-- <template slot="prefix">
+        {{
+          (a_options.find((e) => e.value == value) || {}).label
+        }}
+      </template> -->
     </ag-select>
     <ag-NumberRange v-model="values"> </ag-NumberRange>
     <el-form
@@ -35,7 +39,7 @@
       :clearable="true"
       :options="a_options" 
       @change="onInputinput"
-      @blur="onblur"
+
     >
     </ag-MultifunctionSearch>
   <agQuery :inputs="inputs" @onSearch="onSearch"/>
@@ -101,7 +105,6 @@ export default {
       rules: {
         pass: [{ validator: validatePass, trigger: "blur" }],
       },
-      inputValue:"",
       date_value:null,
       value: "选项1",
       a_value: "59584",
@@ -332,18 +335,16 @@ export default {
       ],
     };
   },
- 
+  watch: {
-  mounted(){
+    values: {
-     this.$refs.aginputref.value=123;
+      handler(val) {
+        console.log(val, 238);
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   methods: {
-    onblur(val,elem){
-      console.log("onblur",val,elem,this);
-      
-    },
-    onInputChange(value){
-      console.log(value,"onSearch");
-    },
     onPicker(value){ 
        this.date_value=value;
     },
@@ -351,7 +352,7 @@ export default {
       console.log(values,"onSearch");
     },
     onInputinput(value){
-      console.log(value,"oninput222");
+      console.log(value,"oninput");
       this.values=value;
     },
     change() {