小程序源码

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

@@ -0,0 +1,56 @@
+const prefixCls = 'i-checkbox';
+
+Component({
+    externalClasses: ['i-class'],
+    relations: {
+        '../checkbox-group/index': {
+            type: 'parent'
+        }
+    },
+    properties: {
+        value: {
+            type: String,
+            value: ''
+        },
+        checked: {
+            type: Boolean,
+            value: false
+        },
+        disabled: {
+            type: Boolean,
+            value: false
+        },
+        color: {
+            type: String,
+            value: '#2d8cf0'
+        },
+        position: {
+            type: String,
+            value: 'left', //left right
+            observer: 'setPosition'
+        }
+    },
+    data: {
+        checked: true,
+        positionCls: `${prefixCls}-checkbox-left`,
+    },
+    attached() {
+        this.setPosition();
+    },
+    methods: {
+        changeCurrent(current) {
+            this.setData({ checked: current });
+        },
+        checkboxChange() {
+            if (this.data.disabled) return;
+            const item = { current: !this.data.checked, value: this.data.value };
+            const parent = this.getRelationNodes('../checkbox-group/index')[0];
+            parent ? parent.emitEvent(item) : this.triggerEvent('change', item);
+        },
+        setPosition() {
+            this.setData({
+                positionCls: this.data.position.indexOf('left') !== -1 ? `${prefixCls}-checkbox-left` : `${prefixCls}-checkbox-right`,
+            });
+        }
+    }
+});

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

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents":
+    {
+        "i-cell": "../cell/index"
+    }
+}

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

@@ -0,0 +1,8 @@
+<view class="i-class i-checkbox" catchtap="checkboxChange">
+    <i-cell i-class="i-checkbox-cell">
+        <label>
+            <radio value="{{value}}" checked="{{checked}}" color="{{checked?color:''}}" disabled="{{disabled}}" class="i-checkbox-radio {{positionCls}}" />
+            <view class="i-checkbox-title">{{value}}</view>
+        </label>
+    </i-cell>
+</view>

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

@@ -0,0 +1 @@
+.i-checkbox-cell::after{display:block}.i-checkbox-checkbox-left{float:left}.i-checkbox-checkbox-right{float:right}.i-checkbox-radio{vertical-align:middle}.i-checkbox-title{display:inline-block;vertical-align:middle}