Merge pull request 'liunan' (#10) from liunan into master

Reviewed-on: #10

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-element-ui",
-  "version": "0.1.25", 
+  "version": "0.1.20", 
   "main": "packages/index.js",
   "scripts": {
     "dev": "vue-cli-service serve",

packages/agForm/src/index.vue

@@ -1,172 +1,46 @@
 <template>
     <el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
     <ag-row>
-      <ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
+     <ag-col v-for="item,index in data" :key="index" :span="item.span||24">
          <el-form-item v-bind="item" :prop="item.enName" >
              <slot :name="item.soltName" v-if="item.soltName" :row="item"/> 
                 <div class="contentbox" v-else>
-            <ag-input
+                    <ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item"  v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
-              v-model="formValue[item.enName]"
+                 <ag-input v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input'" size="small" clearable></ag-input>
-              type="textarea"
+                 <ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
-              v-bind="item"
+                 <ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
-              v-if="item.type == 'ag-textarea'"
+                 <el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
-              size="small"
+                 <el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio> 
-              clearable
-            ></ag-input>
-            <ag-input
-              v-model="formValue[item.enName]"
-              v-bind="item"
-              v-if="item.type == 'ag-input'"
-              size="small"
-              clearable
-            ></ag-input>
-            <ag-date-picker
-              v-bind="item"
-              v-model="formValue[item.enName]"
-              v-if="item.type == 'ag-date-picker'"
-              size="small"
-              clearable
-            />
-            <ag-select
-              v-model="formValue[item.enName]"
-              v-bind="item"
-              v-if="item.type == 'ag-select'"
-              size="small"
-              clearable
-            />
-            <el-radio-group
-              v-model="formValue[item.enName]"
-              v-bind="item"
-              v-if="item.type == 'ag-radio' && formValue[item.enName]"
-              size="small"
-              clearable
-            >
-              <el-radio
-                :label="it.value"
-                v-for="(it, index) in item.options"
-                :key="index"
-                >{{ it.label }}</el-radio
-              >
                  </el-radio-group>
-            <el-checkbox-group
+                 <el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
-              v-bind="item"
+                    <el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox> 
-              v-if="item.type == 'ag-checkbox' && formValue[item.enName]"
-              v-model="formValue[item.enName]"
-              size="small"
-              clearable
-            >
-              <el-checkbox
-                v-for="(it, index) in item.options"
-                :label="it.value"
-                :key="index"
-                >{{ it.label }}</el-checkbox
-              >
                   </el-checkbox-group>
-            <el-input-number
+                  <el-input-number v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input-number'" clearable></el-input-number>
-              v-model="formValue[item.enName]"
+                  <el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable :style="{width:'100%'}"></el-cascader>
-              v-bind="item"
-              v-if="item.type == 'ag-input-number'"
-              clearable
-            ></el-input-number>
-            <el-cascader
-              v-model="formValue[item.enName]"
-              v-bind="item"
-              size="small"
-              v-if="item.type == 'ag-cascader'"
-              clearable
-              :style="{ width: '100%' }"
-            ></el-cascader>
                   <el-switch
                 v-model="formValue[item.enName]"
-              v-bind="item"
+                 v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" >
-              size="small"
-              v-if="item.type == 'ag-switch' && formValue[item.enName]"
-            >
                 </el-switch>
-            <el-slider
+                <el-slider v-model="formValue[item.enName]" 
-              v-model="formValue[item.enName]"
+                v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
-              v-bind="item"
-              size="small"
-              v-if="item.type == 'ag-slider'"
-            ></el-slider>
                 <el-time-select
                  :style="{width:'100%'}"
                 clearable
                  v-model="formValue[item.enName]"
-              v-bind="item"
+                v-bind="item" size="small" 
-              size="small"
                 v-if="item.type=='ag-time-select'" 
-              :picker-options="item.options"
+                :picker-options="item.options">
-            >
               </el-time-select>
-            <ag-upload
+             <ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
-              v-bind="item"
+             <el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
-              v-model="formValue[item.enName]"
+             <agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small"> 
-              v-if="item.type == 'ag-upload'"
-              @onError="$listeners.onError"
-              clear
-              isPre
-              @onUpload="item.onUpload"
-            ></ag-upload>
-            <el-rate
-              v-bind="item"
-              v-model="formValue[item.enName]"
-              v-if="item.type == 'ag-rate'"
-              size="small"
-            ></el-rate>
-            <agColorPicker
-              v-bind="item"
-              v-model="formValue[item.enName]"
-              v-if="item.type == 'ag-color-picker'"
-              size="small"
-            >
              </agColorPicker>
-            <el-transfer
+             <el-transfer :data="item.data"  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
-              :data="item.data"
+             <agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/> 
-              v-bind="item"
+             <ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/> 
-              v-model="formValue[item.enName]"
+             <agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
-              v-if="item.type == 'ag-transfer'"
+             <ag-mution-checkbox :datas="item.datas" v-bind="item"  :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
-              size="small"
+            <ag-multion-date-picker  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/> 
-            ></el-transfer>
-            <agNumberRange
-              v-bind="item"
-              v-model="formValue[item.enName]"
-              v-if="item.type == 'ag-numberRange'"
-              size="small"
-              clearable
-            />
-            <ag-multion-input
-              v-bind="item"
-              v-model="formValue[item.enName]"
-              v-if="item.type == 'ag-multion-input'"
-              size="small"
-              clearable
-            />
-            <agQuery
-              v-bind="item"
-              v-model="formValue[item.enName]"
-              v-if="item.type == 'ag-query'"
-              size="small"
-              clearable
-            />
-            <ag-mution-checkbox
-              :datas="item.datas"
-              v-bind="item"
-              :placeholder="item.placeholder"
-              v-model="formValue[item.enName]"
-              v-if="item.type == 'ag-mution-checkbox'"
-              size="small"
-            >
-            </ag-mution-checkbox>
-            <ag-multion-date-picker
-              v-bind="item"
-              v-model="formValue[item.enName]"
-              v-if="item.type == 'ag-multion-datte-picker'"
-              size="small"
-            />
-          </div>
-          <div v-if="item.tip" class="tipbox">
-            <slot name="tip" :row="item"> {{ item.tip }}</slot>
             </div>
             </el-form-item>  
         </ag-col>  
@@ -174,24 +48,27 @@
     <div class="footerbox" v-if="$listeners.onSubmit">
         <slot name="button" :value="formValue">
             <el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
-          {{ submittitle || "提交" }}
+              {{submittitle||'提交'}}
              </el-button>
      </slot>
         </div>
     </el-form>
 </template>
 <script> 
-import agInput from "./../../agInput/src/index.vue";
+ 
-import agDatePicker from "./../../agDatePicker/src/index.vue";
+
-import agSelect from "./../../agSelect/src/index.vue";
+import agInput from './../../agInput/src/index.vue';
-import agRow from "./../../agRow/src/index.vue";
+import agDatePicker from './../../agDatePicker/src/index.vue';
-import agCol from "./../../agCol/src/index.vue";
+import agSelect from './../../agSelect/src/index.vue';
-import agUpload from "./../../agUpload/src/index.vue";
+import agRow from './../../agRow/src/index.vue';
-import agColorPicker from "./../../agColorPicker/src/index.vue";
+import agCol from './../../agCol/src/index.vue';
-import agNumberRange from "./../../agNumberRange/src/index.vue";
+import agUpload from './../../agUpload/src/index.vue';
-import agMultionInput from "./../../agMultionInput/src/index.vue";
+import agColorPicker from './../../agColorPicker/src/index.vue'; 
-import agQuery from "./../../agQuery/src/index.vue";
+import agNumberRange from './../../agNumberRange/src/index.vue';
-import agMultionDatePicker from "../../agMultionDatePicker";
+import agMultionInput from './../../agMultionInput/src/index.vue';
+import agQuery from './../../agQuery/src/index.vue';
+import agMultionDatePicker from '../../agMultionDatePicker';
+
 
 export default{
     name:"agForm",
@@ -206,28 +83,30 @@ export default {
         agColorPicker,
         agNumberRange,
         agMultionInput,
-    agQuery,
+        agQuery
     },
     props:{
         submittitle:{
             type:String,
-      default: "提交",
+            default:'提交'
         },
         data:{
             type:Array,
             default(){
-        return [];
+                return []
-      },
+            }
         },
         span:{
             type:Number,
-      default: 24,
+            default:24
         }, 
     },
     data(){
         return{
-      formValue: {},
+            formValue:{
-    };
+                 
+            }
+        }
     }, 
     mounted(){ 
         this.formValue=this.$attrs.value;  
@@ -236,11 +115,12 @@ export default {
         },1);
         if(this.$refs.formref){
             for(const key in this.$refs.formref){ 
-        if (!this[key] && key != "value") {
+                if(!this[key]&&key!='value'){
                 this[key]=this.$refs.formref[key];
                 }   
             }
       } 
+      
     },
     watch:{
         value(val){
@@ -248,14 +128,14 @@ export default {
             setTimeout(()=>{
                 this.$refs.formref.clearValidate();
             },1);
-    },
+        }
     },
     methods:{
         onSubmit(){ 
-      this.$emit("onSubmit", this.formValue);
+            this.$emit('onSubmit',this.formValue)
+        }
     },
-  },
+}
-};
 </script>
 
 <style lang="scss" scoped>
@@ -285,10 +165,6 @@ export default {
         display: flex;
         align-items: stretch;  
     }
-.tipbox {
-  width: 100%;
-  color: red;
-}
     ::v-deep{ 
        .el-form--inline{ 
             .el-form-item{ 
@@ -298,7 +174,6 @@ export default {
                 display:flex;
                 flex:1;
                 width:100%;
-      flex-wrap: wrap;
                 margin-left:0;
             }
         } 
@@ -309,14 +184,8 @@ export default {
         .el-form-item__content{
             flex:1;
             display:flex;
-    flex-wrap: wrap;
             width:100%;
             margin-left:0!important;
         } 
-  .el-radio-button__inner,
-  .el-radio-group {
-    display: flex;
-    align-items: center;
-  }
     }
 </style>

packages/agSelect/src/index.vue

@@ -2,6 +2,7 @@
   <el-select 
   class="ag_select"
   :style="{ width: `100%` }"
+  :value="selectValue" 
   ref="apselectref"
   :size="$attrs.size||'small'"
   v-bind="$attrs"
@@ -9,9 +10,8 @@
 >  
 <slot v-for="(_,name) in $slots" :name="name"  :slot="name"> </slot> 
   <el-option
-      v-for="(item, index) in options"
+    v-for="item in options"
-      :key="index"
+    :key="item.value"
-      :disabled="item.disabled"
     :label="item.label"
     :value="item.value"
   ></el-option>
@@ -32,20 +32,40 @@ export default {
         return [];
       },
     }, 
+    value:{ 
+      default: () =>'',
+    }
   }, 
-
   data() {
-    return {};
+    return {
+      selectValue:""
+    };
   },
   mounted(){ 
     if(this.$refs.apselectref){
       for(const key in this.$refs.apselectref){ 
-        if (!this[key] && key != "value") {
+        if(!this[key]&&key!='value'){
           this[key]=this.$refs.apselectref[key];
         } 
       }
     } 
   },
+  watch: {
+    value: {
+      handler(newVal) {  
+        let newselectValue=newVal; 
+        const find=this.options.find((f)=>f.value==newselectValue);
+        if(find){  
+            this.selectValue=newselectValue;
+        }else{
+          this.selectValue="";
+        } 
+      },
+      immediate: true,
+    },
+  }, 
+  methods: {
+  },
 };
 </script>
 

packages/agUpload/src/index.vue

@@ -1,94 +1,35 @@
 <template>
   <div class="uploadbox"> 
-    <div
+   <div class="uploadimgbox" :style="{height:width+'px'}" v-if="listType=='picture-card'"> 
-      class="uploadimgbox"
+         <div v-for="img,index in imageList" :key="index" :style="{width:width+'px'}" :draggable="dragmove" class="imgitem" :class="dragmove&&dragmoveclass"  @dragstart="onDragstart" @dragenter="onDragenter" @dragover="onDragover" @dragend="onDragend" @dragleave="onMouseup" >
-      :style="{
-        height: $attrs.height ? $attrs.height + 'px' : width + 'px',
-      }"
-      v-if="listType == 'picture-card'"
-    >
-      <div
-        v-for="(img, index) in imageList"
-        :key="index"
-        :style="{
-          width: width + 'px',
-          height: $attrs.height ? $attrs.height + 'px' : width + 'px',
-        }"
-        :draggable="dragmove"
-        class="imgitem"
-        :class="dragmove && dragmoveclass"
-        @dragstart="onDragstart"
-        @dragenter="onDragenter"
-        @dragover="onDragover"
-        @dragend="onDragend"
-      >
            <slot name="file" :file="img">
-          <img
+           <img :src="img.url" class="img" v-if="img.type.indexOf('image')>-1"/>
-            :src="img.url || img"
-            class="img"
-            v-if="(img.type && img.type.indexOf('image') > -1) || img != ''"
-          />
-          <div
-            v-if="
-              index == 0 &&
-              $attrs.masktext &&
-              $attrs.masktext.ai == false &&
-              $attrs.masktext.data[index]
-            "
-            class="maskbox"
-          >
-            {{ $attrs.masktext.data[index] }}
-          </div>
-          <div v-if="$attrs.masktext && $attrs.masktext.ai == true" class="maskbox">
-            {{ index + 1 }}
-          </div>
            <div v-else class="filetext">
              <div class="filetitletext">文件</div>
             <div>{{img.name}}</div>
            </div>
            <div class="uploadimgmask" v-if="clear||isPrew" >
-            <i
+             <i class="el-icon-search" v-if="isPrew&&img.type.indexOf('image')>-1" @click="handlePictureCardPreview(img)"></i>
-              class="el-icon-search"
+             <i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></i>
-              v-if="isPrew && img.type.indexOf('image') > -1"
-              @click="handlePictureCardPreview(img)"
-            ></i>
-            <i
-              class="el-icon-delete"
-              v-if="clear && !disabled"
-              @click="handleRemove(img.raw, index)"
-            ></i>
            </div>
          </slot>
          </div>  
-      <div
+     <div class="uploadcontain" :style="{height:width+'px',aspectRatio:isDrap?4/3:1/1}"
-        class="uploadcontain"
-        :style="{
-          height: $attrs.height ? $attrs.height + 'px' : width + 'px',
-          aspectRatio: isDrap ? 4 / 3 : 1 / 1,
-          width: width + 'px',
-        }"
       :draggable="isDrap"  
      @dragover.prevent  
      @dragenter.prevent  
      @drop="onUploadDrap" 
-        v-if="limit > imageList.length"
+     v-if="limit>imageList.length">
-      >
        <label for="uploadinput" class="uploadlabel"  @click="onInputClick">
          <slot>
-            <i
+           <i class="el-icon-plus"></i>
-              class="el-icon-plus"
+           <span class="draptiptext">{{isDrap?'拖拽上传':'上传'}}</span>
-              :style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
-            ></i>
-            <span class="draptiptext">{{
-              isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
-            }}</span>
          </slot> 
          </label> 
      </div>
    </div> 
    <div class="uploadtextbox" v-if="listType=='text'||listType=='picture'">
-      <div
+     <div class="uploadtextcontain" 
-        class="uploadtextcontain"
       :draggable="isDrap"  
      @dragover.prevent  
      @dragenter.prevent  
@@ -96,57 +37,33 @@
       >
        <label for="uploadinput" class="uploadlabel" @click="onInputClick"  >
          <slot>
-            <el-button type="primary" size="small" :disabled="disabled"
+           <el-button type="primary" size="small"><i class="el-icon-plus"></i> {{isDrap?'拖拽上传':'上传'}}</el-button> 
-              ><i
-                class="el-icon-plus"
-                :style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
-              ></i>
-              {{
-                isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
-              }}</el-button
-            >
          </slot> 
          </label> 
      </div> 
-      <slot name="tip"> </slot>
+     <slot name="tip">
+     </slot> 
      <ul class="uploadtextlist" :class="'upload-list--'+listType"> 
-        <li v-for="(img, index) in imageList" :key="index" class="uploadtextitem">
+       <li v-for="img,index in imageList" :key="index" class="uploadtextitem" >
-          <div
+        <div class="ag-upload-list__item-namebox" @click="handlePictureCardPreview(img)">
-            class="ag-upload-list__item-namebox"
-            @click="handlePictureCardPreview(img)"
-          >
          <slot name="icon">
          <i class="el-icon-document ag-icon-document"></i>
        </slot>
          <slot name="file" :file="img">
-              <img
+           <img v-if="listType=='picture'" :src="img.url" class="ag-upload-list__item-thumbnail" />
-                v-if="listType == 'picture'"
-                :src="img.url"
-                class="ag-upload-list__item-thumbnail"
-              />
            <a class="ag-upload-list__item-name" >{{img.name}}</a>
        </slot>
         </div>
         <div class="uploadrightbox">
          <slot name="status" :file="img">
            <span class="uploadstatusbpx"> 
-                <i
+              <i v-if="img.status==='uploading'" class="el-icon-loading uploadingicon" ></i>
-                  v-if="img.status === 'uploading'"
+             <i v-if="img.status==='success'" class="el-icon-circle-check statusicon"></i>
-                  class="el-icon-loading uploadingicon"
+             <i v-if="img.status==='failed'" class="el-icon-circle-close failedicon"></i>
-                ></i>
-                <i
-                  v-if="img.status === 'success'"
-                  class="el-icon-circle-check statusicon"
-                ></i>
-                <i
-                  v-if="img.status === 'failed'"
-                  class="el-icon-circle-close failedicon"
-                ></i>
              <span v-if="img.msg" class="uploadmsg">{{img.msg}}</span> 
            </span>
          </slot>
          <el-popconfirm
-              v-if="!disabled"
              :title="`确定移除${img.name}吗？`"
              @confirm="handleRemove(img.raw,index)"
            >
@@ -156,18 +73,9 @@
        </li> 
      </ul>
    </div>
-    <input
+   <input type="file" style="display:none;" :multiple="limit>1&&$attrs.multiple" :accept="$attrs.accept" id="uploadinput" @change="onUpdate" ref="fileinputref"/>
-      type="file"
-      style="display: none"
-      :multiple="limit > 1 && $attrs.multiple"
-      :accept="$attrs.accept"
-      id="uploadinput"
-      :disabled="disabled"
-      @change="onUpdate"
-      ref="fileinputref"
-    />
    <el-dialog :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="" />
+   <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog> 
   </div>
  </template>
@@ -178,71 +86,68 @@ export default {
    props:{
      isPrew:{
        type:Boolean,
-      default: true,
+       default:true
      },
      clear:{
        type:Boolean,
-      default: true,
+       default:true
      },
      width:{
        type:Number,
-      default: 80,
+       default:80
      },
      dragmove:{
        type:Boolean,
-      default: false,
+       default:false
      },
      isDrap:{
        type:Boolean,
-      default: false,
+       default:false
      },
      limit:{
        type:Number,
-      default: 1,
+       default:1
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
      },
+    
      fileList:{
        type:Array,
        default(){
          return [];
-      },
+       }
      },
      listType:{
        type:String,
-      default: "picture-card",
+       default:'picture-card'
-    },
+     } 
    },
    model: {  
-    prop: "fileList", // 明确指定 prop 为 'value'
+     prop: 'fileList', // 明确指定 prop 为 'value'  
-    event: "onUpload", // 自定义事件名，用于更新 value
+     event: 'onUpload' // 自定义事件名，用于更新 value  
  }, 
    mounted() {    
        if(this.fileList.length>0){
          let list=[];
          this.fileList.map((h)=>{
-        if (typeof h == "object") {
+           if(typeof(h)=='object'){
              list.push(h);
            }else{
              let imgurl=h.split("/"); 
              let filename=imgurl[imgurl.length-1];
              let extarr=h.split(".");
              let extname=extarr[extarr.length-1];
-          if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
+             if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
                list.push({
                  name:filename,
                  url:h,
-              type: "image/" + extname.toLowerCase(),
+                 type:'image/'+extname.toLowerCase(),
-              raw: null,
+                 raw:null
                });
              }else{
                list.push({
                  name:filename,
                  url:h,
-              type: "other/" + extname.toLowerCase(),
+                 type:'other/'+extname.toLowerCase(),
-              raw: null,
+                 raw:null
                });
              } 
            }
@@ -255,105 +160,80 @@ export default {
        if(val.length>0){
          let list=[];
          val.map((h)=>{
-          if (typeof h == "object") {
+           if(typeof(h)=='object'){
              list.push(h);
            }else{
              let imgurl=h.split("/"); 
              let filename=imgurl[imgurl.length-1];
              let extarr=h.split(".");
              let extname=extarr[extarr.length-1];
-            if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
+             if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
                list.push({
                  name:filename,
                  url:h,
-                type: "image/" + extname.toLowerCase(),
+                 type:'image/'+extname.toLowerCase(),
-                raw: null,
+                 raw:null
                });
              }else{
                list.push({
                  name:filename,
                  url:h,
-                type: "other/" + extname.toLowerCase(),
+                 type:'other/'+extname.toLowerCase(),
-                raw: null,
+                 raw:null
                });
              } 
            }
          });
          this.imageList=list; 
        }  
-    },
+     }
    },
    data() {
      return {
-      dialogImageUrl: "",
+       dialogImageUrl: '',
        dialogVisible: false,
        imageList:[],
        sourceNode:null,
        partNode:null,
        selectTop:false, 
        drag:false,
-      dragmoveclass: "imghover",
+       dragmoveclass:'imghover'
-      moveIndexs: [],
-      startIndex: null,
      };
    },  
    methods: {
      handleRemove(file,index) {    
-      if (this.disabled) {
-        return;
-      }
          this.imageList=this.imageList.filter((item,inkey)=>{
            return inkey !== index;
          }); 
-      this.$emit("onRemove", file, this.imageList);
+         this.$emit('onRemove',file,this.imageList); 
-      this.$emit("onUpload", this.fileList, this.imageList, "remove");
      },
      handlePictureCardPreview(file) {
-      if (file.type.indexOf("image/") > -1) {
+        if(file.type.indexOf('image/')>-1){
           this.dialogImageUrl = file.url;
           this.dialogVisible = true;
         } 
      },
      onUpdate(e){ 
-      if (this.disabled) {
-        return;
-      }
        if(this.limit<=this.imageList.length){
          return;
        }
-      let that = this;
       try{
        let uplist=[];  
        let files=[...e.target.files].slice(0,this.limit-this.imageList.length);   
       const find=files.find((f,i)=>{
        if(this.$attrs.accept){
            let acceptarr=this.$attrs.accept.split(",");
-            for (let i = 0; i < acceptarr.length; i++) {
-              let item = acceptarr[i];
-              if (item.includes("*")) {
-                if (!item.includes(f.type.split("/")[0])) {
-                  if (this.$listeners.onError) {
-                    this.$emit("onError", `其中第${i + 1}张文件类型错误`);
-                  }
-                  return true;
-                }
-              } else {
            if(!acceptarr.includes(f.type)){ 
              if(this.$listeners.onError){
-                    this.$emit("onError", `其中第${i + 1}张文件类型错误`);
+               this.$emit('onError',`其中第${i+1}张文件类型错误`);
              } 
              return true;
            }
          }
-            }
-          }
          if(this.$attrs.maxSize){ 
            if(f.size>this.$attrs.maxSize){
              if(this.$listeners.onError){
-                this.$emit(
+               this.$emit('onError',`其中第${i+1}张文件大小不能超过${this.$attrs.maxSize/1024/1024}M"`);
-                  "onError",
-                  `其中第${i + 1}张文件大小不能超过${this.$attrs.maxSize / 1024 / 1024}M"`
-                );
              } 
              return true;
            }
@@ -364,65 +244,22 @@ export default {
       }
     
        files.map((item,index) => { 
-          if (item.type && item.type.indexOf("image") > -1) {
+         if(item.type.indexOf("image")>-1){
            let filerender=new FileReader();
            filerender.onload=function(e){  
-              if (that.$attrs.minWidth || that.$attrs.minHeight) {
-                let img = document.createElement("img");
-                img.src = e.target.result;
-                img.onload = () => {
-                  if (img.width < that.$attrs.minWidth) {
-                    if (this.$listeners.onError) {
-                      this.$emit(
-                        "onError",
-                        `其中第${index + 1}张图片宽度不能小于${that.$attrs.minWidth}`
-                      );
-                    }
-                    return;
-                  }
-                  if (img.height < that.$attrs.minHeight) {
-                    if (this.$listeners.onError) {
-                      this.$emit(
-                        "onError",
-                        `其中第${index + 1}张图片高度不能小于${that.$attrs.minHeight}`
-                      );
-                    }
-                    return;
-                  }
              uplist.push({
                name:item.name,
                url:e.target.result,
                type:item.type,
                size:item.size,
                raw:item,
-                    status: "init",
+                status:'init',
-                    msg: "",
+                msg:""
-                  });
-                  if (files.length == uplist.length) {
-                    this.$refs.fileinputref.value = "";
-                    if (this.$listeners.onUpload) {
-                      this.$emit("onUpload", this.fileList, uplist, "upload");
-                    } else {
-                      this.imageList.push(...uplist);
-                    }
-                  }
-                };
-                return;
-              }
-
-              uplist.push({
-                name: item.name,
-                url: e.target.result,
-                type: item.type,
-                size: item.size,
-                raw: item,
-                status: "init",
-                msg: "",
              });
              if(files.length==uplist.length){ 
                if(this.$listeners.onUpload){
                  this.fileList.push(...uplist); 
-                  this.$emit("onUpload", this.fileList, uplist);
+                 this.$emit('onUpload',this.fileList,uplist); 
                }else{
                  this.imageList.push(...uplist); 
                } 
@@ -435,13 +272,13 @@ export default {
                type:item.type,
                size:item.size,
                raw:item,
-              status: "init",
+               status:'init',
-              msg: "",
+               msg:""
              });
              if(files.length==uplist.length){  
                if(this.$listeners.onUpload){ 
                  this.fileList.push(...uplist); 
-                this.$emit("onUpload", this.fileList, uplist);
+                 this.$emit('onUpload',this.fileList,uplist); 
                }else{
                  this.imageList.push(...uplist); 
                } 
@@ -449,15 +286,14 @@ export default {
          } 
        }); 
       }catch(err){ 
+       console.log(err,"uploaderr");
+       
        if(this.$listeners.onError){
-          this.$emit("onError", e);
+         this.$emit('onError',e);
        } 
       } 
      }, 
     onDragstart(e){ 
-      if (this.disabled) {
-        return;
-      }
      this.sourceNode=e.target;
       this.partNode=e.target.parentNode;   
      e.target.classList.add("tabsbg"); 
@@ -466,19 +302,13 @@ export default {
        e.target.classList.add("moving");
      },1);
    },
-    onDragover(e) {
-      e.preventDefault();
-    },
    onDragenter(e){ 
      e.preventDefault(); 
-      if (this.disabled) {
-        return;
-      }
      if(!this.dragmove){
        return;
      } 
      if(this.partNode===e.target||e.target===this.sourceNode){ 
-        return;
+       return 
      } 
      const childrens=[...this.partNode.children];
      let thistarget=childrens.find((f)=>f==e.target);
@@ -486,27 +316,28 @@ export default {
        thistarget=e.target.parentNode;
      }
      if(!thistarget){
-        return;
+        return 
      }
     
      const sourceIndex=childrens.indexOf(this.sourceNode);
-      if (!this.startIndex) {
-        this.startIndex = sourceIndex;
-      }
      const targetIndex=childrens.indexOf(thistarget); 
-      this.moveIndexs = [sourceIndex, targetIndex];
+    if(sourceIndex<targetIndex){ 
-    },
+     this.partNode.insertBefore(this.sourceNode,thistarget.nextElementSibling); 
+    }else{ 
+     this.partNode.insertBefore(this.sourceNode,thistarget);   
+    }  
       
+   },
+   onDragover(e){
+    e.preventDefault();   
+   },
    onMouseup(e){ 
      e.preventDefault(); 
      if(!this.dragmove){
        return;
      }  
-      if (this.disabled) {
-        return;
-      }
      if(this.partNode===e.target||e.target===this.sourceNode){ 
-        return;
+       return 
      } 
      this.sourceNode.classList.remove("moving");  
    },
@@ -515,21 +346,19 @@ export default {
      if(!this.dragmove){
        return;
      }
-      if (this.disabled) {
-        return;
-      }
          e.target.classList.remove("moving");  
          e.target.classList.remove("tabsbg");  
          this.sourceNode.classList.remove("moving"); 
-      const [sourceIndex, targetIndex] = this.moveIndexs;
+         if(this.partNode===e.target||e.target===this.sourceNode){ 
-      let newimage = Object.assign([], this.imageList);
+       return 
-      let temp = Object.assign({}, newimage[sourceIndex]);
+     }
-      newimage[sourceIndex] = newimage[targetIndex];
+       const childrens=[...this.partNode.children];  
-      newimage[targetIndex] = temp;
+       
-      this.imageList = newimage;
+       const sourceIndex=childrens.indexOf(this.sourceNode);
-      this.partNode = null;
+         const item = this.imageList.splice(sourceIndex, 1)[0];  
+         this.imageList.splice(sourceIndex, 0, item);  
          this.sourceNode=null;
-      this.moveIndexs = [];
+         this.partNode=null;   
    },
    onUploadDrap(e){   
      e.preventDefault(); // 阻止默认行为（打开文件）  
@@ -537,20 +366,14 @@ export default {
      if(this.drap){
        return; 
      }
-      if (this.disabled) {
-        return;
-      }
      const files = event.dataTransfer.files;   
        this.onUpdate({target:{files: files}});
    },
    onInputClick(e){ 
      e.preventDefault(); // 阻止默认行为（打开文件）  
      e.stopPropagation(); // 停止事件冒泡   
-      if (this.disabled) {
-        return;
-      }
      this.$refs.fileinputref.click();
-    },
+   }
    },
  };
  </script>
@@ -562,7 +385,6 @@ export default {
    aspect-ratio: 1/1;
    border-radius: 4px;
    background-color: #fff;
-  border: 1px solid #e5e5e5;
    cursor: pointer; 
    overflow: hidden; 
    .uploadlabel{
@@ -594,23 +416,11 @@ export default {
      position: relative;
      width:100px;
      cursor: pointer; 
-    border: 1px solid #e5e5e5;
      background: #fff;
      border-radius: 4px;
      overflow: hidden;
      aspect-ratio: 1/1;
-    transition: all 0.3s;
+     transition: all .3s;
-    .maskbox {
-      position: absolute;
-      left: 0;
-      top: 0;
-      background: #1f292e 60%;
-      padding: 5px 8px;
-      border-bottom-right-radius: 6px;
-      line-height: 1;
-      color: #fff;
-      font-size: 12px;
-    }
      &.imghover:hover{
        cursor: move;
      }
@@ -639,7 +449,7 @@ export default {
        left: 0;
        width:100%;
        height:100%;
-      background-color: rgba(0, 0, 0, 0.3);
+       background-color: rgba(0,0,0,.3); 
        align-items: center;
        justify-content: center;
        gap:6px;
@@ -700,6 +510,8 @@ export default {
    padding: 0;
    list-style: none; 
    margin-top:12px;
+
+   
  } 
  .upload-list--text{
    margin: 0;
@@ -712,7 +524,7 @@ export default {
    .uploadtextitem{
      position: relative;
      list-style: none;
-      transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+     transition: all .5s cubic-bezier(.55,0,.1,1);
      font-size: 14px;
      color: #606266;
      line-height:1;
@@ -744,7 +556,7 @@ export default {
      display: block; 
      overflow: hidden; 
      text-overflow: ellipsis;
-      transition: color 0.3s;
+     transition: color .3s;
      white-space: nowrap;
      font-size: 14px; 
    
@@ -762,7 +574,7 @@ export default {
      position: relative; 
      right: 5px;
      cursor: pointer;
-        opacity: 0.75;
+     opacity: .75;
      color: #606266; 
      display:none;
    }
@@ -815,7 +627,7 @@ export default {
        display: block; 
        overflow: hidden; 
        text-overflow: ellipsis;
-        transition: color 0.3s;
+       transition: color .3s;
        white-space: nowrap;
        line-height: 70px;
        font-size:14px;
@@ -845,7 +657,7 @@ export default {
        top: 5px;
        right: 5px;
        cursor: pointer;
-        opacity: 0.75;
+       opacity: .75;
        color: #606266;
      }
    }
@@ -877,3 +689,4 @@ export default {
    }
  }
  </style>
+