modal.vue
5.42 KB
1
2
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
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
65
66
67
68
69
70
71
72
73
74
75
76
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<template>
<div>
<Button type="primary" @click="modal1 = true">显示对话框</Button>
<Modal
v-model="modal1"
width="70"
title="普通的Modal对话框标题"
@on-ok="ok"
@on-cancel="cancel">
<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>
</Modal>
</div>
</template>
<script>
export default {
data () {
return {
formItem: {
input: '',
select: '',
radio: 'male',
checkbox: [],
switch: true,
date: '',
time: '',
slider: [20, 50],
textarea: ''
},
modal1: false,
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']
}
},
methods: {
ok () {
this.$Message.info('点击了确定');
},
cancel () {
this.$Message.info('点击了取消');
},
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 = [];
}
}
}
}
</script>