Blame view

examples/routers/switch.vue 1.53 KB
2af5843d   梁灏   Switch add large ...
1
  <template>
2d5ba278   梁灏   support Switch
2
      <div>
eb7f31db   梁灏   Switch add loadin...
3
          <i-switch v-model="m1" :loading="loading">
2d5ba278   梁灏   support Switch
4
5
6
7
              <span slot="open">开</span>
              <span slot="close">关</span>
          </i-switch>
          {{ m1 }}
eb7f31db   梁灏   Switch add loadin...
8
9
          <div @click="m1 = !m1">toggle</div>
          <div @click="loading = !loading">loading</div>
ac2f8493   梁灏   update Switch style
10
          <br><br>
eb7f31db   梁灏   Switch add loadin...
11
          <i-switch size="large" loading></i-switch>
ac2f8493   梁灏   update Switch style
12
          <i-switch></i-switch>
eb7f31db   梁灏   Switch add loadin...
13
          <i-switch size="small" v-model="m1" :loading="loading"></i-switch>
ac2f8493   梁灏   update Switch style
14
15
16
17
18
19
20
21
22
23
24
25
26
27
          <br><br>
          <i-switch>
              <span slot="open">开</span>
              <span slot="close">关</span>
          </i-switch>
          <i-switch>
              <Icon type="android-done" slot="open"></Icon>
              <Icon type="android-close" slot="close"></Icon>
          </i-switch>
          <br><br>
          <i-switch size="large">
              <span slot="open">开启</span>
              <span slot="close">关闭</span>
          </i-switch>
eb7f31db   梁灏   Switch add loadin...
28
          <i-switch size="large" v-model="m1" :loading="loading">
ac2f8493   梁灏   update Switch style
29
30
31
32
33
34
              <span slot="open">ON</span>
              <span slot="close">OFF</span>
          </i-switch>
          <br><br>
          <i-switch :disabled="disabled"></i-switch>
          <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
2d5ba278   梁灏   support Switch
35
      </div>
2af5843d   梁灏   Switch add large ...
36
37
  </template>
  <script>
2af5843d   梁灏   Switch add large ...
38
      export default {
2af5843d   梁灏   Switch add large ...
39
40
          data () {
              return {
eb7f31db   梁灏   Switch add loadin...
41
42
43
                  m1: true,
                  disabled: true,
                  loading: false
2af5843d   梁灏   Switch add large ...
44
45
46
47
              }
          },
          methods: {
              change (status) {
2d5ba278   梁灏   support Switch
48
                  console.log(status)
2af5843d   梁灏   Switch add large ...
49
50
51
52
              }
          }
      }
  </script>