小程序源码

source/wx/xzs-student/component/iView/badge/index.js

@@ -0,0 +1,29 @@
+Component({
+    externalClasses: ['i-class', 'i-class-alone'],
+
+    properties: {
+        count: {
+            type: Number,
+            value: 0,
+            observer: 'finalCount'
+        },
+        overflowCount: {
+            type: Number,
+            value: 99
+        },
+        dot: {
+            type: Boolean,
+            value: false
+        },
+    },
+    data: {
+        finalCount: 0
+    },
+    methods: {
+        finalCount() {
+            this.setData({
+                finalCount: parseInt(this.data.count) >= parseInt(this.data.overflowCount) ? `${this.data.overflowCount}+` : this.data.count
+            });
+        },
+    }
+});

source/wx/xzs-student/component/iView/badge/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

source/wx/xzs-student/component/iView/badge/index.wxml

@@ -0,0 +1,5 @@
+<view class="i-class i-badge">
+    <slot></slot>
+    <view class="i-badge-dot" wx:if="{{ dot }}"></view>
+    <view class="i-badge-count i-class-alone" wx:elif="{{ count !== 0 }}">{{ finalCount }}</view>
+</view>

source/wx/xzs-student/component/iView/badge/index.wxss

@@ -0,0 +1 @@
+.i-badge{position:relative;display:inline-block;line-height:1;vertical-align:middle}.i-badge-count{position:absolute;transform:translateX(50%);top:-6px;right:0;height:18px;border-radius:9px;min-width:18px;background:#ed3f14;border:1px solid transparent;color:#fff;line-height:18px;text-align:center;padding:0 5px;font-size:12px;white-space:nowrap;transform-origin:-10% center;z-index:10;box-shadow:0 0 0 1px #fff;box-sizing:border-box;text-rendering:optimizeLegibility}.i-badge-count-alone{top:auto;display:block;position:relative;transform:translateX(0)}.i-badge-dot{position:absolute;transform:translateX(-50%);transform-origin:0 center;top:-4px;right:-8px;height:8px;width:8px;border-radius:100%;background:#ed3f14;z-index:10;box-shadow:0 0 0 1px #fff}