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

Update dropdown.vue

Browse source
This commit is contained in:
梁灏 2019-10-22 14:57:16 +08:00
parent 57426551f4
commit 6b5fb29f29
1 changed files with 113 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

149
examples/routers/dropdown.vue
View file

@ -1,52 +1,129 @@
<template>
<div>
<Dropdown trigger="hover" @on-click="handleClick">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem name="1">驴打滚</DropdownItem>
<DropdownItem selected name="2">炸酱面</DropdownItem>
<DropdownItem disabled name="3">豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem selected>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="contextMenu">
<a href="javascript:void(0)">
下拉菜单
<Icon type="ios-arrow-down"></Icon>
</a>
<DatePicker :capture="false" size="small" v-model="updatedate" type="datetimerange" placement="bottom-end" placeholder="请输入变更时间" style="width: 150px"></DatePicker>
<Dropdown trigger="click" transfer @on-click="aaaa(111)">
<Button size="small" type="primary">
更多
<Icon type="md-arrow-dropdown" />
</Button>
<DropdownMenu slot="list">
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem disabled>豆汁儿</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem divided>北京烤鸭</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
<DropdownItem>驴打滚</DropdownItem>
<DropdownItem>炸酱面</DropdownItem>
<DropdownItem>豆汁儿</DropdownItem>
<DropdownItem>冰糖葫芦</DropdownItem>
<DropdownItem>北京烤鸭</DropdownItem>
</DropdownMenu>
</Dropdown>
<Cascader :data="data" v-model="value1" transfer style="width: 200px"></Cascader>
<Select v-model="model1" multiple transfer style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
<Poptip trigger="click" transfer title="Title" content="content">
<Button>Hover</Button>
</Poptip>
<ColorPicker v-model="color1" transfer />
</div>
</template>
<script>
export default {
methods: {
handleClick (n) {
console.log(n);
data () {
return {
updatedate:null,
color1: '#19be6b',
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: '狮子林',
}
]
}
],
}],
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: []
}
},
methods: {
aaaa(){
this.$Message.info("aaaaa")
}
},
mounted () {
}
}
</script>