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

update animation:fade time

Browse source
This commit is contained in:
梁灏 2019-09-05 10:52:18 +08:00
parent da404a1d3e
commit 91806ae7f5
5 changed files with 109 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

85
examples/routers/tooltip.vue
View file

@ -1,28 +1,71 @@
<style scoped>
.top,.bottom{
text-align: center;
}
.center{
width: 300px;
margin: 10px auto;
overflow: hidden;
}
.center-left{
float: left;
}
.center-right{
float: right;
}
</style>
<template>
<div style="margin: 200px;">
<Tooltip always placement="top-end" :content="text" :delay="1000" theme="light">
<Button @click="disabled = true">延时1秒显示</Button>
</Tooltip>
<Tooltip always :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
<Button @click="handleChange">change</Button>
</Tooltip>
<Button @click="handleChange">change</Button>
<Poptip title="Title" padding="0" width="250" word-wrap content="我的文本超级，无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
<Button>Click</Button>
</Poptip>
<div>
<div class="top">
<Tooltip content="Top Left text" placement="top-start">
<Button>Top Left</Button>
</Tooltip>
<Tooltip content="Top Center text" placement="top">
<Button>Top Center</Button>
</Tooltip>
<Tooltip content="Top Right text" placement="top-end">
<Button>Top Right</Button>
</Tooltip>
</div>
<div class="center">
<div class="center-left">
<Tooltip content="Left Top text" placement="left-start">
<Button>Left Top</Button>
</Tooltip><br><br>
<Tooltip content="Left Center text" placement="left">
<Button>Left Center</Button>
</Tooltip><br><br>
<Tooltip content="Left Bottom text" placement="left-end">
<Button>Left Bottom</Button>
</Tooltip>
</div>
<div class="center-right">
<Tooltip content="Right Top text" placement="right-start">
<Button>Right Top</Button>
</Tooltip><br><br>
<Tooltip content="Right Center text" placement="right">
<Button>Right Center</Button>
</Tooltip><br><br>
<Tooltip content="Right Bottom text" placement="right-end">
<Button>Right Bottom</Button>
</Tooltip>
</div>
</div>
<div class="bottom">
<Tooltip content="Bottom Left text" placement="bottom-start">
<Button>Bottom Left</Button>
</Tooltip>
<Tooltip content="Bottom Center text" placement="bottom">
<Button>Bottom Center</Button>
</Tooltip>
<Tooltip content="Bottom Right text" placement="bottom-end">
<Button>Bottom Right</Button>
</Tooltip>
</div>
</div>
</template>
<script>
export default {
data () {
return {
text: 'Tooltip 文字提示'
};
},
methods: {
handleChange () {
this.text = '提示'
}
}
}
</script>