仿互站小程序

vant/progress/index.js

@@ -0,0 +1,61 @@
+var t = require("../common/component"), o = require("../common/color");
+
+(0, t.VantComponent)({
+    props: {
+        inactive: Boolean,
+        percentage: Number,
+        pivotText: String,
+        pivotColor: String,
+        showPivot: {
+            type: Boolean,
+            value: !0
+        },
+        color: {
+            type: String,
+            value: o.BLUE
+        },
+        textColor: {
+            type: String,
+            value: "#fff"
+        }
+    },
+    data: {
+        pivotWidth: 0,
+        progressWidth: 0
+    },
+    watch: {
+        pivotText: "getWidth",
+        showPivot: "getWidth"
+    },
+    computed: {
+        portionStyle: function() {
+            return "width: " + ((this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + "px") + "; background: " + this.getCurrentColor() + "; ";
+        },
+        pivotStyle: function() {
+            return "color: " + this.data.textColor + "; background: " + (this.data.pivotColor || this.getCurrentColor());
+        },
+        text: function() {
+            return this.data.pivotText || this.data.percentage + "%";
+        }
+    },
+    mounted: function() {
+        this.getWidth();
+    },
+    methods: {
+        getCurrentColor: function() {
+            return this.data.inactive ? "#cacaca" : this.data.color;
+        },
+        getWidth: function() {
+            var t = this;
+            this.getRect(".van-progress").then(function(o) {
+                t.set({
+                    progressWidth: o.width
+                });
+            }), this.getRect(".van-progress__pivot").then(function(o) {
+                t.set({
+                    pivotWidth: o.width || 0
+                });
+            });
+        }
+    }
+});

vant/progress/index.json

@@ -0,0 +1,13 @@
+{
+    "component": true,
+    "usingComponents": {
+        "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/progress/index.wxml

@@ -0,0 +1,7 @@
+<view class="van-progress custom-class">
+    <view class="van-progress__portion {{showPivot&&text?'van-progress__portion--with-pivot':''}}" style="{{portionStyle}}">
+        <view class="van-progress__pivot" style="{{pivotStyle}}" wx:if="{{showPivot&&text}}">
+      {{text}}
+    </view>
+    </view>
+</view>

vant/progress/index.wxss

@@ -0,0 +1,36 @@
+@import "../area/index.wxss";
+
+.van-progress {
+    height: 4px;
+    position: relative;
+    border-radius: 4px;
+    background: #e5e5e5;
+}
+
+.van-progress__portion {
+    left: 0;
+    height: 100%;
+    position: absolute;
+    border-radius: inherit;
+}
+
+.van-progress__portion--with-pivot {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.van-progress__pivot {
+    top: 50%;
+    right: 0;
+    min-width: 2em;
+    padding: 0 5px;
+    font-size: 10px;
+    position: absolute;
+    line-height: 1.6;
+    text-align: center;
+    border-radius: 1em;
+    word-break: keep-all;
+    box-sizing: border-box;
+    background-color: #e5e5e5;
+    transform: translate(100%,-50%);
+}