alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add auto generate example js

Browse Source
This commit is contained in:
cookfront
2017-03-06 18:56:23 +08:00
parent b388aeaa02
commit 6b825e0718
39 changed files with 639 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/switch.vue
+28 -51
View File
@@ -1,67 +1,44 @@
<template>
<div class="page-switch">
<h1 class="page-title">Switch</h1>
<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<div class="demo-switch__text">{{switchStateText}}</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="demo-switch__text">ON, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="demo-switch__text">OFF, DISABLED</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="demo-switch__text">ON, LOADING</div>
</div>
<div class="demo-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="demo-switch__text">OFF, LOADING</div>
</div>
<h2 class="page-sub-title">基础用法</h2>
<div class="page-switch">
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
<div class="page-switch__text">{{switchStateText}}</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
<div class="page-switch__text">ON, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
<div class="page-switch__text">ON, LOADING</div>
</div>
<div class="page-switch__wrapper">
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
<div class="page-switch__text">OFF, LOADING</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? 'ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
}
}
};
</script>
</example-block></section></template>
<style>
@component-namespace page {
@component switch {
@component-namespace demo {
@b switch {
padding: 0 15px 15px;
@descendent wrapper {
@e wrapper {
width: 33.33%;
float: left;
text-align: center;
}
@descendent text {
@e text {
margin: 20px 0;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>