add Poptip component
add Poptip component
This commit is contained in:
parent
4dfacfca66
commit
9699c270dc
14 changed files with 420 additions and 120 deletions
|
@ -9,31 +9,31 @@
|
|||
</style>
|
||||
<template>
|
||||
<div class="tooltip_out">
|
||||
123
|
||||
</div>
|
||||
<div class="tooltip_out">
|
||||
<Tooltip content="Tooltip 文字提示" placement="top">
|
||||
<strong><a href="#">Link</a></strong>
|
||||
<!--<Poptip title="标题" content="内容">-->
|
||||
<!--<Button>click 触发</Button>-->
|
||||
<!--</Poptip>-->
|
||||
<!--<Poptip title="标题" content="内容" trigger="hover">-->
|
||||
<!--<Button>hover 触发</Button>-->
|
||||
<!--</Poptip>-->
|
||||
<Poptip title="确定删除这条信息吗?" content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel" ok-text="yes" cancel-text="no" width="200">
|
||||
<a>Delete</a>
|
||||
</Poptip>
|
||||
<Poptip title="标题" content="内容" trigger="focus">
|
||||
<input type="text">
|
||||
</Poptip>
|
||||
<!--<Poptip title="标题" content="内容" trigger="focus">-->
|
||||
<!--<Button>focus 触发</Button>-->
|
||||
<!--</Poptip>-->
|
||||
<Tooltip content="这里是提示文字">
|
||||
当鼠标经过这段文字时,会显示一个气泡框
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Row>
|
||||
<i-col span="12">
|
||||
<Tooltip content="Top Left 提示文字" placement="top-start">
|
||||
<Button>上面的左面</Button>
|
||||
</Tooltip>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<Tooltip content="Top Left 提示文字" placement="top-start">
|
||||
<Button>上面的左面</Button>
|
||||
</Tooltip>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
import { Tooltip, Button, Row, iCol } from 'iview';
|
||||
import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
|
||||
|
||||
export default {
|
||||
components: { Tooltip, Button, Row, iCol },
|
||||
components: { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message },
|
||||
props: {
|
||||
|
||||
},
|
||||
|
@ -46,7 +46,12 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
|
||||
ok () {
|
||||
Message.info('ok');
|
||||
},
|
||||
cancel () {
|
||||
Message.info('cancel');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue