Blame view

examples/routers/modal.vue 5.42 KB
6259471f   梁灏   support Modal
1
2
  <template>
      <div>
dce5a3ea   Aresn   update Modal
3
4
5
          <Button type="primary" @click="modal1 = true">显示对话框</Button>
          <Modal
                  v-model="modal1"
f03c4e64   梁灏   Modal update widt...
6
                  width="70"
dce5a3ea   Aresn   update Modal
7
8
9
                  title="普通的Modal对话框标题"
                  @on-ok="ok"
                  @on-cancel="cancel">
f03c4e64   梁灏   Modal update widt...
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
              <div>
                  <Form :model="formItem" :label-width="80">
                      <Form-item label="输入框">
                          <Input v-model="formItem.input" placeholder="请输入"></Input>
                      </Form-item>
                      <Form-item label="选择器">
                          <Select v-model="formItem.select" placeholder="请选择">
                              <Option value="beijing">北京市</Option>
                              <Option value="shanghai">上海市</Option>
                              <Option value="shenzhen">深圳市</Option>
                          </Select>
                      </Form-item>
                      <Form-item label="日期控件">
                          <Row>
                              <Col span="11">
                              <Date-picker type="date" placeholder="选择日期" v-model="formItem.date"></Date-picker>
                              </Col>
                              <Col span="2" style="text-align: center">-</Col>
                              <Col span="11">
                              <Time-picker type="time" placeholder="选择时间" v-model="formItem.time"></Time-picker>
                              </Col>
                          </Row>
                      </Form-item>
                      <Form-item label="单选框">
                          <Radio-group v-model="formItem.radio">
                              <Radio label="male">男</Radio>
                              <Radio label="female">女</Radio>
                          </Radio-group>
                      </Form-item>
                      <Form-item label="多选框">
                          <Checkbox-group v-model="formItem.checkbox">
                              <Checkbox label="吃饭"></Checkbox>
                              <Checkbox label="睡觉"></Checkbox>
                              <Checkbox label="跑步"></Checkbox>
                              <Checkbox label="看电影"></Checkbox>
                          </Checkbox-group>
                      </Form-item>
                      <Form-item label="开关">
                          <Switch v-model="formItem.switch" size="large">
                              <span slot="open">开启</span>
                              <span slot="close">关闭</span>
                          </Switch>
                      </Form-item>
                      <Form-item label="滑块">
                          <Slider v-model="formItem.slider" range></Slider>
                      </Form-item>
                      <Form-item label="文本域">
                          <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                      </Form-item>
                      <Form-item>
                          <Button type="primary">提交</Button>
                          <Button type="ghost" style="margin-left: 8px">取消</Button>
                      </Form-item>
                  </Form>
              </div>
dce5a3ea   Aresn   update Modal
65
          </Modal>
6259471f   梁灏   support Modal
66
67
68
69
      </div>
  </template>
  <script>
      export default {
dce5a3ea   Aresn   update Modal
70
71
          data () {
              return {
f03c4e64   梁灏   Modal update widt...
72
73
74
75
76
77
78
79
80
81
82
                  formItem: {
                      input: '',
                      select: '',
                      radio: 'male',
                      checkbox: [],
                      switch: true,
                      date: '',
                      time: '',
                      slider: [20, 50],
                      textarea: ''
                  },
3ef24d5f   Aresn   $Modal support re...
83
                  modal1: false,
f03c4e64   梁灏   Modal update widt...
84
85
86
87
88
89
90
                  model13: '',
                  loading1: false,
                  options1: [],
                  model14: [],
                  loading2: false,
                  options2: [],
                  list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
dce5a3ea   Aresn   update Modal
91
92
              }
          },
6259471f   梁灏   support Modal
93
          methods: {
dce5a3ea   Aresn   update Modal
94
95
96
97
98
99
              ok () {
                  this.$Message.info('点击了确定');
              },
              cancel () {
                  this.$Message.info('点击了取消');
              },
f03c4e64   梁灏   Modal update widt...
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
              remoteMethod1 (query) {
                  if (query !== '') {
                      this.loading1 = true;
                      setTimeout(() => {
                          this.loading1 = false;
                          const list = this.list.map(item => {
                              return {
                                  value: item,
                                  label: item
                              };
                          });
                          this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
                      }, 200);
                  } else {
                      this.options1 = [];
                  }
6259471f   梁灏   support Modal
116
117
118
119
              }
          }
      }
  </script>