仿互站小程序

vant/rate/index.js

@@ -0,0 +1,79 @@
+(0, require("../common/component").VantComponent)({
+    field: !0,
+    classes: [ "icon-class" ],
+    props: {
+        readonly: Boolean,
+        disabled: Boolean,
+        size: {
+            type: Number,
+            value: 20
+        },
+        icon: {
+            type: String,
+            value: "star"
+        },
+        voidIcon: {
+            type: String,
+            value: "star-o"
+        },
+        color: {
+            type: String,
+            value: "#ffd21e"
+        },
+        voidColor: {
+            type: String,
+            value: "#c7c7c7"
+        },
+        disabledColor: {
+            type: String,
+            value: "#bdbdbd"
+        },
+        count: {
+            type: Number,
+            value: 5
+        },
+        value: {
+            type: Number,
+            value: 0
+        }
+    },
+    data: {
+        innerValue: 0
+    },
+    watch: {
+        value: function(e) {
+            e !== this.data.innerValue && this.set({
+                innerValue: e
+            });
+        }
+    },
+    computed: {
+        list: function() {
+            var e = this.data, t = e.count, n = e.innerValue;
+            return Array.from({
+                length: t
+            }, function(e, t) {
+                return t < n;
+            });
+        }
+    },
+    methods: {
+        onSelect: function(e) {
+            var t = this.data, n = e.currentTarget.dataset.index;
+            t.disabled || t.readonly || (this.set({
+                innerValue: n + 1
+            }), this.$emit("input", n + 1), this.$emit("change", n + 1));
+        },
+        onTouchMove: function(e) {
+            var t = this, n = e.touches[0], a = n.clientX, i = n.clientY;
+            this.getRect(".van-rate__item", !0).then(function(n) {
+                var o = n.find(function(e) {
+                    return a >= e.left && a <= e.right && i >= e.top && i <= e.bottom;
+                });
+                null != o && t.onSelect(Object.assign({}, e, {
+                    currentTarget: o
+                }));
+            });
+        }
+    }
+});

vant/rate/index.json

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

vant/rate/index.wxml

@@ -0,0 +1,3 @@
+<view bind:touchmove="onTouchMove" class="van-rate custom-class">
+    <van-icon bind:click="onSelect" class="van-rate__item" color="{{disabled?disabledColor:item?color:voidColor}}" customClass="icon-class" data-index="{{index}}" name="{{item?icon:voidIcon}}" size="{{size}}px" wx:for="{{list}}" wx:key="index"></van-icon>
+</view>

vant/rate/index.wxss

@@ -0,0 +1,11 @@
+@import "../area/index.wxss";
+
+.van-rate {
+    user-select: none;
+}
+
+.van-rate__item {
+    width: 1em;
+    padding: 0 2px;
+    box-sizing: initial;
+}