仿互站小程序

vant/checkbox/index.js

@@ -0,0 +1,47 @@
+(0, require("../common/component").VantComponent)({
+    field: !0,
+    relation: {
+        name: "checkbox-group",
+        type: "ancestor"
+    },
+    classes: [ "icon-class", "label-class" ],
+    props: {
+        value: null,
+        disabled: Boolean,
+        useIconSlot: Boolean,
+        checkedClass: String,
+        checkedColor: String,
+        noColor: String,
+        labelPosition: String,
+        labelDisabled: Boolean,
+        shape: {
+            type: String,
+            value: "round"
+        }
+    },
+    methods: {
+        emitChange: function(e) {
+            var a = this.getRelationNodes("../checkbox-group/index")[0];
+            a ? this.setParentValue(a, e) : (this.$emit("input", e), this.$emit("change", {
+                checked: e,
+                name: this.data.name
+            }));
+        },
+        toggle: function() {
+            this.data.disabled || this.emitChange(!this.data.value);
+        },
+        onClickLabel: function() {
+            this.data.disabled || this.data.labelDisabled || this.emitChange(!this.data.value);
+        },
+        setParentValue: function(e, a) {
+            var t = e.data.value.slice(), i = this.data.name;
+            if (a) {
+                if (e.data.max && t.length >= e.data.max) return;
+                -1 === t.indexOf(i) && (t.push(i), e.$emit("input", t), e.$emit("change", t));
+            } else {
+                var n = t.indexOf(i);
+                -1 !== n && (t.splice(n, 1), e.$emit("input", t), e.$emit("change", t));
+            }
+        }
+    }
+});

vant/checkbox/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/checkbox/index.wxml

@@ -0,0 +1,10 @@
+<view class="van-checkbox  custom-class {{value&&checkedClass||''}}">
+    <view bindtap="toggle" class="van-checkbox__icon-wrap">
+        <slot name="icon" wx:if="{{useIconSlot}}"></slot>
+        <van-icon class="{{utils.bem( 'checkbox__icon',[ shape,{disabled:disabled,checked:value} ] )}}" customClass="icon-class" customStyle="line-height: 18px;" name="success" style="{{checkedColor&&value&&!disabled?'border-color:'+checkedColor+'; color:'+checkedColor:''}}" wx:else></van-icon>
+    </view>
+    <view bindtap="onClickLabel" class="label-class {{utils.bem( 'checkbox__label',[ labelPosition,{disabled:disabled} ] )}}" style="{{!value?noColor?'color:'+noColor:'color:#666':''}}">
+        <slot></slot>
+    </view>
+</view>
+<wxs module="utils" src="../wxs/utils.wxs" />

vant/checkbox/index.wxss

@@ -0,0 +1,65 @@
+@import "../area/index.wxss";
+
+.van-checkbox {
+    overflow: hidden;
+    user-select: none;
+}
+
+.van-checkbox__icon-wrap,.van-checkbox__label {
+    display: inline-block;
+    line-height: 18px;
+    vertical-align: middle;
+}
+
+.van-checkbox__icon {
+    border-radius: 2px;
+    display: block;
+    font-size: 14px;
+    width: 18px;
+    height: 18px;
+    color: transparent;
+    text-align: center;
+    box-sizing: border-box;
+    border: 1px solid #e5e5e5;
+    transition: .2s;
+}
+
+.van-checkbox__icon--round {
+    width: 19px;
+    height: 19px;
+    border-radius: 100%;
+}
+
+.van-checkbox__icon--checked {
+    color: #fff;
+    border-color: #5FB878;
+    color: #5FB878;
+    background-color: #fff;
+}
+
+.van-checkbox__icon--disabled {
+    border-color: #c9c9c9;
+    background-color: #eee;
+}
+
+.van-checkbox__icon--disabled.van-checkbox__icon--checked {
+    color: #c9c9c9;
+}
+
+.van-checkbox__label {
+    color: #333;
+    margin-left: 6px;
+}
+
+.van-checkbox__label--left {
+    float: left;
+    margin: 0 10px 0 0;
+}
+
+.van-checkbox__label--disabled {
+    color: #c9c9c9;
+}
+
+.van-checkbox__label:empty {
+    margin: 0;
+}