vant components

2017-04-19 17:33:44 +08:00
commit 63c549d651
346 changed files with 25710 additions and 0 deletions
@@ -0,0 +1,79 @@
+<template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
+                <van-switch class="some-customized-class" v-model="switchState1"></van-switch>
+<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
+
+
+
+
+              </example-block><example-block title="">
+                <van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
+<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
+
+
+
+
+              </example-block><example-block title="禁用状态">
+                <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
+<div class="demo-switch__text">ON, DISABLED</div>
+
+<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
+<div class="demo-switch__text">OFF, DISABLED</div>
+
+
+
+              </example-block><example-block title="loading状态">
+                <van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
+<div class="demo-switch__text">ON, LOADING</div>
+
+<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
+<div class="demo-switch__text">OFF, LOADING</div>
+
+
+
+              </example-block></section></template>
+<style>
+  @component-namespace demo {
+    @b switch {
+      .examples,
+      .example-block  {
+        text-align: center;
+      }
+
+      .example-block {
+        .demo-sub-title {
+          text-align: left;
+        }
+      }
+
+      @e text {
+        margin: 20px auto;
+      }
+    }
+  }
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
+import Dialog from 'packages/dialog';
+
+export default {
+  data() {
+    return {
+      switchState1: true,
+      switchState2: true,
+      switchStateTrue: true,
+      switchStateFalse: false
+    };
+  },
+  methods: {
+    updateState(newState) {
+      const state = newState ? '打开' : '关闭';
+      Dialog.confirm({
+        title: '提醒',
+        message: '是否' + state + '开关？'
+      }).then((action) => {
+        this.switchState2 = newState;
+      }, (error) => {});
+    }
+  }
+};  
+</script>