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

add Tooltip component

Browse source 
add Tooltip component
This commit is contained in:
梁灏 2016-10-26 10:03:16 +08:00
parent 20559d34be
commit dce3e7536d
11 changed files with 403 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

92
local/routers/notice.vue
View file

@ -1,69 +1,63 @@
<template>
<Alert type="success" show-icon closable>
成功提示文案
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
</Alert>
<Button @click="open">open</Button>
<Button @click="close">close key = key111</Button>
<Button @click="destroy">destroy</Button>
<Tooltip content="Top Left 提示文字" placement="top" disabled>
<Button>上面的左面</Button>
<div slot="content">
<p>附近的是否会可接受的</p>
<p>飞机史蒂夫</p>
</div>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="bottom">
仅仅是一段文字而已，this的回复看就是风刀霜剑
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="left" delay="1000">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="right">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="top-start">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="top-end">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="bottom-start">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="bottom-end">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="left-start">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="left-end">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="right-start">
<Button>上面的左面</Button>
</Tooltip>
<Tooltip content="Top Left 提示文字" placement="right-end">
<Button>上面的左面</Button>
</Tooltip>
</template>
<script>
import { Notice, Button, Message, Alert } from 'iview';
import { Tooltip, Button } from 'iview';
export default {
components: { Notice, Button, Alert },
components: { Tooltip, Button },
props: {
},
data () {
return {
key: 'key111'
}
},
computed: {
},
methods: {
open () {
const title = '这是通知的标题';
const desc = '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述';
Notice.open({
title: title,
desc: desc,
});
Notice.info({
title: title,
desc: desc,
});
Notice.success({
title: title,
desc: desc,
key: this.key
});
Notice.warning({
title: title,
desc: desc,
});
Notice.error({
title: title,
desc: desc,
});
Message.info('放假海口市', 0);
},
close () {
Notice.close(this.key);
},
destroy () {
Notice.destroy();
}
},
ready () {
// this.open();
Notice.config({
top: 1,
duration: 0
})
}
}
</script>