Browse Source

fixed some bugs

franslee 7 years ago
parent
commit
d796007dce

+ 1 - 0
src/demo/dialog.vue

@@ -62,6 +62,7 @@ export default {
       },
       },
       'showDialog4':function(){
       'showDialog4':function(){
             const options = {
             const options = {
+                    'customClass':'my-dialog',
                     'title':'自定义Dialog标题',
                     'title':'自定义Dialog标题',
                     'content':'小屏或移动端浏览效果最佳',
                     'content':'小屏或移动端浏览效果最佳',
                     'noFooter': true
                     'noFooter': true

+ 1 - 1
src/demo/index.vue

@@ -2,7 +2,7 @@
   <div class="wrapper">
   <div class="wrapper">
     <h1 class="logo">NutUI</h1>
     <h1 class="logo">NutUI</h1>
     <div class="version">Version {{version}}</div>
     <div class="version">Version {{version}}</div>
-    <p>NutUI是一套基于Vue2的轻量级移动端组件库。[<a href="/index.html">文档</a>] [<a href="https://github.com/jdf2e/nutui">代码</a>]</p>
+    <p>NutUI是一套基于Vue2的轻量级移动端组件库。<br>[<a href="/index.html">文档</a>] [<a href="https://github.com/jdf2e/nutui">代码</a>]</p>
     <ul>
     <ul>
       <template v-for="cpt in packages"><li v-if="cpt.showDemo !== false"><router-link :to="{name:cpt.name}">{{cpt.name}}<span>{{cpt.chnName}}</span></router-link></li></template>
       <template v-for="cpt in packages"><li v-if="cpt.showDemo !== false"><router-link :to="{name:cpt.name}">{{cpt.name}}<span>{{cpt.chnName}}</span></router-link></li></template>
     </ul>
     </ul>

+ 5 - 1
src/demo/uploader.vue

@@ -5,7 +5,7 @@
         ></nut-demoheader>
         ></nut-demoheader>
         <div id="previewBox" v-html="preview"></div>
         <div id="previewBox" v-html="preview"></div>
         <div id="progressBox">{{ progress }}</div>
         <div id="progressBox">{{ progress }}</div>
-        <nut-uploader url="" :preview="true" @start="uploadStart" @progress="uploadProgress" @success="uploadSuccess" @failure="uploadFailure" @preview="uploadPreview" @showMsg="errTip"></nut-uploader>
+        <nut-uploader url="" :preview="true" @start="uploadStart" @progress="uploadProgress" @success="uploadSuccess" @failure="uploadFailure" @preview="uploadPreview" @showMsg="errTip" @afterChange="clearInput"></nut-uploader>
     </div>
     </div>
 </template>
 </template>
 
 
@@ -35,6 +35,10 @@ export default {
       uploadFailure(file, responseTxt){
       uploadFailure(file, responseTxt){
         alert('上传失败!');
         alert('上传失败!');
       },
       },
+      clearInput(input,event){
+        //change事件触发后,清空value值,选相同文件时可再次触发change事件
+        input.value = '';
+      },
       errTip(msg){
       errTip(msg){
         alert(msg);
         alert(msg);
       }
       }

+ 2 - 1
src/package/dialog/src/dialog.vue

@@ -1,6 +1,6 @@
 <template>
 <template>
     <transition name="fade">
     <transition name="fade">
-        <div class="nut-dialog-wrapper" :id="id" v-show="visible" @click="modalClick">
+        <div :class="['nut-dialog-wrapper',customClass]" :id="id" v-show="visible" @click="modalClick">
             <div class="nut-dialog" :class="{'nut-dialog-no-header':noHeader}" @click.stop @touchmove.stop>
             <div class="nut-dialog" :class="{'nut-dialog-no-header':noHeader}" @click.stop @touchmove.stop>
                 <div class="nut-dialog-header">
                 <div class="nut-dialog-header">
                     <span class="nut-dialog-title">{{title}}</span>
                     <span class="nut-dialog-title">{{title}}</span>
@@ -44,6 +44,7 @@ export default {
             'onCloseBtn': null,
             'onCloseBtn': null,
             'onCancelBtn': null,
             'onCancelBtn': null,
             'closeCallback':null,
             'closeCallback':null,
+            'customClass':'',
         }
         }
     },
     },
     methods: {
     methods: {

+ 2 - 1
src/package/loading/src/loading.vue

@@ -1,5 +1,5 @@
 <template>
 <template>
-	<nut-mask :visible.sync="visible" :color="mini?'transparent':bgColor" :fade="fade" :closeOnClickModal="userClose" class="nut-loading">
+	<nut-mask :visible.sync="visible" :color="mini?'transparent':bgColor" :fade="fade" :closeOnClickModal="userClose" :class="['nut-loading',customClass]">
         <div class="inner" :style="{'background-color':mini?bgColor:'transparent','height':mini?height+'rem':'auto','width':mini?width+'rem':'auto','border-radius':borderRadius,'padding':padding+'rem'}">
         <div class="inner" :style="{'background-color':mini?bgColor:'transparent','height':mini?height+'rem':'auto','width':mini?width+'rem':'auto','border-radius':borderRadius,'padding':padding+'rem'}">
             <span class="nut-loading-icon" :class="{'rotate':iconRotate}" v-if="mini||iconUrl">
             <span class="nut-loading-icon" :class="{'rotate':iconRotate}" v-if="mini||iconUrl">
                 <img :src="iconUrl" v-if="iconUrl" alt=""/>
                 <img :src="iconUrl" v-if="iconUrl" alt=""/>
@@ -27,6 +27,7 @@ export default {
             timer: null,
             timer: null,
             bgColor:'rgba(0,0,0,.5)',
             bgColor:'rgba(0,0,0,.5)',
             iconUrl:'',
             iconUrl:'',
+            customClass:'',
             userClose:true,
             userClose:true,
             padding:'0.3',
             padding:'0.3',
             text:'加载中...',
             text:'加载中...',

+ 2 - 1
src/package/toast/src/toast.vue

@@ -1,6 +1,6 @@
 <template>
 <template>
     <transition name="toastfade">
     <transition name="toastfade">
-        <div class="nut-toast" v-show="visible" :class="{'center':center}" :style="{'bottom':center?'auto':bottom+'rem'}">
+        <div :class="['nut-toast',{'center':center},customClass]" v-show="visible" :style="{'bottom':center?'auto':bottom+'rem'}">
           <span v-html="msg" :style="{'text-align':textAlignCenter?'center':'left','font-size':fontSize+'rem','background-color':bgColor}"></span>
           <span v-html="msg" :style="{'text-align':textAlignCenter?'center':'left','font-size':fontSize+'rem','background-color':bgColor}"></span>
         </div>
         </div>
     </transition>
     </transition>
@@ -16,6 +16,7 @@ export default {
       during: 2000, //显示时间(毫秒)
       during: 2000, //显示时间(毫秒)
       timer: null,
       timer: null,
       center:true,
       center:true,
+      customClass:'',
       bottom:1.5,
       bottom:1.5,
       fontSize:0.28,
       fontSize:0.28,
       textAlignCenter:true,
       textAlignCenter:true,

+ 14 - 9
src/package/uploader/src/uploader.vue

@@ -7,10 +7,6 @@ import Uploader from './uploader.js';
 export default {
 export default {
     name:'nut-uploader',
     name:'nut-uploader',
     props: {
     props: {
-        /*'fileInputName':{
-            type:String,
-            default:''
-        },*/
         'url':{
         'url':{
             type:String,
             type:String,
             default:''
             default:''
@@ -34,6 +30,9 @@ export default {
             default(){
             default(){
                 return {};
                 return {};
             }
             }
+        },
+        'changeEvtCallback':{
+            type:Function
         }
         }
     },
     },
     data() {
     data() {
@@ -68,10 +67,15 @@ export default {
              };
              };
         },
         },
         upload($event){
         upload($event){
-            if(!this.url) alert('请先配置上传url!');
-            var tar = $event.target;
-            var formData = new FormData;
-            var opt = this.createUploaderOpts();
+            const tar = $event.target;
+            if(!this.url) {
+                alert('请先配置上传url!');
+                this.$emit('afterChange',tar,$event);
+                return;
+            }
+
+            const formData = new FormData;
+            const opt = this.createUploaderOpts();
             if(this.preview) opt.previewData = tar.files[0];
             if(this.preview) opt.previewData = tar.files[0];
             formData.append(tar.name, tar.files[0]);
             formData.append(tar.name, tar.files[0]);
             for(let key of Object.keys(this.attach)){
             for(let key of Object.keys(this.attach)){
@@ -83,8 +87,9 @@ export default {
                 this.$emit('showMsg',msg); 
                 this.$emit('showMsg',msg); 
                 console.log(msg);
                 console.log(msg);
             }
             }
-
             new Uploader(opt);
             new Uploader(opt);
+
+            this.$emit('afterChange',tar,$event);
         }
         }
     }
     }
 }
 }

+ 7 - 0
src/view/dialog.vue

@@ -121,6 +121,13 @@
               <td>--</td>
               <td>--</td>
             </tr>
             </tr>
             <tr>
             <tr>
+              <td>customClass</td>
+              <td>新增一个自定义class</td>
+              <td>String</td>
+              <td>''</td>
+              <td>--</td>
+            </tr>
+            <tr>
               <td>noCloseBtn</td>
               <td>noCloseBtn</td>
               <td>是否隐藏关闭按钮</td>
               <td>是否隐藏关闭按钮</td>
               <td>Boolean</td>
               <td>Boolean</td>

+ 7 - 0
src/view/loading.vue

@@ -139,6 +139,13 @@
                 <td>false</td>
                 <td>false</td>
                 <td>--</td>
                 <td>--</td>
               </tr>
               </tr>
+              <tr>
+                <td>customClass</td>
+                <td>增加一个自定义class</td>
+                <td>String</td>
+                <td>''</td>
+                <td>--</td>
+              </tr>
             </tbody>
             </tbody>
           </table>
           </table>
         </div>
         </div>

+ 7 - 0
src/view/toast.vue

@@ -99,6 +99,13 @@
               <td>--</td>
               <td>--</td>
             </tr>
             </tr>
             <tr>
             <tr>
+              <td>object.customClass</td>
+              <td>新增一个自定义class</td>
+              <td>String</td>
+              <td>''</td>
+              <td>--</td>
+            </tr>
+            <tr>
               <td>object.center</td>
               <td>object.center</td>
               <td>Toast位置是否居中</td>
               <td>Toast位置是否居中</td>
               <td>Boolean</td>
               <td>Boolean</td>

+ 13 - 2
src/view/uploader.vue

@@ -9,7 +9,7 @@
         <h5>示例</h5>
         <h5>示例</h5>
         <div id="previewBox" v-html="preview"></div>
         <div id="previewBox" v-html="preview"></div>
         <div id="progressBox">{{ progress }}</div>
         <div id="progressBox">{{ progress }}</div>
-        <nut-uploader url="" :preview="true" @start="uploadStart" @progress="uploadProgress" @success="uploadSuccess" @failure="uploadFailure" @preview="uploadPreview" @showMsg="errTip"></nut-uploader>
+        <nut-uploader url="" :preview="true" @start="uploadStart" @progress="uploadProgress" @success="uploadSuccess" @failure="uploadFailure" @preview="uploadPreview" @showMsg="errTip" @afterChange="clearInput"></nut-uploader>
 
 
         <nut-codebox :code="demo"></nut-codebox>
         <nut-codebox :code="demo"></nut-codebox>
         <nut-codebox :code="demo2"></nut-codebox>
         <nut-codebox :code="demo2"></nut-codebox>
@@ -105,6 +105,11 @@
               <td>指定方法接收处理组件抛出的错误信息</td>
               <td>指定方法接收处理组件抛出的错误信息</td>
               <td>唯一参数为提示信息内容</td>
               <td>唯一参数为提示信息内容</td>
             </tr>
             </tr>
+            <tr>
+              <td>afterChange</td>
+              <td>原生change事件触发后执行</td>
+              <td>input:原生Input;event:事件对象</td>
+            </tr>
           </tbody>
           </tbody>
         </table>
         </table>
         </div>
         </div>
@@ -123,7 +128,9 @@ export default {
  @success="uploadSuccess" 
  @success="uploadSuccess" 
  @failure="uploadFailure" 
  @failure="uploadFailure" 
  @preview="uploadPreview"
  @preview="uploadPreview"
- @showMsg="errTip">
+ @afterChange="clearInput"
+ @showMsg="errTip"
+ >
  </nut-uploader>`,
  </nut-uploader>`,
           demo2:`export default {
           demo2:`export default {
     methods:{
     methods:{
@@ -142,6 +149,10 @@ export default {
       uploadFailure(file, responseTxt){
       uploadFailure(file, responseTxt){
         alert('上传失败!');
         alert('上传失败!');
       },
       },
+      clearInput(input,event){
+        //change事件触发后,清空value值,选相同文件时可再次触发change事件
+        input.value = '';
+      },
       //此方法用于接收和处理组件内部抛出的错误信息,如所选文件大小超过限制、文件类型不正确等等
       //此方法用于接收和处理组件内部抛出的错误信息,如所选文件大小超过限制、文件类型不正确等等
       errTip(msg){ 
       errTip(msg){ 
         alert(msg); 
         alert(msg);