仿互站小程序

vant/switch/index.js

@@ -0,0 +1,44 @@
+(0, require("../common/component").VantComponent)({
+    field: !0,
+    classes: [ "node-class" ],
+    props: {
+        checked: null,
+        loading: Boolean,
+        disabled: Boolean,
+        activeColor: String,
+        inactiveColor: String,
+        size: {
+            type: String,
+            value: "30px"
+        },
+        activeValue: {
+            type: null,
+            value: !0
+        },
+        inactiveValue: {
+            type: null,
+            value: !1
+        }
+    },
+    watch: {
+        checked: function(e) {
+            this.set({
+                value: e
+            });
+        }
+    },
+    created: function() {
+        this.set({
+            value: this.data.checked
+        });
+    },
+    methods: {
+        onClick: function() {
+            var e = this.data, t = e.activeValue, a = e.inactiveValue;
+            if (!this.data.disabled && !this.data.loading) {
+                var i = this.data.checked === t ? a : t;
+                this.$emit("input", i), this.$emit("change", i);
+            }
+        }
+    }
+});

vant/switch/index.json

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

@@ -0,0 +1,6 @@
+<view bind:tap="onClick" class="custom-class {{utils.bem( 'switch',{on:value===activeValue,disabled:disabled} )}}" style="font-size: {{size}}; {{checked?activeColor:inactiveColor?'background-color: '+(checked?activeColor:inactiveColor):''}}">
+    <view class="van-switch__node node-class">
+        <van-loading customClass="van-switch__loading" size="50%" wx:if="{{loading}}"></van-loading>
+    </view>
+</view>
+<wxs module="utils" src="../wxs/utils.wxs" />

vant/switch/index.wxss

@@ -0,0 +1,45 @@
+@import "../area/index.wxss";
+
+.van-switch {
+    display: inline-block;
+    position: relative;
+    width: 2em;
+    border: 1px solid rgba(0,0,0,.1);
+    border-radius: 1em;
+    box-sizing: initial;
+    transition: background-color .3s;
+}
+
+.van-switch,.van-switch__node {
+    height: 1em;
+    background-color: #fff;
+}
+
+.van-switch__node {
+    top: 0;
+    left: 0;
+    position: absolute;
+    border-radius: 100%;
+    width: 1em;
+    z-index: 1;
+    transition: .3s;
+    box-shadow: 0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);
+}
+
+.van-switch__loading {
+    top: 25%;
+    left: 25%;
+    position: absolute!important;
+}
+
+.van-switch--on {
+    background-color: #1989fa;
+}
+
+.van-switch--on .van-switch__node {
+    transform: translateX(1em);
+}
+
+.van-switch--disabled {
+    opacity: .4;
+}