modal.vue
4.75 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<template>
<div>
<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;">
<!--<Date-picker transfer type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--<i-select transfer multiple v-model="m1">-->
<!--<i-option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</i-option>-->
<!--</i-select>-->
<Cascader transfer :data="data4" :load-data="loadData"></Cascader>
</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>
</Modal>
<Button @click="showModelFunc">弹出</Button>
</div>
</template>
<script>
export default {
data () {
return {
m1: [],
showModal: false,
showModal2: false,
options: [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重庆市'
}
],
data4: [
{
value: 'beijing',
label: '北京',
children: [],
loading: false
},
{
value: 'hangzhou',
label: '杭州',
children: [],
loading:false
}
]
}
},
methods: {
ok () {
this.$Message.info('点击了确定');
},
cancel () {
this.$Message.info('点击了取消');
},
remoteMethod(query) {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.cityList;
}, 200);
},
resetForm() {
//加个计时器，就能解决这个定位问题了
// setTimeout(()=> {
this.$refs["formSelect"].clearSingleSelect();
this.options = [];
// }, 300)
},
loadData (item, callback) {
item.loading = true;
setTimeout(() => {
if (item.value === 'beijing') {
item.children = [
{
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
];
} else if (item.value === 'hangzhou') {
item.children = [
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
];
}
item.loading = false;
callback();
}, 1000);
},
showModelFunc () {
this.$Modal.success({
title: 'haha',
content: 'lsisdfsdfsdfs',
closable: false
});
}
}
}
</script>