feat:修改count-select组件层级问题

张寸起 · 7insummer · commit 76f95e7b4005 · 2019-08-14T21:12:01.000+08:00
diff --git a/dist/count-selector/index.js b/dist/count-selector/index.js
@@ -29,7 +29,7 @@ Component({
    * 组件的初始数据
    */
   data: {
-
+    focus: false
   },
 
   /**
@@ -44,7 +44,16 @@ Component({
       });
     },
 
+    onCount() {
+      this.setData({
+        focus: true
+      });
+    },
+
     onBlur(e) {
+      this.setData({
+        focus: false
+      });
       let {
         value
       } = e.detail;
diff --git a/dist/count-selector/index.wxml b/dist/count-selector/index.wxml
@@ -4,11 +4,14 @@
         data-type="reduce">
     <text>-</text>
   </view>
-  <input  class="l-count-class count" 
+  <input  wx:if="{{focus}}"
+          class="l-count-class count" 
           disabled="{{disabled}}" 
-          type="number" 
+          type="number"
+          focus="{{focus}}" 
           value="{{count}}"
           bindblur="onBlur"></input>
+  <view wx:else class="l-count-class count" bindtap="onCount">{{count}}</view>        
   <view class="l-symbol-class symbol {{count>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" 
         catchtap="{{count>=max|| disabled?'doNothing':'addTap'}}"
         data-type="reduce">
diff --git a/dist/count-selector/index.wxss b/dist/count-selector/index.wxss
@@ -1 +1 @@
-.container-count{display:flex;flex-direction:row}.symbol{height:56rpx;width:56rpx;display:inline-block;vertical-align:middle;text-align:center;line-height:56rpx;font-size:42rpx}.disabled{background-color:#f3f3f3;color:#c4c9d2}.abled{background-color:#ecf1f8;color:#596c8e}.count{height:56rpx;width:64rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;margin:0 4rpx;text-align:center}
+.container-count{display:flex;flex-direction:row}.symbol{height:56rpx;width:56rpx;display:inline-block;vertical-align:middle;text-align:center;line-height:56rpx;font-size:42rpx}.disabled{background-color:#f3f3f3;color:#c4c9d2}.abled{background-color:#ecf1f8;color:#596c8e}.count{height:56rpx;width:64rpx;line-height:56rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;margin:0 4rpx;text-align:center}
diff --git a/dist/loading/index.js b/dist/loading/index.js
@@ -37,6 +37,12 @@ Component({
     this._init();
   },
 
+  pageLifetimes: {
+    show() {
+      this._init();
+    },
+  },
+
   methods: {
     _init() {
       wx.lin = wx.lin || {};
diff --git a/dist/loadmore/index.js b/dist/loadmore/index.js
@@ -34,6 +34,12 @@ Component({
     this._init();
   },
 
+  pageLifetimes: {
+    show() {
+      this._init();
+    },
+  },
+
   methods: {
     _init() {
       wx.lin = wx.lin || {};
diff --git a/dist/mask/index.js b/dist/mask/index.js
@@ -56,12 +56,12 @@ Component({
    */
   methods: {
     // 阻止滑动
-    doNothingMove(e) {
+    doNothingMove() {
       // do nothing……
     },
 
     // 点击事件
-    onMaskTap(e) {
+    onMaskTap() {
 
       let detail = true;
       let option = { bubbles: true, composed: true };
@@ -70,7 +70,7 @@ Component({
         this.setData({
           // fullScreen: 'hide',
           show: false,
-        })
+        });
       }
       this.triggerEvent('lintap', detail, option);
     }
@@ -80,4 +80,4 @@ Component({
   },
 
 
-})
+});
diff --git a/dist/mask/index.wxml b/dist/mask/index.wxml
@@ -1,4 +1,3 @@
-
 <!-- mask.wxml -->
 <view
   class="container-mask  {{center? 'center' : ''}}"
diff --git a/dist/popup/index.js b/dist/popup/index.js
@@ -35,6 +35,12 @@ Component({
   attached() {
     this._init();
   },
+
+  pageLifetimes: {
+    show() {
+      this._init();
+    },
+  },
   /**
    * 组件的初始数据
    */
diff --git a/examples/dist/count-selector/index.js b/examples/dist/count-selector/index.js
@@ -29,7 +29,7 @@ Component({
    * 组件的初始数据
    */
   data: {
-
+    focus: false
   },
 
   /**
@@ -44,7 +44,16 @@ Component({
       });
     },
 
+    onCount() {
+      this.setData({
+        focus: true
+      });
+    },
+
     onBlur(e) {
+      this.setData({
+        focus: false
+      });
       let {
         value
       } = e.detail;
diff --git a/examples/dist/count-selector/index.wxml b/examples/dist/count-selector/index.wxml
@@ -4,11 +4,14 @@
         data-type="reduce">
     <text>-</text>
   </view>
-  <input  class="l-count-class count" 
+  <input  wx:if="{{focus}}"
+          class="l-count-class count" 
           disabled="{{disabled}}" 
-          type="number" 
+          type="number"
+          focus="{{focus}}" 
           value="{{count}}"
           bindblur="onBlur"></input>
+  <view wx:else class="l-count-class count" bindtap="onCount">{{count}}</view>        
   <view class="l-symbol-class symbol {{count>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" 
         catchtap="{{count>=max|| disabled?'doNothing':'addTap'}}"
         data-type="reduce">
diff --git a/examples/dist/count-selector/index.wxss b/examples/dist/count-selector/index.wxss
@@ -1 +1 @@
-.container-count{display:flex;flex-direction:row}.symbol{height:56rpx;width:56rpx;display:inline-block;vertical-align:middle;text-align:center;line-height:56rpx;font-size:42rpx}.disabled{background-color:#f3f3f3;color:#c4c9d2}.abled{background-color:#ecf1f8;color:#596c8e}.count{height:56rpx;width:64rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;margin:0 4rpx;text-align:center}
+.container-count{display:flex;flex-direction:row}.symbol{height:56rpx;width:56rpx;display:inline-block;vertical-align:middle;text-align:center;line-height:56rpx;font-size:42rpx}.disabled{background-color:#f3f3f3;color:#c4c9d2}.abled{background-color:#ecf1f8;color:#596c8e}.count{height:56rpx;width:64rpx;line-height:56rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;margin:0 4rpx;text-align:center}
diff --git a/examples/dist/loading/index.js b/examples/dist/loading/index.js
@@ -37,6 +37,12 @@ Component({
     this._init();
   },
 
+  pageLifetimes: {
+    show() {
+      this._init();
+    },
+  },
+
   methods: {
     _init() {
       wx.lin = wx.lin || {};
diff --git a/examples/dist/loadmore/index.js b/examples/dist/loadmore/index.js
@@ -34,6 +34,12 @@ Component({
     this._init();
   },
 
+  pageLifetimes: {
+    show() {
+      this._init();
+    },
+  },
+
   methods: {
     _init() {
       wx.lin = wx.lin || {};
diff --git a/examples/dist/mask/index.js b/examples/dist/mask/index.js
@@ -56,12 +56,12 @@ Component({
    */
   methods: {
     // 阻止滑动
-    doNothingMove(e) {
+    doNothingMove() {
       // do nothing……
     },
 
     // 点击事件
-    onMaskTap(e) {
+    onMaskTap() {
 
       let detail = true;
       let option = { bubbles: true, composed: true };
@@ -70,7 +70,7 @@ Component({
         this.setData({
           // fullScreen: 'hide',
           show: false,
-        })
+        });
       }
       this.triggerEvent('lintap', detail, option);
     }
@@ -80,4 +80,4 @@ Component({
   },
 
 
-})
+});
diff --git a/examples/dist/mask/index.wxml b/examples/dist/mask/index.wxml
@@ -1,4 +1,3 @@
-
 <!-- mask.wxml -->
 <view
   class="container-mask  {{center? 'center' : ''}}"
diff --git a/examples/dist/popup/index.js b/examples/dist/popup/index.js
@@ -35,6 +35,12 @@ Component({
   attached() {
     this._init();
   },
+
+  pageLifetimes: {
+    show() {
+      this._init();
+    },
+  },
   /**
    * 组件的初始数据
    */
diff --git a/examples/pages/components/shopping/pages/count-selector/index.js b/examples/pages/components/shopping/pages/count-selector/index.js
@@ -13,14 +13,10 @@ Page({
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
+  onLoad: function () {
 
   },
 
-  onTap(e){
-    console.log(e)
-  },
-
   onOut(e){
     wx.showToast({
       title: '超出限制',
diff --git a/examples/pages/components/shopping/pages/count-selector/index.wxml b/examples/pages/components/shopping/pages/count-selector/index.wxml
@@ -1,19 +1,5 @@
 <content-title name="CountSelector" describe="数量选择器">
-
-  <content-card  name="{{item.title}}" wx:for="{{countConfig}}" wx:key="item">
-    <l-count-selector
-        l-class="count"
-        wx:for="{{item.config}}" 
-        wx:for-item="count"
-        wx:key="count"
-        min="{{count.min}}"
-        count="{{count.count}}"
-        max="{{count.max}}"
-        step="{{count.step}}"
-        disabled="{{count.disabled}}"
-        bind:lintap="onTap"
-        bind:linout="onOut"
-    />
+  <content-card name="{{item.title}}" wx:for="{{countConfig}}" wx:key="item">
+    <l-count-selector l-class="count" wx:for="{{item.config}}" wx:for-item="count" wx:key="count" min="{{count.min}}" count="{{count.count}}" max="{{count.max}}" step="{{count.step}}" disabled="{{count.disabled}}" bind:linout="onOut" />
   </content-card>
-  
 </content-title>
diff --git a/src/count-selector/index.js b/src/count-selector/index.js
@@ -29,7 +29,7 @@ Component({
    * 组件的初始数据
    */
   data: {
-
+    focus: false
   },
 
   /**
@@ -44,7 +44,16 @@ Component({
       });
     },
 
+    onCount() {
+      this.setData({
+        focus: true
+      });
+    },
+
     onBlur(e) {
+      this.setData({
+        focus: false
+      });
       let {
         value
       } = e.detail;
diff --git a/src/count-selector/index.less b/src/count-selector/index.less
@@ -26,6 +26,7 @@
 .count {
   height: 56rpx;
   width: 64rpx;
+  line-height: 56rpx;
   font-size: 24rpx;
   color: #596c8e;
   background: #f6f7f9;
diff --git a/src/count-selector/index.wxml b/src/count-selector/index.wxml
@@ -4,11 +4,14 @@
         data-type="reduce">
     <text>-</text>
   </view>
-  <input  class="l-count-class count" 
+  <input  wx:if="{{focus}}"
+          class="l-count-class count" 
           disabled="{{disabled}}" 
-          type="number" 
+          type="number"
+          focus="{{focus}}" 
           value="{{count}}"
           bindblur="onBlur"></input>
+  <view wx:else class="l-count-class count" bindtap="onCount">{{count}}</view>        
   <view class="l-symbol-class symbol {{count>=max|| disabled?'disabled l-disabled-class':'abled l-symbol-class'}}" 
         catchtap="{{count>=max|| disabled?'doNothing':'addTap'}}"
         data-type="reduce">
diff --git a/src/loading/index.js b/src/loading/index.js
@@ -37,6 +37,12 @@ Component({
     this._init();
   },
 
+  pageLifetimes: {
+    show() {
+      this._init();
+    },
+  },
+
   methods: {
     _init() {
       wx.lin = wx.lin || {};
diff --git a/src/loadmore/index.js b/src/loadmore/index.js
@@ -34,6 +34,12 @@ Component({
     this._init();
   },
 
+  pageLifetimes: {
+    show() {
+      this._init();
+    },
+  },
+
   methods: {
     _init() {
       wx.lin = wx.lin || {};
diff --git a/src/mask/index.js b/src/mask/index.js
@@ -56,12 +56,12 @@ Component({
    */
   methods: {
     // 阻止滑动
-    doNothingMove(e) {
+    doNothingMove() {
       // do nothing……
     },
 
     // 点击事件
-    onMaskTap(e) {
+    onMaskTap() {
 
       let detail = true;
       let option = { bubbles: true, composed: true };
@@ -70,7 +70,7 @@ Component({
         this.setData({
           // fullScreen: 'hide',
           show: false,
-        })
+        });
       }
       this.triggerEvent('lintap', detail, option);
     }
@@ -80,4 +80,4 @@ Component({
   },
 
 
-})
+});
diff --git a/src/mask/index.less b/src/mask/index.less
diff --git a/src/mask/index.wxml b/src/mask/index.wxml
diff --git a/src/popup/index.js b/src/popup/index.js

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-.container-count{display:flex;flex-direction:row}.symbol{height:56rpx;width:56rpx;display:inline-block;vertical-align:middle;text-align:center;line-height:56rpx;font-size:42rpx}.disabled{background-color:#f3f3f3;color:#c4c9d2}.abled{background-color:#ecf1f8;color:#596c8e}.count{height:56rpx;width:64rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;margin:0 4rpx;text-align:center}`
	`1`	`+.container-count{display:flex;flex-direction:row}.symbol{height:56rpx;width:56rpx;display:inline-block;vertical-align:middle;text-align:center;line-height:56rpx;font-size:42rpx}.disabled{background-color:#f3f3f3;color:#c4c9d2}.abled{background-color:#ecf1f8;color:#596c8e}.count{height:56rpx;width:64rpx;line-height:56rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;margin:0 4rpx;text-align:center}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-`
`2`	`1`	`<!-- mask.wxml -->`
`3`	`2`	`<view`
`4`	`3`	`class="container-mask {{center? 'center' : ''}}"`