仿互站小程序

vant/badge/index.js

@@ -0,0 +1,29 @@
+(0, require("../common/component").VantComponent)({
+    relation: {
+        type: "ancestor",
+        name: "badge-group",
+        linked: function(t) {
+            this.parent = t;
+        }
+    },
+    props: {
+        info: null,
+        title: String
+    },
+    methods: {
+        onClick: function() {
+            var t = this, e = this.parent;
+            if (e) {
+                var n = e.badges.indexOf(this);
+                e.setActive(n).then(function() {
+                    t.$emit("click", n), e.$emit("change", n);
+                });
+            }
+        },
+        setActive: function(t) {
+            return this.set({
+                active: t
+            });
+        }
+    }
+});

vant/badge/index.json

@@ -0,0 +1,14 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-info": "../info/index",
+        "forview": "/utils/forview/index",
+        "van-loading": "/vant/loading/index",
+        "van-dialog": "/vant/dialog/index",
+        "van-button": "/vant/button/index",
+        "van-icon": "/vant/icon/index",
+        "van-popup": "/vant/popup/index",
+        "van-tab": "/vant/tab/index",
+        "van-tabs": "/vant/tabs/index"
+    }
+}

vant/badge/index.wxml

@@ -0,0 +1,7 @@
+<view bind:tap="onClick" class="{{utils.bem( 'badge',{active:active} )}} van-hairline custom-class" hoverClass="van-badge--hover" hoverStayTime="70">
+    <view class="van-badge__text">
+        <van-info customStyle="right: 4px" info="{{info}}" wx:if="{{info!==null}}"></van-info>
+    {{title}}
+  </view>
+</view>
+<wxs module="utils" src="../wxs/utils.wxs" />

vant/badge/index.wxss

@@ -0,0 +1,41 @@
+@import "../area/index.wxss";
+
+.van-badge {
+    display: block;
+    padding: 20px 12px 20px 9px;
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 1.4;
+    color: #7d7e80;
+    word-break: break-all;
+    background-color: #f8f8f8;
+    border-left: 3px solid transparent;
+    box-sizing: border-box;
+    user-select: none;
+}
+
+.van-badge--hover {
+    background-color: #f2f3f5;
+}
+
+.van-badge:after {
+    border-bottom-width: 1px;
+}
+
+.van-badge--active {
+    font-weight: 700;
+    color: #333;
+    border-color: #f44;
+}
+
+.van-badge--active:after {
+    border-right-width: 1px;
+}
+
+.van-badge--active,.van-badge--active.van-badge--hover {
+    background-color: #fff;
+}
+
+.van-badge__text {
+    position: relative;
+}