Browse Source

Merge branch 'v3-dev' of https://github.com/jdf2e/nutui into v3-dev

songqibin 5 years ago
parent
commit
7448698831

File diff suppressed because it is too large
+ 28 - 20
src/packages/dialog/demo.vue


File diff suppressed because it is too large
+ 29 - 57
src/packages/dialog/dialog.scss


+ 12 - 8
src/packages/dialog/dialog.vue

@@ -6,18 +6,21 @@
       v-model="curVisible"
       :lock-scroll="lockBgScroll"
       :overlayStyle='{backgroundColor:maskBgStyle}'
-      class="nut-dialog"
+      class="nut-dialog-wrapper"
       @click="clickCover"
     >
       <div class="nut-dialog-box" v-show="curVisible" @click="modalClick">
-        <div class="nut-dialog" @click.stop>
-          <a href="javascript:;" v-if="closeBtn" @click="closeBtnClick" class="nut-dialog-close"></a>
-          <template v-if="type === 'image'">
+        <template v-if="type === 'image'">
+          <div class="nut-dialog-image-wrapper" @click.stop>
             <a href="javascript:;" @click="imageLinkClick" class="nut-dialog-link">
               <img :src="imgSrc" class="nut-dialog-image" alt />
             </a>
-          </template>
-          <template v-else>
+              <a href="javascript:;" v-if="closeBtn" @click="closeBtnClick" class="nut-dialog-close"></a>
+          </div>
+        </template>
+         
+        <template v-else>
+             <div class="nut-dialog" @click.stop>
             <div class="nut-dialog-body">
               <span class="nut-dialog-title" v-html="title" v-if="title"></span>
               <div class="nut-dialog-content" v-if="$slots.default" :style="{ textAlign }">
@@ -52,8 +55,9 @@
                   </div>
               </template>
             </div>
-          </template>
-        </div>
+             </div>
+        </template>
+       
       </div>
     </nut-popup>
   </transition>

+ 5 - 9
src/packages/dialog/doc.md

@@ -21,19 +21,19 @@ this.$dialog({
         content: "小屏或移动端浏览效果最佳",
         closeBtn:true,  //显式右上角关闭按钮
         onOkBtn(event) {  //确定按钮点击事件
-          alert("okBtn");
+           this.$toast.text("okBtn");
           this.close(); //关闭对话框
         },
         onCancelBtn(event) {  //取消按钮点击事件,默认行为关闭对话框
-          alert("cancelBtn");
+           this.$toast.text("cancelBtn");
           //return false;  //阻止默认“关闭对话框”的行为
         },
         onCloseBtn(event) { //右上角关闭按钮点击事件
-          alert("closeBtn");
+           this.$toast.text("closeBtn");
           //return false;  //阻止默认“关闭对话框”的行为
         },
         closeCallback(target) {
-          alert("will close");  //对话框关闭回调函数,无论通过何种方式关闭都会触发
+           this.$toast.text("will close");  //对话框关闭回调函数,无论通过何种方式关闭都会触发
         }
 });
         
@@ -53,14 +53,10 @@ this.$dialog({
           name: '主要操作2',
           value: 1,
           disabled:false,
-        },{
-          name: '主要操作3',
-          value:2,
-          disabled:false,
         }],
         chooseBtn(item,index){
           console.log(index)
-          alert(`我点击了第${index + 1}个按钮`)
+           this.$toast.text(`我点击了第${index + 1}个按钮`)
           this.close()
         },    
       });

+ 5 - 6
src/packages/field/demo.vue

@@ -2,15 +2,15 @@
   <div class="textinput-demo">
     <h4>标准样式</h4>
     <div class="filed-demo"> 
-      <nut-field label="标题内容" placeholder="请输入内容" v-model="val" />
+      <nut-field label="标题内容" placeholder="请输入内容" v-model="val" />
     </div>
     <h4>文字左对齐,且不展示 清除 按钮</h4>
     <div class="filed-demo">
-      <nut-field :disableClear="true" v-model="val2"  label="文本左对齐" textAlign="left" placeholder="请输入内容" />  
+      <nut-field :disableClear="true" v-model="val2"  label="文本左对齐" textAlign="left" placeholder="请输入内容" />  
     </div> 
      <h4>标题超出长度限制</h4>
     <div class="filed-demo">
-      <nut-field  v-model="val2"  label="标题长度超出超出超出范围" textAlign="right" placeholder="请输入内容" /> 
+      <nut-field  v-model="val2"  label="标题长度超出超出超出范围" textAlign="right" placeholder="请输入内容" /> 
     </div> 
      <h4>数字</h4>
     <div class="filed-demo">
@@ -59,7 +59,7 @@ export default {
   data() {
     return {
       val: '',
-      val2: '这里文本内容',
+      val2: '',
       val3: '',
       val4: '',
       val5: '12345678985',
@@ -127,8 +127,7 @@ h4{
 }
 .filed-demo{
   width: 100vw;
-  box-sizing: border-box;
-  overflow: hidden;
+  box-sizing: border-box; 
   background-color: #fff;
   padding: 5px 20px 5px 20px ;
   	.get-code {

+ 5 - 4
src/packages/field/field.scss

@@ -2,14 +2,14 @@
     display: flex;
     box-sizing: border-box;
     position: relative;
-    overflow: hidden;
     .nut-require {
         color: #ee0a24;
         margin-right: 5px;
+        margin-top: 10px;
     }
     .nut-field-label {
         display: inline-block;
-        margin-right: 20px;
+        margin-right: 24px;
         max-width: 120px;
         overflow: hidden;
         font-size: 16px;
@@ -39,7 +39,7 @@
     }
     .nut-text-core {
         flex: 1;
-        padding: 5px 15px 5px 0;
+        padding: 4px 15px 5px 0;
         appearance: none;
         font-size: 14px;
         box-sizing: border-box;
@@ -69,6 +69,7 @@
         span {
             float: right;
             margin-right: 15px;
+            color: #969696;
         }
     }
     .nut-textinput-clear {
@@ -90,7 +91,7 @@
         border-bottom: 1px solid red;
         box-sizing: border-box;
         position: absolute;
-        bottom: 0;
+        bottom: -3px;
     }
     .input-error {
         color: red;

+ 1 - 0
src/packages/field/field.vue

@@ -134,6 +134,7 @@ export default {
       const txtLength = data.length;
       this.txtNum = txtLength;
       if (txtLength > this.maxLength*1) {
+        this.$toast.text(`最多可输入${this.maxLength}字`)
         this.$emit('errorFunc');
       } else {
       }

+ 4 - 4
src/packages/popup/popup.scss

@@ -50,7 +50,7 @@ $popup-close-icon-margin: 16px;
 	width: 100%;
 
 	&.round {
-		border-radius: 25px 25px 0 0;
+		border-radius: 20px 20px 0 0;
 	}
 }
 
@@ -59,7 +59,7 @@ $popup-close-icon-margin: 16px;
 	right: 0;
 
 	&.round {
-		border-radius: 25px 0 0 25px;
+		border-radius: 20px 0 0 20px;
 	}
 }
 
@@ -68,7 +68,7 @@ $popup-close-icon-margin: 16px;
 	left: 0;
 
 	&.round {
-		border-radius: 0 25px 25px 0;
+		border-radius: 0 20px 20px 0;
 	}
 }
 
@@ -78,7 +78,7 @@ $popup-close-icon-margin: 16px;
 	width: 100%;
 
 	&.round {
-		border-radius: 0 0 25px 25px;
+		border-radius: 0 0 20px 20px;
 	}
 }
 

+ 16 - 2
src/packages/popup/popup.vue

@@ -86,7 +86,21 @@ export default {
     }
   },
   beforeDestroy() {
-    this.close();
+    if (this.value) {
+      this.close();
+    }
+  },
+  activated() {
+    if (this.keepAlive) {
+      this.$emit('input', true);
+      this.keepAlive = false;
+    }
+  }, 
+  deactivated() {
+    if (this.value) {
+      this.close();
+      this.keepAlive = true;
+    }
   },
   watch: {
     value(val) {
@@ -216,5 +230,5 @@ export default {
     }
   }
 };
-export  {popupProps}
+export { popupProps };
 </script>

+ 1 - 4
src/packages/toast/demo.vue

@@ -108,10 +108,7 @@ export default {
     },
     setDefaultOptions() {
       this.$toast.setDefaultOptions({
-        duration: 5000,
-        coverColor: 'rgba(0, 0, 0, 0.2)',
-        closeOnClickOverlay: true,
-        cover: true
+        duration: 5000
       });
       this.$toast.text('将所有Toast提示展示时长设置为5000毫秒,并且点击遮罩层可关闭提示');
     },

File diff suppressed because it is too large
+ 4 - 4
src/packages/toast/toast.scss