Blame view

examples/routers/modal.vue 2.67 KB
6259471f   梁灏   support Modal
1
2
  <template>
      <div>
595cfa72   梁灏   fixed #1187 #844 ...
3
4
5
6
7
          <i-button @click="showModal = true">Modal有Tabs</i-button>
          <i-button @click="showModal2 = true">Modal无Tabs</i-button>
          <Modal v-model="showModal" title="弹窗">
              <Tabs>
                  <Tab-pane label="演示" style="height: 80px;">
ecaf8d51   梁灏   Date add transfer...
8
9
                      <Date-picker transfer type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
                      <i-select transfer multiple v-model="m1">
595cfa72   梁灏   fixed #1187 #844 ...
10
11
12
13
14
15
16
17
18
                          <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                      </i-select>
                  </Tab-pane>
              </Tabs>
          </Modal>
          <Modal v-model="showModal2" title="弹窗">
              <i-select>
                  <i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>
              </i-select>
dce5a3ea   Aresn   update Modal
19
          </Modal>
6259471f   梁灏   support Modal
20
21
22
23
      </div>
  </template>
  <script>
      export default {
dce5a3ea   Aresn   update Modal
24
25
          data () {
              return {
ecaf8d51   梁灏   Date add transfer...
26
                  m1: [],
595cfa72   梁灏   fixed #1187 #844 ...
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
                  showModal: false,
                  showModal2: false,
                  options: [
                      {
                          value: 'beijing',
                          label: '北京市'
                      },
                      {
                          value: 'shanghai',
                          label: '上海市'
                      },
                      {
                          value: 'shenzhen',
                          label: '深圳市'
                      },
                      {
                          value: 'hangzhou',
                          label: '杭州市'
                      },
7c41ecb3   梁灏   fixed #1099
46
                      {
595cfa72   梁灏   fixed #1187 #844 ...
47
48
                          value: 'nanjing',
                          label: '南京市'
7c41ecb3   梁灏   fixed #1099
49
50
                      },
                      {
595cfa72   梁灏   fixed #1187 #844 ...
51
52
                          value: 'chongqing',
                          label: '重庆市'
7c41ecb3   梁灏   fixed #1099
53
54
                      }
                  ]
dce5a3ea   Aresn   update Modal
55
56
              }
          },
6259471f   梁灏   support Modal
57
          methods: {
dce5a3ea   Aresn   update Modal
58
59
60
61
62
63
              ok () {
                  this.$Message.info('点击了确定');
              },
              cancel () {
                  this.$Message.info('点击了取消');
              },
7c41ecb3   梁灏   fixed #1099
64
65
66
67
68
69
70
71
72
73
74
75
76
              remoteMethod(query) {
                  this.loading = true;
                  setTimeout(() => {
                      this.loading = false;
                      this.options = this.cityList;
                  }, 200);
              },
              resetForm() {
                  //加个计时器,就能解决这个定位问题了
                  // setTimeout(()=> {
                  this.$refs["formSelect"].clearSingleSelect();
                  this.options = [];
                  // }, 300)
6259471f   梁灏   support Modal
77
78
79
80
              }
          }
      }
  </script>