Merge remote-tracking branch 'upstream/2.0' into popper
This commit is contained in:
commit
586bf3fc1b
16 changed files with 191 additions and 100 deletions
|
@ -1,46 +1,69 @@
|
|||
<template>
|
||||
<Menu active-name="1-2" :open-names="['1']" theme="dark">
|
||||
<Submenu name="1">
|
||||
<template slot="title">
|
||||
<Icon type="ios-analytics"></Icon>
|
||||
Navigation One
|
||||
</template>
|
||||
<MenuGroup title="Item 1">
|
||||
<MenuItem name="1-1">Option 1</MenuItem>
|
||||
<MenuItem name="1-2">Option 2</MenuItem>
|
||||
</MenuGroup>
|
||||
<MenuGroup title="Item 2">
|
||||
<MenuItem name="1-3">Option 3</MenuItem>
|
||||
<MenuItem name="1-4">Option 4</MenuItem>
|
||||
</MenuGroup>
|
||||
</Submenu>
|
||||
<Submenu name="2">
|
||||
<template slot="title">
|
||||
<Icon type="ios-filing"></Icon>
|
||||
Navigation Two
|
||||
</template>
|
||||
<MenuItem name="2-1">Option 5</MenuItem>
|
||||
<MenuItem name="2-2">Option 6</MenuItem>
|
||||
<Submenu name="3">
|
||||
<template slot="title">Submenu</template>
|
||||
<MenuItem name="3-1">Option 7</MenuItem>
|
||||
<MenuItem name="3-2">Option 8</MenuItem>
|
||||
<div>
|
||||
<Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
|
||||
<Submenu name="1">
|
||||
<template slot="title">
|
||||
<Icon type="ios-analytics"></Icon>
|
||||
Navigation One
|
||||
</template>
|
||||
<MenuGroup title="Item 1">
|
||||
<MenuItem name="1-1">Option 1</MenuItem>
|
||||
<MenuItem name="1-2">Option 2</MenuItem>
|
||||
</MenuGroup>
|
||||
<MenuGroup title="Item 2">
|
||||
<MenuItem name="1-3">Option 3</MenuItem>
|
||||
<MenuItem name="1-4">Option 4</MenuItem>
|
||||
</MenuGroup>
|
||||
</Submenu>
|
||||
</Submenu>
|
||||
<Submenu name="4">
|
||||
<template slot="title">
|
||||
<Icon type="ios-gear"></Icon>
|
||||
Navigation Three
|
||||
</template>
|
||||
<MenuItem name="4-1">Option 9</MenuItem>
|
||||
<MenuItem name="4-2">Option 10</MenuItem>
|
||||
<MenuItem name="4-3">Option 11</MenuItem>
|
||||
<MenuItem name="4-4">Option 12</MenuItem>
|
||||
</Submenu>
|
||||
</Menu>
|
||||
<Submenu name="2">
|
||||
<template slot="title">
|
||||
<Icon type="ios-filing"></Icon>
|
||||
Navigation Two
|
||||
</template>
|
||||
<MenuItem name="2-1">Option 5</MenuItem>
|
||||
<MenuItem name="2-2">Option 6</MenuItem>
|
||||
<Submenu name="3">
|
||||
<template slot="title">Submenu</template>
|
||||
<MenuItem name="3-1">Option 7</MenuItem>
|
||||
<MenuItem name="3-2">Option 8</MenuItem>
|
||||
</Submenu>
|
||||
<Submenu name="4">
|
||||
<template slot="title">Submenu</template>
|
||||
<MenuItem name="4-1">Option 7</MenuItem>
|
||||
<MenuItem name="4-2">Option 8</MenuItem>
|
||||
</Submenu>
|
||||
</Submenu>
|
||||
<Submenu name="5">
|
||||
<template slot="title">
|
||||
<Icon type="ios-gear"></Icon>
|
||||
Navigation Three
|
||||
</template>
|
||||
<MenuItem name="5-1">Option 9</MenuItem>
|
||||
<MenuItem name="5-2">Option 10</MenuItem>
|
||||
<MenuItem name="5-3">Option 11</MenuItem>
|
||||
<MenuItem name="5-4">Option 12</MenuItem>
|
||||
</Submenu>
|
||||
</Menu>
|
||||
<Button @click="setOpenNames">修改展开数组</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
openNames: ['1']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOpenChange (name) {
|
||||
console.log(name)
|
||||
},
|
||||
setOpenNames () {
|
||||
this.openNames = ['2', '3'];
|
||||
this.$nextTick(() => {
|
||||
this.$refs.menu.updateOpened();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,21 +1,28 @@
|
|||
<template>
|
||||
<div style="margin: 200px;">
|
||||
<Poptip title="提示标题" transfer>
|
||||
<div slot="content" style="padding: 50px">
|
||||
<Button>click me</Button>
|
||||
</div>
|
||||
<Button>click 激活</Button>
|
||||
</Poptip>
|
||||
<div style="margin: 200px">
|
||||
<Tabs value="name1">
|
||||
<TabPane label="标签一" name="name1">
|
||||
<div style="overflow: auto;width: 200px;height:300px">
|
||||
<Poptip title="提示标题" content="标签一的内容" placement="right" transfer :options="options">
|
||||
<Button id="aaa">右边</Button>
|
||||
</Poptip>
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane label="标签二" name="name2">标签二的内容</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
ok () {
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
cancel () {
|
||||
this.$Message.info('点击了取消');
|
||||
data () {
|
||||
return {
|
||||
options: {
|
||||
modifiers: {
|
||||
preventOverflow: {
|
||||
boundariesElement: 'body',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue