feat:更改count-selector组件数字超出边框后的样式

Author: 张寸起

dist/count-selector/index.js

@@ -8,7 +8,8 @@ Component({
   properties: {
     count: {
       type: Number,
-      value: 1
+      value: 1,
+      observer: 'changeCount'
     },
     max: {
       type: Number,
@@ -62,6 +63,10 @@ Component({
       }, 50);
     },
 
+    changeCount(){
+      this.blurCount(this.properties.count);
+    },
+
     blurCount(value) {
       if (value) {
         if (value > this.properties.max) this.setData({

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;min-height:56rpx;line-height:56rpx;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;min-height:56rpx;line-height:56rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;margin:0 4rpx;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

examples/dist/count-selector/index.js

@@ -8,7 +8,8 @@ Component({
   properties: {
     count: {
       type: Number,
-      value: 1
+      value: 1,
+      observer: 'changeCount'
     },
     max: {
       type: Number,
@@ -62,6 +63,10 @@ Component({
       }, 50);
     },
 
+    changeCount(){
+      this.blurCount(this.properties.count);
+    },
+
     blurCount(value) {
       if (value) {
         if (value > this.properties.max) this.setData({

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;min-height:56rpx;line-height:56rpx;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;min-height:56rpx;line-height:56rpx;font-size:24rpx;color:#596c8e;background:#f6f7f9;margin:0 4rpx;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

src/count-selector/index.js

@@ -8,7 +8,8 @@ Component({
   properties: {
     count: {
       type: Number,
-      value: 1
+      value: 1,
+      observer: 'changeCount'
     },
     max: {
       type: Number,
@@ -62,6 +63,10 @@ Component({
       }, 50);
     },
 
+    changeCount(){
+      this.blurCount(this.properties.count);
+    },
+
     blurCount(value) {
       if (value) {
         if (value > this.properties.max) this.setData({

src/count-selector/index.less

@@ -33,4 +33,7 @@
   background: #f6f7f9;
   margin: 0 4rpx;
   text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }