22

packages/agInput/src/index.vue

@@ -2,22 +2,17 @@
   <el-input
     class="ag_input"
     size="small" 
+    ref="apinputref"
     :style="{ width }" 
-    v-on="Listeners"
-    v-bind="attrs"
+    v-bind="$attrs"
+    v-on="$listeners" 
+   
   >
-    <slot name="append" slot="append" />
-    <slot name="prefix" slot="prefix" />
-    <slot name="suffix" slot="suffix" />
-    <slot name="prepend" slot="prepend" />
+  <slot v-for="(_,name) in $slots" :name="name"  :slot="name"> </slot> 
   </el-input>
 </template>
   
   <script> 
-/**
- * WInput
- * @desc    处理输入的输入框(转大写，不能有中文空格等)
- */
 export default {
   name: "agInput",
   props: {
@@ -30,42 +25,22 @@ 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
-              );
    
-            // 失去焦点自动首位去空格
-            this.$emit("change", value);
+  watch:{
+    $attrs:function(val){
+      console.log(val,'attrsattrs'); 
     },
+  },
+
+  mounted(){  
+    if(this.$refs.apinputref){
+      for(const key in this.$refs.apinputref){ 
+        if(!this[key]&&key!='value'){
+          this[key]=this.$refs.apinputref[key];
+        } 
+     }
     } 
-      );
   },
-  },
-  mounted() {},
 };
 </script>
   

packages/agMultifunctionSearch/src/index.vue

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

packages/agSelect/src/index.vue

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

src/App.vue

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