drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixes #4453 #4480 #4462

Browse source
This commit is contained in:
梁灏 2018-09-10 16:10:35 +08:00
parent 16c2b8d26e
commit 7bafe9d94c
15 changed files with 230 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

146
examples/routers/modal.vue
View file

@ -1,22 +1,150 @@
<template>
<div>
<Button @click="modal12 = true">Open the first modal</Button>
<Button @click="modal13 = true">Open the second modal</Button>
<Modal v-model="modal12" draggable scrollable title="Modal 1">
<div>This is the first modal</div>
</Modal>
<Modal v-model="modal13" draggable scrollable title="Modal 2">
<div>This is the second modal</div>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<Button @click="openMessage">Message</Button>
<Select v-model="model1" style="width:200px" :transfer="false">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px" :transfer="true">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Dropdown transfer>
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<DatePicker type="date" placeholder="Select date" style="width: 200px" transfer></DatePicker>
<Cascader :data="data" v-model="value1" transfer></Cascader>
<Tooltip content="Here is the prompt text" transfer>
A balloon appears when the mouse passes over this text
</Tooltip>
<Poptip trigger="hover" title="Title" content="content" transfer>
<Button>Hover</Button>
</Poptip>
<Button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</Button>
</Modal>
<Select v-model="model1" style="width:200px" :transfer="false">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Select v-model="model1" style="width:200px" :transfer="true">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
</template>
<script>
export default {
data () {
return {
modal12: false,
modal13: false
modal1: false,
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: '',
value1: [],
data: [{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}, {
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'nanjing',
label: '南京',
children: [
{
value: 'fuzimiao',
label: '夫子庙',
}
]
},
{
value: 'suzhou',
label: '苏州',
children: [
{
value: 'zhuozhengyuan',
label: '拙政园',
},
{
value: 'shizilin',
label: '狮子林',
}
]
}
],
}]
}
},
methods: {
ok () {
// this.$Message.info('Clicked ok');
},
cancel () {
// this.$Message.info('Clicked cancel');
},
openMessage () {
this.$Message.info({
content: 'hello world',
duration: 2
});
},
handleSpinShow () {
this.$Spin.show();
},
}
}
</script>