chenhaodong / mew-iview

Blame view

local/routers/radio.vue 4.93 KB
Edit Raw Normal View History
7fa943eb   梁灏   init 
1
2
 
  <template>
      <div>
49306c7a   梁灏   add Collapse comp... 
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
          <Collapse active-key="2">
              <Panel key="1">
                  Header1
                  <Collapse active-key="2" slot="content">
                      <Panel key="1">
                          inHeader1
                          <p slot="content">inContent1</p>
                      </Panel>
                      <Panel key="2">
                          inHeader2
                          <p slot="content">inContent2</p>
                      </Panel>
                      <Panel key="3">
                          inHeader3
                          <p slot="content">inContent3</p>
                      </Panel>
                  </Collapse>
              </Panel>
              <Panel key="2">
                  Header2
                  <p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
              </Panel>
              <Panel key="3">
                  Header3
                  <p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
              </Panel>
          </Collapse>
          <Button @click="activeKey = '2'">换</Button>
7fa943eb   梁灏   init 
31
 
      </div>
4925f85f   梁灏   add Radio UI 
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
      <Radio :checked.sync="radio">Radio</Radio>
      <Button @click="radio = !radio">change radio</Button>
      <br>
      <br>
      <Radio-group :model.sync="phone" type="button">
          <Radio value="apple">
              <Icon type="social-apple"></Icon>
              <span>Apple</span>
          </Radio>
          <Radio value="android">
              <Icon type="social-android"></Icon>
              <span>Android</span>
          </Radio>
          <Radio value="windows">
              <Icon type="social-windows"></Icon>
              <span>Windows</span>
          </Radio>
      </Radio-group>
      <Radio-group :model.sync="animal" type="button">
          <Radio value="金斑蝶"></Radio>
          <Radio value="爪哇犀牛"></Radio>
          <Radio value="印度黑羚"></Radio>
      </Radio-group>
  
      <Radio-group :model.sync="animal" type="button">
          <Radio value="金斑蝶" disabled></Radio>
          <Radio value="爪哇犀牛" disabled></Radio>
          <Radio value="印度黑羚"></Radio>
      </Radio-group>
      <br><br>
      <Radio-group :model.sync="animal" type="button" size="large">
          <Radio value="金斑蝶"></Radio>
          <Radio value="爪哇犀牛"></Radio>
          <Radio value="印度黑羚"></Radio>
      </Radio-group>
      <Radio-group :model.sync="animal" type="button">
          <Radio value="金斑蝶"></Radio>
          <Radio value="爪哇犀牛"></Radio>
          <Radio value="印度黑羚"></Radio>
      </Radio-group>
      <Radio-group :model.sync="animal" type="button" size="small">
          <Radio value="金斑蝶"></Radio>
          <Radio value="爪哇犀牛"></Radio>
          <Radio value="印度黑羚"></Radio>
      </Radio-group>
6c5fbd8b   梁灏   add Checkbox UI 
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
      <br><br><br><br>
      <Checkbox :checked.sync="radio">Checkbox</Checkbox>
      <br><br>
      <Checkbox-group :model="social">
          <Checkbox value="twitter">
              <Icon type="social-twitter"></Icon>
              <span>Twitter</span>
          </Checkbox>
          <Checkbox value="facebook">
              <Icon type="social-facebook"></Icon>
              <span>Facebook</span>
          </Checkbox>
          <Checkbox value="github">
              <Icon type="social-github"></Icon>
              <span>Github</span>
          </Checkbox>
          <Checkbox value="snapchat">
              <Icon type="social-snapchat"></Icon>
              <span>Snapchat</span>
          </Checkbox>
      </Checkbox-group>
      <br><br>
      <Checkbox :checked.sync="disabledSingle" disabled>Checkbox</Checkbox>
      <Checkbox-group :model="disabledGroup">
          <Checkbox value="香蕉" disabled></Checkbox>
          <Checkbox value="苹果" disabled></Checkbox>
          <Checkbox value="西瓜"></Checkbox>
      </Checkbox-group>
7fa943eb   梁灏   init 
105
106
 
  </template>
  <script>
6c5fbd8b   梁灏   add Checkbox UI 
107
 
      import { Radio, Alert, Icon, Collapse, Button, Checkbox } from 'iview';
7fa943eb   梁灏   init 
108
109
 
  
      const RadioGroup = Radio.Group;
49306c7a   梁灏   add Collapse comp... 
110
 
      const Panel = Collapse.Panel;
6c5fbd8b   梁灏   add Checkbox UI 
111
 
      const CheckboxGroup = Checkbox.Group;
7fa943eb   梁灏   init 
112
113
114
115
 
  
      export default {
          components: {
              Radio,
9d69bab6   梁灏   add Alert component 
116
117
 
              RadioGroup,
              Alert,
49306c7a   梁灏   add Collapse comp... 
118
119
120
 
              Icon,
              Collapse,
              Panel,
6c5fbd8b   梁灏   add Checkbox UI 
121
122
123
 
              Button,
              Checkbox,
              CheckboxGroup
7fa943eb   梁灏   init 
124
125
126
127
128
129
 
          },
          props: {
          
          },
          data () {
              return {
4925f85f   梁灏   add Radio UI 
130
 
                  radio: false,
49306c7a   梁灏   add Collapse comp... 
131
 
                  radioGroup: '段模',
4925f85f   梁灏   add Radio UI 
132
133
 
                  activeKey: [1,2],
                  phone: 'apple',
6c5fbd8b   梁灏   add Checkbox UI 
134
135
136
137
 
                  animal: '爪哇犀牛',
                  social: ['facebook', 'github'],
                  disabledSingle: true,
                  disabledGroup: ['苹果']
7fa943eb   梁灏   init 
138
139
140
141
142
143
144
145
 
              }
          },
          computed: {
          
          },
          methods: {
              changeGroup (data) {
                  console.log(data);
9d69bab6   梁灏   add Alert component 
146
147
148
 
              },
              closed (data) {
                  console.log(data)
7fa943eb   梁灏   init 
149
150
151
152
 
              }
          }
      }
  </script>